jQuery学习教程，写更少的代码,做更多的事情（六），一文轻松搞定

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：docs.qq.com/doc/DSmRnRG… }

5.outerHeight()和outerWidth()方法

---

例如：

1.outerHeight()和outerWidth()方法，包括了padding,margin,border，注意上下要双倍。

2.这里默认为false，是不添加margin的，想要计算margin，就要添加true。

3.添加true，来加上margin的计算

div{ width: 100px; height: 100px; padding: 100px; margin:30px; border: 20px solid yellow; }

6.position()方法

---

position()方法和offset()方法的坐标不一样！

例如：

1.position()方法所指定的元素是和父级元素所确定的坐标。

2.这里和offset()方法不一样!offset是和左上角最顶端定位的。

*{ margin:0; padding: 0; } div{ padding: 15px; background-color: antiquewhite; position: absolute; left:100px; top: 100px; } p{ margin-left: 10px; background-color: aquamarine; }

7.srollLeft()和scrollTop()方法

---

例如：

1.这两个方法一般和overflow属性配合使用。

2.scrollTop方法改变开始的垂直坐标位置。

3.scrollLeft方法改变开始的水平坐标位置。

.d{ width: 200px; height: 100px; overflow: auto; margin: 5px; padding: 5px; position:relative; border: 3px solid #666666; background-color: #cccccc; } p{ width: 1000px; height: 1000px; margin: 10px; padding: 5px; border: 2px solid #666666; }

2.jQuery 过滤

========================================================================

1.eq(index)方法

---

index是索引。

例如：

1.eq方法通过index来找到相应的元素！

2. 这里注意index索引从0开始

3.eq方法的索引也可以是负数，也就是倒着来决定。

• li 1
• li 2
• li 3
• li 4

2.filter()方法

---

1.filter选择器，:odd和:even，注意的是也是从0开始的。

2.filter选择器，通过是用class名来选择。

3.filter方法接受一个函数，返回一个只有一个string标签的元素，来执行css事件。

例如：

div{ width: 50px; height: 50px; background-color: aquamarine; float: left; margin-left: 10px; }

• li 1
• li 2
• li 3
• li 4

• s1

• s2

  s3

3.first()和last()方法

---

顾名思义，就是获取匹配元素的第一个或者最后一个元素。

例如：

• li 1
• li 2
• li 3

4.has()方法

---

匹配是否含有has()方法里内容，包括子代元素，是否匹配。

例如：

• li 1
• li 2
• li 3

• li 1
• li 2
• li 3

5.is()方法

---

判断是否是is中的内容，是，返回true；否，返回false。

例如：

注意点击strong和span是无效的，因为target指向li标签。

• listitem 1
• list item 2
• list item3

6.not()方法

---

not，就是不是，的意思。读代码的时候就翻译成不是就可以。

• listitem 1
• list item 2
• list item3

7.map()方法

---

map()方法是使用函数来运行的，它会产生一个新的jQuery对象。

1.下面是使用map打印出div的id名。

2.使用map来给数组中的每一个数值加4

例如：

8.slice()方法

---

slice()方法根据下表范围，过滤匹配元素，并且生成一个新的jQuey对象。

参数有两个：

start：起始下标 0，从0开始。

end：终止下标 包含首，不包含尾。

1.注意包含首，不包含尾。

2.如果只有一个参数，就一直执行到最后。

div{ margin: 5px; }

你好塞雷啊

你好塞雷啊

你好塞雷啊

你好塞雷啊

3.jQuery遍历之最常用的遍历方法

================================================================================

1.add方法

---

就是在集合元素中添加相应的样式。

1.给div和p标签添加样式。这里注意一下格式，div和p都是标签元素，并且没有关系。

2.这里的add就是加，和的意思

这里可以利用顺序来单独给div设置事件。

例如：

div,p{ margin: 5px; width: 50px; height: 50px; float: left; }

你好塞雷啊

你好塞雷啊

你好塞雷啊

你好塞雷啊