批改状态:合格
老师批语:
jQuery有很多选择器函数,这里我介绍比较常用的6种选择器函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.nav ul li{
width: 100px;
height: 30px;
list-style: none;
float: left;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>首页</li>
<li>公司简介</li>
<li>公司文化</li>
<li>产品介绍</li>
<li>企业新闻</li>
<li>联系方式</li>
</ul>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('li').get(1).style.color = 'red'
$('li').eq(2).css('color','green')
$('li').first().css('color','blue')
$('li').last().css('color','pink')
$('ul').find('li').css('background-color','gray')
$('ul').children('li').css('font-size','1.2em')
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果:

以上jQuery代码解释:
1:get()将jquery对象转为DOM对象:将第二个li标签的字体颜色设置为红色
2.eq():获取指定序号为2的li标签元素,将它的字体颜色设置为绿色
3.first():获取到第一个li标签,将它的字体颜色设置为蓝色
4.last():获取到最后一个li标签,将它的字体颜色设置为粉红色
5.find():获取到ul下面的所有后代元素,将它们的背景颜色设置为灰色
6.children():获取到ul下面所有的直接子元素,将它们的字体大小设置为1.2em
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号