-
元素选择器
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，条件2，条件3，……，条件n “);特征：多个条件在“”内用逗号隔开； 用例：$(“div#id,span.tip,p”); //同时选择id为“id”的div标签,class为“tip”的span标签和p标签； -
相对选择器
用途：使用第二个参数选出相对元素，从而不影响其他具有相同条件的元素 用法：
$(“条件1”,条件2)；特征：两个参数 用例：$("td",(this)).css(“background”,”red”); //当前tr的td元素背景变红，其他tr中的td不变； -
层次选择器
用途：选择后代节点 用法：
$("条件1 条件2 条件3");特征：双引号之内，条件之间用空格隔开； 用例：$("#com ul li"); //选择Id为com的元素中的UL里面的所有li节点；jQuery 选择同时包含两个class的元素的实现方法
<element class="a b">
1、交集选择： $(“.a.b”) –选择同时包含a和b的元素。
2、并集选择：$(“.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] | $(“[href$=’.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()
