jQuery - 选择器

1. 基本选择器

// 标签选择器 : 所有标签为td的元素
console.log($("td"));

// ID选择器 : ID为td1的元素
console.log($("#td1"));

// 类选择器 
console.log($(".txtColor")); // 所有class属性值为txtColor的元素
console.log($("td.txtColor")); // 所有td元素中, class值为txtColor的元素

// 通配选择器 : 所有元素
console.log($("*"));

// 并集选择器 : 选择所有tr和td元素
console.log($("tr,td")); 

// 后代选择器 : body标签下所有子标签是span标签的元素 (包含孙子)
console.log($("body span"));

// 父子选择器 : body标签下所有子标签是span标签的元素 (不包含孙子)
console.log($("body>span"));

// 后面第一个兄弟元素 : 选择id为#tr1的元素的下一个tr元素
console.log($("#tr1+tr"));

// 后面所有兄弟元素 : 选择id为#tr1的元素后面所有的兄弟级tr元素
console.log($("#tr1~tr"));

<style>
    .txtColor {
        color: red;
    }
</style>

<body>

    <span>表格</span>
    <table border="1px" width="300px" height="150px">
        <tr id="tr1">
            <td id="td1">aaa</td>
            <td class="txtColor">bbb</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td><span>111</span></td>
            <td>222</td>
            <td>333</td>
        </tr>
        <tr class="txtColor">
            <td>444</td>
            <td>555</td>
            <td>666</td>
        </tr>
    </table>
    
</body>

2. 属性选择器

// 选择在所有span元素中属性带有id的元素
console.log($("span[id]"));

// 选择在所有span元素中属性带有id和name的元素
console.log($("span[id][name]"));

// 选择在所有span元素中属性带有id并且属性值为s1的元素
console.log($("span[id=‘s1‘]"));

// 选择在所有span元素中属性id不为s1的元素, 包括没有id属性的元素
console.log($("span[id!=‘s1‘]"));

// 选择在所有span元素中属性id的值以s开头的元素
console.log($("span[id^=‘s‘]"));

// 选择在所有span元素中属性id的值以1结尾的元素
console.log($("span[id$=‘1‘]"));

// 选择在所有span元素中属性id的值包含a的元素
console.log($("span[id*=‘a‘]"));

<span id="s1" name="s1">111</span>
<span id="s2">222</span>
<span id="a1">333</span>
<span id="a">444</span>

3. 位置选择器

// 针对整个页面
// 页面中第一个span元素和最后一个span元素
console.log($("span:first"));
console.log($("span:last"));

// 页面中所有span元素
console.log($("span:odd")); // 奇数行 (索引从0开始)
console.log($("span:even")); // 偶数行 (索引从0开始)

// 页面中第2个span元素, 索引从0开始
console.log($("span:eq(2)"));

// 页面中span元素个数索引大于1的元素, 索引从0开始
console.log($("span:gt(1)"));

// 页面中span元素个数索引小于2的元素, 索引从0开始
console.log($("span:lt(2)"));

// 针对父级元素
// 所有元素中第一个元素为span的元素
console.log($("span:first-child"));

// 所有元素中最后一个元素为span的元素
console.log($("span:last-child"));

// 获取所有元素中, 子元素只有一个span的span元素
console.log($("span:only-child"));

// 获取所有元素中的第2个span元素, 索引从1开始
console.log($("span:nth-child(2)"));

<div>
    <span>111</span>
</div>
<div>
    <span>222</span>
    <span>333</span>
</div>

4. 表单选择器

// 获取所有的表单元素
console.log($(":input"));

// 获取所有type为text的表单元素
console.log($(":text"));

// 获取所有禁用的表单元素
console.log($(":disabled"));

<form action="#" method="get">
    文本框1 : <input type="text" /> <br />
    文本框2 : <input type="text" disabled="disabled" /> <br />
</form>

5. 内容选择器

// 获取所有带有子元素或文本的td元素
console.log($("td:parent"));

// 获取所有不包含子元素或文本的td元素
console.log($("td:empty"));

// 获取包含带有val文本的td元素
console.log($("td:contains(‘val‘)"));

// 获取包含选择器匹配的元素的td元素
console.log($("td:has(span)"));

<table>
    <tr>
        <td><span>value1</span></td>
        <td></td>
    </tr>
    <tr>
        <td>value2</td>
        <td></td>
    </tr>
</table>

jQuery - 选择器

相关推荐