jQuery选择器(重点掌握)

4 jQuery选择器

4.1 基本选择器

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

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

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

2)、类选择器

jQuery选择器(重点掌握)

3)、ID选择器

jQuery选择器(重点掌握)

4.2 层级选择器

1)、后代选择器

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

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

2)、相邻兄弟选择器

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

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

等价于:
jQuery选择器(重点掌握)

相类似的:

jQuery选择器(重点掌握)

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

$("#two~span")

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

等价于:
jQuery选择器(重点掌握)

相类似的:
jQuery选择器(重点掌握)

作用等价于nextAll+prevAll的:
jQuery选择器(重点掌握)

4.3 基本过滤选择器

1)、:first | :last

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

等价于:

jQuery选择器(重点掌握)

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

等价于:
jQuery选择器(重点掌握)

2)、:eq(n)

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

5 综合案例

5.1 全选或全不选

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

jQuery选择器(重点掌握)

练习2:点击按钮,计算所有被选中商品的总金额
jQuery选择器(重点掌握)

5.2 创建表格元素

练习1:创建单行单列的表格
jQuery选择器(重点掌握)

练习2_1:创建单行6列的表格
jQuery选择器(重点掌握)

练习2_2:创建5行6列的表格
jQuery选择器(重点掌握)

练习3:创建指定行和列的表格
jQuery选择器(重点掌握)

5.3 仿QQ好友列表

jQuery选择器(重点掌握)