提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery基本过滤选择器使用介绍

jQuery 使用 介绍 基本 过滤 选择器
2023-06-13 09:14:50 时间
复制代码代码如下:

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
1.简单过滤选择器：根据某类过滤规则进行元素的匹配，书写时都以冒号（：）开头；简单过滤选择器是过滤选择器中使用最广泛的一种
jQuery选择器详解
根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种
-->
<title>使用jQuery基本过滤选择器</title>
<!--使用jQuery基本过滤选择器选择元素：在页面中，设置一个<h1>标记用户显示主题，创建<ul>标记并在其中放置四个<li>,再创建一个<span>标记，用于执行动画效果。通过简单过滤选择器获取元素，将选中的元素改变其类名称，从而突出其被选中的状态-->
<scriptsrc="jquery-1.9.1.js"type="text/javascript"></script>
<styletype="text/css">
body{font-size:12px;text-align:center;}
div{width:240px;height:83px;border:solid1px#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:solid1px#eee;border-bottom:solid1px#eee}
.GetFocus{width:58px;border:solid1px#666;background-color:#eee}
#spnMove{width:234px;height:23px;line-height:23px;}
</style>
<scripttype="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(){//增加标题类元素类别
$("divh1").css("width","238");
$(":header").addClass("GetFocus");
})
$(function(){
animateIt();//增加动画效果元素类别
$("#spnMove:animated").addClass("GetFocus");
})
functionanimateIt(){//动画效果
$("#spnMove").slideToggle("slow",animateIt);
}
</script>
</head>
<body>
<div>
<h1>基本过滤选择器</h1>
<ul>
<liclass="DefClass">Item0</li>
<liclass="DefClass">Item1</li>
<liclass="NotClass">Item2</li>
<liclass="DefClass">Item3</li>
</ul>
<spanid="spnMove">SpanMove</span>
</div>
</body>
</html>

相关文章