收藏
批改状态：合格
老师批语：
一、学习心得
上节课学习了JQ框架的的引入以及$(document).ready(）调用方式学习，全面开始了JQ学习。感受到JQ语法的强大，进入正式进入基础知识学习。
1，jq常用选择器涉及到前端基础需要使用的全部类型，学习好基础为后面使用做准备。
2，有些知识点与CSS知识相互结合才能更好理解在，最终都是要对CSS样式做处理。
3，本次使用常用6种选择器函数进行基础学习，掌握JQ语法过滤器用法。
二、最终截图
三、代码（带各过滤器使用说明）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用过滤方法</title>
<style type="text/css">
/*基础样式*/
h2{
color: blue;
font-size: 30px;
}
p{
color: green;
font-size: 25px;
}
</style>
</head>
<body>
<h2>火星学员教务系统</h2>
<p>学员操作</p>
<ul>
<li>我是1号同学<a href="">删除</a><a href="">编辑</a></li>
<li>我是2号同学<a href="">删除</a><a href="">编辑</a></li>
<li>我是3号同学<a href="">删除</a><a href="">编辑</a></li>
<li>我是4号同学<a href="">删除</a><a href="">编辑</a></li>
<li>我是5号同学<a href="">删除</a><a href="">编辑</a></li>
<li>我是6号同学<a href="">删除</a><a href="">编辑</a></li>
<li>我是7号同学<a href="">删除</a><a href="">编辑</a></li>
<li>我是8号同学<a href="">删除</a><a href="">编辑</a></li>
<p>下面是二班的同学</p>
<li>我是9号同学<a href="">删除</a><a href="">编辑</a></li>
<li>我是10号同学<a href="">删除</a><a href="">编辑</a></li>
</ul>
</body>
<!-- 引入百度网络DSN-JQ -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 常用过滤器演示 -->
<script type="text/javascript">
// 1，使用get()函数将jq对象转为DOM对象:将2号同学名字字体颜色改为绿色
$('li').get(1).style.color='green'
//2,返回指定索引元素:将3号同学名字字体大小改为20px
$('li').eq(2).css('font-size','20px')
//3,将第一个同学名字字体颜色改为红色
$('li').first().css('color','red')
//4,将最后一个同学名字颜色改为
$('li').last().css('color','blue')
//5选择全部后代元素,全部a标签字体大小改变为25px
$('ul').find('a').css('font-size','25px')
//6选择返回全部子元素字体颜色变成#777
$('ul').children('p').css('color','#777')
</script>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
