jquery系列之二——属性操作

1. 返回选中元素的属性值：attr(name)

 示例：返回文档中所有图像的src属性值。  

jquery:

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

结果:

[<img src="test.jpg"/>]

 

2. 设置选中元素的属性值：attr(name:value)

注意：可同时设置多个属性，中间用逗号分隔。

 示例：为所有图像设置src和alt属性。  

jquery:

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

结果:

[<img src="test.jpg" alt="test"/>]

其中参数value也可以是一个function返回的值

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

 

3. 删除选中元素的属性值：removeAttr(name)

注意：是把属性的属性名和属性值都删除掉，而不仅是把属性值删除。

 示例：将文档中图像的src属性删除。  

jquery:

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

结果:

[<img />]

jQuery1.6以后，加上了prop来操作属性。

示例：禁用页面上的所有复选框。  

jquery:

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

关于它们两个的区别：

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

 

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

示例：为匹配的元素加上 'selected' 类。  

jquery:

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

结果:

[<p class="selected"/>]

其中参数也可以是一个function返回的值。

html:

<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>

jquery:

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

 结果:

<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li class="item-3">Hello</li>
</ul>

 

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

注意：是把属性的属性名和属性值都删除掉，而不仅是把属性值删除。

示例：从匹配的元素中删除 'selected' 类。  

jquery:

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

结果:

[<p/>]

其中参数也可以是一个function返回的值。

例如：删除最后一个元素的class与前面重复的class。

jquery:

$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});

 

6. 切换一个类：toggleClass(class|fn[,sw])

即：如果存在，就删除一个类；如果不存在，就添加一个类。

示例1：为匹配的元素切换 'selected' 类。  

jquery:

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

 

示例2：每点击三下加上一次 'highlight' 类。  

jquery:

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

 

示例3：根据父元素来设置class属性。  

jquery:

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

 

7. 返回选中元素的html内容：html()

注意：如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

示例：返回p元素的内容。  

jquery:

$('p').html();

 

8. 设置选中元素的html内容：html(val)

示例：设置所有 p 元素的内容。  

jquery:

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

使用函数来设置所有匹配元素的内容。:

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

 

9. 返回选中元素的文本内容：text()

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

示例：返回p元素的文本内容。  

jquery:

$('p').text();

 

10. 设置选中元素的文本内容：text(val)

示例：设置所有 p 元素的内容。  

jquery:

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

使用函数来设置所有匹配元素的文本内容。:

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

 

11. 获得匹配元素的当前值：val()

示例：获取文本框中的值。  

jquery:

$("input").val();

 

12. 设置匹配元素的当前值：val(val|fn)

示例：设定文本框的值。  

jquery:

$("input").val("hello world!");

使用函数来设置所有匹配元素的文本内容。:

$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});