jQuery属性选择器

言之有李
140 阅读1分钟 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    .redClass{
        color:red;
    }
</style>
</head>
<body>
<ul>
    <li class="a">我是程序员1</li>
    <li data-name="zhangsan">我是程序员2</li>
    <li class="b">我是程序员3</li>
    <li class="c">我是程序员4</li>
    <li data-name="lisi">我是程序员5</li>
</ul>
<a href="http://www.baidu.cn">百度</a>
<a href="www.baidu.com">百度一下</a>

<script src="./jquery-1.12.4.js"></script>
<script>
    /* 属性选择器可以根据是否包含某属性来选取元素 */
    // $('ul li[data-name]').css('background','red');
    /* 根据属性的值来选取元素 */
    // $('ul li[data-name=lisi]').css('background','red');
    /* 不等于属性是某个特定值的元素 */
    // $('ul li[data-name!=lisi]').css('background','red');
    /* 以指定值开头的元素 */
    // $('a[href^=http]').css('color','red');
    // $('a[href^="http"]').css('color','red');
    /* 以指定值结尾的元素 */
    // $('a[href$=".com"]').css('color','red');
    /* 包含指定值的元素 */
    /* *通配符 */
    // $('a[href*="baidu"]').css('color','red');
    /* 添加样式类的 */
    $('a[href*="baidu"]').addClass('redClass')
</script>
</body>
</html>
avatar
文章
阅读
粉丝