jQuery 属性方法 总结

属性方法

1.attr( name | pro | key,val |fn )读取或修改元素的属性值（行内）。

参数：
1.name：属性的名称。（用于读取值）
2.properties：作为属性的名称的对象。（用于修改多个属性）
3.key，value：属性名和属性值.(用于修改多个属性）
4.fn：回调函数。function（index，attr）{}。index为元素队列中的索引值，attr为元素原来的属性值。

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

$("img").attr({ src: "test.jpg", alt: "Test Image" });

$("img").attr("src","test.jpg");

$("img").attr("title", function() { return this.src });

 

2.removeAttr( name )

移除属性。

参数：name。属性名称。

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

 

3.prop（n | p | k，v | f ）

读取或修改属性。该方法与attr方法类似，但该方法针对布尔类型的属性。

$("input[type='checkbox']").prop("checked");
$("input[type='checkbox']").prop({
  disabled: true
});

$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

 

4.removeProp（name）

移除属性。该方法所移除的属性不推荐默认属性。

var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");

 

5.addClass（class | fn）

添加类名。

参数：

1.class：指定类名。多个使用空格分开。

2.function（index，class）{}：函数，index为元素队列的索引值，class为要添加的类名。

$("p").addClass("selected");
$("p").addClass("selected1 selected2");

$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

 

6.removeClass（[class | fn]）

该方法与添加类名方法类似。

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

删除匹配元素的所有类
$("p").removeClass();

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

 

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

参数：

1.class：切换的类名。

2.class，switch：类名，用于决定元素是否包含class的布尔值

3.function（index，class，switch）[,switch]：函数，索引值，类名，布尔值。

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

每点击三下加上一次 '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内容。

参数：

1.空：获取属性。

2.文本：修改内容为指定文本。

3.function（index，html）{}：元素索引值，原来的html值。

$('p').html();

$("p").html("Hello <b>world</b>!");

$("p").html(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

 

9.text（val | fn）

获取或修改元素的文本内容（不包括元素标签）

该方法与html方法类似。

$('p').text();

$("p").text("Hello world!");

$("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;
});