jQuery属性、CSS类及HTML/文本/值操作

属性

attr(name|pro|key,val|fn)

参数name 描述: 返回文档中所有图像的src属性值

jQuery代码

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

参数properties 描述: 为所有图像设置src和alt属性

jQuery代码

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

参数key,value 描述: 为所有图像设置src属性

jQuery代码

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

参数key,回调函数 描述: 把src属性的值设置为title属性的值

jQuery代码

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

removeAttr(name)

描述: 将文档中图像的src属性删除

HTML代码

<img src="test.jpg"/>

jQuery代码

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

结果

[ <img /> ]

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

参数name 描述: 选中所有页面上的复选框（checked值设置为true）

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

参数key,回调函数 描述: 通过函数来反选所有页面上的复选框

jQuery代码

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

removeAttr(name)

描述: 设置一个段落数字属性，然后将其删除

HTML代码

<p> </p>

jQuery代码

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")), ". ");

结果

The secret luggage code is: 1234. Now the secret luggage code is: undefined. 

CSS类

addClass(class|fn)

参数class 描述: 为匹配的元素加上 'selected' 类

jQuery代码

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

回调函数 描述: 给li加上不同的class

HTML代码

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

jQuery代码

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

removeClass([class|fn])

参数class 描述: 从匹配的元素中删除 'selected' 类

jQuery代码

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

参数class 描述: 删除匹配元素的所有类

jQuery代码

$("p").removeClass();

回调函数描述: 删除最后一个元素上与前面重复的class

jQuery代码

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

toggleClass(class|fn[,sw])

参数class 描述: 为匹配的元素切换 'selected' 类

jQuery代码

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

参数class,switch 描述: 每点击三下加上一次 'highlight' 类

jQuery代码

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

回调函数 描述: 根据父元素来设置class属性

jQuery代码

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

HTML代码/文本/值

html([val|fn])

无参数 描述: 返回 p 元素的内容

jQuery代码

$('p').html();

参数val 描述: 设置所有 p 元素的内容

jQuery代码

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

回调函数 描述: 使用函数来设置所有匹配元素的内容

jQuery代码

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

text([val|fn])

无参数 描述: 返回 p 元素的文本内容

jQuery代码

$('p').text();

参数val 描述: 设置所有 p 元素的文本内容

jQuery代码

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

回调函数 描述: 使用函数来设置所有匹配元素的文本内容

jQuery代码

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

val([val|fn|arr])

无参数 描述: 获取文本框中的值

jQuery代码

$("input").val();

参数val 描述: 设定文本框的值

jQuery代码

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

回调函数 描述: 使用函数来设定文本框的值

jQuery代码

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

参数array 描述: 设定一个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"]);

结果

摘自 jQuery API 文档