//[基本选择器]:
/**
* #id:根据给定的id匹配一个元素,返回单个元素;
* .class:根据给定的类名匹配元素,返回集合元素;
* element:根据给定的元素名匹配元素,返回集合元素;
* *:匹配所有元素,返回集合元素;
* selector1,selector2,...,selectorN:将每个选择器匹配到的元素合并后一起返回,返回集合元素;
**/
//1.改变id为one的元素的背景颜色
$("#one").css("background","#bbffaa");
//2.改变class为mini的所有元素的背景颜色
$(".mini").css("background","#bbffaa");
//3.改变元素名是<div>的所有元素的背景色
$("div").css("background","#bbffaa");
//4.改变所有元素的背景色
$("*").css("background","#bbffaa");
//5.改变所有的<span>元素和id为two的元素的背景色
$("span, #two").css("background","#bbffaa");
//[层次选择器]
/**
* $("ancestor descendant"):选取ancestor元素里的所有descendant(后代)元素,返回集合元素;
* $("parent > child"):选取parent元素下的child(子)元素,与$("ancestor descendant")有区别(后代元素),返回集合元素;
* $("prev + next"):选取紧接在prev元素后的next元素,返回集合元素;
* $("prev ~ siblings"):选取prev元素之后的所有siblings元素,返回集合元素;
**/
//1.改变<body>内所有<div>的背景颜色
$("body div").css("background","#bbffaa");
//2.改变<body>内子<div>元素的背景色
$("body > div").css("background","#bbffaa");
//3.改变class为one的下一个<div>兄弟元素背景色
$(".one + div").css("background","#bbffaa");
//4.改变id为two的元素后面的所有<div>兄弟元素的背景色
$("#two ~ div").css("background","#bbffaa");
//在层次选择器中,第一、二个选择器比较常用,而后面两个因为在jQuery里可以用更加简单的方法代替,所以使用的几率相对少些.
/**
* $("prev + div")选择器与next()方法的等价关系:
* $(".one + div") <===> $(".one").next("div")
* $("#prev ~ div") <===> $("#prev").nextAll("div")
* $("#prev ~ div")选择器只能选择"#prev"元素后面的同辈<div>元素.而siblings()方法与前后位置无关,只要是同辈节点就都能匹配.
* $("#prev").siblings("div").css("background","#bbffaa");//选取#prev所有的同辈div元素,无论前后位置
**/
//[过滤选择器]
/**
* 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头.按照不同的过滤
* 规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
**/
//1.[基本过滤选择器]
/**
* :first:选取第1个元素,返回单个元素;
* :last:选取最后一个元素,返回单个元素;
* :not(selector):去除所有与给定选择器匹配的元素,返回集合元素;
* :even:选取索引是偶数的所有元素,索引从0开始,返回集合元素;
* :odd:选取索引是奇数的所有元素,索引从0开始,返回集合元素;
* :eq(index):选取索引等于index的元素(index从0开始),返回单个元素;
* :gt(index):选取索引大于index的元素(index从0开始),返回集合元素;
* :lt(index):选取索引小于index的元素(index从0开始),返回集合元素;
* :header:选取所有的标题元素,例如h1,h2,h3等等,返回集合元素;
* :animated:选取当前正在执行动画的所有元素,返回集合元素;
**/
//1.改变第1个<div>元素的背景色
$("div:first").css("background","#bbffaa");
//2.改变最后一个<div>元素的背景色
$("div:last").css("background","#bbffaa");
//3.改变class不为"one"的<div>元素的背景色
$("div:not(.one)").css("background","#bbffaa");
//4.改变索引值为偶数的<div>元素的背景色
$("div:even").css("background","#bbffaa");
//5.改变索引值为奇数的<div>元素的背景色
$("div:odd").css("background","#bbffaa");
//6.改变索引值等于3的<div>元素的背景色
$("div:eq(3)").css("background","#bbffaa");
//7.改变索引值大于3的<div>元素的背景色
$("div:gt(3)").css("background","#bbffaa");
//8.改变索引值小于3的<div>元素的背景色
$("div:lt(3)").css("background","#bbffaa");
//9.改变所有的标题元素,例如<h1>,<h2>,<h3>,...这些元素的背景色
$(":header").css("background","#bbffaa");
//10.改变当前正在执行动画的元素的背景色
$(":animated").css("background","#bbffaa");
//2.[内容过滤选择器]
/**
* 内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上.
* :contains(text):选取含有文本内容为"text"的元素,返回集合元素;
* :empty:选取不包含子元素或者文本的空元素,返回集合元素;
* :has(selector):选取含有选择器所匹配的元素的元素,返回集合元素;
* :parent:选取含有子元素或者文本的元素,返回集合元素;
**/
//1.改变含有文本"我"的<div>元素的背景色
$("div:contains('我')").css("background","#bbffaa");
//2.改变不包含子元素(包括文本元素)的<div>空元素的背景色
$("div:empty").css("background","#bbffaa");
//3.改变含有class为mini元素的<div>元素的背景色
$("div:has(.mini)").css("background","#bbffaa");
//4.改变含有子元素(包括文本元素)的<div>空元素的背景色
$("div:parent").css("background","#bbffaa");
//3.[可见性过滤选择器]
/**
* 可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素.
* :hidden:选取所有不可见的元素,返回集合元素;
* :visible:选取所有可见的元素,返回集合元素;
* 在可见性选择器中,需要注意选择器 :hidden,它不仅包括样式属性display为"none"的元素,也包括文本隐藏域(<input type="hidden"/>)
* 和visibility:hidden之类的元素;
* $(":hidden")选取所有不可见的元素.包括<input type="hidden">,<div style="display:none">和
* <div style="visible:hidden">等元素.如果只想选取<input>元素,可以使用$("input:hidden");
**/
//1.改变所有可见的<div>元素的背景色
$("div:visible").css("background","#bbffaa");
//2.显示隐藏的<div>元素
$("div:hidden").show(3000);
//3.改变含有class为mini元素的<div>元素的背景色
$("div:has(.mini)").css("background","#bbffaa");
//4.改变含有子元素(包括文本元素)的<div>空元素的背景色
$("div:parent").css("background","#bbffaa");
//4.[属性过滤选择器]
/**
* 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素.
* [attribute]:选取拥有此属性的元素,返回集合元素;
* [attribute=value]:选取属性的值为value的元素,返回集合元素;
* [attribute!=value]:选取属性的值不等于value的元素,返回集合元素;
* [attribute^=value]:选取属性的值以value开始的元素,返回集合元素;
* [attribute$=value]:选取属性的值以value结束的元素,返回集合元素;
* [attribute*=value]:选取属性的值含有value的元素,返回集合元素;
* [selector1][selector2][selectorN]:用属性选择器合并成一个复合属性选择器,满足多个条件.没选择一次,缩小一次范围,返回集合元素;
**/
//1.改变含有属性title的<div>元素的背景色
$("div[title]").css("background","#bbffaa");
//2.改变属性title值等于"test"的<div>元素的背景色
$("div[title=test]").css("background","#bbffaa");
//3.改变属性title值不等于"test"的<div>元素的背景色
$("div[title!=test]").css("background","#bbffaa");
//4.改变属性title值以"te"开始的<div>元素的背景色
$("div[title^=te]").css("background","#bbffaa");
//5.改变属性title值以"est"结束的<div>元素的背景色
$("div[title$=est]").css("background","#bbffaa");
//6.改变属性title值含有"es"的<div>元素的背景色
$("div[title*=es]").css("background","#bbffaa");
//7.改变含有属性id,并且属性title值含有"es"的<div>元素的背景色
$("div[id][title*=es]").css("background","#bbffaa");
//5.[子元素过滤选择器]
/**
* 子元素过滤选择器的过滤规则相对于其它的选择器稍微有些复杂,不过没关系,只要将元素的父元素和子元素区分清楚,那么使用起来也非常简单.
* :nth-child(index/even/odd/equation):选取每个父元素下的第index个子元素或者奇偶元素.(index从1算起),返回集合元素;
* (:eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且 :nth-child(index)的index是从1开始的,而:eq(index)是从0开始的)
* :first-child:选取每个父元素的第一个子元素,返回集合元素;
* (:first只返回单个元素,而 :first-child选择符将为每一个父元素匹配第 一个子元素.例如: $("ul li:first-child");选取每个<ul>中的第一个<li>元素;)
* :last-child:选取每个父元素下的最后一个子元素,返回集合元素;
* :only-child:如果某个元素是它父元素中唯一的子元素,那么将会被匹配.如果父元素中含有其他元素,则不会被匹配,返回集合元素;
**/
//1.改变每个class为"one"的<div>父元素下的第2个子元素的背景色
$("div.one :nth-child(2)").css("background","#bbffaa");
//2.改变每个class为"one"的<div>父元素下的第1个子元素的背景色
$("div.one :first-child").css("background","#bbffaa");
//3.改变每个class为"one"的<div>父元素下的最后一个子元素的背景色
$("div.one :last-child").css("background","#bbffaa");
//4.如果class为one的<div>父元素下只有一个子元素,那么则改变这个子元素的背景色
$("div.one :only-child").css("background","#bbffaa");
//6.[表单对象属性过滤选择器]
/**
* 此选择器主要是对所选择的表单元素进行过滤.
* :enable:选取所有可用元素,返回集合元素;
* :disabled:选取所有不可用元素,返回集合元素;
* :checked:选取所有被选中的元素(单选框,复选框),返回集合元素;($("input:checked"),选取所有被选中的<input>元素)
* :selected:选取所有被选中的选项元素(下拉列表);($("select :selected"),选取所有被选中的选项元素)
**/
//1.改变表单内可用<input>元素的值
$("#form1 input:enabled").val("这里变化了!");
//2.改变表单内不可用<input>元素的值
$("#form1 input:disabled").val("这里变化了!");
//3.获取多选框选中的个数
$("input:checked").length
//4.获取下拉框选中的内容
$("select :selected").text();
//7.[表单选择器]
/**
* 为了使用户能够更加灵活地操作表单,jQuery中专门加入了表单选择器.
* :input:选取所有的<input>、<textarea>、<select>和<button>元素,返回集合元素;
* :text:选取所有的单行文本框,返回集合元素;
* :password:选取所有的密码框,返回集合元素;
* :radio:选取所有的单选框,返回集合元素;
* :checkbox:选取所有的多选框,返回集合元素;
* :submit:选取所有的提交按钮,返回集合元素;
* :image:选取所有的图像按钮,返回集合元素;
* :reset:选取所有的重置按钮,返回集合元素;
* :button:选取所有的按钮,返回集合元素;
* :file:选取所有的上传域,返回集合元素;
* :hidden:选取所有不可见元素,返回集合元素;
**/
//1.获取i的为"form1"表单内表单元素的个数:
$("#form1 :input").length; //注意与$("#form1 input")的区别
jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法
$(
"#myELement"
) 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$(
"div"
) 选择所有的div标签元素，返回div元素数组
$(
".myClass"
) 选择使用myClass类的css的所有元素
$(
"*"
) 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$(
"#myELement,div,.myclass"
)
层叠选择器：
$(
"form input"
) 选择所有的form元素中的input元素
$(
"#main > *"
) 选择id值为main的所有的子元素
$(
"label + input"
) 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$(
"#prev ~ div"
) 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器：
$(
"tr:first"
) 选择所有tr元素的第一个
$(
"tr:last"
) 选择所有tr元素的最后一个
$(
"input:not(:checked) + span"
)
过滤掉：checked的选择器的所有的input元素
$(
"tr:even"
) 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）
$(
"tr:odd"
) 选择所有的tr元素的第1，3，5... ...个元素
$(
"td:eq(2)"
) 选择所有的td元素中序号为2的那个td元素
$(
"td:gt(4)"
) 选择td元素中序号大于4的所有td元素
$(
"td:ll(4)"
) 选择td元素中序号小于4的所有的td元素
$(
":header"
)
$(
"div:animated"
)
内容过滤选择器：
$(
"div:contains('John')"
) 选择所有div中含有John文本的元素
$(
"td:empty"
) 选择所有的为空（也不包括文本节点）的td元素的数组
$(
"div:has(p)"
) 选择所有含有p标签的div元素
$(
"td:parent"
) 选择所有的以td为父节点的元素数组
可视化过滤选择器：
$(
"div:hidden"
) 选择所有的被hidden的div元素
$(
"div:visible"
) 选择所有的可视化的div元素
属性过滤选择器：
$(
"div[id]"
) 选择所有含有id属性的div元素
$(
"input[name='newsletter']"
) 选择所有的name属性等于
'newsletter'
的input元素
$(
"input[name!='newsletter']"
) 选择所有的name属性不等于
'newsletter'
的input元素
$(
"input[name^='news']"
) 选择所有的name属性以
'news'
开头的input元素
$(
"input[name$='news']"
) 选择所有的name属性以
'news'
结尾的input元素
$(
"input[name*='man']"
) 选择所有的name属性包含
'news'
的input元素
$(
"input[id][name$='man']"
) 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
子元素过滤选择器：
$(
"ul li:nth-child(2)"
),$(
"ul li:nth-child(odd)"
),$(
"ul li:nth-child(3n + 1)"
)
$(
"div span:first-child"
) 返回所有的div元素的第一个子节点的数组
$(
"div span:last-child"
) 返回所有的div元素的最后一个节点的数组
$(
"div button:only-child"
) 返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素选择器：
$(
":input"
) 选择所有的表单输入元素，包括input, textarea, select 和 button
$(
":text"
) 选择所有的text input元素
$(
":password"
) 选择所有的password input元素
$(
":radio"
) 选择所有的radio input元素
$(
":checkbox"
) 选择所有的checkbox input元素
$(
":submit"
) 选择所有的submit input元素
$(
":image"
) 选择所有的image input元素
$(
":reset"
) 选择所有的reset input元素
$(
":button"
) 选择所有的button input元素
$(
":file"
) 选择所有的file input元素
$(
":hidden"
) 选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器：
$(
":enabled"
) 选择所有的可操作的表单元素
$(
":disabled"
) 选择所有的不可操作的表单元素
$(
":checked"
) 选择所有的被checked的表单元素
$(
"select option:selected"
) 选择所有的select 的子元素中被selected的元素
选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()
名字以”S_”开始，并且不是以”_R”结尾的
$(”input[@ name ^=
'S_'
]“).not(”[@ name $=
'_R'
]“)
一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();
$(
"A B"
) 查找A元素下面的所有子节点，包括非直接子节点
$(
"A>B"
) 查找A元素下面的直接子节点
$(
"A+B"
) 查找A元素后面的兄弟节点，包括非直接子节点
$(
"A~B"
) 查找A元素后面的兄弟节点，不包括非直接子节点
1. $(
"A B"
) 查找A元素下面的所有子节点，包括非直接子节点
例子：找到表单中所有的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name=
"name"
/>
<fieldset>
<label>Newsletter:</label>
<input name=
"newsletter"
/>
</fieldset>
</form>
<input name=
"none"
/>
jQuery 代码:
$(
"form input"
)
结果:
[ <input name=
"name"
/>,<input name=
"newsletter"
/> ]
2. $(
"A>B"
) 查找A元素下面的直接子节点
例子：匹配表单中所有的子级input元素。
HTML 代码:
<form>
<label>Name:</label>
<input name=
"name"
/>
<fieldset>
<label>Newsletter:</label>
<input name=
"newsletter"
/>
</fieldset>
</form>
<input name=
"none"
/>
jQuery 代码:
$(
"form > input"
)
结果:
[ <input name=
"name"
/> ]
3. $(
"A+B"
) 查找A元素后面的兄弟节点，包括非直接子节点
例子：匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name=
"name"
/>
<fieldset>
<label>Newsletter:</label>
<input name=
"newsletter"
/>
</fieldset>
</form>
<input name=
"none"
/>
jQuery 代码:
$(
"label + input"
)
结果:
[ <input name=
"name"
/>,<input name=
"newsletter"
/> ]
4. $(
"A~B"
) 查找A元素后面的兄弟节点，不包括非直接子节点
例子：找到所有与表单同辈的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name=
"name"
/>
<fieldset>
<label>Newsletter:</label>
<input name=
"newsletter"
/>
</fieldset>
</form>
<input name=
"none"
/>
jQuery 代码:
$(
"form ~ input"
)
结果:
[ <input name=
"none"
/> ]
5484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
