jQuery 属性操作（属性、css类、HTML、文本、value值）——0715

一、属性操作

（1）attr

attr() 获取或设置元素的属性值

获取： 获取匹配的元素集合中的第一个元素的属性的值，参数为属性名。

	$(".info").attr("value");

设置： 设置每一个匹配元素的一个或多个属性。 设置的属性在 dom元素标签中可以显示，也可以在控制台输出属性值。
参数可以写成以下三种形式：
key,value || key,fn || properties“名:值”对象。
要注意的是：

回调函数的 index 参数为对象在这个集合中的索引值，val参数为这个对象原先的属性值；回调函数必须返回要设置的属性值；
参数写成 properties “名/值”对象形式，这种方式可以一次性设置多个属性值

举例：

    //参数写成key,value形式
    $("#ipt").attr("value", "456");   
    
    //参数写成key,回调函数形式，
    $(".info").attr("value", function (index, val) {
        console.log(index, val);
        return "abc";  //返回要设置的值
    });
    
    //参数写成properties“名/值”对象形式
    $(".info").attr({
        value:"测试",
        name:"ssshhh"
    });

attr() 设置自定义属性：

    $("#ipt").attr("data-index", "自定义");   //可以设置
    console.log($("#ipt").attr("data-index"));  //dom元素标签中可以显示   在控制台输出属性值
    //attr删除自定义属性
    $("#ipt").removeAttr("data-index");  //可以删除
    console.log($("#ipt").attr("data-index"));   //dom元素中移除属性，移除后控制台输出undefined

（2）prop

prop() 获取或设置元素的属性值

获取： 获取匹配的元素集中第一个元素的属性（property）值。参数为属性名称。

	$(".info").prop("value")

设置： 设置每一个匹配元素的一个或多个属性。参数可以写成三种形式，和 attr 一致。
这里仅以参数为 key,value 形式为例：

	$(".info").prop("value", "1111111");    //dom元素标签中不显示，可以在控制台输出属性值。

prop设置自定义属性：

    $("#ipt").prop("data-index", "prop自定义");
    console.log($("#ipt").prop("data-index"));   //标签中不显示,可以输出属性值
    $("#ipt").removeProp("data-index");
    console.log($("#ipt").prop("data-index"));  //删除后标签中不显示,输出undefined

（3）removeAttr

removeAttr() 从每一个匹配的元素中删除一个属性，参数为要删除的属性名。

可以从 dom元素中移除属性，并且删除后控制台输出该属性undefined。

	$("#ipt").removeAttr("value");

（4）removeProp

removeProp() 从每一个匹配的元素中删除一个属性，参数为要删除的属性名。

删除后dom元素中还可以看到该属性，但是在控制台输出该属性undefined。

	$("#ipt").removeProp("value");

（5）attr 和 prop 的区别

区别1：

attr() 方法 设置的属性在dom元素标签中显示，可以在控制台输出属性值；
prop() 方法 设置的属性在dom元素标签中不显示，可以在控制台输出属性值。

区别2：

attr() 方法 移除属性，可以连 dom 元素标签中的一起移除，移除后控制台输出 undefined；
prop() 方法 移除属性，dom 元素标签中的还在，移除后控制台输出 undefined。

区别3：

prop() 设置的属性，用 attr 获取不到；也不能用removeAttr删除；
attr() 设置的属性，用 attr 和 prop 都可以获取到；用removeProp删除后还可以用attr获取。

    $("#ipt2").prop("value","111");   //prop设置的属性，用attr获取不到
    $("#ipt2").removeAttr("value");  //prop设置的属性，也不能用removeAttr删除
    console.log($("#ipt2").prop("value"));  //111
    console.log($("#ipt2").attr("value"));  //undefined
    
    $("#ipt3").attr("value","222");   //attr设置的属性，用attr和prop都可以获取到
    console.log($("#ipt3").prop("value"));  //222
    console.log($("#ipt3").attr("value"));  //222

（6）写反选功能

<input type="checkbox" class="ckbox"/>篮球
<input type="checkbox" class="ckbox"/>足球
<input type="checkbox" class="ckbox"/>乒乓球
<button id="fbtn">反选</button>

<script>
    $("#fbtn").click(function () {
        $(".ckbox").each(function (index) {
            console.log(this);  //事件里边输出的this是dom对象
            $(this).prop("checked", !$(this).prop("checked"));  //$(this)是将 dom对象转化为jQuery对象
        })
    });
</script>

二、CSS类操作——class

addClass(class || fn) 添加；
removeClass(class || fn) 移除；
toggleClass(class || fn [,sw]) 类别切换。第二个参数是一个用来判断样式类添加还是移除的 boolean 值，false是不添加。不写的话，默认有则移除，无则添加。

参数可以写成回调函数形式，该函数必须返回一个或多个空格分隔的class名。
该回调函数接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

举例：

    $(".block").addClass("box1 user");  //添加多个class名，用空格分开
    $(".block").removeClass("user");  //移除class名
    //toggleClass 类别切换  有则移除  无则添加
    $(".block").toggleClass("aaa");
    $(".block").toggleClass("aaa",true);

    $(".block").toggleClass(function (index, val) {
        return "user";
    }, false);

三、HTML代码/文本/值 操作

（1）内容操作

html() 获取或设置HTML内容的值，类似于js中的 innerHTML；
text() 获取或设置元素内容的文本，类似于js中的 innerText。

    $(".content").html("<span>123</span>");   
    console.log($(".content").text());  //123
    console.log($(".content").html());  //<span>123</span>
    
    $(".content").text("<span>123</span>");  
    console.log($(".content").text());  //<span>123</span>
    console.log($(".content").html());  //&lt;span&gt;123&lt;/span&gt;

（2）value值操作

val() 获取或设置元素的value值。

参数写成字符串形式，是要设置的值：

    $("#list").val("设置元素的value值");   
    console.log($("#list").val());  //设置元素的value值

参数写成回调函数形式：

    $("#list").val(function (index, val) {
        console.log(index, val);  //index为元素在集合中的索引位置，val为原先的value值
        return "换值";
    });
    console.log($("#list").val());  //换值
    console.log($("#list").attr("value"));  //undefined
    console.log($("#list").prop("value"));  //换值

注意：

val() 方法设置的 value 值使用 attr() 方法获取不到。

参数写成一个数组：
用于 check/select 的值，如果设置成和对象原先的value值相同，则check/select为true，即默认选中。

<input type="checkbox" class="hobby" value="a"/>篮球
<input type="checkbox" class="hobby" value="b"/>足球
<input type="checkbox" class="hobby" value="c"/>羽毛球

<script>
	//checked设为true false true
    $(".hobby").val(["a", "", "c"]);
    
    //将索引为1的checkbox 的checked设为true
    $(".hobby").eq(1).val(["b"])   
    console.log($(".hobby").eq(1).prop("checked"));   //true 
</script>