jquery系列之二——属性操作

开心就好 2016-01-21

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;
});

相关推荐

ganyouxianjava / 0评论 2012-05-31