jQuery属性详解

Posted 2021-04-08 阿博在路上

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

概述:获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。

简单讲也就是一个参数代表获取属性的值，两个参数代表增加一个新的属性和给属性赋值,或者增加两个属性并赋值。

attr(name):

jQuery 代码:

获取文档中所有图像的src属性值。

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

attr(properties):

jQuery 代码:

为所有图像设置src和alt属性。

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

attr(key,value):

jQuery 代码:

为所有图像设置src属性。

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

attr(fn()):

jQuery 代码:

把src属性的值设置为title属性的值。

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

removeAttr(name)

概述:从每一个匹配的元素中删除一个属性

html 代码:

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

<img src="test.jpg"/>

jQuery 代码:

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

结果:

<img />

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

概述:获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

prop(name):

jQuery 代码:

若此复选框为选中状态,返回true，没选中返回false

$("input[type='checkbox']").prop("checked");

prop(properties):

jQuery 代码:

禁用页面上的所有复选框。

$("input[type='checkbox']").prop({ disabled: true});

prop(key,value):

jQuery 代码:

禁用和选中所有页面上的复选框。

$("input[type='checkbox']").prop("disabled", false);$("input[type='checkbox']").prop("checked", true);

prop(fn()):

jQuery 代码:

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

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.

addClass(class|fn)

概述:为每个匹配的元素添加指定的类名。

addClass(class):

jQuery 代码:

为匹配的元素加上 'selected' 类

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

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

removeClass([class|fn])

概述:从所有匹配的元素中删除全部或者指定的类。

removeClass(class):

jQuery 代码:

从匹配的元素中删除 'selected' 类

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

删除匹配元素的所有类

$("p").removeClass();

removeClass(fn()):

jQuery 代码:

删除最后一个元素上与前面重复的class

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

toggleClass(class|fn[,sw])

概述:如果存在（不存在）就删除（添加）一个类。

toggleClass(class):

jQuery 代码:

为匹配的元素切换 'selected' 类

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

toggleClass(class,switch):

每点击三下加上一次 'highlight' 类

jQuery 代码:

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

toggleClass(fn()):

jQuery 代码:

根据父元素来设置class属性

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

html([val|fn])

概述:取得第一个匹配元素的html内容。

html():返回p元素的内容。

jQuery 代码:

$('p').html();

html(val):

设置所有 p 元素的内容

jQuery 代码:

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

html(fn()):

使用函数来设置所有匹配元素的内容。

jQuery 代码:

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

text([val|fn])

概述:取得所有匹配元素的内容。

text():返回p元素的文本内容。

jQuery 代码:

$('p').text();

text(val):设置所有 p 元素的文本内容

jQuery 代码:

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

text(fn()):

使用函数来设置所有匹配元素的文本内容。

jQuery 代码:

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

val([val|fn|arr])

概述:获得匹配元素的当前值。

val():

获取文本框中的值

jQuery 代码:

$("input").val();

val(val):

设定文本框的值

jQuery 代码:

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

val(fn()):

设定文本框的值

jQuery 代码:

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

val(array):

设定一个select和一个多选的select的值

check,select,radio等都能使用为之赋值

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