jQuery之属性操作

jQuery

属性操作

1)属性
2）CSS 类
3）HTML代码/文本/值

1.属性

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

 设置或返回被选元素的属性值。
 name:属性名称
 properties：作为属性的“名/值对”对象
 key,value：属性名称，属性值
 key,function(index, attr):
 1:属性名称。
 2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

(2)removeAttr(name)

从每一个匹配的元素中删除一个属性
name:要删除的属性名.

将文档中图像的src属性删除
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").removeAttr("src");
结果:
[ <img /> ]

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

获取在匹配的元素集中的第一个元素的属性值。

参数name 描述:
选中复选框为true，没选中为false
jQuery 代码:
$("input[type='checkbox']").prop("checked");

参数properties 描述:
禁用页面上的所有复选框。
jQuery 代码:
$("input[type='checkbox']").prop({
  disabled: true
});

参数key,value 描述:
禁用和选中所有页面上的复选框。
jQuery 代码:
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);

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

2.css类

（1）addClass(class|fn)

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

给li加上不同的class

HTML 代码:
<ul>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
</ul>jQuery 代码:
$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

（2）removeClass([class|fn])

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

从匹配的元素中删除 'selected' 类
jQuery 代码:
$("p").removeClass("selected");

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

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

（3）toggleClass(class|fn[,sw])

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

为匹配的元素切换 'selected' 类
jQuery 代码:
$("p").toggleClass("selected");

每点击三下加上一次 'highlight' 类
HTML 代码:
<strong>jQuery 代码:</strong>
jQuery 代码:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});

3.HTML代码/文本/值

（1）html([val|fn])

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

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

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

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

（2）text([val|fn])

取得所有匹配元素的内容。

返回p元素的文本内容。
jQuery 代码:
$('p').text();

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

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

（3）val([val|fn|arr])

获得匹配元素的当前值。

设定一个select和一个多选的select的值
HTML 代码:
<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
jQuery 代码:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);