您的位置: 首页 > IT文章 > jQuery-选择器

jQuery-选择器

分类: IT文章 • 2023-11-08 16:13:35

一：JQuery和DOM转换　　

　　转换：
　　jquery对象[0] => Dom对象
　　Dom对象 => $(Dom对象)

$('#i1')[0] <=====>document.getElementById('i1')

d=document.getElementById("i1")
$(d)

二：选择器

　　选择器分为：基本选择器，层级选择器，属性选择器，基本筛选器

　　1）基本选择器

选择器	使用	说明	例子
ID	#id	根据给定的ID匹配一个元素	$("#li")
元素	element	根据给定的元素标签名匹配所有元素	$("a")
类	.class	根据给定的css类名匹配元素	$(".li")
*	*	匹配所有元素
组合	selector1,selector2	将每一个选择器匹配到的元素合并后一起返回	`$("div,span,p.myClass")`

　　2）层级选择器

使用	说明	例子	备注
ancestor descendant	在给定的祖先元素下匹配所有的后代元素	`$("form input")`
parent>child	在给定的父元素下匹配所有的子元素	`$("form > input")`
prev+next	匹配所有紧接在 prev 元素后的 next 元素	`$("label + input")`	`使用比较少，可以使用筛选器替代`
prev ~siblings	匹配 prev 元素之后的所有 siblings 元素	`$("form ~ input")`	`使用比较少，可以使用筛选器替代`

　　3）属性选择器

使用	说明	例子	备注
[attribute]	匹配包含给定属性的元素	`$("div[id]")`
[attribute=value]	匹配给定的属性是某个特定值的元素	`$("input[name='newsletter']")`
[attribute!=value]	匹配所有不含有指定的属性	`$("input[name!='newsletter']")`
[attribute^=value]	匹配给定的属性是以某些值开始的元素	`$("input[name^='news']")`
[attribute$=value]	匹配给定的属性是以某些值结尾的元素	`$("input[name$='letter']")`
[attribute*=value]	匹配给定的属性是以包含某些值的元素	`$("input[name*='man']")`
[attrSel1][attrSel2][attrSelN]	复合属性选择器，需要同时满足多个条件时使用	`$("input[id][name$='man']")`

　　4）基本筛选器

使用	说明	例子	备注
:first	获取第一个元素	`$('li:first')`;
:not(selector)	去除所有与给定选择器匹配的元素	`$("input:not(:checked)")`
:even	匹配所有索引值为偶数的元素，从 0 开始计数	`$("tr:even")`
:odd	匹配所有索引值为奇数的元素，从 0 开始计数	`$("tr:odd")`
:eq(index)	匹配一个给定索引值的元素	`$("tr:eq(1)")`
:gt(index)	匹配所有大于给定索引值的元素	`$("tr:gt(0)")`
:last	获取最后个元素	`$('li:last')`
:lt(index)	匹配所有小于给定索引值的元素
:header	匹配如 h1, h2, h3之类的标题元素	`$(":header").css("background", "#EEE");`