jQuery教程 jQuery基本过滤选择器使用浅析-职坐标

jQuery教程 jQuery基本过滤选择器使用浅析

沉沙 2018-06-22 来源：阅读 1080 评论 0

摘要：根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种。希望阅读本篇文章以后大家有所收获，帮助大家对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>Item 0</li> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
</ul> 
<span id="spnMove">Span Move</span> 
</div> 
</body> 
</html>

本文由职坐标整理发布，欢迎关注职坐标WEB前端jQuery频道，获取更多jQuery知识！

jquery教程下载百度云 jquery手册 jquery实战pdf

本文由 @沉沙发布于职坐标。未经许可，禁止转载。