jQuery选择器(重点掌握)

4 jQuery选择器

4.1 基本选择器

1)、元素名(标签名)选择器

$(“div”) – 匹配所有div元素

$(“span”) – 匹配所有span元素

2)、类选择器

3)、ID选择器

4.2 层级选择器

1)、后代选择器

$(“div span”) – 匹配所有div内部的所有span元素

$("#d1 span") – 匹配id值为d1元素内部的所有span元素

2)、相邻兄弟选择器

如果两个元素具有相同的父元素, 并且是紧挨着, 这两个元素就是相邻兄弟元素, 可以通过前面的元素匹配后面的元素

$("#two+span") – 匹配id为two的元素后面紧邻span兄弟元素

等价于:

相类似的:

3)、$("#two~div")

$("#two~span")

– 匹配id为two的元素后面所有的span兄弟元素

等价于:

相类似的:

作用等价于nextAll+prevAll的:

4.3 基本过滤选择器

1)、:first | :last

$(“div:first”) – 匹配所有div中第一个div元素

等价于:

$(“div:last”) – 匹配所有div中最后一个div元素

等价于:

2)、:eq(n)

$(“div:eq(n)”) – 匹配所有div中第n+1个div元素

5 综合案例

5.1 全选或全不选

练习1：点击全选设置 员工所在的行全选或者全不选

练习2：点击按钮,计算所有被选中商品的总金额

5.2 创建表格元素

练习1：创建单行单列的表格

练习2_1：创建单行6列的表格

练习2_2：创建5行6列的表格

练习3：创建指定行和列的表格

5.3 仿QQ好友列表