jQuery简介 基本选择器 属性选择器 基本过滤选择器 可见性过滤选择器

什么是jQuery?

jQuery是一个快速、简洁的JavaScript框架

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery 兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera9.0+ 等。

jQuery的特点

●轻量级:封装后的库只有不到100k， 下载的时候很快。

●强大选择器:方便快速查找DOM元愫。

●隐式遍历(迭代) :一-次操作多个元素。

●读写合一:读数据/写数据用的是同一个函数。

●链式调用:可以通过.不断调用jQuery对象的方法。

●事件处理。

●DOM操作(CUD)。

●样式操作。

●动画。

●浏览器兼容。

●丰富的插件支持。，

入口函数

jQuery入口函数与js入口函数的对比:

●JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。

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

jQuery事件的链式写法

jQuery对于每一个方法， 在调用成功后将返回此对像本身。

在每一个事件的内部，将会包含一个this对像,此this是DOM对像，如果希望能像jQuery对像一样使用它， 必须使用$(this) 将它

jQuery对象与DOM对象之间的转换

DOM对象转为jQuery对象:

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

jQuery对象转为DOM对象:

两种转换方式将一个jQuery对象转换成DOM对象: [index] 和.get(index) 。

(1) jQuery对象是一个数组对象，可以通过[index] 的方法,来得到对应的DOM对象。

基本选择器

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

总结: 跟css的选择器用法一-样,只是外层加$0。

层次选择器

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

基本属性选择器

名称	用法	描述
[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*=“”]).css(“background”,“red”);	匹配给定的属性是以包含某些值的元素。

操作标签的属性

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

过滤选择器

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

筛选选择器

名称	用法	描述
:contains()	$(td:containn(“)”),cssS"backgroundColor’,red);	匹配包含给定文本的元素。
:has(selector)	$(‘td:has(“pan”"css"backgroundColor’,red);	匹配包含选择器所匹配的元素的元素。
:empty	$('td:empty ).css('backgroundColor,‘red’);	匹配所有不包含子元素或者文本的空元素。
:parent	$(‘td:parent’).css(" backgroundColor’red’);	匹配含有子元素或者文本的元素。

筛选选择器(方法)

名称	用法	描述
children(selector)	$(“ul”).children(“Ii”)	相当于$(“ul>Ii’”， 子类选择器。
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”)，后代选择器。
siblings(selector)	$(“#first”).iblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$("#first’).parent();	查找父亲。
eq(index)	$(“li”).eq(2);	相当于$(“li”:eq(2)")。
next()	$(“Ii”).next()	找下一个兄弟。
prev()	$(“Ii”).prev()	找上一次兄弟。

可见性过滤选择器

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

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

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