jQuery选择器和JS选择器

jQuery选择器：
jQuery选择器的写法和CSS选择器的写法非常相似，在学习之前了解下CSS选择器，对掌握jQuery选择器是非常有帮助的

(一) 基本选择器：主要包含id选择器、class选择器、*选择器、标签选择器以及复合选择器

a: Id选择器：$(“#ID”) 选取id属性为“ID”的元素

$("#text")  //选取id属性为“text”的元素

b:class选择器：$(“.class”) 选取所有class属性为“class”的元素（id是单一的，而class则可以多次使用同一命名）

$(".test")  //选取文档中所有的class属性为“test”的元素

c: *选择器：$(“*”) 选取所有元素

*{
    width:100%;
    height:100%;
}

d: 标签选择器：$(“标签”) 选取文档中所有匹配选择器的元素

$("p")  //选取文档中所有的P元素

e: 复合选择器：$(“selector1，selector2，selector3”) 选取文档中所有选择器匹配的元素

$("div,p,span,.test")// 选取文档中所有的div、p、span以及class属性为“test”的元素

(二) 层级选择器：根据元素之间的层次关系来获取特定的元素

a: $(“标签1 标签2”) 获取所有标签1中的标签2后代元素

$("div span") //获取div下所有的span元素

b: $(“标签1>标签2”) 获取所有标签1中的标签2子元素

$("div>span") //获取div下所有的span子元素

c: $(“标签1+标签2”) 获取紧跟标签1之后的标签2元素，和$(“标签1”).next(“标签2”)的效果一样

$("div+p") //获取紧跟div之后的P元素

d:$(“标签1~标签2”) 获取紧跟标签1之后的所有标签2元素，和$(“标签1”).nextAll(“标签2”)的效果一样

$("div~p") //获取div之后的所有兄弟节点P元素

(三) 过滤选择器：过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、表单过滤

A: 基本过滤

1、 :first/:last 选取第一个/最后一个元素

$("p:first")// 选取第一个P元素
$("p:last")// 选取最后一个P元素

2、 :first-child/:last-child/:nth-child/:nth-last-child 选取其父元素下第一个/最后一个/第n（>=1）个/倒数第n个匹配的子元素

$("ul li:first-child") //选取每一个ul中的第一个子元素，如果第一个不是li，则不匹配，这是和:first的区别

$("ul li:last-child") //选取每一个ul中的最后一个子元素，如果最后一个不是li，则不匹配，这是和:last的区别

$("ul li:nth-child(n)") //选取每一个ul中的第n个子元素，如果第n个不是li，则不匹配

$("ul li:nth-last-child(n)") //选取每一个ul中的倒数第n个子元素，如果倒数第n个不是li，则不匹配

3、 :first-of-type/:last-of-type/:nth-of-type/:nth-last-of-child选取其父元素下第一个/最后一个/第n（>=1）个/倒数第n个匹配的子元素

$("ul li:first-of-type") //选取每一个ul中的第一个li子元素,这是和:firs-child的区别

$("ul li:last-of-type") //选取每一个ul中的最后一个li子元素这是和:last-child的区别

$("ul li:nth-of-type(n)") //选取每一个ul中的第n个li子元素，这是和:nth-child(n)的区别

$("ul li:nth-last-of-type(n)") //选取每一个ul中的倒数第n个li子元素，这是和:nth-last-child(n)的区别

4、:only-child/:only-of-type 选取父元素中唯一的子元素/选取父元素中唯一的子元素而且子元素没有兄弟元素

$("ul li:only-child");  //选取ul中只有一个li的元素

$("ul li:only-of-type"); //选取ul中只有一个li子元素的元素

5、 :eq(n) 选取第n个元素

$("p:eq(3)")// 选取索引为3的P元素

6、:even/:odd 选取索引为偶数/奇数的元素

$("p:even") //选取索引为偶数的P元素
$("p:odd") //选取索引为奇数的P元素

7、 :gt(n)/:lt(n) 选取索引大于/小于n的元素

$("p:gt(10)") //选取索引大于10 的P元素
$("p:lt(10)") //选取索引小于10 的P元素

8、 :not(selector) 选取不匹配selector的元素

$("p:not(.test)") //选取class属性不是“test”的P元素

9、 :header 选取文档中所有的标题元素

$(":header") //选取文档中所有的标题元素

10、 :focus 选取当前获取焦点的元素

$(":focus")  //选取当前获取焦点的元素

11、 :animated 选取所有正在执行动画效果的元素

$("div:animated")  //选取当前正在执行动画的div元素

B： 内容过滤

1、 :contains(text) 选取包含给定文本的元素

$("div:contains('jinlin')")  //选取所有中包含“jinlin”的div元素

2、 :empty 选取不包含任何子元素或者文本的空元素

$("td:empty")  //选取所有不包含子元素或者文本的

3、 :parent 选取含有子元素或者文本的元素

$("div:parent")  //选取文档中所有有子元素或者文本的div元素

4、 :root 选取该文档的根元素，在HTML中，文档的根元素，永远是html

$(":root") //选取整个文档的根元素

5、:has(selector) //选取所有含有选择器所匹配的元素的元素

$("div:has(p)")  //选取所有含有P元素的div

C: 可见性过滤

1、 :hidden 选取所有不可见或者type为hidden的元素

$("input:hidden")  //选取所有type为hidden的元素
$("div:hidden")  //选取所有隐藏的div

2、 :visible选取所有可见

$("div:visible")  //选取所有可见的div

D: 属性过滤

1、 [attribute] 选取包含给定属性的元素

$("div[id]")  //选取所有包含id属性的div

2、 [attribute=value]/ [attribute!=value] 选取包含给定属性的值为/不为value的元素

$("div[class='test']")  //选取所有class属性值为test的div元素
$("div[id!='test']")  //选取所有id属性值不为test的div元素

3、 [attribute^=value]/[attribute$=value] 选取以value为开头/结尾的元素

$("div[title^='text']")  //选取title属性以text开头的div元素
$("div[title$='text']")  //选取title属性以text结尾的div元素

4、 [attribute*=value] 选取属性中包含value的元素

$("div[titile*='text']")  //选取所有title中包含有“text”的div

5、 [attribute=value] [attribute=value] 选取同时满足多个属性选择器条件的元素

$("input[id][name='name']")  //选取有ID属性并且name属性值为“name”的input元素

E: 表单过滤

1、 :input 选取所有input元素

$(":input")  //选取所有input元素（包括input、textarea、select、button）

2、 :text/:password 选取所有的单行文本框/密码框

$(":text")  //选取所有的单行文本框
$("password")   //选取所有的密码框

3、 :radio/:checkbox 选取所有的单选框/复选框

$(":radio")  //选取所有的单选框
$(":checkbox")  //选取所有的复选框

4、:image 选取所有的图像按钮

$(":image")  //选取所有的图像按钮

5、 :reset/:submit 选取所有的重置/提交按钮

$(":reset")  //选取所有的重置按钮
$(":submit")  ///选取所有的提交按钮

6、 :button 选取所有的按钮

$(":button")  //选取所有的按钮

7、 :file 选取所有的上传控件

$(":file")  //选取所有的上传控件

8、 :hidden 选取所有的不可见元素

$(":hidden")  //选取所有的不可见元素

JS选择器

JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()

A： getElementById(ID): 返回对指定ID的第一个对象的引用，如果在文档中查找一个特定的元素，最有效的方法是getElementById()，语法格式为：

oElement = document. getElementById (ID);

var x=document. getElementById("text")  //在文档中查找到id属性值为text的元素，x得到的是一个对象[object]，不是一个具体的值

但是getElementById()在IE6/7下有可能执行的结果是不同的，在ie6/7中，getElementById(idvalue)同时查询id、name两个值，返回的结果是第一个name或者id等于idvalue的对象，并不是仅按照id来查找的

input type="text" name="test1" id="test" value="测试1" />
<input type="text" name="test2" id="test1"  value="测试2" />
<script type="text/javascript">
    var $test = document.getElementById("test1").value;
    alert($test);  //在ie6/7下输出的结果是“测试1”
</script>

可以通过以下方法确定确定通过id获取到

var getElementById = function(ids){
    var idvalue = document.getElementById(ids);
        if(idvalue.id === ids){
            return idvalue;
        }else{
            var node = document.all[id];
            for(var i=0,len=node.length;i<len;i++){
                if(node[i].id===id)
                    return node[i];
            }
        }
}

B: getElementsByName(name): 返回文档中name属性为name值的元素，因为name属性值不是唯一的，所以查询到的结果有可能返回的是一个数组，而不是一个元素。语法格式为:

oElement = document. getElementsByName (name);

<input name="myInput" type="text" size="20" />
<input name="myInput" type="text" size="20" />
<input name="myInput" type="text" size="20" />
<script type="text/javascript">
    var x=document.getElementsByName("myInput");
    alert(x.length); //输入的结果为3
</script>

getElementsByName(name)在旧版浏览器中不支持除input之外的标签

C: getElementsByTagName(tagname): 返回文档中指定标签的元素，语法格式为：

oElement = document. getElementsByTagName (tagname);

<input name="myInput" type="text" size="20" />
<input name="myInput" type="text" size="20" />
<input name="myInput" type="text" size="20" />
<script type="text/javascript">
    var x=document.getElementsByTagName("input");
    alert(x.length); //输入的结果为3
</script>

D: getElementsByClassName():返回文档中所有指定类名的元素，语法格式为:

oElement = document. getElementsByClassName (classname);

<div class="example">第一个</div>
<div class="example color">第二个</div>
<script type="text/javascript">
    var x=document.getElementsByClassName("example");
    alert(x.length); //输入的结果为2
</script>

E: querySelector():返回文档中匹配指定css选择器的第一个元素，语法格式为:

oElement = document. querySelector(css selector);

document.querySelector(“p”)  //返回文档中第一个P元素

F: querySelectorAll():返回文档中匹配指定css选择器的第一个元素，语法格式为:

oElement = document. querySelectorAll(css selector);
document.querySelectorAll(".test")//返回文档中所有class值为test元素;

（原生的JS选择速度相比较之下会快于同等条件下的JQuery选择器）