jQuery属性

Posted 2020-08-25 caojiayan

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="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="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"]);