设置获取标签属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .p3{
                color: gold;
            }
            .p2{
                font-size: 20px;
            }
        </style>
        <script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        $(document).ready(function(){

//attr方法 获取属性值

            /*var  $attr = $('p').attr('id');
            console.log($attr);*/

//attr方法 设置属性值

            //$('p').attr('name','hello');

//通过attr 方法 给标签添加多个属性

使用 大括号包裹多组 每组属性使用逗号分隔,属性名和属性值之间用冒号分隔

   $('p').attr({'id':'one',

                'name':'hello',

                'class':'yuan'})

//removeAttr()移除标签的属性

            //$('p').removeAttr('class');

addClass() 给标签添加类名 给标签增加新的类名,而不是覆盖类名

            //$('p').addClass("p3")

//hasClass() 判断标签是否具备某个类名

 返回值为  true  false

            /*var $bool = $('p').hasClass('p4');
            console.log($bool);*/

//removeClass()移除某个类名

            /*$('p').removeClass('p3')*/

//toggleClass 根据当前标签是否有某个类名,判断是添加还是删除该类名;

            $('p').toggleClass('p3');

例子:点击按钮交换颜色

                $('button').click(function(){
                    //每次点击按钮   变换颜色
                    $('p').toggleClass('p3');
                    
                    
                });
                
            })
    </script>
</head>
<body>
    <p id="p1" class="p2 p3">一只乌鸦口渴了</p>
    <button>切换颜色</button>
</body>

</html>

推荐阅读更多精彩内容