jQuery慢慢啃之属性（三）

1.attr(name|properties|key,value|fn)设置或返回被选元素的属性值。

$("img").attr("src");//获取属性

$("img").attr({ src: "test.jpg", alt: "Test Image" });//设置多个属性

$("img").attr("src","test.jpg");//设置单个属性

$("img").attr("title", function() { return this.src });//设置title值为函数返回值

 

2.removeAttr(name)从每一个匹配的元素中删除一个属性

$("img").removeAttr("src");

 

3.prop(name|properties|key,value|fn)

$("input[type='checkbox']").prop("checked");//获取元素属性值

$("input[type='checkbox']").prop({disabled: true});//map设置元素属性值

$("input[type='checkbox']").prop("disabled", false);//设置元素属性值

$("input[type='checkbox']").prop("checked", function( i, val ) {  return !val;});//此处i表示元素所在索引，val代表元素的属性值

.attr()和.prop()都不应该被用来取值/设值。使用.val()方法代替

.prop()方法应该被用来处理boolean attributes/properties以及在html(比如：window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。 

 

4.removeProp(name)用来删除由.prop()方法设置的属性集

var $para = $("p"); $para.prop("luggageCode", 1234);

$para.removeProp("luggageCode");

 

5.addClass(class|fn)为每个匹配的元素添加指定的类名。

$("p").addClass("selected");//添加一个类

$("p").addClass("selected1 selected2");//添加2个类

$('ul li').addClass(function(index, class) {return 'item-' + $(this).index();});// 对集合中的元素加上不同的类，其中函数第一个参数是索引，第二个参数是对应的原来的类名值

 

6.removeClass([class|fn])从所有匹配的元素中删除全部或者指定的类。

$("p").removeClass("selected");

$("p").removeClass();//删除所有类

$('li:last').removeClass(function() {return $(this).prev().attr('class');});//用函数删除

 

7.toggleClass(class|fn[,sw])如果存在（不存在）就删除（添加）一个类。

$("p").toggleClass("selected");//切换类

var count = 0;//根据点击次数切换类

$("p").click(function(){$(this).toggleClass("highlight", count++ % 3 == 0);  });

$('div.foo').toggleClass(function() {//根据其他条件切换类名

if ($(this).parent().is('.bar')

{     return 'happy';   }

else {     return 'sad';   }

});

 

8.html([val|fn])取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档

$('p').html();返回p元素的内容。

$("p").html("Hello <b>world</b>!");//设置所有 p 元素的内容

 $("p").html(function(n){return "这个 p 元素的 index 是：" + n; });//使用函数来设置所有匹配元素的内容。

 

9.text([val|fn])取得所有匹配元素的内容。

$('p').text();//返回p元素的文本内容

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

 $("p").text(function(n){return "这个 p 元素的 index 是：" + n; });//使用函数来设置所有匹配元素的文本内容。

 

10.val([val|fn|arr])获得匹配元素的当前值。

$("input").val();//获取文本框中的值

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

$('input:text.items').val(function() {return this.value + ' ' + this.className;});//设定文本框的值

<select id="single">

  <option>Single</option>

  <option>Single2</option>

</select>

<select id="multiple" multiple="multiple">

  <option selected="selected">Multiple</option>

  <option>Multiple2</option>

  <option selected="selected">Multiple3</option>

</select><br/>

<input type="checkbox" value="check1"/> check1

<input type="checkbox" value="check2"/> check2

<input type="radio" value="radio1"/> radio1

<input type="radio" value="radio2"/> radio2

执行：

$("#single").val("Single2");

$("#multiple").val(["Multiple2", "Multiple3"]);

$("input").val(["check2", "radio1"]);