青衣 发表于 2021-7-13 17:52:06

jquery温故知新-属性篇

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


[*]设置或返回被选元素的属性值。
\\把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。
3.prop(name|properties|key,value|fn) 1.6+


[*]获取在匹配的元素集中的第一个元素的属性值。
[*]随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误。
[*]用法与attr()相同,区别:attr()用于自定义属性,prop用于标签固有属性。
\\通过函数来设置所有页面上的复选框被选中。
$("input").prop("checked", function( i, val ) {
return !val;
});
4.removeProp(name) 1.6+


[*]用来删除由.prop()方法设置的属性集
[*]随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误
5.addClass(class|fn)


[*]为每个匹配的元素添加指定的类名。
\\给li加上不同的class
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
6.removeClass()


[*]从所有匹配的元素中删除全部或者指定的类。
\\删除最后一个元素上与前面重复的class
$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});
7.toggleClass(class|fn[,sw])


[*]如果存在(不存在)就删除(添加)一个类。
//每点击三下加上一次 'highlight' 类
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()


[*]取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
[*]在一个 HTML 文档中, 我们可以使用.html()方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。
//使用函数来设置所有匹配元素的内容。
$("p").html(function(n){
return "这个 p 元素的 index 是:" + n;
});
9.text()


[*]取得所有匹配元素的内容。
[*]结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
\\使用函数来设置所有匹配元素的文本内容。
$("p").text(function(n){
return "这个 p 元素的 index 是:" + n;
});
10.val()


[*]获得匹配元素的当前值。
[*]在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。
参数


[*]array 用于 check/select 的值
\\设定文本框的值
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
\\设定一个select和一个多选的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

$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);


  
文档来源:51CTO技术博客https://blog.51cto.com/StavinLi/3043322
页: [1]
查看完整版本: jquery温故知新-属性篇