jQuery子元素过滤选择器实例代码

 时间:2024-11-03 12:49:28

1、新建jQuery_ziyuansuguolvxuanzeqi.html页面,作为jQuery子元素过滤选择器实例代码讲解页面

jQuery子元素过滤选择器实例代码

2、添加如下Html代码

jQuery子元素过滤选择器实例代码

3、预览效果如下

jQuery子元素过滤选择器实例代码

4、给每个按钮添加jQuery代码

jQuery子元素过滤选择器实例代码

5、第一个按钮$("table tr:nth-child(2)") 选择每个table的第二行注意这里和eq(2)的区别首先,nth-child是从1开始计数的的,2就是选择第二行,而且是满足条件的所有元素eq是从0计数的,2就是第三行,而且eq只能匹配一个对象

jQuery子元素过滤选择器实例代码

6、第二个按钮$("table tr:first-child") 选择每个table的第一行

jQuery子元素过滤选择器实例代码

7、第三个按钮$("table tr:last-child") 选择每个table的最后一行

jQuery子元素过滤选择器实例代码

8、第四个按钮$("table tr:only-child")选中只有一行的table的那一行

jQuery子元素过滤选择器实例代码

9、注意子元素过滤选择器,匹配的是所有符合条件的元素,而基本元素选择器则只匹配一个元素

  • jQuery基本过滤选择器实例
  • jQuery属性过滤选择器实例详解
  • jQuery内容过滤选择器实例讲解
  • jquery内容过滤选择器
  • jQuery选择器总结
  • 热门搜索
    屹怎么读 鸭肉怎么做好吃 腋下臭怎么处理 蛋黄南瓜的做法 鸡煲蟹的做法 披萨饼皮的做法 糖醋莲藕的做法 太平洋保险怎么样 乌龟的做法 怎么判断是不是阑尾炎