锋利的jquery —— 选择器
2011-3-23? jquery 选择器
?
1、基本选择器
??? $('#id') ,
??? $('.class') ,
??? $('element')
???? 注：$('*').css("background","#bbffaa")???? 表示 改变所有元素的背景色
?
2、层次选择器
???? $("div span")?? --- 选取<div>里的所有的<span>元素
???? $("div>span")? --- 选取<div>元素下，元素名为<span>的子元素
???? $(".one + div") --- 选取class为one的 下一个<div>元素? <==> $(".one").next("div")
???? $("#two ~ div")---选取id为two的后面所有同辈<div>元素??? <==> $("#two").nextAll("div")
???? 注：$("#two").siblings("div")? 选取id为two的所有同辈<div>元素? (没有前后限定)
?
3、过滤选择器 （以：开头）
?
???? 1)基本过滤选择器
???????? ：first???? ---- 例 $("div:first")?? 选取所有<div>元素中的第一个<div>元素
???????? ：last???? ---- 例 $("div:last")?? 选取所有<div>元素中的第后一个<div>元素
???????? ：not(selector)?? ----例$("input:not(.myclass)") 选取class不是myclass的所有<input>元素
???????? ：even? 选取索引为偶数的所有元素(索引从0开始)? 例$("input:even") 选取索引为偶数的<input>元素
???????? ： odd?? 选取索引为奇数的所有元素(索引从0开始)
???????? ：eq(index) 选取索引等于index的元素(index 从0开始)
???????? ：gt(index) 选取索引大于index的元素(index 从0开始)
???????? ：lt(index) 选取索引小于index的元素(index 从0开始)
???????? ：header 选取所有标题元素 如：h1,h2,h3 等。? 例$(":header") 选取网页中所有标题元素 如：h1,h2,h3 .等
???????? ：animated 选取当前正在执行动画的所有元素。例$("div:animated") 选取正在执行动画的<div>元素
?
??? 2)内容过滤选择器
???????? ：contains(text)? 选取文本内容包含text的元素。 例$("div:contains('我')")选取文本包含“我”的<div>元素
???????? ：empty? 选取不包含子元素或文本的空元素。 例$("div:empty")选取不包含子元素(包含文本元素)的<div>元素
???????? ：has(selector) 选取含有选择器所匹配的元素的元素。 例$("div:has(p)")选取含有<p>元素的<div>元素
???????? ：parent ?? 选取含有子元素或者文本的元素。例$("div:parent")? 选取拥有子元素(包含文本元素)的<div>元素
?
??? 3)可见性过滤选择器
???????? ：hidden?? 选取所有不可见的元素
?????????????????????????? $(":hidden")? 选取所有不可见元素，包括<input? type="hidden" />;
??????????????????????????????????????????????? <div style="display:none;">和<div style="visibility:hidden;">等元素。
?????????????????????????? $("input:hidden").show(3000) 选取所有不可见的<input>元素,让它显示3000毫秒
?
???????? ：visible??? 选取所有可见的元素。 例$("div:visible") 选取所有可见的<div>元素
?
???? 4)属性过滤选择器 （[..]）
???????? [attribute]? 选取拥有此属性的元素。 例$("div[id]") 选取拥有id属性的<div>元素
???????? [attribute=value] 选取属性值为value的元素。 例$("div[title=test]") 选取属性title为test的<div>元素
???????? [attribute!=value] 选取属性值不等于value的元素。
????????????? 例$("div[title!=test]")选取属性title不等于test的<div>元素.(注意:没有属性title的<div>也会被选取)
???????? [attribute^=value] 选取属性值以value开头的元素。
???????? [attribute$=value] 选取属性值以value结束的元素。
???????? [attribute*=value] 选取属性值含有value的元素。
?
???? 5)子元素过滤选择器
???????? ：first-child?? 选取父元素的第一个子元素
???????? ：last-child?? 选取父元素的最后一个子元素
???????? ：only-child? 如果某元素是它父元素的唯一子元素，那么它将会匹配。如果还有其他子元素，则不匹配。
???????? ：nth-child(even) 选取每个父元素下的索引值为偶数的子元素。
???????? ：nth-child(odd) 选取每个父元素下的索引值为奇数的子元素。
???????? ：nth-child(2) 选取每个父元素下的索引值为2的子元素。
???????? ：nth-child(3n) 选取每个父元素下的索引值为3的倍数的子元素。(n从0开始)
???????? ：nth-child(3n+1) 选取每个父元素下的索引值为（3n+1）的子元素。(n从0开始)
注意：：nth-child(index)? index 是从1开始；
???????? ：eq(index) index 是从0开始；同理，：first和：first-child，：last和：last-child 类似。
?
????? 6)表单属性过滤选择器
????????? ：enabled? 选取所有可用元素。
????????? ：disabled 选取所有不可用元素。
????????? ：checked? 选取所有被选中的元素(单选框，复选框)。
????????? ：selected 选取所有被选中的选项元素(下拉列表)。
例： $("#from1 input:enabled ").val("hello...");? 改变表单内可用<input>元素的值。
?????? $("#from1 input:disabled ").val("hello...");? 改变表单内不可用<input>元素的值。
?????? $("input :checked ").length ;? 获取多选框选中的个数
?????? $("select :selected ").text();? 获取下拉列表选中的内容。
?
4、表单选择器
????? ：input? 选取所有<input>,<textarea>.<select>.<button>元素
????? ：text?? 选取所有单行文本框
????? ：password? 选取所有的密码框
????? ：radio? 选取所有的单选框
????? ：checkbox 选取所有的多选框
????? ：submit? 选取所有的提交按钮
????? ：image? 选取所有的图像按钮
????? ：reset? 选取所有的重置按钮
????? ：button 选取所有的按钮
????? ：file? 选取所有的上传域
????? ：hidden 选取所有不可见元素
?
在选择器中可以使用“ \\ ” 对特殊符号进行转义；例如 . /# 等等
?
区别：$(".test? :hidden") 中间多一个空格?? ---- ? 表示选取class为test的元素里面的 隐藏元素。 $(".test:hidden")? ---- ? 表示选取隐藏的class为test的元素。
?
