JavaScript 学习-43.jQuery 选择器

Posted 上海-悠悠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 学习-43.jQuery 选择器相关的知识,希望对你有一定的参考价值。

前言

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)html 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

jQuery 选择器

jQuery 中所有选择器都以美元符号开头:$()
常用的一些选择器总结

语法描述
$(this)选取当前 HTML 元素
$(“*”)选取所有元素
$(“p”)匹配 <p> 标签元素
$(“#kw”)匹配属性 id="kw" 的元素
$(“.info”)选取 class 属性为 info 的元素
$(“p.intro”)选取 class 为 intro 的 <p>元素
$(“p:first”)选取第一个<p> 元素
$(“ul li:first”)选取第一个 <ul> 元素的第一个 <li> 元素
$(“ul li:last”)选取每个 <ul> 元素的最后一个 <li> 元素
$(“[href]”)选取带有 href 属性的元素
$(“a[target=‘_blank’]”)选取所有 target 属性值等于 “_blank” 的 <a> 元素
$(“a[target!=‘_blank’]”)选取所有 target 属性值不等于 “_blank” 的 <a> 元素
$(“:button”)选取所有 type="button"<input> 元素 和 <button> 元素
$(“tr:even”)选取偶数位置的 <tr> 元素
$(“tr:odd”)选取奇数位置的 <tr> 元素
$(‘[name^=“value”]’)匹配 name 以 value 开头的元素
( ′ [ n a m e ('[name ([name=“end”]')匹配 name 以 end 结尾的元素
$(‘[class*=“text”]’)匹配class属性包含text的元素
$(‘#demo>p’)子代选择器,通过父元素找子元素
$(‘#demo p’)后代选择器,通过父元素找子孙元素
$(‘#p1+div’)兄弟相邻选择器,通过定位当前元素,找到同一层级的下一个兄弟元素
$(‘#p1~div’)同辈选择器,,通过定位当前元素,找到同一层级的该元素后面的全部兄弟元素

基础选择器

jQuery 查找元素语法,主要是基于css 选择器

  • 根据标签匹配,不用加符号,直接是标签名称,如:p div input
  • 根据id属性匹配,前面加#号,如:#kw
  • 根据class 属性匹配。前面加点,如: .info
  • 根据其它属性定位,加中括号,如:[name="user"]

上面基本属性可以任意组合如:p.info div#kw [name="user"]

示例

<div id="demo">
    <p class="text-info">hello world</p>
    <form>
        <p id="p1" class="text-info">用户登录</p>
        <div>
            <label for="user">用户名</label>
            <input id="user" type="text" name="username" placeholder="请输入">
        </div>
        <div>
            <input type="submit" value="提交按钮">
        </div>
    </form>
</div>

jquery 查找元素示例

    var p1 = $('p');      // 查找p标签元素
    console.log(p1);
    var p2 = $('.text-info');     // 查找class="text-info"
    console.log(p2);
    var d1 = $('#demo');      // 查找 id="demo"
    console.log(d1);
    var b = $('[type="submit"]');      // 查找 type="submit"
    console.log(b);
    var p3 = $('p.text-info');     // 查找class="text-info"的p标签
    console.log(p3);

父子层级选择器

通过父子层级关系查找元素

  • 1.子代选择器, 如#demo>p
  • 2.后代选择器, 如#demo p
  • 3.兄弟相邻选择器, 如#p1+div
  • 4.同辈选择器, 如#p1~div

子代选择器,通过父元素找子元素用大于号>

 // 父元素找子元素
    var a1 = $('#demo>p')  // 找出id为demo的 的子元素p
    console.log(a1)
    var a2 = $('div>input')  // 找出div的子元素input
    console.log(a2)

后代选择器,通过父元素找子孙元素,中间用空格

    // 后代选择器 
    var a1 = $('#demo p');   // id为demo的后代p元素 (包含子元素和子孙元素)
    console.log(a1)   

兄弟相邻选择器,通过定位当前元素,找到同一层级的下一个兄弟元素,中间用加号+

  // 兄弟元素选择器
    var d = $('#p1+div'); //查找id=p1的下一个兄弟div
    console.log(d)

同辈选择器,,通过定位当前元素,找到同一层级的该元素后面的全部兄弟元素,中间用~

  // 兄弟元素选择器
    var d = $('#p1~div'); //查找id=p1的全部div兄弟元素
    console.log(d)

first 和 last

从查询结果筛出第一个和最后一个元素

    var p1 = $('p:first'); //查找 第一个p元素
    console.log(p1)
    var p2 = $('p:last'); //查找 最后一个p元素
    console.log(p2)

模糊匹配

模糊匹配属性以什么开头和以什么结尾的元素

    var p1 = $('[class^="text"]'); // 匹配以text开头的class属性
    console.log(p1)
    var p2 = $('[class$="info"]'); //匹配以info结尾的class属性
    console.log(p2)

匹配属性包含指定字符的元素

   var p3 = $('[class*="text"]'); // 匹配包含text的class属性
    console.log(p3)
    var p4 = $('[class*="info"]'); //匹配包含info的class属性
    console.log(p4)
    var p5 = $('[class*="t-in"]'); //匹配包含t-in的class属性
    console.log(p5)

以上是关于JavaScript 学习-43.jQuery 选择器的主要内容,如果未能解决你的问题,请参考以下文章

(JavaScript+Jquery+Ajax)知识点整理♥♥

SpringBoot学习笔记

SpringBoot学习笔记

day 43 jquery

js day43 Jquery入门(回顾js,Jquery选择器,dom操作)

JavaScript 学习-36.jQuery 获取和修改HTML