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