jQuery选择器详解

# `根据获取页面中的元素的不同，jQuery选择器可以分为：`
**目录 (Table of Contents)**

[TOC]

#基本选择器
由元素id, class, 元素名, 多个选择符组成，通过基本选择器可以实现大多数页面元素的查找。

例：
```script
	<script>
		$(function(){   //ID选择器
		$("#divOne").css("display","block");
	})

$(function(){   //元素名匹配元素
		$("div span").css("display","block");
	})

$(function(){   //类名匹配元素
		$(".clsFrame .clsOne").css("display","block");
	})

$(function(){   //匹配所有元素
		$("*").css("display","block");
	})

$(function(){   //合并匹配元素
		$("#divOne,span").css("display","block");
	})
</script>
```
```HTML
    <body>
        <div class='clsFrame'>
            <div id='divOne'>ID</div>
            <div class='clsOne'>CLASS</div>
            <span>SPAN</span>
        </div>
    </body>
```

#层次选择器
层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代，父子，相邻，兄弟，通过其中某类关系可以方便快捷的定位元素。
        
        层次选择器语法:
        
        ancestor descendant         根据祖先元素匹配所有的后代元素
        parent > child              根据父元素匹配所有的子元素
        prev + next                 匹配所有紧接在prev元素后的'相邻'元素
        prev ~ sibling              匹配prev元素之后的'所有'兄弟元素
        siblings()                   获取相邻的元素
        .parent()                   获取父元素(只获取相邻的上一层父元素)
        
`注：ancestor descendant与parent > child所选择的元数据是不同的`，
            
	parent > child选择的是 parent 后的所有子元素不包括孙子元素或更深的元素。
	ancestor descendant所选择的是所有的子元素包括子元素和更深的元素。前者的层次关系是祖先与后代，后者的关系是父子关系；

另外， prev + next 可以用 prev.next()代替。
而 prev ~ sibling 可以用 prev.nextAll()代替。

```script
<script type="text/javascript">
	$(function(){   //匹配后代元素
	$("#divMid").css("display","block");
	$("div span").css("display","block");
})
$(function(){   //匹配子元素
	$("#divMid").css("display","block");
	$("div > span").css("display","block");
})
$(function(){   //匹配下一个元素
	$("#divMid + div").css("display","block");
	$("#divMid").next().css("display","block");
})
$(function(){   //匹配后面的所有兄弟元素
	$("#divMid ~ div").css("display","block");
	$("#divMid").nextAll().css("display","block");
})
$(function(){   //匹配所有相邻元素
	$("#divMid").siblings("div").css("display","block");
})
$(function(){   //匹配后面的所有兄弟元素的另一种写法
	$("#divMid").nextAll().css("display","block");
})
$(function(){   //匹配父元素下同级元素
	$(this).parent().child().find("td#f").text()
})
</script>
```

`注:`sibings() 写法与与选择器 prev ~ sibling 的区别是：前者获取所有相邻的元素，不分前后。后者获取所有后面相邻的元素，不获取前面的元素。
        
##简单过滤选择器

```HTML
    <script type="text/javascript">
    	$(function(){	//为第一个li增加样式
    		$("li:first").addClass("GetFocus");
    	});
    	$(function(){	//为最后一个li增加样式
    		$("li:last").addClass("GetFocus");
    	});
    	$(function(){	//未排除指定的元素后的所有指定元素增加样式
    		$("li:not(.NotClass)").addClass("GetFocus");
    	});
    	$(function(){	//为指定元素索引值为偶数的的元素增加样式，从0开始计数
    		$("li:even").addClass("GetFocus");
    	});
    	$(function(){	//为指定元素索值为奇数的元素增加样式，从0开始计数
    		$("li:odd").addClass("GetFocus");
    	});
    	$(function(){	//为一个指定索引值的元素增加样式，从0开始计数
    		$("li:eq(1)").addClass("GetFocus");
    	});
    	$(function(){	//为所有大于给定索引值的元素增加样式，从0开始计数
    		$("li:gt(1)").addClass("GetFocus");
    	});
    	$(function(){	//为所有小于给定索引的元素增加样式, 从0开始计数
    		$("li:lt(2)").addClass("GetFocus");
    	});
    	$(function(){	//增加标题类元素类别
    		$("div h1").css("width","238px");
    		$(":header").addClass("GetFocus");
    	});
        $(function(){
            animateIt();	//增加动画效果元素类别
            $("#spnMove:animated").addClass("GetFocus");
        });
        
        function animateIt() {	//动画效果
            $("#spnMove").slideToggle("slow", animateIt);
        }
    </script>
    ....
    <body>
        <div>
            <h1>基本过滤选择器</h1>
            <ul>
                <li class="DefClass">Item 0</li>
                <li class="DefClass">Item 1</li>
                <li class="NotClass">Item 2</li>
                <li class="DefClass">Item 3</li>
            </ul>
            <span id="spnMove">Span Move</span>
        </div>
    </body>
    ....
```
    
