前端之js易混淆（二）

最新推荐文章于 2025-05-06 16:08:35 发布

原创最新推荐文章于 2025-05-06 16:08:35 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

前端之js 专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了DOM操作中的offset与scroll特性，解析了offsetParent、offsetWidth、offsetTop等概念，并对比了scrollWidth与scrollTop的区别。同时，文章还探讨了jQuery中的attr()与prop()方法的使用场景，以及$.extend、foreach、map、filter等功能的不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

offset与scroll

1.offset

1.1 offsetParent相对于最近的且具有定位的元素，如果父元素是相对定位，那么子元素的offsetParent的offsetParent是父元素，否则是body;
1.2 offsetWidth是包括width+padding*2+border*2,offsetWidth是元素渲染到页面后的实际宽度尺寸，同理，offsetHeight就是元素渲染到页面后的实际高度尺寸;
1.3 offsetTop,offsetLeft元素与它的offsetParent的上边界与左边界的距离；

2.scroll

2.1 scrollWidth 滚动区域实际宽度，scrollHeight 同理
2.2 scrollTop 滚动过上面的距离，scrollLeft 滚动过左边的距离

jQuery的attr()与prop()

都是用于获取与设置属性的，但它们又各有不同。

attr()一般是用于设置默认值，prop()一般是用于设置属性值，即对于像“diabled”，"checked"，"selected"这样的属性来说，attr()只是存储它们的初始值，而prop()存储它们实时状态的值。

处理HTML元素本身就带有的属性时，一般使用prop()

处理HTML元素我们自定义的属性时，一般使用attr()

2. $.extend与$ .fn.extend

$.extend它是为jQuery类添加类方法，可以理解为添加静态方法
$.fn是指jQuery的命名空间，fn上的成员(方法function及属性property)，会对jQuery实例每一个有效。

3.foreach,map,filter的区别

foreach就是循环遍历，相当于for(var i=0;i<XX.length;i++){console.log(i)};foreach中支持三个回调函数，分别是:value, index, array
[1,2,3,4].forEach(console.log); 
  //1 0 [1, 2, 3, 4]
    2 1 [1, 2, 3, 4]
    3 4 [1, 2, 3, 4]
    4 3 [1, 2, 3, 4]
map映射，回调函数为item, 注意回调函数中必须return  否则会被映射会undefined
filter过滤后返回新数组，与map类似

正则表达式中 * + ?
* 匹配0或多
+匹配1或多
？匹配0或1
注意：两者任选其一用| ，而不是||！！！