首页 > 代码库 > jQuery属性

jQuery属性

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

参数name 描述:
返回文档中所有图像的src属性值。
$("img").attr("src");

参数properties 描述:
为所有图像设置src和alt属性。
$("img").attr({ src: "test.jpg", alt: "Test Image" });

参数key,value 描述:
为所有图像设置src属性。
$("img").attr("src","test.jpg");

参数key,回调函数 描述:
把src属性的值设置为title属性的值。
$("img").attr("title", function() { return this.src });

 

2、removeAttr(name) 

  注意:1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。

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

HTML 代码:
<img src=http://www.mamicode.com/"test.jpg"/>

jQuery 代码:
$("img").removeAttr("src");

结果:
[ <img /> ]

 

3、prop(name|properties|key,value|fn) 获取在匹配的元素集中的第一个元素的属性值。

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

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

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

参数key,回调函数 描述:
通过函数来设置所有页面上的复选框被选中。
$("input[type=‘checkbox‘]").prop("checked", function( i, val ) {
  return !val;
});

 

4、removeProp(name) 用来删除由.prop()方法设置的属性集

设置一个段落数字属性,然后将其删除。

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. 

 

5、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(); });

 

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

回调函数描述:
删除最后一个元素上与前面重复的class
HTML 代码:
<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>
jQuery 代码:
$(
li:last).removeClass(function() {
return $(this).prev().attr(class);
});

 

7、toggleClass(class|fn[,sw]) 如果存在(不存在)就删除(添加)一个类。

参数class 描述:
为匹配的元素切换 selected 类
$("p").toggleClass("selected");

参数class,switch 描述:
每点击三下加上一次 highlight 类
HTML 代码:
<strong>jQuery 代码:</strong>
jQuery 代码:
  var count = 0;
  $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
  });
回调函数 描述:
根据父元素来设置class属性
$(div.foo).toggleClass(function() {
  if ($(this).parent().is(.bar) {
    return happy;
  } else {
    return sad;
  }
});

 

8、html([val|fn]) 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

无参数 描述:
返回p元素的内容。
$(p).html();

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

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

 

9、text([val|fn]) 取得所有匹配元素的内容。

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

参数val 描述:
设置所有 p 元素的文本内容
$("p").text("Hello world!");

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

 

10、val([val|fn|arr]) 获得匹配元素的当前值。

无参数 描述:
获取文本框中的值
$("input").val();

参数val 描述:
设定文本框的值
$("input").val("hello world!");

回调函数 描述:
设定文本框的值
$(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=http://www.mamicode.com/"check1"/> check1
<input type="checkbox" value=http://www.mamicode.com/"check2"/> check2
<input type="radio" value=http://www.mamicode.com/"radio1"/> radio1
<input type="radio" value=http://www.mamicode.com/"radio2"/> radio2
jQuery 代码:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);

 

jQuery属性