使用jQuery基本过滤选择器

最新推荐文章于 2024-04-11 18:44:34 发布

liu_111111

最新推荐文章于 2024-04-11 18:44:34 发布

阅读量764

点赞数

分类专栏： jQuery 文章标签： jQuery 基本过滤选择器

本文链接：https://blog.csdn.net/liu_111111/article/details/8818744

版权

jQuery 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<!--

1.简单过滤选择器：根据某类过滤规则进行元素的匹配，书写时都以冒号（：）开头；简单过滤选择器是过滤选择器中使用最广泛的一种

jQuery选择器详解

根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种
-->
<title>使用jQuery基本过滤选择器</title>

<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center;}
div{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 () { //增加标题类元素类别
$('div h1').css('width', '238');
$(':header').addClass('GetFocus');
})
$(function () {
animateIt(); //增加动画效果元素类别
$('#spnMove:animated').addClass('GetFocus');
})
function animateIt() { //动画效果
$('#spnMove').slideToggle('slow', animateIt);
}

</script>
</head>
<body>
<div>
<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>
</div>
</body>
</html>

liu_111111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery基本过滤选择器

1.简单过滤选择器：根据某类过滤规则进行元素的匹配，书写时都以冒号（：）开头；简单过滤选择器是过滤选择器中使用最广泛的一种jQuery选择器详解根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤
复制链接

扫一扫

专栏目录