jQuery选择器介绍

jQuery选择器说明

jQuery最核心的组成部分就是选择器引擎，它完全继承css的风格，可以对DOM元素的标签名，属性名，状态等进行快速准确的选择，而且不必担心浏览器的兼容性，写法更加简洁。
优点：相对于直接使用Javascript获取页面元素和处理业务逻辑相对，使用jQuery选择器进行操作代码更简单且拥有完善的代码检测机制。

基本选择器

主要有：ID选择器，类选择器，标签选择器，并集选择器和通配符选择器。

选择器	语法	功能	参考示例
ID选择器	#id	根据给定的ID匹配一个元素	$('#divID')
类选择器	.class	根据给定的类名匹配所有的元素	$(“.box”)
标签选择器	element	根据给定的元素名匹配所有的元素	$(“div”)
通配符选择器	*	匹配所有的元素	$(“*”)
并集选择器	#id,.class	将每个选择器匹配到的元素合并在一起后返回	$(“#divID,.box”)

我是id为demo的div标签
我是class为box1的div标签
我是class为box1的div标签
我是class为box2的div标签
我是class为box2的div标签
我是p标签

层级选择器

层次选择器通过 DOM 元素间的层次关系获取元素，其主要的层次关系包括后代、直接后代、下一个相邻兄弟和后面所有兄弟元素的关系，通过其中某类关系可以方便快捷地定位元素。

选择器	语法	功能	参考示例
后代选择器	parent child	根据祖先元素匹配所有的后代元素	$(“div p”)
直接后代选择器	parent > child	根据父元素匹配所有的子元素	$(“div > .box”)
下一个相邻兄弟	prev + next	匹配所有紧接在prev元素后的相邻元素	$(“#demoID + div”)
后面所有兄弟	prev ~ siblings	匹配 prev 元素之后的所有兄弟元素	$(“#demoID ~ div”)

补充：next（） == 下一个相邻兄弟 ||nextAll() == 后面所有的兄弟

父子选择器相关方法
parent（）获取当前标签的父节点；
parents（）获取当前标签的祖先节点；
parentsUntil（）获取当前标签的祖先节点直到···；
children（）获取当前标签的子节点；
sibling（）获取当前标签的兄弟节点。

    

        
demo
        
demo
        
demo
        
demo
        
demo
    
    我是span

点击我

2. 内容筛选选择器

选择器语法	功能
:contains(text)	获取包含给定文本的元素
:parent	获取含有子元素或者文本的元素
:empty	获取所有不包含子元素或文本的空元素
:has(selector)	获取含有选择器所匹配的元素

天王盖地虎
我是span
宝塔镇河妖

3. 属性筛选选择器
   根据元素的某个属性获取元素，在使用的时候我们可以匹配单个属性也可以进行多个属性的匹配。

选择器语法	功能
[属性名]	获取包含给定属性的元素
[属性名='value']	获取包含给定属性且等于指定值的元素
[属性名！='value']	获取包含给定属性且不等于指定值的元素
[属性名^='value']	获取包含给定属性且以指定字符开头的元素
[属性名$='value']	获取包含给定属性且以指定字符结尾的元素
[属性名*='value']	获取包含给定属性且包含指定字符的元素
[属性名1][属性名2]	获取满足多个条件的复合属性的元素

    www.baidu.com

    www.jd.com

    www.taobao.com

    www.12306.cn

    www.12306.cn

    www.12306.cn

    我什么也不是

设置所有拥有href属性的a标签

设置harf属性值为www.baidu.com的a标签

设置harf属性值不为www.baidu.com的a标签

设置harf属性值以www开头的a标签

设置harf属性值以com结尾的a标签

设置harf属性值包含123的a标签

设置harf属性值中以www开头且title中包含demo的a标签

4. 子元素筛选选择器
   通过子元素筛选选择器可以方便轻松的获取父元素中制定的某个元素

选择器语法	功能
:first-child	获取每个父元素下的第一个子元素
:last-child	获取每个父元素下的最后一个子元素
:only-child	获取每个父元素下的仅有一个子元素
:nth-child(eq-index)	获取每个父元素下特定位置的元素索引从1开始

5. 可见性筛选选择器
   根据元素是否可见的特征获取元素，分为可见和不可见两种。

选择器语法	功能
:visible	获取所有的可见元素
:hidden	获取所有不可见元素,或者type为hidden的元素

6. 表单对象属性筛选选择器
   通过表单中某对象的属性特征获取该类元素，主要有enabled、disabled、checked（选中）elected等属性。

选择器语法	功能
:enabled	获取表单中所有属性为可用的元素
:disabled	获取表单中所有属性为不可用的元素
:checked	获取表单中所有被选中的元素
:selected	获取表单中所有被选中option的元素

表单选择器

表单在前端开发中是非常重要的标签，在显示和提交数据的数据经常需要用到，在 jQuery 框架中引入了表单选择器，该选择器专为表单量身打造，通过表单选择器可以在页面中快速定位某表单对象。

选择器语法	功能
:file	获取所有文件域
:image	获取所有的图像域
:text	获取所有的单行文本框
:reset	获取所有重置按钮
:radio	获取所有单选框按钮
:button	获取所有按钮
:submit	获取所有提交按钮
:checkbox	获取所有的复选框
:password	获取所有的密码框
:input	获取所有的input、textarea、select标签

jQuery选择器知识结构