jQuery总结(七)

作者: 风的低语 | 来源:发表于2018-06-20 14:41 被阅读9次
    attr和css的区别:
    attr()是操作元素的属性。
    css()是操作元素的style属性。
    前者可以修改<img>的src属性,可以修改<a>的href属性, 可以修改<input>的title属性。然而后者却不行,他它只能修改样式相关的特征。
    
    所以,后者是前者的子集,只是对 style这个特定的属性进行操作。
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                #first{
                    border: 1px solid black;
                }
                .bgColor{
                    background-color: #ccc;
                }
            </style>
            <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
            <script>
                $(document).ready(function(){
                    //odd是选择偶数行,even是选择偶数行
                    $("#first li:odd").css("background-color","#ccc");
                    $("#first li:even").attr("style","color: green;");
                    $(".second").addClass("bgColor");//给#second所在块级标签添加类样式
                    //此语句增加以后又删除,会有警告
                    //:8020/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)
                    $(".second").removeClass("bgColor");//删除样式
    //              console.log($("#first li").parents().html());//找到所有父级标签
                    
                });
                
            </script>
        </head>
        <body>
            
            <ul id="first">
                <li><a>家用电器</a></li>
                <li><a>手机</a></li>
                <li><a>电脑</a></li>
                <li><a>家具</a></li>
                <li><a>男装</a></li>
                <li><a>图书</a></li>
            </ul>
            <ul class="second">
                <li><a>家用电器</a></li>
                <li><a>手机</a></li>
                <li><a>电脑</a></li>
                <li><a>家具</a></li>
                <li><a>男装</a></li>
                <li><a>图书</a></li>
            </ul>
            
        </body>
    </html>
    

    相关文章

      网友评论

        本文标题:jQuery总结(七)

        本文链接:https://www.haomeiwen.com/subject/nnmnuxtx.html