04- jQuery 选择器大全教程收藏备用

IT圈老男孩1 · 发表于 2022-6-27 08:21

jQuery 基本选择器&层次选择器

作者：曾庆林
jQuery选择器的优势

CSS选择器回顾

选择器	语法
ID选择器	#ID{CSS规则}
类选择器	.className{CSS规则}
分组选择器	E1,E2,E3{CSS规则}
包含选择器	E F{CSS规则}
通配符选择器	*{CSS规则}

jQuery选择器的分类

过滤选择器
表单选择器

jQuery基本选择器

选择器 1	描述	返回	示例
#id	根据指定的id匹配元素	单个元素	$(“#hel”)选择id=hel的元素
.class	根据类匹配元素	集合元素	$(“.hel”)选择class=hel的元素
Element	根据元素名匹配元素	集合元素	$(“div”)选择所有的div元素
*	匹配所有元素	集合元素	$(“*”)选择所有元素
E1,E2,E3	分组匹配元素	集合元素	$(“div,span,.hotclass”)选择所有div，span,和class为hotcalss的元素

层次选中器

选择器	描述	返回值	示例
$(“E1 E2”)	选择E1下所有E2	集合元素	$“div span”)选择div下所有span
$(“E1> E2”)	选择E1下的子E2,不包含E2下满足的元素	集合元素	$("div > span”)选择div下的span元素，不包含span下的span元素
$(“E1+ E2”)	选择E1后紧相邻的E2	集合元素	$(".one + div")选择class=one的下一个div元素
$(“E1~ E2”)	选择E1之后的所有E2	集合元素	$("#one ~ div")选择id为one后的所有div元素

补充说明：
( " E 1 + E 2 " ) 可以用 ("E1 + E2")可以用 ("E1+E2")可以用(E1).next(E2)代替
( " E 1 E 2 " ) 可以用 ("E1 ~ E2")可以用 ("E1E2")可以用(E1).nextAll(E2)代替

jQuery 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即过滤选择器都是以冒号:开头。
过滤选择器分类：

基本过滤选择器

选择器	描述	返回	示例
:first	选择第1个元素	单个元素	$(“div:first”)选择第1个div元素
:last	选择最后1个元素	单个元素	$(“div:last”)选择最后1个div元素
:not(E1)	去除所有E1选择器匹配的元素	集合元素	$(“input:not(.my)”)选择class不是.my的所有input元素
:even	选择索引是偶数的所有元素，索引从0开始	集合元素	$(“tr:even”)选择表格中所有偶数的行
:odd	选择索引是奇数的所有元素，索引从0开始	集合元素	$(“tr:odd”)选择表格中所有奇数的行
:eq(index)	选择索引值是index的元素，index从0开始	单个元素	$(“tr:eq(1)”)选择表格行索引等于1的行
:gt(index)	选择索引值大于index的元素,index从0开始	集合元素	$(“tr:gt(1) ”)选择表格行索引大于1的行
:lt(index)	选择索引值小于index的元素,index从0开始	集合元素	$(“tr:lt(1)”)选择表格行索引小于1的行
:header	所取所有的标题元素,h1~h6	集合元素	$(“:header”)选择网页中所有的 , …
:animated	选择当前正在执行动画的所有元素	集合元素	$(“div:animated”)选择正在执行动画的div元素

内容过滤选择器

选择器	描述	返回值	示例
:contains(text)	选择含有text文本内容的元素	集合元素	$(“div:contains(‘我’)”)选择内容里包含我的所有div
:empty	选择不包含子元素或文本的空元素	集合元素	$(“div:empty”)选择不包含子元素（含文本）的所有div元素
:has(E1)	选择包含有(E1选择器匹配的元素)的所有元素	集合元素	$(“div:has§”)选择含有p元素的所有div元素
:parent	选择含有子元素或文本的元素	集合元素	$(“div:parent”)选择拥有子元素（包含文本）的所有div元素

可见性过滤选择器

选择器	描述	返回值	示例
:hidden	选择所有不可见元素	集合元素	$(“:hidden”)选择所有不可见元素，包括：, 和等，如果只选择元素，则可以使用 $(“input:hidden”)
:visible	选择所有可见元素	集合元素	$(“div:visible”)选取所有可见的div元素

案例-tab切换可见过滤

思路

单击第几个，显示第几个，以前显示的隐藏

复制代码

html结构

<divid="tab1"class="tabs"><ul><liclass="tab-title active">li1</li><liclass="tab-title">li2</li><liclass="tab-title">li3</li></ul><divclass="tab-content"style="display: block;">内容1</div><divclass="tab-content">内容2</div><divclass="tab-content">内容3</div></div>

复制代码

css 部分

*{margin: 0;padding: 0;}body{padding: 50px;}ul{list-style: none;}.tabs .tab-title{height: 35px;line-height: 35px;border: 1px solid #aaa;padding-left: 15px;padding-right: 15px;float: left;margin-right: 15px;position: relative;z-index: 10;}.tabs .active{border-bottom-color:#fff;color: #F80;}.tabs .tab-content{clear: both;border: 1px solid #aaa;padding: 25px;width: 450px;height: 300px;display: none;position: relative;top: -1px;z-index: 0;}#tab2 .tab-content{width: 800px;}

复制代码

js写法

//[1] 单击第几个，显示第几个，以前显示的隐藏$(function(){$(".tab-title").click(function(){//以前显示的现在隐藏$(".tab-content:visible").hide();// 求出是第几个var num=$(".tab-title").index($(this));$(".tab-content:eq("+num+")").show();//之前有.active li 去掉active//当前li 添加actvie$(".active").removeClass("active");$(this).addClass("active");})})

复制代码

完整的示例

<!doctype html><htmllang="en"><head><metacharset="UTF-8"/><title>jquery选择器</title><style>*{margin: 0;padding: 0;}body{padding: 50px;}ul{list-style: none;}.tabs .tab-title{height: 35px;line-height: 35px;border: 1px solid #aaa;padding-left: 15px;padding-right: 15px;float: left;margin-right: 15px;position: relative;z-index: 10;}.tabs .active{border-bottom-color:#fff;color: #F80;}.tabs .tab-content{clear: both;border: 1px solid #aaa;padding: 25px;width: 450px;height: 300px;display: none;position: relative;top: -1px;z-index: 0;}#tab2 .tab-content{width: 800px;}</style></head><body><divid="tab1"class="tabs"><ul><liclass="tab-title active">li1</li><liclass="tab-title">li2</li><liclass="tab-title">li3</li></ul><divclass="tab-content"style="display: block;">内容1</div><divclass="tab-content">内容2</div><divclass="tab-content">内容3</div></div><scriptsrc="js/jquery-1.4.2.min.js"></script><script>//[1] 单击第几个，显示第几个，以前显示的隐藏$(function(){$(".tab-title").click(function(){//以前显示的现在隐藏$(".tab-content:visible").hide();// 求出是第几个var num=$(".tab-title").index($(this));$(".tab-content:eq("+num+")").show();//之前有.active li 去掉active//当前li 添加actvie$(".active").removeClass("active");$(this).addClass("active");})})</script></body></html>

复制代码

jquery过滤选择器-属性

属性过滤选择器

选择器	描述	返回	示例
[attribute]	选择拥有此属性的元素	集合元素	$(“div[id]”)选择拥有id属性的div元素
[attribute=value]	选择属性值为value的元素	集合元素	$(“div[id=test]”)选择id属性值为test的div元素
[attribute!=value]	选择属性值不为value的元素	集合元素	$(“div[id!=test]”)选择id属性值不为test的div元素,没有id属性的div也会被选择
[attribute^=value]	选择属性值以value开始的元素	集合元素	$(“div[id^=test]”)选择id属性值以test开始的所有div元素
[attribute$=value]	选择属性以value值结束的元素	集合元素	( “ d i v [ i d (“div[id (“div[id=test]”)选择id属性值以test结束的所有div元素
[attribute*=value]	选择属性中含有value的元素	集合元素	$(“div[id*=test]”)选择id属性值中含有test的所有div元素
[A1][A2]…A[N]	用属性选	择器合并成一个复合属性选择器。满足多个条件。	集合元素

案例根据不同的 a链接添加不同的图标背景

html

<h3>jquery 属性过虑资料下载</h3><ul><li><ahref="./课件"target="_blank"> 课件</a></li><li><ahref="精通JavaScript.pdf"target="_blank"> 参考书</a></li><li><ahref="课件/第二章jQuery选择器.pptx"target="_blank">第二章jQuery选择器</a></li><li><ahref="filter.txt"target="_blank">选择器总结</a></li><li><ahref="filter.html"target="_blank">案例1</a></li><li><ahref="taotest2.html"target="_blank">案例2</a></li></ul>

复制代码

js

$(function(){$("a[href$=html]").addClass("html");$("a[href$=txt]").addClass("txt");$("a[href^=./]").addClass("fl");})

复制代码

css

ul,li,a{margin:0;padding:0;list-style:none;text-decoration:none;color:#444;}a:visited{color:#444;}a:hover{color:#000;}li{height:30px;line-height:30px;border-bottom:1px dashed #444;width:200px;}li a{display:block;height:30px;line-height:30px;padding-left:25px;background-image:url(pkg_comm_z527307bd.png);background-repeat:no-repeat;}.pdf{background-position:0 -2px;}.fl{background-position:0 -255px;}.pptx{background-position:0 -440px;}.txt{background-position:0 -160px;}.html{background-position:0 -347px;}

复制代码

过滤选择器-子元素过滤

作者：曾庆林

选择器	描述	返回	示例
:nth-child(index/even/odd/equation)	选取每个父元素下的第index个子元素或奇偶元素.(index从1开始）	集合元素	:eq(index)只匹配一个元素,而:nth-child(index)将为每一个父元素匹配子元素,并且:nth-child(index)的index从1开始,而:eq(index)的index从0开始.
:first-child	选择每个父元素的第1个子元素	集合元	:first只选择单个元素,而:first-child将为每个父元素匹配第1个子元素如:$(“ul li:first-child”)选择每个ul下的第一个
:last-child	选取每个父元素的最后1个子元素	集合元素	$(“ul li:last-child”)选择每个ul下的最后一个
:only-child	如果某个元素是它父元素中惟一的子元素,那么将会被匹配.如果父元素中含有其他元素,则不会被匹配	集合元素	$(“ul li:only-child”)在中选取是惟一子元素的

:nth-child()选择器详细功能描述:

:nth-child(even) 能选择每个父元素下的索引值是偶数的元素
:nth-child(odd) 选择出每个父元素下的索引值是奇数的元素
:nth-child(2) 选取每个父元素下的索引值等于2的元素
:nth-child(3n) 能选出每个父元素下的索引值是3的倍数的元素,n从0开始
:nth-child(3n+1) 能选取每个父元素下的索引值是3n+1的元素.n从0开始

复制代码

表单对象属性过滤选择器

选择器	描述	返回	示例
:enabled	选择所有可用元素	集合元素	$(“#form1 :enabled”)选取id为form1的表单内的所有可用元素
:disabled	选择所有不可用元素	集合元素	$(“#form1 :disabled”)选取id为form1的表单内所有不可用元素
:checked	选择忾有被选中的元素(单选框,复选框)	集合元素	$("input:checked")选择所有被选中的<input元素>
:selected	选择所有被选中的选项元素(下拉列表)	集合元素	$("select :selected")选取所有被选中的选项元素

jquery 表单选择器

表单选择器

选择器	描述	返回	示例
:input	匹配所有元素集合元素	$(“:input”) 同描述
:text	选择所有单行文本框	集合元素	$(“:text”)匹配所有单行文本框
:password	选择所有密码框	集合元素	$(“:password”)
:radio	选择所有单选框	集合元素	$(“:radio”)
:checkbox	选择所有复选框	集合元素	$(“:checkbox”)
:submit	匹配所有提交按钮	集合元素	$(“:submit”)
:image	匹配所有图像按钮	集合元素	$(“:image”)
:reset	匹配所有重置按钮	集合元素	$(“:reset”)
:button	匹配所有按钮	集合元素	$(“:button”)
:file	匹配所有文件域	集合元素	$(“:file”)
:hidden	匹配所有不可见元素	集合元素	$(“:hidden”)

选择器中的一些注意事项

选择器中包含空格
选择器中的空格是不容忽视的，多一个空格或少一个空格会得到截然不同的结果.

如:
$(“div:input”)
和
$(“div :input”)

复制代码

jQuery中的方法初探

方法	功能描述
show()	显示隐藏的匹配元素，可带整数参数表示时间，单位是毫秒
hide()	隐藏显示的匹配元素，可带整数参数表示时间，单位是毫秒
css(name,value)	给匹配的元素设置css样式
text(string)	获取或设置匹配元素的文本内容,不包含html标签
filter(expr)	筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。
addClass(class)	为匹配的元素增加一个类样式
removeClass(class)	为匹配的元素移除一个类样式
html()	获取或设置匹配元素的内容，包含html标签
siblings()	$(“.abc”).siblings()匹配得到class=abc的其它兄弟元素

IT入门感谢关注

练习地址： www.520mg.com/it

		自动登录	找回密码
密码			立即注册

04- jQuery 选择器大全教程收藏备用

本帖子中包含更多资源

浏览过的版块