jQuery - 选择器

// 标签选择器 : 所有标签为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">aaatd>
            td class="txtColor">bbbtd>
            td>ccctd>
        tr>
        tr>
            td>span>111span>td>
            td>222td>
            td>333td>
        tr>
        tr class="txtColor">
            td>444td>
            td>555td>
            td>666td>
        tr>
    table>
    
body>

// 选择在所有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">111span>
span id="s2">222span>
span id="a1">333span>
span id="a">444span>

// 针对整个页面
// 页面中第一个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>111span>
div>
div>
    span>222span>
    span>333span>
div>

// 获取所有的表单元素
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>

// 获取所有带有子元素或文本的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>value1span>td>
        td>td>
    tr>
    tr>
        td>value2td>
        td>td>
    tr>
table>