jQuery操作属性的方法

1、一般属性的操作方法

1.1、attr()方法传一个参数用于获取传入的属性值，如果调用者为一个集合，则返回集合中第一个对象的属性值传两个参数用于设置属性值，如果调用者为一个集合，则设置集合中每一个对象的属性值，如果该属性不存在，则自动增加该属性

1.2、removeAttr()方法：传一个参数，用于移除所有找到的DOM对象的属性

1.3、prop()方法：用法和作用与attr()方法一致区别：当作用于布尔类型属性时（如：checked属性)，获取到的是true/false值而用attr()方法获取到的是属性名称/undefined

1.4、removeProp()方法：用法和作用与removeAttr()方法一致

1.5、注意点：

　　a.传入的属性名和属性值均为字符串的形式传入；

　　b.属性名和属性值的写法和在HTML标签内的写法完全一致；

　　 c.重复设置同一属性会造成覆盖。

2、操作类属性相关方法

2.1、addClass(class|fn)添加类

2.2、removeClass([class|fn])删除类

2.3、toggleClass(class|fn[,sw])切换类：有就删除，没有就添加

2.4、注意点：

　　a.同时操作多个类时，多个类名之间用空格分隔

　　b.与attr(class,className1[ className2 ...] )的区别：

　　用attr方法设置class属性是一次性覆盖设置，新设置的类会覆盖掉原有的类而用上面3个方法操作类属性时，不会影响原有的其他类。

3、内容/文本操作方法

html()、text()、val()：获取时不用传参，设置时传入需要设置的值作为参数

4、综合案例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
    <style>
        .tored{
            width:200px;
            height:30px;
            background:red;
        }
        .togreen{
            width:200px;
            height:30px;
            background:green;
        }
        #div1{
            width:250px;
            height:30px;
            background:red;
        }
        #ddiv1{
            width:200px;
            height:30px;
            background:green;
        }
    </style>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="div1">点我设置我的id属性为ddiv1</div>
<div id="div2"></div>
<button id="btn1">设置div2style属性</button><button id="btn2">移除div2style属性</button>
<div id="div3" class="tored">点我切换类</div>
<script>
    $(function(){
        $("#div1").click(function(){
            $(this).attr("txt1","txt1生效");
            $(this).attr("id","ddiv1");
            $(this).text("我现在是ddiv1了");
        });
        $("#btn1").click(function(){
            $("#div2").attr("style","width:300px;height:30px;background:red;");
        });
        $("#btn2").click(function(){
            $("#div2").removeAttr("style");
        });
        $("#div3").click(function(){
            $(this).toggleClass("tored togreen");
            //$(this).toggleClass("tored").toggleClass("togreen");  等效
        });
    });
</script>
</body>
</html>