收藏
批改状态：合格
老师批语：
主题：
结合案例掌握jQuery各种选择过滤器的使用方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
<style type="text/css">
* {
font: 15px/22.5px "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}
body {
background-color: #0769AD;
}
div h1 {
text-align: center;
color:#fff;
font-size: 25px;
line-height: 1.1em;
}
div ol {
margin-left:12px;
}
div ol li {
width:100%;
color: #7ACEF4;
line-height: 1.5em;
font-size: 18px;
}
a {
font-size: 18px;
color:#7ACEF4;
text-decoration: none;
}
a:hover {
text-decoration:underline;
}
.front {
width:600px;
margin:30px auto;
border:1px solid #272822;
overflow: hidden;
border-radius:30px;
/*box-shadow: 1px 1px 1px #ddd;*/
}
.teacher {
width:399px;
margin:0 auto;
background-color: #05568D;
border-radius:30px;
}
.box {
color:white;
}
</style>
</head>
<body>
<div class="front">
<div class="teacher">
<h1>html+css+javascript<br>课件目录</h1>
<hr>
<ol>
<li>20180315：<a href="" target="_blank">前端开发初体验</a></li>
<li>20180316：<a href="" target="_blank">文本、图像、链接、表格</a></li>
<li>20180319：<a href="" target="_blank">列表与表单及实战</a></li>
<li>20180320：<a href="" target="_blank">内联框架与实战</a></li>
<li>20180321：<a href="" target="_blank">CSS基本术语</a></li>
<li>20180322：<a href="" target="_blank">CSS盒模型与表格</a></li>
<li>20180323：<a href="" target="_blank">元素居中_背景_列表与链接</a></li>
<li>20180326：<a href="-te" target="_blank">定位与浮动</a></li>
<li>20180327：<a href="" target="_blank">经典布局方式的原理分析</a></li>
<li>20180328：<a href="" target="_blank">实战_企业站点布局</a></li>
<li>20180329：<a href="-" target="_blank">javascript入门与实战</a></li>
<li>20180330：<a href="-" target="_blank">javascript实战2</a></li>
</ol>
</div>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 标签选择器->标签
$('a').css('background-color','blue')
// 标签选择器->class选择器
$('.front').css('background-color','red')
// 层级选择器->后代选择器
$('ol li a').css('background-color','lightgreen')
// 层级选择器->子元素选择器
$('ol > *').css('background-color','coral')
// 层级选择器->相邻兄弟选择器
$('li:nth-child(4) ~ li').css('background-color','white')
// 层级选择器->直接选中元素
$('li:nth-child(5)').css('background-color','green')
$('li:eq(5)').css('background-color','black')
// 清除所有元素上的内联样式属性
$('*').removeAttr('style')
// 将序号大于6的文本变为亮绿色
$('li:gt(5)').css('color','lightgreen')
// 将序号小于5的链接文本变为珊瑚色
$('li:lt(4) a').css('color','coral')
// 将所有元素内容包含CSS的元素改变样式
$(':contains("CSS")').addClass('box')
// 获取索引3-6的li
$('li').slice(3,6).text('小姐姐')
</script>
</html>点击 "运行实例" 按钮查看在线实例
总结：
jQuery选择器、过滤器需要牢记语法与方法名称才能灵活运用到实际项目中去。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
