jq选择器

什么是选择器 

就是选中到我们的dom节点  或者说 选中我们页面中的元素的工具 不管是你的css选择器也好 还是jq选择器也好 都是为了选中我们页面中的元素

 标签选择器:$("p")选中所有的p标签

 id选择器:  $("#text")选中id是test的标签

 类选择器:   $(".test")选中类名是test的标签

 交集选择器: $("p.test")选中的就是类名为test的p标签

 分组选择器: $("h1,h2,h3")选中的是我们所有的h1,h2,h3标签

 后代选择器: $(".test p")选中的是我们类名为test的内容中的p标签

 通配符选择器:$("*")选中我们页面上所有标签

 儿子选择器: $(".test>p")选中的是我们类名为test的儿子p标签

 兄弟选择器: $(".test+h1")选中的是我们类名为test的后面一个兄弟h1 如果后面的兄弟不是h1 那么他就不起作用

N兄弟选择器:$(".test~p")选中的是我们类名为test的后面的所有的p标签

子元素过滤选择器

   $(" :root") 选中根标签 也就是html标签

   $(" :nth-child(2)") 选中每家的第二个孩子 不论是男孩还是女孩

   $(" :first-child")  选中每家的第一个孩子 不论男孩还是女孩 和:nth-child(1)一样

   $(" :last-child") 选中每一家的最后一个孩子

  $("  :nth-last-child(2)") 这表示选中倒数第二个孩子

 $("   :only-child") 选中每家的独生子女

 $("  :nth-child(2n)") 和 $(":nth-child(even)")  一样  选中每家排行偶数的孩子 从1开始算

  $("  :nth-child(2n+1)") 和 $(":nth-child(odd)")  一样  选中每家排行奇数的孩子 从1开始算

$(":nth-of-type(2)")  针对的是同类型的标签 选中每家第二个儿子

   $(" :last-of-type")  选中某一个类型标签的最后一个

    $(":nth-last-of-type(2)") 选中的就是某一类标签的倒数第二个

   $(" :only-of-type") 选中每家唯一的儿子

   $(" :nth-of-type(2n-1)") 和$(":nth-of-type(odd") )是一样的  表示选中每家排行为奇数的儿子或者女儿 索引从1开始

   $(" :nth-of-type(2n)") 和$(":nth-of-type(even)") 是一样的  表示选中每家排行为偶数的儿子或者女儿

基础选择过滤器

  $(" li:eq(0)") 表示选中第一个li  eq里面加的是 索引 默认是0开始

    $("li:first")表示选中第一个li

  $("  li:last") 表示选中最后一个li

    $("li:even") 表示选中偶数个的li  注意:我们这里起使坐标是0

  $("  li:odd") 表示选中奇数个的li

    $("li:gt(2)")表示索引大于2的

   $(" li:lt(2)")表示索引小于2的

   $(" :header ")表示选中所有的标题标题标签

   $(" li:not(:eq(1)) ")选中除了第二个li(索引为1的li)之外的所有li

属性选择器

$(" h1[title]") 选中具有title这个属性的h1标签

$(" h1[title=world]")选中title属性值为world的标签

$(" h1[title!=world]") 选中title属性值不为world的标签

$(" h1[title^=hello]") 选中title属性值以hello开头的

$(" h1[title$=hello]") 选中title属性值以jq结尾的

$("h1[title*=wangcai]")选中title属性值有wangh1[title][id]这表示选中既有title属性的 又有id属性的

内容过滤选择器

   $("li:contains(Jquery)")选中内容包含Jquery的li

   $(" li:has(a)") 这表示 内容有a标签的

   $(" li:empty") 这是选中内容为空的li标签

   $(" li:not(:empty)") 这是选中内容不为空的li标签

   $(" li:parent") 这是匹配子元素或者文本元素的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值