目录
3.实现单击页面上的p标签其背景设置为红色，单击页面上的按钮显示“欢迎学习jQuery!
4.实现鼠标移入一级菜单项时其二级子菜单显示，移出时子菜单隐藏。
5.(1)单击其中一个标题span选项，同时显示其对应下面的div，其他标题下的div隐藏，如图2-2所示。
(2)单击其中一个标题span选项选项，如果下面的div显示，则隐藏，如果下面的div隐藏，则显示。
1.选择器选取元素
<script>
$(document).ready(function () {
//输入代码
// 选取下标为偶数的li元素
$("li:even").css("backgroundColor","pink");
// 选取下标为奇数的li元素
$("li:odd").css("backgroundColor","yellow");
// 选取下标大于3但不是最后一个的li元素
$("li:gt(3):not(:last)").css("groundColor","red");
// 选取下标内容包含6，包含3的li元素
$("li:contains('6'),li:contains('3')").css("backgroundColor","blue");
// 获取页面中选中的复选框的个数
console.log($("input:checked").length);
})
</script>2.实现当页面上的复选框被选中时，弹出提示框谢谢参与。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM对象与jQuery对象的区别</title>
<style>
h3{
width: 600px;
text-align: center;
}
p{
width:600px;
margin-bottom: 20px;
background-color: #ddd;
overflow: hidden;
}
p>span{
float:right;
}
</style>
<script src="jquery-3.7.1.js" type="text/javascript"></script>
<script>
//输入代码
$(function(){
$("#cr").click(function(){
alert("谢谢参与");
})
})
</script>
</head>
<body>
<h3>软件学院实验室管理要求</h3>
<p>
实验室教学计算机房是从事教学活动的重要场所，使用者必须遵守以下规定： <br>
1．严禁任何人利用计算机观看、传播、拷贝、制作淫秽、反动、迷信等不健康内容的文件。如有违反，一经发现，一校规校纪处理，清洁严重者移交有关部门依法处理； <br>
2．科学、安全的使用移动存储介质，严防计算机病毒进入机器； <br>
3．上机者必须严格执行上网有关规定，遵守各级公安部门、我校网管部门发布的有关管理规定； <br>
4．严禁在计算机上玩游戏。对违反规定者，视情节轻重分别予以劝离、通报批评等措施处置。 <br>
5．上机者必须遵守安全操作程序，不准破坏性操作，不准设置口令和修改机内配置参数，不准删除系统文件，发现异常情况，及时向机房管理人员报告。 <br>
6．上机者必须爱护机房设备，不得私自拆卸、搬移设备或私自出借机房物品。因工作需要借用，须按规定办理有关手续。 <br>
7．上机者必须严格遵守机房的规章制度，保持机房环境整洁，不得在机房内喧哗、 打闹和吸烟，不准在机房内吃东西、乱扔杂物、随地吐痰，违反者视情节轻重按章处理。 <br>
本办法自公布之日起施行，由软件学院实验室负责解释。 <br>
<span>软件学院实验室 二零二三年十月</span>
</p>
<input type="checkbox" id="cr">
<label for="cr">已经阅读了上面的实验室规章要求！</label>
</body>
</html>3.实现单击页面上的p标签其背景设置为红色，单击页面上的按钮显示“欢迎学习jQuery!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript</title>
</head>
<body>
<p>段落1</p><p>段落2</p><p>段落3</p>
<button>按钮1</button><button>按钮2</button><button>按钮3</button>
</body>
</html>
<script src="jquery-3.7.1.js"></script>
<script>
$(function(){
$("p").click(function(){
$(this).css("backgroundColor","red");
})
})
$(function(){
$("button").click(function(){
alert("欢迎学习jQuery!");
})
})
</script>如果需要选中其中一个p就使所有的背景变红用$("p")，单个的用$(this)。
4.实现鼠标移入一级菜单项时其二级子菜单显示，移出时子菜单隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,li{
padding:0;
margin: 0;
list-style:none;
text-align: center;
}
#wrap{
width:330px;
margin:30px auto 0;
height: 30px;
background-color: blue;
border-radius: 5px;
padding:0 5px;
}
#wrap>ul{
height: 30px;
}
#wrap>ul>li{
float: left;
width: 100px;
background-color:yellow;
height: 30px;
line-height: 30px;
margin: 0 5px;
}
a{
text-decoration: none;
color:red;
}
#wrap .uu{
background-color: pink;
display: none;
}
</style>
<script src="jquery-3.7.1.js"></script>
<script>
//输入代码
$(function(){
$("#wrap>ul>li").mouseenter(function(){
$(this).children("ul").show();
}).mouseleave(function(){
$(this).children("ul").hide();
})
})
</script>
</head>
<body>
<div id="wrap">
<ul>
<li>
<a href="javascript:;">一级菜单1</a>
<ul class="uu">
<li>二级菜单11</li>
<li>二级菜单12</li>
<li>二级菜单13</li>
</ul>
</li>
<li>
<a href="javascript:;">一级菜单2</a>
<ul class="uu">
<li>二级菜单21</li>
<li>二级菜单22</li>
<li>二级菜单23</li>
</ul>
</li>
<li>
<a href="javascript:;">一级菜单3</a>
<ul class="uu">
<li>二级菜单21</li>
<li>二级菜单22</li>
<li>二级菜单23</li>
</ul>
</li>
</ul>
</div>
</body>
</html>5.(1)单击其中一个标题span选项，同时显示其对应下面的div，其他标题下的div隐藏，如图2-2所示。
(2)单击其中一个标题span选项选项，如果下面的div显示，则隐藏，如果下面的div隐藏，则显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
width: 160px;
}
ul,li{
padding:0;
margin:0;
border-bottom: 1px solid #fff;
}
li>span{
display: block;
background-color: pink;
}
li>div{
height: 120px;
background-color: yellow;
display: none;
}
</style>
<script src="jquery-3.7.1.js"></script>
<script>
//输入代码
$(function(){
$("span").click(function(){
if($(this).next().is(":visible"))
$(this).next().slideUp();
else
$(this).next().slideDown().parent().siblings().children("div").slideUp();
})
})
</script>
</head>
<body>
<ul>
<li>
<span>标题1</span>
<div>我是弹出来的div1</div>
</li>
<li>
<span>标题2</span>
<div>我是弹出来的div2</div>
</li>
<li>
<span>标题3</span>
<div>我是弹出来的div3</div>
</li>
<li>
<span>标题4</span>
<div>我是弹出来的div4</div>
</li>
</ul>
</body>
</html>6.(1)实现单击其中一个菜单选项，显示其对应下面的子菜单列表，其他菜单下的子菜单隐藏，(注意本实例中的列表菜单有三层)。(2)实现单击其中一个菜单选项，如果子菜单显示，则隐藏，如果子菜单隐藏，则显示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>折叠菜单2</title>
<style type="text/css">
ul,li{margin:0;padding:0}
body{font-size:12px;}ul,li{list-style: none;}
a:link,a:visited{text-decoration:none;}
div.list{width:210px;margin:40px auto 0 auto;}
.list a{display:block;font-weight:bold; height:36px;line-height:36px;}
.list ul li{background-color:#467ca2; border-bottom:solid 1px #316a91;}
.list ul li a{padding-left:10px;color:#fff;}
.list ul li ul{display:none;}
.list ul li ul li {background-color:#6196bb;border-bottom:solid 1px #467ca2;}
.list ul li ul li ul{display:none;}
.list ul li ul li a{ padding-left:20px; color:#9FC;}
.list ul li ul li ul li { background-color:#d6e6f1; border-bottom:solid 1px #6196bb; }
.list ul li ul li ul li a{ padding-left:30px;color:#316a91;}
</style>
<script src="jquery-3.7.1.js"></script>
<script>
//输入代码
$(function(){
$("a.inactive").click(function(){
if($(this).next("ul").is(":visible"))
$(this).next("ul").slideUp()
else
$(this).next("ul").slideDown().
parent().siblings().children("div").slideUp();
})
})
</script>
</head>
<body>
<div class="list">
<ul class="yiji">
<li><a href="#" class="inactive">学校概况</a>
<ul>
<li><a href="#" class="inactive">科大简介</a>
<ul >
<li><a href="#">校园分布</a></li>
<li><a href="#">校园风光</a></li>
</ul>
</li>
<li><a href="#">现任领导</a></li>
<li><a href="#" class="inactive">组织机构</a>
<ul>
<li><a href="#">党委机关</a></li>
<li><a href="#">团委机关</a></li>
<li><a href="#">行政机关</a></li>
<li><a href="#">群团组织</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="inactive">教育教学</a>
<ul >
<li><a href="#">本科生教育</a></li>
<li><a href="#">研究生教育</a></li>
<li><a href="#">继续教育</a></li>
</ul>
</li>
<li><a href="#" class="inactive">招生就业</a>
<ul >
<li><a href="#">本科生招生</a></li>
<li><a href="#">研究生招生</a></li>
<li><a href="#">继续教育招生</a></li>
<li><a href="#">就业信息网</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>7.网格实现黑白交替效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
border: 3px solid #000;
}
td{
width: 50px;
height: 50px;
border: 1px solid #000;
}
</style>
<script src="jquery-3.7.1.min.js"></script>
<script>
//输入代码
$(function(){
$("tr:odd>td:nth-child(even)").css("backgroundColor","#000");
$("tr:even>td:nth-child(odd)").css("backgroundColor","#000");
})
</script>
</head>
<body>
<table align="center" cellspacing="0">
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td </tr>
</table>
</body></html>8.淘宝精品案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精品展示</title>
<style>
ul,li{
padding: 0;
margin:0;
list-style: none;
}
.wrapper {
width: 298px;
height: 243px;
margin: 100px auto 0;
border: 1px solid pink;
}
#left, #center, #right {
float: left;
height: 243px;
}
#left,#right{
width: 80px;
}
#center{
width:138px;
height: 243px;
}
#left li, #right li {
background-color:rgba(200,200,200,0.3);
height: 27px;
}
#left li a, #right li a {
display: block;
height: 26px;
border-bottom: 1px solid pink;
line-height: 26px;
text-align: center;
color:red;
text-decoration: none;
font-size: 12px;
}
#left li a:hover, #right li a:hover {
color: blue;
background-color:yellow;
text-decoration: underline;
}
#center li{
height: 243px;
background-color:rgba(255,255,0,0.3);
}
#center li a{
display: block;
height: 243px;
line-height:243px;
text-align: center;
font-size: 40px;
text-decoration: none;
color:#000;
}
#center>li{display: none;}
#center>li:nth-child(1){
display:block;
}
</style>
<script src="jquery-3.7.1.js"></script>
<script>
//输入代码
$(function(){
$("#left>li").mouseenter(function(){
var index = $(this).index();
$("#center>li:eq("+index+")").show().siblings().hide();
})
$("#right>li").mouseenter(function(){
var index = $(this).index()+9;
$("#center>li:eq("+index+")").show().siblings().hide();
})
})
</script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<ul id="center">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
<li><a href="#">登山鞋</a></li>
<li><a href="#">皮带</a></li>
<li><a href="#">围巾</a></li>
<li><a href="#">皮衣</a></li>
<li><a href="#">男毛衣</a></li>
<li><a href="#">男棉服</a></li>
<li><a href="#">男靴</a></li>
</ul>
<ul id="right">
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
<li><a href="#">登山鞋</a></li>
<li><a href="#">皮带</a></li>
<li><a href="#">围巾</a></li>
<li><a href="#">皮衣</a></li>
<li><a href="#">男毛衣</a></li>
<li><a href="#">男棉服</a></li>
<li><a href="#">男靴</a></li>
</ul>
</div>
</body>
</html>9.全选复选框
<script>
//输入代码
$(function(){
$("#all").click(function(){
var ch=this.checked;
$("input[name=product]").each(function(){
this.checked=ch;
})
})
})
</script>
扫一扫
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
