选择器主要使用的是JavaScript选择器和jQuery选择器，现在为了系统的记录一下所有的选择器，包括querySelector/querySeletorAll我比较少用的。
JavaScript选择器
/*javaScript选择器*/
var object = document. getElementById("id名"); //返回一个id名为"id名"的对象
/*
* 注意：getElementById()在IE6/7下有可能执行的结果是不同的，
* 在ie6/7中，getElementById(idvalue)同时查询id、name两个值，
* 返回的结果是第一个name或者id等于idvalue的对象，并不是仅按照id来查找的
* */
/*解决以上问题的方法：做个判断名字是id的才返回，当然不用兼容ie6、7的就不用管啦*/
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];
}
}
}
/*
* name属性为name值的元素，因为name属性值不是唯一的，
* 所以查询到的结果有可能返回的是一个数组，而不是一个元素。
* 注意：getElementsByName(name)在旧版浏览器中不支持除input之外的标签
* */
var object = document.getElementsByName("class名");
/*返回所有标签名为"标签名"的元素*/
var object = document.getElementsByTagName("标签名");
/*
* 返回所有class名为"class名"的元素
* getElementsByClassName()在ie8及以下会有问题，以下链接可以解决这问题
* https://www.jianshu.com/p/bc1e2c0faa92
* */
var object = document. getElementsByClassName ("class名");
querySelector/querySeletorAll选择器
/*
* 这里的选择器没有规定的类型，只要是选择器都可以
* 兼容IE6、IE7不支持,这里有我写的兼容的方法：https://www.jianshu.com/p/872d69047dda
* */
var object = document.querySelector("选择器");//返回查找到的第一个
var object = document.querySelectorAll("选择器");//返回查找到的所有
jQuery选择器
很基本的东西，但是有好多奇怪的选择器都没有用过，发现有时使用的话代码会简洁很多，提高速度，所以做个总结，以便于以后使用。
*基本选择器
$("#id名") //选取id属性为所写id名的一个元素
$(".test") //选取文档中所有的class属性为“test”的元素，可能是一个可能是多个
$(“*”) //选取所有元素
$(“标签”) //选取文档中所有匹配选择器的元素
$(“selector1，selector2，selector3”) //选取文档中所有选择器匹配的元素,逗号分隔
- 层级选择器：根据元素之间的层次关系来获取特定的元素
$(“标签1 标签2”) //获取所有标签1中的标签2后代元素
$(“标签1>标签2”) // 获取所有标签1中的标签2子元素
$(“标签1+标签2”) //获取紧跟标签1之后的标签2元素，和 $(“标签1”).next(“标签2”) 的效果一样
$(“标签1~标签2”) 获取紧跟标签1之后的所有标签2元素，和 $(“标签1”).nextAll(“标签2”) 的效果一样
- 过滤选择器：过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、表单过滤
$("指定元素:first") // 选取第一个指定元素
$("指定元素:last") // 选取最后一个指定元素
A: 基本过滤
$("p:first")// 选取第一个P元素
$("p:last")// 选取最后一个P元素
$("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，则不匹配
$("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)的区别
$("ul li:only-child") //选取ul中只有一个li的元素
$("ul li:only-of-type") //选取ul中只有一个li子元素的元素而且子li元素没有兄弟元素
$("p:eq(3)") // 选取索引为3的P元素
$("p:even") //选取索引为偶数的P元素
$("p:odd") //选取索引为奇数的P元素
$("p:gt(10)") //选取索引大于10 的P元素
$("p:lt(10)") //选取索引小于10 的P元素
$("p:not(.test)") //选取class属性不是“test”的P元素
$(":header") //选择所有标题元素（h1 - h6）
$(":focus") //选取当前获取焦点的元素
$("div:animated") //选取当前正在执行动画的div元素
B： 内容过滤
$("div:contains('定文本')") //选取所有中包含“定文本”的div元素
$("td:empty") //选取所有不包含子元素或者文本的
$("div:parent") //选取文档中所有有子元素或者文本的div元素
$(":root") //选取整个文档的根元素，在HTML中，文档的根元素，永远是html
$("div:has(p)") //选取所有含有P元素的div
C: 可见性过滤
$("input:hidden") //选取所有type为hidden的元素
$("div:hidden") //选取所有隐藏的div
$("div:visible") //选取所有可见的div
D: 属性过滤
$("div[id]") //选取所有包含id属性的div
$("div[class='test']") //选取所有class属性值为test的div元素
$("div[id!='test']") //选取所有id属性值不为test的div元素
$("div[titile*='text']") //选取所有title中包含有“text”的div
$("input[id][name='name']") //选取有ID属性并且name属性值为“name”的input元素
E: 表单过滤
$(":input") //选取所有input元素（包括input、textarea、select、button）
$(":text") //选取所有的单行文本框
$("password") //选取所有的密码框
$(":radio") //选取所有的单选框
$(":checkbox") //选取所有的复选框
$(":image") //选取所有的图像按钮
$(":reset") //选取所有的重置按钮
$(":submit") ///选取所有的提交按钮
$(":button") //选取所有的按钮
$(":file") //选取所有的上传控件
$(":hidden") //选取所有的不可见元素
（原生的JS选择速度相比较之下会快于同等条件下的JQuery选择器）
感谢： shadow_yn
写完发现这个写的很好，留着以后看：http://blog.csdn.net/zhejingyuan/article/details/24009805
网友评论