##内容过滤选择器
内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，文字内容可以模糊或绝对匹配进行元素匹配。
	`:contains(text)`             获取包含给定文本的元素
	`:empty`                      不包含子元素或文字内容的空元素
	`:has(selector)`              获取包含有选择器所匹配的元素的元素
	`:parent`                     获取含有子元素或文本的元素
例：
```html
    ...
    <script type="text/javascript">
    	$(function(){	//显示包含给定文本的元素
    		$("div:contains('A')").css("display","block");
    	});
    	$(function(){	//显示不包含文本或子元素的元素
    		$("div:empty").css("display","block");
    	});
    	$(function(){	//显示包含给定元素的元素
    		$("div:has(span)").css("display","block");
    	});
        $(function(){	//显示包含有子元素或文本的元素
            $("div:parent").css("display","block");
        });
    </script>
    ...
    <body>
        <div>ABCD</div>
        <div><span></span></div>
        <div>EFah</div>
        <div></div>
    </body>
    ...
```

##可见性过滤选择器
    
根据元素是否可见的特征获取元素。
    `:hidden`         获取所有不可见元素，或者type为hidden的元素
    `:visible`        获取所有的课件元素
```HTML
    <script type="text/javascript">
        $(function(){	//增加所有可见元素类别
            $("div:visible").addClass("GetFocus");
            $("span:hidden").show();
        })
        $(function(){	//增加所有不可见元素类别
            $("span:hidden").show().addClass("GetFocus");
        })
    </script>
    ...
    <body>
        <span style="display:none">hidden</span>
        <div>visible</div>
    </body>
```
`[注]：
        冒号前后不可加入空格，否则将产生不同的语法意义。`
    
##属性过滤选择器

根据元素的某个属性获取元素
    `[attribute]`                         获取给定属性的元素
    `[attribute = value]`                 获取等于给定元素的属性是某个特定的值
    `[attribute != value]`                获取不等于给定元素的属性是某个特定的值的元素
    `[attribute ^= value]`                获取给定元素的属性是以某个特定的值开始的元素
    `[attribute $= value]`                获取给定元素的属性是以某个特定的值结束的元素
    `[attribute *= value]`                获取给定元素的属性包含某个特定的值的元素
    `[selector1][selector2][selectorN]`   获取满足多个给定条件的复合属性的元素

```javascript
<script type="text/javascript">
	$(function(){	//显示所有包含属性id的div
	$("div[id]").show(3000);
})
$(function(){	//显示所有title值是A的div
	$("div[title='A']").show(3000);
})
$(function(){	//显示所有title值不是A的div
	$("div[title!='A']").show(3000);
})
$(function(){	//显示所有title值以A开始的div
	$("div[title^='A']").show(3000);
})
$(function(){	//显示所有title值以C结尾的div
	$("div[title$='C']").show(3000);
})
$(function(){	//显示所有title值中包含字母B的div
	$("div[title*='B']").show(3000);
})
$(function(){	//显示所有title值中包含有'B' 并且id = divAB 的div
	$("div[id='divAB'][title*='B']").show(3000);
})
	</script>
```
##子元素过滤选择器
突出指定某行
    `:nth-child(eq|even|odd|index)`               获取每个父元素下特定位置的元素，索引号从1开始
    `:first-child`                                获取每个父元素下的第一个子元素
    `:last-child`                                 获取每个父元素下最后一个子元素
    `:only-child`                                 获取每个父元素下的仅有的一个子元素
    
例：
```script
    ...
    <script type="text/javascript">
    	$(function(){	//增加每个父元素下第2个子元素类别
    		$("li:nth-child(2)").addClass("GetFocus");
    	});
    	$(function(){	//增加每个父元素下第1个子元素类别
    		$("li:first-child").addClass("GetFocus");
    	});
    	$(function(){	//增加每个父元素下最后一个子元素类别
    		$("li:last-child").addClass("GetFocus");
    	});
        $(function(){	//增加每个父元素下只有一个子元素的类别
            $("li:only-child").addClass("GetFocus");
        });
    </script>
    ...
```
##表单对象属性选择器
    
	:enabled                获取表单中所有属性为可用元素的元素
	:displayed              获取表单中所有属性为不可用的元素
	:checked                获取表单中所有被选中的元素
	:selected               获取表单中所有被选中的option元素

