关于jQuery--选择器

jquery的选择器使用的是cs1-cs3 所有选择器。

如下演示：jquery如何通过选择器进行对dom元素的获取？

1.基本选择器

<!--html测试文本-->
<button id="b" class="btn">点击</button>
<div class="div"></div>

(1) #id $("#b");
(2) .class $(".btn");
(3) element $("button");
(4) * $("*");
(5) 复合元素选取 $("button,div");

通过调试(如下图)：发现jquery在获取dom元素时返回的是集合，类似于数组的形式。
可以直接使用，因为jquery代码可以进行隐式迭代 （即可以进行一堆的操作）

jquery对象如何转化为js对象的单个元素：$("#b")[0];

2.层次选择器

<!--html测试文本-->
<ul>
    <li></li>
    <span></span>
    <li></li>
    <li>
        <ul class="u2">
            <li></li>
        </ul>
    </li>
</ul>

(1) 父子关系 $(".u2>li"); 获取元素：1个
(2) 祖先关系 $("ul li");4个
(3) 前元素后紧跟的所有后元素（同级)$("span+li"); 1个
(4) 前元素后的所有后元素（同级） $("span~li"); 2个

3.基本筛选器

<!--html测试文本-->
<ul>
    <Li></Li>
    <Li class="l2"></Li>
    <Li></Li>
</ul>
<input type="text">
<h1>哈哈</h1>

(1) :first $("ul li:first"); 1个
(2) :last $("ul li:last"); 1个
(3) :even 偶数获取 $("ul li:even"); 2个
(4) :odd 奇数获取 $("ul li:odd"); 1个
(5) :eq(index) 按索引获取（索引由0开始） $("ul li:eq(1)"); 1个
(6) :gt(index) 获取大于索引的 $("ul li:gt(1)");1个
(8) :lt(index) 获取小于索引的 $("ul li:lt(2)"); 2个
(9) :not(selector) $("ul li:not(.l2)");2个
(10) :header 获取所有的h标签 $(":header"); 1个
(11) :focus 获取获得聚焦的元素 $("input:focus"); 1个
(12) :root1.9+ 获取html内容 $(":root");

4.内容选择器

<!--html测试文本-->
<ul>
    <li>hah</li>
    <li class="l2">t</li>
    <li></li>
</ul>

(1) :contains(text) 包含某个内容 $("li:contains('ha')"); 1个
(2) :empty 直接获取空元素 $("li:empty"); 1个
(3) :has(selector) 包含某选择器的某父元素 $("li:empty"); 1个
(4) :parent 作为父元素的元素 $("li:parent"); 2个

5.可见性选择器

<!--html测试文本-->
<button>1</button>
<button style="display: none">2</button>

(1) :hidden 隐藏 $("button:hidden");
(2) :visible 可见 $("button:hidden");

6.属性选择器

<!--html测试文本-->
<button class="isu" id="sssa">1</button>
<button class="dt">2</button>

(1) [attribute] $("button[id]");
(2) [attribute=value] $("button[class='dt']");
(3) [attribute!=value] 不等于… $("button[class!='dt']");
(4) [attribute^=value] 以…开始 $("button[class^='i']");
(5) [attribute$=value] 以…结尾

$("button[class$='u']");
(6) [attribute*=value] 包含 $("button[class*='t']");
(7) [attrSel1][attrSel2][attrSelN] 含多个属性选择器 $("button[id][class]");

7.子元素选择器

与前面总结的css内容一致，此处不细结。
(1) :first-child 父元素的第n个子元素并且是该元素（如果不是，不符合）
(2) :first-of-type1.9+ 父元素的第n个该元素
(3) :last-child
(4) :last-of-type1.9+ $("ul li:last-of-type");
(5) :nth-child
(6) :nth-last-child()1.9+
(7) :nth-last-of-type()1.9+
(8) :nth-of-type()1.9+
(9) :only-child
(10) :only-of-type1.9+

8.表单元素选择器

(1) :input 匹配所有 input, textarea, select 和 button 元素 $(":input");
(2) :text 获取单行文本框 $(":text");
(3) :password 密码框 $(":password");
(4) :radio 获取单选按钮 $(":radio");
(5) :checkbox 获取复选框 $(":checkbox");
(6) :submit 获取表单提交按钮 $(":submit");
(7) :image $(":image");
(8) :reset 获取重置按钮 ($(":reset"));
(9) :button $(":button");
(10) :file 获取文件路径 $(":file");

9.表单对象属性选择器

<select name="" id="">
    <option value="">1</option>
    <option value="" selected>2</option>
</select>
<input type="text" disabled>
<input type="password">
<input type="radio" checked>

(1) :enabled 可用 $("input:enabled");
(2) :disabled 禁用 $("input:disabled");
(3) :checked 选中的 $("input:checked");获取checkbox radio类型
(4) :selected 下拉菜单 $("option:selected");对象和属性是对应的

10.混淆选择器

<div>
    <p class=".p"></p>
</div>

$.escapeSelector(selector) (3.0版本以上）

$("div").find("."+$.escapeSelector(".p"));