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


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

作者:曾庆林

jQuery选择器的优势
写法简单支持CSS1至CSS3选择器完善的处理机制
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")可以用

("E1 E2")可以用(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结构

<div id="tab1" class="tabs">
<ul>
<li class="tab-title active">li1</li>
<li class="tab-title">li2</li>
<li class="tab-title">li3</li>
</ul>
<div class="tab-content" style="display: block;">内容1</div>
<div class="tab-content" >内容2</div>
<div class="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>
<html lang="en">

<head>
<meta charset="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>
<div id="tab1" class="tabs">
<ul>
<li class="tab-title active">li1</li>
<li class="tab-title">li2</li>
<li class="tab-title">li3</li>
</ul>
<div class="tab-content" style="display: block;">内容1</div>
<div class="tab-content" >内容2</div>
<div class="tab-content">内容3</div>
</div>
<script src="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><a href="./课件" target="_blank" > 课件</a></li>
<li><a href="精通JavaScript.pdf" target="_blank"> 参考书</a></li>
<li><a href="课件/第二章jQuery选择器.pptx" target="_blank">第二章jQuery选择器</a></li>
<li><a href="filter.txt" target="_blank" >选择器总结</a></li>
<li><a href="filter.html" target="_blank" >案例1</a></li>
<li><a href="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的其它兄弟元素

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

IT入门 感谢关注

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

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

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

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 04- jQuery 选择器大全教程收藏备用
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