jQuery选择器和JS选择器

jQuery选择器：

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

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

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

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

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

*{
    width:%;
    height:%;
}
           

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

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

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

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

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

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

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

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

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个元素

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的元素

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

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

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

B： 内容过滤

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

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

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

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

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

C: 可见性过滤

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

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

2、 :visible选取所有可见

D: 属性过滤

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

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的元素

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

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

E: 表单过滤

1、 :input 选取所有input元素

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

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

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

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

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

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

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

6、 :button 选取所有的按钮

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

8、 :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=,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选择器）