jQuery（二）

jQery获取属性

1. 属性

方法	描述
attr()	设置或返回被选元素的属性值
removeAttr()	要删除的属性名
prop()	获取在匹配的元素集中的第一个元素的属性值。
removeProp()	用来删除由.prop()方法设置的属性集

代码“小栗子”

//attr()
$("img").attr("src");//返回文档中所有图像的src属性值。
$("img").attr({ src: "test.jpg", alt: "Test Image" });//为所有图像设置src和alt属性。
$("img").attr("src","test.jpg");//为所有图像设置src属性。
$("img").attr("title", function() { return this.src });//把src属性的值设置为title属性的值。

//removeAttr()
$("img").removeAttr("src");//将文档中图像的src属性删除

//prop()
$("input[type='checkbox']").prop("checked");//选中复选框为true，没选中为false
$("input[type='checkbox']").prop({disabled: true});//禁用页面上的所有复选框。
$("input[type='checkbox']").prop("disabled", false);//禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("checked", true);
$("input[type='checkbox']").prop("checked", function( i, val ) {return !val;});//通过函数来设置所有页面上的复选框被选中

//removeProp()
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")), ". ");
//设置一个段落数字属性，然后将其删除。

2. css类

方法	描述
addClass()	为每个匹配的元素添加指定的类名
removeClass()	从所有匹配的元素中删除全部或者指定的类。
toggleClass()	如果存在（不存在）就删除（添加）一个类。

代码“小栗子”

//addClass() 
$("p").addClass("selected");//为匹配的元素加上 'selected' 类
$("p").addClass("selected1 selected2");

$('ul li:last').addClass(function() { return 'item-' + $(this).index();});//给li加上不同的class

//removeClass()
$("p").removeClass("selected");//从匹配的元素中删除 'selected' 类
$("p").removeClass();//删除匹配元素的所有类
$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});//删除最后一个元素上与前面重复的class

//toggleClass()
$("p").toggleClass("selected");//为匹配的元素切换 'selected' 类

var count = 0;
  $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
  });//每点击三下加上一次 'highlight' 类
  
  $('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});//根据父元素来设置class属性

3. HTML代码/文本/值

方法	描述
html()	取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
text()	取得所有匹配元素的内容。
val()	获得匹配元素的当前值。

代码“小栗子”

//html()
$('p').html();//返回p元素的内容。

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

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

//text()
$('p').text();//返回p元素的文本内容。

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

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

//val()
$("input").val();//获取文本框中的值

$("input").val("hello world!");//设定文本框的值

$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});//设定文本框的值

$("#single").val("Single2");//设定一个select和一个多选的select的值
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);