jquery温故知新-属性篇

青衣

　　1.attr(name|properties|key,value|fn)

• 设置或返回被选元素的属性值。
  

\\把src属性的值设置为title属性的值。
$("img").attr("title", function() { return this.src });

2.removeAttr(name)

• 从每一个匹配的元素中删除一个属性
  
• 1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
  1.7版本在IE6下已支持删除disabled。
  

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

• 获取在匹配的元素集中的第一个元素的属性值。
  
• 随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误。
  
• 用法与attr()相同，区别:attr()用于自定义属性，prop用于标签固有属性。
  

\\通过函数来设置所有页面上的复选框被选中。
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

4.removeProp(name) 1.6+

• 用来删除由.prop()方法设置的属性集
  
• 随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误
  

5.addClass(class|fn)

• 为每个匹配的元素添加指定的类名。
  

\\给li加上不同的class
$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

6.removeClass([class|fn])

• 从所有匹配的元素中删除全部或者指定的类。
  

\\删除最后一个元素上与前面重复的class
 $('li:last').removeClass(function() {
  return $(this).prev().attr('class');
});

7.toggleClass(class|fn[,sw])

• 如果存在（不存在）就删除（添加）一个类。
  

//每点击三下加上一次 'highlight' 类
  var count = 0;
  $("p").click(function(){
    $(this).toggleClass("highlight", count++ % 3 == 0);
  });
  //根据父元素来设置class属性
 $('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
  return 'happy';
  } else {
  return 'sad';
  }
});

8.html([val|fn])

• 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
  
• 在一个 HTML 文档中, 我们可以使用.html()方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
  

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

9.text([val|fn])

• 取得所有匹配元素的内容。
  
• 结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
  

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

10.val([val|fn|arr])

• 获得匹配元素的当前值。
  
• 在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
  

参数

• array 用于 check/select 的值
  

\\设定文本框的值
$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});
\\设定一个select和一个多选的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
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);