六、属性选择器

一、本课目标

掌握jQuery的属性选择器

二、属性选择器

属性选择器通过HTML元素的属性来选择属性。

image.png

2.1根据属性名获取元素

属性选择器可以根据是否包含某属性来选取元素。

2.2根据属性值来获取元素

属性选择器可以根据属性的值来选取元素。

2.3根据属性值来获取元素

属性选择器可以指定选择不等于属性是某个特定值的元素。

2.4根据属性值包含特定开头值获取元素

属性选择器可以指定属性值以指定值开头的元素。

2.5根据属性值包含特定的结尾值获取元素

属性选择器可以指定属性值以指定值结尾的元素

2.6根据属性值包含特定的值获取元素

属性选择器可以指定属性值包含指定值的元素
示例代码如下：
html文件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东快报</title>
    <link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<section id="news">
    <header>京东快报<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>京东无锡馆正式启动</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>节能领跑京东先行</a></li>
        <li><a href="sale.jd.com/act/ugk2937w.html" class="last"><span>[特惠]</span>高洁丝实力撩货，领券五折</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(){
    // 根据属性名获取元素
    $("#news a[class]").css("background", "red");
    // 根据属性值获取元素
    $("#news a[class='hot']").css("background", "yellow");
    // 根据属性不为某个值来获取元素
    $("#news a[class!='hot']").css("background", "blue");
    // 根据属性值的开头值来获取元素
    $("#news a[href^='www']").css("background", "grey");
    // 根据属性值的结尾值来获取元素
    $("#news a[href$='html']").css("background", "green");
    // 根据属性值包含特定值来获取元素
    $("#news a[href*='k2']").css("background", "black");
})

三、总结

image.png

最后编辑于：2018.06.26 17:58:26