JavaScript 学习-43.jQuery 选择器

前言

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

jQuery 选择器

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

基础选择器

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)