JavaScript 学习-43.jQuery 选择器

Posted 2022-06-10 上海-悠悠

前言

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 开头的元素
${(}^{\prime }[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)