收藏
批改状态：未批改
老师批语：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0403选择器案例</title>
</head>
<style type="text/css">
.box{width:900px;border:1px solid red;margin:0 auto;}
ul{list-style: none;overflow: hidden}
ul li{float: left;width:40px;height:40px;border:1px solid red;border-radius: 50%;margin-left:10px;text-align: center;line-height: 40px ;}
</style>
<body>
<div class="box">
<ul>
<li><a href="">01</a></li>
<li><a href="">02</a></li>
<li><a href="">03</a></li>
<li><a href="">04</a></li>
<li><a href="">05</a></li>
<li><a href="">06</a></li>
<li><a href="">07</a></li>
<li><a href="">08</a></li>
<li><a href="">09</a></li>
<li><a href="">10</a></li>
<li><a href="">11</a></li>
<li><a href="">12</a></li>
<li><a href="">13</a></li>
<li><a href="">14</a></li>
<li><a href="">15</a></li>
<p>我靠</p>
</ul>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//1.将索引号4个元素背景变红
$('li').eq(4).css('background-color','red')
//和下面这个方法等同效果
$('li:eq(3)').css('background-color','orange')
//2将最后一个元素变色
$('ul>li:last').css('background-color','green')//或者
$('a').last('li').css('color','#fff')
//3.ul所有后代li元素改变边框颜色
$('ul').find('li').css('border-color','pink')
//4.选择子元素P，改变颜色
$('ul').children('p').css('color','lightblue')
//5.把第8个元素以前的文字改变颜色
//强大！连锁反应啊！！！
$('li').eq(7).prevAll().find('a').css('color','red')
//6.第10个元素改变背景
$('li').filter(':eq(9)').css('background-color','lightgreen')
</script>
</html>点击 "运行实例" 按钮查看在线实例
jQuery选择器很多，选择方法也很多，不太好记，使用的时候要多查手册
用好选择器和选择方法就能把页面中的任何元素选到进行相应的操作
选择器可以叠加选择方法，就是方法后面再拼接方法，强大
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
