jQuery选择器

jquery文件使用的三个阶段

1. 引入jquery文件

2. 写入jquery入口函数

3. 根据实际发生场景，编写事件和事件内容。

jquery与js的入口函数对比：

1. js的入口函数要等到页面中所有的资源（包括图片、文件）加载完成后才开始执行。

2. jq的入口函数只会等待文档树加载完成就开始执行，并不会等待文件、图片的加载。

jQuery对象和DOM对象

1. DOM对象转为jQuery对象：

对于以知的DOM对象，只需要用$( )把DOM对象包装起来，就可以获得一个jQuery对象了。

2、jQuery对象转为DOM对象：

两种转换方式将jQuery对象转换为DOM对象：【index】和 .get(index)。

基本选择器

名称	用法	描述
ID 选择器	$("#id");	获取指定 ID 的元素
类选择器	$(“.class");	获取同一类 class 的元素
标签选择器	$(div);	获取同一类标签的所有元素
并集选择器	$("div,p,li");	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass");	获取 class 为 redClass 的 div 元素

层次选择器

名称	用法	描述
子代选择器	$(“ul>li');	使用 >号，获取儿子层级的元素。注意，并不会获取孙子层级的元素
后代选择器	$(“ul li");	使用空格，代表后代选择器，获取 ul 下的所有 i 元素，包括孙子元素。

基本属性选择器

名称	用法	描述
[attribute]	$(input[checked]).attr('checked',false);	匹配包含给定属性的元素。常用于单选或复选的 checked.
[attribute=value]	$(input[name=“username”]).val(“”);	匹配给定的属性是某个特定值的元素。常用于选择指定的input 标签。
[attribute!=value]	$('div[name="box].html();	匹配给定的属性是不包含某个特定值的元素
[attribute^=value]	$(div[class^="b"]).css("background","red");	匹配给定的属性是以某些值开始的元素
[attribute*=value]	$(div[class* ="b"]).css("background","red");	匹配给定的属性是以包含某些值的元素

操作标签的属性

名称	用法	描述
标签属性方法	attr(name) / attr(name, value)	读/写非布尔值的标签属性。
标签属性方法	prop(name)/ prop(name, value)	读/写布尔值的标签属性。
删除属性方法	removeAttr(name)/removeProp(name)	删除指定名字的属性。
自定义属性	data()	读写标签的附加数据(data-* 属性)。

过滤选择器

名称	用法	描述
:eq (index)	$("li:eq(2)").css("color”,"red");	获取到的 li 元素中，选择索引号为 2 的元素，索引号从 0 开始。
:odd	$(“li:odd").css("color","red"):	获取到的 li 元素中，选择索引号为奇数的元素
:even	$(“li:even").css(“color”,"red");	获取到的 li 元素中，选择索引号为偶数的元素
:first	$('tr:first').css('backgroundColor','red');	匹配找到的第一个元素。
:last	$('td:last').css('backgroundColor','red'):	匹配找到的最后一个元素
:gt(index)	$('li:gt(3)').css('backgroundColor','red')	匹配所有大于给定索引值的元素
:lt(index)	$('li:lt(3)').css('backgroundColor','red');	匹配所有小于给定索引值的元素。
:not(selector)	$('li:gt(3):not(":last")').css('backgroundColor','red');	去除所有与给定选择器匹配的元素。

筛选选择器

筛选选择器(方法)

可见性过滤选择器

根据元素是否显示来选择。

:hidden: 匹配所有的不可见元素

:visible: 匹配所有的可见元素

一般都是和一种类型的元素搭配使用。例如:

$('div:visible).hide(4000);把显示的 div 用4秒钟隐藏掉

$('div:hidden').show('slow');把隐藏的 div 慢慢地显示出来