jQuery学习之六---属性

玩了一天，不行了，我得好好学习，打眼一看，现在都晚上九点了，打开电脑，更博文啊，毕竟我们大家都是那么的好学，对不对，羞羞~
今天我们一起来看看jquery的属性的用法，加油，我们一起（真诚脸ing……）！！！

属性

1、attr(name|properties|key,value|fn)设置或返回被选元素的属性值
attr，一般用于获取/设置自定义属性，写什么获取什么，不写获取undefined
我们首先先来解释一下参数：

name：要设置或查询的元素名称
properties：属性的“名/值对”对象
key，value：属性名，属性值
key，function（index，attr）：属性名；返回属性值的函数，第一个参数为当前元素的索引值，第二个参数为原先的属性值

$("img").attr("src");//返回img的src属性值
$("img").attr({src:"test.jpg",title:"测试图片"})；//为img设置src和title属性
$("img").attr("alt","test");//为img设置alt属性
$("img").attr("src",function(){return this.alt+".jpg"});//把图片的src设置为其alt.jpg

2、removeAttr（name）
从每一个匹配的元素中删除一个属性
name：要删除的属性名

<img src="test.jpg">
$("img").removeAttr("src");//移除img图片的src属性

3、prop(name|properties|key,value|fn)
获取在匹配的元素集合中的第一个元素的属性值
需要注意的是attr虽然也可以设置或设置属性的值，那为啥还要有prop掺和呢，哈哈，这个问题是比较值得思考的，原因是prop一般用于获取/设置系统自带属性，获取的是计算后的属性，attr是获取不到的，就比如：input标签的checked和disabled等属性；

name：要设置或查询的元素名称
properties：属性的“名/值对”对象
key，value：属性名，属性值
key，function（index，attr）：属性名；返回属性值的函数，第一个参数为当前元素的索引值，第二个参数为原先的属性值

$("input:checkbox").prop("checked");//获取input框的选中情况，选了返回true，没返回false
$("input:checkbox").prop("disable":true);//禁用页面上所有的复选框

4、removeProp（name）
用来删除由.prop()方法设置的属性集
name：要删除的属性名

$("input:checkbox").removeProp("disabled");//删除input标签的禁用属性

CSS类

5、addclass(class|fn)
为每个匹配的元素添加指定的类名。
参数解析：

class：一个或多个要添加到元素的css类名，用空格分开
function（index，class）：此函数必须返回一个或多个空格隔开的class名。参一为对象在这个集合中的索引值，参二为这个对象原先的class属性值

$("p").addclass("p1 p2");
$("li").addclass(function(){
    return "item+" + $(this).index();
})

6、removeClass（class|fn）
从所有匹配的元素中删除全部或者指定的类。
参数的含义与addcalss的一样，不再赘述

$("div").removeClass("div1");//移除一个
$("div").removeClass();//移除所有

7、toggleClass（class|fn）
如果存在（不存在）就删除（添加）一个类。

$("p").toggleClass("pop");//为p标签切换pop类

//每点击三下加上一次pop类
var count = 0;
$("p").click(function(){
    $(this).toggleClass("pop", count++ % 3 == 0);
});

HTML代码/文本/值

8、html（val|fn）
取得第一个匹配元素的html内容。
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
参数解释：

value：用于设定HTML内容的值
function（index，html）：参一为元素在集合中的索引位置，参二为原先的HTML值

$("p").html();//获取p标签的HTML内容
$("p").html("你好！");//设置p标签的HTML内容
$("p").html(function(i){
    return "这个 p 元素的 index 是：" + i;
 });

9.text(val|fn)
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
参数解释：

value：用于设定HTML内容的值
function（index，html）：参一为元素在集合中的索引位置，参二为原先的HTML值

$('p').text();//返回p元素的文本内容。
$("p").text("Hello world!");//设置所有 p 元素的文本内容

10、val（[val|fn|arr]）
获得匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
参数解释：

val：要设置的值
function（index，value）：此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。
array：用于 check/select 的值

$("input").val();//获取文本框中的值
$("input").val("hello world!");//设定文本框的值

8、9和10 的区别：
html：可以获取到dom标签和文本内容
text：只能获取到文本内容
val：获取input框的文本内容