jQuery 学习一：选择器

“$”是选择器不可缺少的部分，在jQuery库中，$就是jQuery的一个简写形式，比如$("#foo")和jQuery("#foo")是等价的，
$.ajax和jQuery.ajax是等价的。如果没有特别说明，可以把程序中的$符号都理解为jQuery的简写形式

一、基本选择器
基本选择器包括5种选择器：#id、element、.class、*和selectorl,selector2.selectorN
1．#id选择器

#id选择器根据给定的ID匹配一个元素。如果选择器中包含特殊字符，可以用两个斜杠转义，其返回值为Array<Element>。

 $("#default").html($("#divtest").html());//创建两个长得一样的div

2．element选择器

element选择器是一个用于搜索的元素。指向DOM节点的标签名。其返回值为Array<Element(s)>。

$("button").attr("disabled","false");

3．class选择器

.class选择器根据给定的类匹配元素，是一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到，其返回值为Array<Element(s)>。

4．*选择器

*选择器多用于结合上下文来搜索，匹配所有元素的选择器。其返回值为Array<Element(s)>。

$("form *").attr("disabled", "true");//将<form>元素包含下的全部表单型元素都设为不可用。

5．selector1,selector2,selectorN选择器

这类选择器选择器即将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内，其返回值为：
Array<Element(s)>。在下例中通过对选择的项进行CSS操作来使读者清晰地了解selector1,selector2,selectorN选择器的作用。

$("#myELement")    选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 
$("div")           选择所有的div标签元素，返回div元素数组 
$(".myClass")      选择使用myClass类的css的所有元素 
$("*")             选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass") 

二、层级选择器
层级选择器包括5种形式：ancestor、descendant、parent > child、prev + next和prev ~ siblings。
1．$(“ance desc”)选择器

其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器   

$("div label").css("background-color","blue");//获取<div>元素下的全部<label>元素，并改变它们的背景色。

2．$(“parent > child”)选择器

parent>child选择器代表在给定的父元素下匹配所有的子元素。与上一节介绍的ance desc选择器相比，parent > child选择器的范围要小些，它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈

$("div>label").css("border", "solid 5px red");//使用选择器获取<div>元素中的全部子<label>元素

3．prev+next选择器

这类选择器的作用是匹配所有紧接在prev元素后的next元素。它们之间的“+”表示一种上下的层次关系，也就是说，“prev”元素最紧邻的下一个！元素由“next”选择器返回的并且只返回唯的一个元素。

 $("p+label").css("background-color","red");//<p>元素最近邻的下一个元素也可以写成$("p+")

4．prev ~ siblings选择器

prev ~ siblings选择器代表匹配prev元素之后的所有siblings元素。siblings代表一个选择器，并且它作为第一个选择器的同辈。与上面介绍的prev + next层次选择器相同prev ~ siblings选择器也是查找prev 元素之后的相邻元素，但前者只获取第一个相邻的元素，而后者则获取prev 元素后面全部相邻！的元素

 $("p~").css("border", "solid 1px red");
            $("p~label").html("我们都是p先生的粉丝");

//层叠选择器： 
$("form input")         选择所有的form元素中的input元素 
$("#main > *")          选择id值为main的所有的子元素 
$("label + input")     选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 
$("#prev ~ div")       同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 
$("A B") 查找A元素下面的所有子节点，包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点 

三、过滤选择器
过滤选择器主要通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号开头。

1．基本过滤选择器

基本过滤选择器是过滤选择器中最常用的一种，其主要包括以下几种形式，在此做详细说明：
（1）:first/:last选择器。
（2）:not选择器。
（3）:even和:odd选择器。偶、基
（4）:eq、:gt、:lt、选择器。等于、大于、小于
（5）:header选择器。标题元素
（6）:animated选择器。动画元素

基本过滤选择器： 
$("tr:first")               //选择所有tr元素的第一个 
$("tr:last")                //选择所有tr元素的最后一个 
$("input:not(:checked)")   //过滤掉：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")       //选择标题元素 比如<h1>-<h6>
$("div:animated")   //描述: 选择所有正在执行动画效果的元素.

2.内容过滤选择器

内容过滤选择器主要包括:contains、:empty、:has、:parent 4种过滤器，这部分过滤器是对上面介绍基本过滤选择器的一个补充，对于页面选取、设置元素显示等方面发挥着重要的作用。下面将对各选择器进行详细的介绍。
（1）:contains()选择器。  包含文本**的选择器  
（2）:empty选择器。   选取空的元素。指的是不包含子元素或文本的元素。
（3）:has(selector)选择器。  选择至少包含一个匹配指定选择器的元素的元素
（4）:parent选择器。选择有子节点(包含文本)的元素

//内容过滤选择器：  
$("div:contains('John')") //选择所有div中含有John文本的元素 
$("td:empty")           //选择所有的为空（也不包括文本节点）的td元素的数组 
$("li:has('label')").css("background-color", "blue");      //获取选择器中包含指定元素名称的全部元素
$("td:parent")         //选择所有的以td为父节点的元素数组 

3.可视化过滤选择器：

用来匹配所有可见元素和不可见元素

$("div:hidden")       //选择所有的被hidden的div元素 
var $strHTML = $("input:hidden").val();
        $("div").html($strHTML);
$("div:visible")      // 选择所有的可视化的div元素 
 $("li:visible").css("background-color","blue");

4.属性过滤选择器

用于匹配包含给定属性的元素，当然也可以匹配不包含此属性的元素等。

$("div[id]")              //选择所有含有id属性的div元素 
$("input[name='newsletter']")    //选择所有的name属性等于'newsletter'的input元素 
$("li[title='水果']").css("background-color", "green"); 
$("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结尾的元素  

5．子元素过滤选择器

html由层层嵌套在一起的标签组成，由于一些标签需要进行单独处理，如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题。
jQuery提供了子元素过滤选择器解决了这个问题。它包括4个选择器，具体内容将在下面详细讲解。
（1）:nth-child选择器。
（2）:first-child、:last-child选择器（两种）。
（3）:only-child选择器。

//子元素过滤选择器： 
$("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中只有唯一一个子节点的所有子节点的数组

6.表单过滤选择器

$(":enabled")             //选择所有的可操作的表单元素 
$(":disabled")            //选择所有的不可操作的表单元素 
$(":checked")            //选择所有的被checked的表单元素 
$("select option:selected") //选择所有的select 的子元素中被selected的元素 

四、表单元素选择器：

$(":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元素或表单的隐藏域