收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.red {color: red}
.green {color: green}
</style>
</head>
<body>
<ul>
<li>明星1 <a href="">进入相册</a></li>
<li>明星2 <a href="">进入相册</a></li>
<li>明星3 <a href="">进入相册</a></li>
<li>明星4 <a href="">进入相册</a></li>
<li>明星5 <a href="">进入相册</a></li>
<li>明星6 <a href="">进入相册</a></li>
<li>明星7 <a href="">进入相册</a></li>
<li>明星8 <a href="">进入相册</a></li>
<li>明星9 <a href="">进入相册</a></li>
<li>明星10 <a href="">进入相册</a></li>
</ul>
</body>
</html>
<!-- 1.在线引用 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 1. 第1个
$('li').first().css('color','blue')
// 2. 最后1个
$('li').last().css('color','green')
// 3. 第n个
$('li').eq(4).css('color','red')
// 4. get()方法
$('li').get(2).style.color = 'pink'
// 5. 查找
$('li').find('a').css('color','blue')
// 6. 遍历
var m = $('li').toArray()
for (var i = 0; i<=m.length - 1; i++) {
m[i].style.color = 'coral'
}
// 7.移除li 样式
$('li').removeAttr('style')
// 8.jQuery遍历
$('li').each(function(){
$(this).css('color','yellow')})
// 9.相邻兄弟 添加样式
$('li').removeAttr('style')
$('li:nth-child(7)+li').addClass('green')
//后代（子孙所有）
// $('li a').addClass('green')
// //子
// $('ul>*').addClass('red')
// //第几个
// $('li:nth-child(5)').addClass('green')
// //相邻兄弟
// $('li:nth-child(7)+li').addClass('green')
// //后面全部兄弟
// $('li:nth-child(7)~li').addClass('green')
// $('li:first-child').css('color','green')
// $('li:last-child').css('color','red')
// $('li:eq(3)').css('color','green')
// $('*').removeAttr('style')
// $('*').removeClass()
// $('li:gt(2)').css('color','green')
// $('li:lt(7)').css('color','red')
// $('*').removeAttr('style')
// $('*').removeClass()
// // $('li:even').addClass('red')
// $('li:even').css('color','green')
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
