abstract：jquery選擇器分為幾個(gè)類型：基本選擇器；層級(jí)選擇器；內(nèi)容選擇器；順序選擇器；屬性選擇器；<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <scri
jquery選擇器分為幾個(gè)類型：
基本選擇器；層級(jí)選擇器；內(nèi)容選擇器；順序選擇器；屬性選擇器；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.3.1.js"></script>
<style>
*{margin: 0;padding: 0;}
body{
background: lightgray;
}
.page{
margin: 20px auto;
width: 600px;
background: lightcyan;
height: 1000px;
}
.nav>li{
float: left;
width: 150px;
text-align: center;
background: darkmagenta;
padding: 0px;
color: lightgrey;
line-height:50px;
}
ul{
list-style: none;
}
.dropdown{position: relative;}
.dropdown-content{
position: absolute;
width: 150px;
display: none;
background: #0aa6ec;
}
.dropdown:hover .dropdown-content{
display: block;
}
.clear{clear: both;}
</style>
</head>
<body>
<div class="page">
<ul class="nav">
<li>首頁(yè)</li>
<li class="dropdown">新聞
<ul class="dropdown-content">
<li id="global-news">國(guó)際新聞</li>
<li>國(guó)內(nèi)新聞</li>
</ul>
</li>
<li>產(chǎn)品</li>
<li>聯(lián)系我們</li>
</ul>
<div class="clear"></div>
<div class="content">
<p id="pid">第一個(gè)段落</p>
<p>第二個(gè)段落</p>
</div>
<div>
<input type="text" placeholder="請(qǐng)輸入姓名" ><br>
<input type="text" placeholder="請(qǐng)輸入姓名" disabled>
</div>
</div>
</body>
<script>
$(function () {
//一、基本選擇器
//元素選擇器
$("body").css("background","gray");
$("li").css("background","green")
//#id選擇器
$("#global-news").css("font-family","PMingLiU");
$("#global-news").css("background","darkblue");
//類選擇器
$(".dropdown-content").css("color","yellow");
//二、層級(jí)選擇器
//匹配父元素的所有子元素
$(".content > p").css("font-size","20");
$(".content > p").css("color","darkgreen");
//匹配所有后代元素
$("body p").css("border-bottom","1px dotted black");
//匹配所有兄弟元素
$(".content > p").css("font-size","20");
//三、順序選擇器
//獲取第一個(gè)和最后一個(gè)元素
$("li").first().text("首個(gè)li");
$("li").last().text("末尾li");
//四、內(nèi)容選擇器
$('li:contains(產(chǎn)品)').css("background","darkblue");
$('div:has(p)').css("padding-left","30px")//從效果來(lái)看，匹配所有祖先元素
//五、屬性選擇器
$('p[id]').css('color','blue');
$('input:disabled').attr('placeholder','這里不能用');
});
</script>
</html>
使用jquery選擇器，能快速修改頁(yè)面元素屬性及內(nèi)容
Correcting teacher：天蓬老師Correction time：2019-06-16 09:33:41
Teacher's summary：選擇器總結(jié)的不錯(cuò), 表單選擇器, 推薦直接用type屬性就可以就了