摘要:代码如下:<html xmlns="https://www.w3.org/1999/xhtml"> <head> <!-- 1.简单过滤选择器:根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头;简单过滤选择器是过滤选择器中使用最广泛的一种 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 --> <title>使用jQuery基本过滤选择器</title> <!--使用jQuery基本过滤选择器选择元素:在页面中,设置一个<h1>标记用户显示主题,创建<ul>标记并在其中放置四个<li>,再创建一个<span>标记,用于执行动画效果。通过简单过滤选择器获取元素,将选中的元素改变其类名称,从而突出其被选中的状态--> <script src="jquery-1.9.1.js" type="text/javascript"></script> <style type="text/css"> body{font-size:12px;text-align:center;} p{width:240px;height:83px;border:solid 1px #eee} he{font-size:13px;} ul{list-style-type:none;padding:0px} .DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee} .GetFocus{width:58px;border:solid 1px #666;background-color:#eee} #spnMove{width:234px;height:23px;line-height:23px;} </style> <script type="text/javascript"> $(function () { //增加第一个元素的类别 $('li:first').addClass('GetFocus'); }) $(function () { //增加最后一个元素的类别 $('li:last').addClass('GetFocus'); }) $(function () { //增加去除所有与给定选择器匹配的元素类别 $('li:not(.NotClass)').addClass('GetFocus'); }) $(function () { //增加所有索引值为偶数的元素类别,从0开始计数 $('li:even').addClass('GetFocus'); }) $(function () { //增加所有索引值为奇数的元素类别,从0开始计数 $('li:odd').addClass('GetFocus'); }) $(function () { //增加一个给定索引值的元素类别,从0开始计数 $('li:eq(1)').addClass('GetFocus'); }) $(function () { //增加所有大于给定索引值的元素类别,从0开始计数 $('li:gt(1)').addClass('GetFocus'); }) $(function () { //增加所有小于给定索引值的元素类别,从0开始计数 $('li:lt(4)').addClass('GetFocus'); }) $(function () { //增加标题类元素类别 $('p h1').css('width', '238'); $(':header').addClass('GetFocus'); }) $(function () { animateIt(); //增加动画效果元素类别 $('#spnMove:animated').addClass('GetFocus'); }) function animateIt() { //动画效果 $('#spnMove').slideToggle('slow', animateIt); } </script> </head> <body> <p> <h1>基本过滤选择器</h1> <ul> <li class="DefClass">Item 0</li> <li class="DefClass">Item 1</li> <li class="NotClass">Item 2</li> <li class="DefClass">Item 3</li> </ul> <span id="spnMove">Span Move</span> </p> </body> </html>

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-jQuery基本过滤选择器使用介绍

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

代码如下:

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<!--
1.简单过滤选择器:根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头;简单过滤选择器是过滤选择器中使用最广泛的一种
jQuery选择器详解
根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种
-->
<title>使用jQuery基本过滤选择器</title>
<!--使用jQuery基本过滤选择器选择元素:在页面中,设置一个<h1>标记用户显示主题,创建<ul>标记并在其中放置四个<li>,再创建一个<span>标记,用于执行动画效果。通过简单过滤选择器获取元素,将选中的元素改变其类名称,从而突出其被选中的状态-->
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center;}
p{width:240px;height:83px;border:solid 1px #eee}
he{font-size:13px;}
ul{list-style-type:none;padding:0px}
.DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee}
.GetFocus{width:58px;border:solid 1px #666;background-color:#eee}
#spnMove{width:234px;height:23px;line-height:23px;}
</style>
<script type="text/javascript">
$(function () { //增加第一个元素的类别
$('li:first').addClass('GetFocus');
})
$(function () { //增加最后一个元素的类别
$('li:last').addClass('GetFocus');
})
$(function () { //增加去除所有与给定选择器匹配的元素类别
$('li:not(.NotClass)').addClass('GetFocus');
})
$(function () { //增加所有索引值为偶数的元素类别,从0开始计数
$('li:even').addClass('GetFocus');
})
$(function () { //增加所有索引值为奇数的元素类别,从0开始计数
$('li:odd').addClass('GetFocus');
})
$(function () { //增加一个给定索引值的元素类别,从0开始计数
$('li:eq(1)').addClass('GetFocus');
})
$(function () { //增加所有大于给定索引值的元素类别,从0开始计数
$('li:gt(1)').addClass('GetFocus');
})
$(function () { //增加所有小于给定索引值的元素类别,从0开始计数
$('li:lt(4)').addClass('GetFocus');
})
$(function () { //增加标题类元素类别
$('p h1').css('width', '238');
$(':header').addClass('GetFocus');
})
$(function () {
animateIt(); //增加动画效果元素类别
$('#spnMove:animated').addClass('GetFocus');
})
function animateIt() { //动画效果
$('#spnMove').slideToggle('slow', animateIt);
}
</script>
</head>
<body>
<p>
<h1>基本过滤选择器</h1>
<ul>
<li class="DefClass">Item 0</li>
<li class="DefClass">Item 1</li>
<li class="NotClass">Item 2</li>
<li class="DefClass">Item 3</li>
</ul>
<span id="spnMove">Span Move</span>
</p>
</body>
</html>

代码如下:

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<!--
1.简单过滤选择器:根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头;简单过滤选择器是过滤选择器中使用最广泛的一种
jQuery选择器详解
根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种
-->
<title>使用jQuery基本过滤选择器</title>
<!--使用jQuery基本过滤选择器选择元素:在页面中,设置一个<h1>标记用户显示主题,创建<ul>标记并在其中放置四个<li>,再创建一个<span>标记,用于执行动画效果。通过简单过滤选择器获取元素,将选中的元素改变其类名称,从而突出其被选中的状态-->
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center;}
p{width:240px;height:83px;border:solid 1px #eee}
he{font-size:13px;}
ul{list-style-type:none;padding:0px}
.DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee}
.GetFocus{width:58px;border:solid 1px #666;background-color:#eee}
#spnMove{width:234px;height:23px;line-height:23px;}
</style>
<script type="text/javascript">
$(function () { //增加第一个元素的类别
$('li:first').addClass('GetFocus');
})
$(function () { //增加最后一个元素的类别
$('li:last').addClass('GetFocus');
})
$(function () { //增加去除所有与给定选择器匹配的元素类别
$('li:not(.NotClass)').addClass('GetFocus');
})
$(function () { //增加所有索引值为偶数的元素类别,从0开始计数
$('li:even').addClass('GetFocus');
})
$(function () { //增加所有索引值为奇数的元素类别,从0开始计数
$('li:odd').addClass('GetFocus');
})
$(function () { //增加一个给定索引值的元素类别,从0开始计数
$('li:eq(1)').addClass('GetFocus');
})
$(function () { //增加所有大于给定索引值的元素类别,从0开始计数
$('li:gt(1)').addClass('GetFocus');
})
$(function () { //增加所有小于给定索引值的元素类别,从0开始计数
$('li:lt(4)').addClass('GetFocus');
})
$(function () { //增加标题类元素类别
$('p h1').css('width', '238');
$(':header').addClass('GetFocus');
})
$(function () {
animateIt(); //增加动画效果元素类别
$('#spnMove:animated').addClass('GetFocus');
})
function animateIt() { //动画效果
$('#spnMove').slideToggle('slow', animateIt);
}
</script>
</head>
<body>
<p>
<h1>基本过滤选择器</h1>
<ul>
<li class="DefClass">Item 0</li>
<li class="DefClass">Item 1</li>
<li class="NotClass">Item 2</li>
<li class="DefClass">Item 3</li>
</ul>
<span id="spnMove">Span Move</span>
</p>
</body>
</html>

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-jQuery基本过滤选择器使用介绍

全部内容,希望文章能够帮你解决

js实例教程-jQuery基本过滤选择器使用介绍

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过