专栏首页老雷PHP全栈开发jQuery基础教程之选择器

jQuery基础教程之选择器

jQuery基础教程之选择器

一、元素选择

1.通配选择符 * Q

    $("*")

2.标签选择符 div

    $("div")

3.ID选择符 #id

<div id="eid"></div>

    $("#eid")

4.class选择符 .class

<div class="item"></div>

  $(".item")

二、关系选择符

    <div class="list">
      <div class="item a">a</div>
      <div class="item">b</div>
      <div class="item">
        <div>c</div>
        <div class="child-list">
          <div class="item">d</div>
          <div class="item">e</div>
          <div class="item">f</div>
        </div>
      </div>
    </div>

包含选择符(E F) 所有子集

$(".list .item") 匹配6个

子选择符(E>F) 只有一级子集

$(".list>.item") 匹配3个

相邻选择符(E+F) 只有隔壁的同级 令居

$(".a+.item") 结果为b

兄弟选择符(E~F) 同级都是

$(".a~.item") 结果为b、c

三、属性选择符

E[att] 匹配包含给定属性的元素

    <div title="test2"></div>
    $("[title]")
    $("div[title]")

E[att="val"] 匹配给定的属性是某个特定值的元素

    <div title="test"></div>
    $("div[title='test']")

四、伪类选择符

:even 匹配所有索引值为偶数的元素

      $("tr:even")

:odd 匹配所有索引值为奇数的元素

      $("tr:odd")

:eq(index) 匹配一个给定索引值的元素

      $("tr:eq(1)")

:gt(index) 匹配所有大于给定索引值的元素

      $("tr:gt(0)")

:lt(index) 匹配所有小于给定索引值的元素

      $("tr:lt(2)")

:first 获取第一个元素

      $('li:first');

:last() 获取最后个元素

      $('li:last')

:first-child 匹配所给选择器( :之前的选择器)的第一个子元素

      $("ul li:first-child")

:last-child 匹配最后一个子元素

      $("ul li:last-child")

:nth-child 匹配其父元素下的第N个子或奇偶元素,不是索引值

$("ul li:nth-child(2)")

$("ul li:nth-child(2n)") 元素的第几个

$("ul li:nth-child(2n+1)") 元素的第几个

:checked

匹配所有选中的被选中元素 radio checkbox

prop

本文分享自微信公众号 - 老雷PHP全栈开发(L362606856),作者:雷日锦

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 老雷PHP全栈开发教程之常用html标签

    老雷PHP全栈开发
  • 老雷PHP全栈开发教程之Vue基础教程

    Vue是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,Vue通过数据驱动构建ui界面。

    老雷PHP全栈开发
  • css的三种写法

    老雷PHP全栈开发
  • Vue中$refs的理解

    $refs是一个对象,持有注册过ref attribute的所有DOM元素和组件实例。

    WindrunnerMax
  • 2045: 双亲数

    2045: 双亲数 Time Limit: 10 Sec  Memory Limit: 259 MB Submit: 659  Solved: 302 [Sub...

    HansBug
  • 谈谈出入React框架踩过的坑

    1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop value ...

    外婆的彭湖湾
  • 老雷PHP全栈开发教程之Vue基础教程

    Vue是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,Vue通过数据驱动构建ui界面。

    老雷PHP全栈开发
  • 前端-part8-jQurey操作样式一:获取标签属性+修改标签属性

    少年包青菜
  • 解决bootstrap row span设置border换行的问题

    版权声明:本文为[他叫自己Mr.张]的原创文章,转载请...

    他叫自己MR.张
  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫

扫码关注云+社区

领取腾讯云代金券