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:创建指定行和列的表格