JQuery选择器学习

• 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

---

• 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

选择器可用于选取多个 element。注意：用逗号分隔每个 element。

---

• 联合选择器

多条件选择器和相对选择器,层次选择器

1. 多条件选择器

用途：使用多个条件同时选择多个标签
用法：$(“条件1，条件2，条件3，……，条件n “);
特征：多个条件在“”内用逗号隔开；
用例：

$(“div#id,span.tip,p”);
//同时选择id为“id”的div标签,class为“tip”的span标签和p标签；

2. 相对选择器

用途：使用第二个参数选出相对元素，从而不影响其他具有相同条件的元素
用法：$(“条件1”,条件2)；
特征：两个参数
用例：

$("td",(this)).css(“background”,”red”);
//当前tr的td元素背景变红，其他tr中的td不变；

3. 层次选择器

用途：选择后代节点
用法：$("条件1 条件2 条件3");
特征：双引号之内，条件之间用空格隔开；
用例：

$("#com ul li");
//选择Id为com的元素中的UL里面的所有li节点；

jQuery 选择同时包含两个class的元素的实现方法
<element class="a b">
1、交集选择： (".a, .b") --选择包含a或者包含b的元素。
根据多个属性选择E[attr=val][attr=val]
$("div[title='ttt'][class='aaaa']").click()
所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素

---

• 更多的选择器实例

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro"` 的 <div> 元素中的所有 class="head" 的元素

一些特殊情况下，选择器也可以创建元素，如下
svar txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素

---

• 选择器大全

• 基本选择器

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname"的元素
.class	$(".intro")	所有class="intro"的元素
element	$("p")	所有<p>元素
.class.class	$(".intro.demo")	所有class="intro"且class="demo"的元素
:first	$("p:first")	第一个<p>元素
:last	$("p:last")	最后一个<p>元素
:even	$("tr:even")	所有偶数<tr>元素
:odd	$("tr:odd")	所有奇数<tr>元素
:eq(index)	$("ulli:eq(3)")	列表中的第四个元素（index从0开始）
:gt(no)	$("ulli:gt(3)")	列出index大于3的元素
:lt(no)	$("ulli:lt(3)")	列出index小于3的元素
:not(selector)	$("input:not(:empty)")	所有不为空的input元素
:header	$(":header")	所有标题元素<h1>-<h6>
:animated		所有动画元素
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的<p>元素
:visible	$("table:visible")	所有可见的表格
s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

• 过滤选择器

选择器	实例	选取
[attribute]	$("[href]")	所有带有href属性的元素
[attribute=value]	$("[href='#']")	所有href属性的值等于"#"的元素
[attribute!=value]	$("[href!='#']")	所有href属性的值不等于"#"的元素
[attribute$=value]	='.jpg']")	所有href属性的值包含以".jpg"结尾的元素

• 表单选择器

选择器	实例	选取
:input	$(":input")	所有<input>元素
:text	$(":text")	所有type="text"的<input>元素
:password	$(":password")	所有type="password"的<input>元素
:radio	$(":radio")	所有type="radio"的<input>元素
:checkbox	$(":checkbox")	所有type="checkbox"的<input>元素
:submit	$(":submit")	所有type="submit"的<input>元素
:reset	$(":reset")	所有type="reset"的<input>元素
:button	$(":button")	所有type="button"的<input>元素
:image	$(":image")	所有type="image"的<input>元素
:file	$(":file")	所有type="file"的<input>元素

• 过滤选择器

选择器	实例	选取
:enabled	$(":enabled")	所有激活的input元素
:disabled	$(":disabled")	所有禁用的input元素
:selected	$(":selected")	所有被选取的input元素
:checked	$(":checked")	所有被选中的input元素

• 其他

关于 attr() 和 prop() 方法案例
$(":radio").removeAttr('checked');
$(":radio").attr('checked','true');
实际问题：在使用removeAttr()移除了radio的checked属性后，使用attr()重新增加不起作用；
解决方案：
$(":radio").removeAttr('checked');
$("input:radio").prop('checked','true');
即使用prop()可重新配置上该属性；
注意：值为 true 和 false 的标签属性，如checked、selected、disabled使用prop()，其他的使用 attr()