jQuery选择器

jQuery选择器基于元素的Id、类型、属性、属性值等HTML元素。它基于已经存在css选择器，除此之外还有一些自定义的选择器。
jQuery中所有的选择器都已美元符号（$）开头。

一、基本选择器
通过元素Id、class、和标签名等来查找DOM元素。

格式	概述
*	匹配所有的元素（集合元素） $(" * ")
#id	根据给定id匹配一个元素（单个元素）$("#p1") 选取id为p1的元素
element	根据给定的元素匹配元素（集合元素）$("p")选取所有p标签
.class	根据给定的类名匹配元素（集合元素）$(".p1")选取为所有class为p1的元素
selector1,selector2,.selectorN	将每个选择器匹配到的元素合并到一起返回（集合元素）$("div ,span ,.p1") 选取所有div、span标签和拥有class为p1的标签的一组元素

常用方法和单词

方法	描述
hide()	隐藏元素
show()	显示元素
css()	设置样式
val()	获取值/设置值
this	当前对象
text()	设置文本内容 类似于innerText()
html()	类似于inner HTML()

用法：

$(选择器).hide();  // 隐藏元素
$(选择器).show();  // 显示元素
$(选择器).css("color","#39C675");
$(this).text("万能选择器");
$(选择器).val("admin");
$(选择器).val(" ");

层次选择器
例如后代元素、子元素、相邻元素和同辈元素等。

1、  $("parent    child") 选取ancestor元素里的所有后代元素
     例：$("div span") 返回div里所有 span元素
     $(".container p")返回class为container的所有p元素。
2、	$("parent>child") 选取parent元素下的child子元素
	例:$("div>span")选取<div>元素下的元素名是<span>的子元素。
	$("#main> *")选择id值为main的所有子元素。
3、   $("prev+next")选取紧接在prev元素后的next元素
	例:$(".one+div")选取class为one的下一个<div>同辈元素。
	$("label + input")选择所有label元素的下一个input元素。
 4、	$("prev~siblings")选取prev元素之后的所有siblings元素
     例:$("#two~div")选取id为two的元素后面的所有<div>同辈元素。
     $("#prev~#div1 ")选择id为prev的元素后面所有id 为div1的div同辈元素。

注意 $(“div span”) 和 $(“div>span”)的区别；
$(“div span”)会选取div标签下所有的span标签
$(“div>span”)只会选取div直属的span标签

过滤选择器

过滤选择器	描述
:first	示例：$(“p:first”) 选取第一个p标签
:last	示例：$(“p:last”) 选取最后一个p标签
:even	示例：$(“p:even”) 所有偶数p标签
:odd	示例：$(“p:odd”) 所有奇数p标签
:eq(index)	示例：$(“ul li:eq(3)”) 列表中第四个元素(index从0开始)
:gt	示例:$(“ul li:gt(3)”) 列出 index 大于 3 的元素
:hidden	示例：$(“p:hidden”) 隐藏所有的p标签
:visible	示例：$(“p:visible”) 显示可见p标签
[attribute]	示例:$([href]) 所有带有href属性的元素
[attribute=value]	示例:$([href=’#’]) 所有 href 属性的值等于 “#” 的元素
[attribute!=value]	示例:$([href!=’#’]) 除了 href 属性的值等于 “#” 的元素

注意：:even选择器是从0开始
例：

// 设置第一个p标签中的字体为红色

$(“p:first”).css(“color”,“red”);

可视化过滤选择器

选择器	描述
$(“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") 所有 元素
:text $(":text") 所有 type=“text” 的 元素
:password $(":password") 所有 type=“password” 的 元素
:radio $(":radio") 所有 type=“radio” 的 元素
:checkbox $(":checkbox") 所有 type=“checkbox” 的 元素
:submit $(":submit") 所有 type=“submit” 的 元素
:reset $(":reset") 所有 type=“reset” 的 元素
:button $(":button") 所有 type=“button” 的 元素
:image $(":image") 所有 type=“image” 的 元素
:file $(":file") 所有 type=“file” 的 元素

jQuery元素选择方法
next（）方法来代替$（＇prev + next＇）选择器， nextAll（）方法来代替$（＇prev+next＇）选择器，nextAll（）方法来代替（＇prev～siblings’）选择。
siblings()方法来补充nextAll()方法的不足
选择方法:

1.next() 等价于$(“prev + next”)。 2.nextAll() 等价于$(“prev+next”)。2.nextAll()等价于(“prev～siblings”)
3.siblings() 类似$(“prev～siblings”)，但无关前后，选择所有同辈节点
4.children() 获取匹配元素的所有子元素
5.parent() 获取匹配元素的父元素
6.parents() 获取匹配元素的所有父元素