一、本課目標(biāo)
- 掌握jQuery的屬性選擇器
二、屬性選擇器
屬性選擇器通過(guò)HTML元素的屬性來(lái)選擇屬性。
image.png
2.1根據(jù)屬性名獲取元素
屬性選擇器可以根據(jù)是否包含某屬性來(lái)選取元素。
2.2根據(jù)屬性值來(lái)獲取元素
屬性選擇器可以根據(jù)屬性的值來(lái)選取元素。
2.3根據(jù)屬性值來(lái)獲取元素
屬性選擇器可以指定選擇不等于屬性是某個(gè)特定值的元素。
2.4根據(jù)屬性值包含特定開(kāi)頭值獲取元素
屬性選擇器可以指定屬性值以指定值開(kāi)頭的元素。
2.5根據(jù)屬性值包含特定的結(jié)尾值獲取元素
屬性選擇器可以指定屬性值以指定值結(jié)尾的元素
2.6根據(jù)屬性值包含特定的值獲取元素
屬性選擇器可以指定屬性值包含指定值的元素
示例代碼如下：
html文件：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>京東快報(bào)</title>
<link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<section id="news">
<header>京東快報(bào)<a href="#" class="more">更多 > </a></header>
<ul>
<li><a href="sale.jd.com/act/h7mf8.html" class="hot"><span>[618]</span>志玲姐姐：墨鏡300減30</a></li>
<li><a href="www.jd.com/news.aspx?id=29257"><span>[公告]</span>京東無(wú)錫館正式啟動(dòng)</a></li>
<li><a href="sale.jd.com/act/k2ad45v.html"><span>[特惠]</span>99元搶平板！品牌配件199-100</a></li>
<li><a href="www.jd.com/news.aspx?id=29252"><span>[公告]</span>節(jié)能領(lǐng)跑京東先行</a></li>
<li><a href="sale.jd.com/act/ugk2937w.html" class="last"><span>[特惠]</span>高潔絲實(shí)力撩貨，領(lǐng)券五折</a></li>
</ul>
</section>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/news.js"></script>
</body>
</html>
css文件：
body,ul,li,div,section,header{margin: 0;padding: 0;}
ul,li{list-style: none;}
body{
font-family: "微軟雅黑";
font-size: 12px;
line-height: 28px;
}
#news{
border: 1px solid #cccccc;
width: 280px;
overflow: hidden;
margin: 5px auto 0 auto;
}
#news header{
border-bottom: 1px solid #cccccc;
font-size: 16px;
line-height: 40px;
padding-left:15px;
color: #666666;
font-weight: bold;
}
#news header a{text-decoration: none; color: #666666; float: right; padding-right: 10px;}
#news ul li{padding-left: 10px;}
#news ul li a{color: #686868; text-decoration: none; display: inline-block;}
#news ul li a:hover{color: #b02f4a;}
#news ul li a span{font-size: 13px; font-weight: bold; margin-right: 5px;}
js文件：
$(document).ready(function(){
// 根據(jù)屬性名獲取元素
$("#news a[class]").css("background", "red");
// 根據(jù)屬性值獲取元素
$("#news a[class='hot']").css("background", "yellow");
// 根據(jù)屬性不為某個(gè)值來(lái)獲取元素
$("#news a[class!='hot']").css("background", "blue");
// 根據(jù)屬性值的開(kāi)頭值來(lái)獲取元素
$("#news a[href^='www']").css("background", "grey");
// 根據(jù)屬性值的結(jié)尾值來(lái)獲取元素
$("#news a[href$='html']").css("background", "green");
// 根據(jù)屬性值包含特定值來(lái)獲取元素
$("#news a[href*='k2']").css("background", "black");
})
三、總結(jié)
image.png
