1 利用jQuery实现浮层弹出框作业
代码块
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
z-index: 99;
}
.float {
width: 700px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -350px;
margin-top: -200px;
background-color: white;
z-index: 100;
}
.close {
float: right;
margin-right: 15px;
margin-top: 10px;
font-size: 16px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="b1">点我弹出</button>
<div class="cover hide">我是底层</div>
<div class="float hide">
我是弹出浮层
<span class="close" id="s1">关闭</span>
</div>
<script src='../../jquery-3.4.1.min.js'></script>
<script>
var b1Ele = $("#b1")[0];
var $coverEle = $(".cover");
var $modalEle = $(".float");
b1Ele.onclick=function (ev) {
$coverEle.removeClass("hide");
$modalEle.removeClass("hide");
};
var s1Ele = document.getElementById("s1");
s1Ele.onclick=function (ev) {
$coverEle.addClass("hide");
$modalEle.addClass("hide");
}
</script>
</body>
</html>
2 利用jquery切换元素样式的颜色($('#d1').toggleClass('c1');)
代码块
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
.c {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
}
.c1 {
background-color: green;
}
</style>
</head>
<body>
<div id="d1" class="c c1"></div>
<script src='../../jquery-3.4.1.min.js'></script>
</body>
</html>
3 选择器筛选器练习
代码块
根据id查找，查找id 是i1的：$('#i1');
根据标签查找：$('h2');
查找input类型的：$('input');
查找class是c1的：$('.c1');
查找class为c1样式，或者标签为h2: $('.c1,h2');
查找class为c1样式，id为p3的：$('.c1,#p3');
查询form标签里面子子孙孙的所有input: $("form input")
查询label标签里面的儿子input:$('label>input');
查询和label标签同级紧跟的input:$('label+input');
查询id为p2的同级后面的li：$('#p2~li');
查询id为f1里面的第一个input: $("#f1 input:first") 或者 $("#f1 input").first()
查询id为my-checkbox里面的最后一个input: $("#my-checkbox input:last") 或者 $("#my-checkbox input").last()
查询id为my-checkbox中没有默认选定的：$("#my-checkbox input:not(':checked')")
4 左侧手风琴折叠菜单
代码块
HTML结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
.menu {
width: 100px;
border: 1px solid darkgrey;
background-color:#FF9;
}
.item-title {
height: 30px;
line-height: 30px; <!--文字垂直居中-->
color:#333;
text-align: center; <!-- 文字水平居中-->
border-bottom: 1px dotted darkgrey;
}
.hide {
display: none;
}
<!--display:none;表示不显示-->
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="item-title">菜单一</div>
<div class="item-body hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div class="item-title">菜单二</div>
<div class="item-body hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div class="item-title">菜单三</div>
<div class="item-body hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
</div>
<script src='jquery-3.4.1.min.js'></script>
<script>
var $titleEles = $(".item-title"); <!--拿到一个标题的集合数组-->
for (var i=0;i<$titleEles.length;i++){
<!--设置每个标题的点击事件-->
$titleEles[i].onclick=function () {
$(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide");
<!--next表示找到下面同级的标签。-->
}
}
</script>
</body>
</html>
网友评论