1 利用jQuery實(shí)現(xiàn)浮層彈出框作業(yè)
代碼塊
<!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">點(diǎn)我彈出</button>
<div class="cover hide">我是底層</div>
<div class="float hide">
我是彈出浮層
<span class="close" id="s1">關(guān)閉</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 選擇器篩選器練習(xí)
代碼塊
根據(jù)id查找挽绩，查找id 是i1的：$('#i1');
根據(jù)標(biāo)簽查找：$('h2');
查找input類型的：$('input');
查找class是c1的：$('.c1');
查找class為c1樣式轮纫，或者標(biāo)簽為h2: $('.c1,h2');
查找class為c1樣式梗顺，id為p3的：$('.c1,#p3');
查詢form標(biāo)簽里面子子孫孫的所有input: $("form input")
查詢label標(biāo)簽里面的兒子input:$('label>input');
查詢和label標(biāo)簽同級(jí)緊跟的input:$('label+input');
查詢id為p2的同級(jí)后面的li：$('#p2~li');
查詢id為f1里面的第一個(gè)input: $("#f1 input:first") 或者 $("#f1 input").first()
查詢id為my-checkbox里面的最后一個(gè)input: $("#my-checkbox input:last") 或者 $("#my-checkbox input").last()
查詢id為my-checkbox中沒有默認(rèn)選定的：$("#my-checkbox input:not(':checked')")
4 左側(cè)手風(fēng)琴折疊菜單
代碼塊
HTML結(jié)構(gòu)如下：
<!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>內(nèi)容1</div>
<div>內(nèi)容2</div>
<div>內(nèi)容3</div>
</div>
</div>
<div class="item">
<div class="item-title">菜單二</div>
<div class="item-body hide">
<div>內(nèi)容1</div>
<div>內(nèi)容2</div>
<div>內(nèi)容3</div>
</div>
</div>
<div class="item">
<div class="item-title">菜單三</div>
<div class="item-body hide">
<div>內(nèi)容1</div>
<div>內(nèi)容2</div>
<div>內(nèi)容3</div>
</div>
</div>
</div>
<script src='jquery-3.4.1.min.js'></script>
<script>
var $titleEles = $(".item-title"); <!--拿到一個(gè)標(biāo)題的集合數(shù)組-->
for (var i=0;i<$titleEles.length;i++){
<!--設(shè)置每個(gè)標(biāo)題的點(diǎn)擊事件-->
$titleEles[i].onclick=function () {
$(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide");
<!--next表示找到下面同級(jí)的標(biāo)簽傍妒。-->
}
}
</script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