例：
```javascript
<script type="text/javascript">
	$(function(){		//增加所选元素为可用的元素类别
	$("#divA").show(3000);
	$("#form1 input:enabled").addClass("GetFocus");
})
$(function(){		//增加所选元素为不可用的元素类别
	$("#divA").show(3000);
	$("#form1 input:disabled").addClass("GetFocus");
})
$(function(){		//增加所选元素被选中的元素类别
	$("#divB").show(3000);
	$("#form1 input:checked").addClass("GetFocus");
})
$(function(){		//显示表单中所有option被选中的元素内容
	$("#divC").show(3000);
	$("#Span2").html("选中项是：" + $("select option:selected").text());
})
</script>
```
##表单选择器
    
表单选择器语法：
    `:input`            获取所有input，textear，select
    `:text`             获取所有text
    `:password`         获取所有password
    `:radio`            获取所有radio
    `:checkbox`         获取所有checkbox
    `:submit`           获取所有submit
    `:image`            获取所有图像域
    `:reset`            获取所有reset
    `:button`           获取所有button
    `:file`             获取所有file
    
例：
```javascript
<script type="text/javascript">
	$(function(){		//增加所选元素为可用的元素类别
		$("#form1 :text").show(3000);
	})
</script>
```
    
    
#拓展
##JS获取节点的兄弟，父级，子级元素   .

先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。

JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素

```html
    <div id="test">
    
    	<div></div>
    
    	<div></div>
    
    </div>
```

原生的JS获取ID为test的元素下的子元素。可以用：

`var a = docuemnt.getElementById("test").getElementsByTagName("div");`  这样是没有问题的
此时a.length=2；但是如果我们换另一种方法
`var b =document.getElementById("test").childNodes;`
此时b.length 在IE浏览器中没问题，其依旧等于2，但是在FF浏览器中则会使4，是因为FF把换行也当做一个元素了。
所以，在此，我们就要做处理了，需遍历这些元素，把元素类型为空格而且是文本都删除。

```javascript
function del_ff(elem) {
	var elem_child = elem.childNodes;
	for (var i = 0; i < elem_child.length; i++) {
		if (elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue)) {
			elem.removeChild(elem_child);
		}
	}
}
```

上述函数遍历子元素，当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。
nodeNames可以得到一个节点的节点类型，/\s/是非空字符在JS里的正则表达式。前面加！,则表示是空字符
test() 方法用于检测一个字符串是否匹配某个模式.语法是： RegExpObject.test(string)
如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
nodeValue表示得到这个节点里的值。
removeChild则是删除元素的子元素。
之后，在调用子，父，兄，这些属性之前，调用上面的函数把空格清理一下就可以了

```html
<div id="test">

</div>

function dom() {

var s= document.getElementById("test");

del_ff(s);    //清理空格

var chils= s.childNodes;  //得到s的全部子节点

var par=s.parentNode;   //得到s的父节点

var ns=s.nextSbiling;   //获得s的下一个兄弟节点

var ps=s.previousSbiling;  //得到s的上一个兄弟节点

var fc=s.firstChild;   //获得s的第一个子节点

var lc=s.lastChild;   //获得s的最后一个子节点

}

</script>
```

下面介绍JQUERY的父，子，兄弟节点查找方法

`jQuery.parent(expr)`  找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")

`jQuery.parents(expr)`,类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素

`jQuery.children(expr)`.返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

`jQuery.contents()`,返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个jQuery对象返回，children()则只会返回节点

`jQuery.prev()`，返回上一个兄弟节点，不是所有的兄弟节点

`jQuery.prevAll()`，返回所有之前的兄弟节点

`jQuery.next()`,返回下一个兄弟节点，不是所有的兄弟节点

`jQuery.nextAll()`，返回所有之后的兄弟节点

`jQuery.siblings()`,返回兄弟姐妹节点，不分前后

`jQuery.find(expr)`,跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如$("p").find("span"),是从<p>元素开始找<span>,等同于$("p span")

`混合选择：jQuery不仅可以自由的选择某种方式来选择指定元素，也可以用多种方式混用来选择指定元素元素：`

例：
```html
<select>
	<option selected disabled value='1'>a</option>
	<option value='1'>aa</option>
	<option value='3'>c</option>
	<option value='4'>d</option>
</select>
```
```javascript
//混合选1：
var del_eles = $("select").find("option:selected:first");

//混合选2：
var recover_option = $("select").find("option[value = '1']:contains('a')");
recover_option.each(function(){
$(this).removeAttr("disabled");
})
```