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选择器）

jQuery选择器和JS选择器相关推荐

java与jquery的选择器区别_java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章 JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScr ...
day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
day43 JavaWen阶段——JQuery 基础（JQuery相关开发文档，JQuery对象和JS对象区别与转换，JQuery选择器，JQuery中DOM操作，案列【QQ表情选择】【左右移动】）
今日内容 1. JQuery 基础: 概念快速入门 JQuery对象和JS对象区别与转换选择器 DOM操作案例今日源码: 链接:https://pan.baidu.com/s/1KiG0c_V ...
jquery选择器大于等于_从零开始学前端 30. JS选择器
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正由于微信公众号对英文的排版十分困难以获得更好的阅读体验类似于 CSS选择器,如果我们想要使用 JS 来对 HTML 页面中的元素实现一对一,一对多或者 ...
跟我学jQuery(三) 无所不能的选择器1
跟我学jQuery教程目录: 跟我学jQuery(一) 前言跟我学jQuery(二) 初识jQuery 跟我学jQuery(三) 无所不能的选择器1 跟我学jQuery(四) ...
jQuery的基本语法,选择器,DOM操作
什么是JS框架 JS框架也是使用JavaScript语言编写的,框架本身提供了大量的新的方法,可以简化JS代码,提高开发效率. 说白了就是定义好的一个 JS 文件,内部封装了很多功能,可以大大简化我们 ...
jQuery基本语法和选择器
JQuery 一.JQuery基础语法 1.概念 JQuery是javaScript的一个库,Jquery基于javascript开发出来.目的就是为了简化javascript的开发. 宗旨:&quo ...
JQuery中的层级选择器
层级选择器文档中的所有的节点之间都是有这样或者那样的关系.我们可以把节点之间的关系可以用传统的家族关系来描述,可以把文档树当作一个家谱,那么节点与节点直接就会存在父子,兄弟,祖孙的关系了. 选择器中 ...

jQuery选择器和JS选择器

jQuery选择器和JS选择器相关推荐

最新文章

热门文章