Jquery attr()方法屬性賦值和屬性獲取 - MwSoft

時間 2019-11-20

標籤 jquery attr 方法屬性賦值獲取 mwsoft 欄目 JQuery 简体版

原文原文鏈接

jquery中用attr()方法來獲取和設置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操做中會常常用到attr()，attr()有4個表達式。javascript

1. attr( 屬性名 ) //獲取屬性的值（取得第一個匹配元素的屬性值。經過這個方法能夠方便地從第一個匹配元素中獲取一個屬性的值。若是元素沒有相應屬性，則返回 undefined ）html

2. attr( 屬性名, 屬性值 ) //設置屬性的值（爲全部匹配的元素設置一個屬性值。）java

3. attr( 屬性名 , 函數值 ) //設置屬性的函數值（爲全部匹配的元素設置一個計算的屬性值。不提供值，而是提供一個函數，由這個函數計算的值做爲屬性值。）jquery

4. attr(properties) //給指定元素設置多個屬性值，即：{屬性名一: 「屬性值一」 , 屬性名二: 「屬性值二」 , … … }。(這是一種在全部匹配元素中批量設置不少屬性的最佳方式。注意，若是你要設置對象的class屬性，你必須使用'className' 做爲屬性名。或者你能夠直接使用'class'或者'id'。)app

示例代碼：函數

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">學習

<html xmlns="http://www.w3.org/1999/xhtml">ui

<head>this

<title>jquery中attr()方法</title>

<style>

p{color:red}

li{color:blue;}

.lili{font-weight:bold;color:red;}

#lili{font-weight:bold;color:red;}

</style>

</head>

<body>

<p title="你最喜歡的水果是。">你最喜歡的水果是？</p>

<ul>

</ul>

...

</script>

</body>

<html>

1.attr(name)//獲取屬性的值

1.1使用attr(name)獲取title值：

alert($("ul li:eq(1)").attr("title"));

</script>

結果：顯示橘子汁

1.2使用attr(name)獲取alt值：

alert($("ul li:eq(1)").attr("alt"));

</script>

結果：

顯示123

2. attr(name,value) //設置屬性的值

2.1使用attr(name,value)修改title值爲：不吃橘子

$("ul li:eq(1)").attr("title","不吃橘子");

alert($("ul li:eq(1)").attr("title"));

</script>

結果：

顯示不吃橘子

3. attr(name,fn) //設置屬性的函數值

3.1把alt屬性的值設置爲title屬性的值。

$("ul li:eq(1)").attr("title",function(){ return this.alt});

alert($("ul li:eq(1)").attr("title"));

</script>

結果：

顯示123

4.attr(properties) //將一個「名/值」形式的對象設置爲全部匹配元素的屬性

4.1獲取<ul>裏第2個<li>設置title和alt屬性。

$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});

alert($("ul li:eq(1)").attr("title"));

alert($("ul li:eq(1)").attr("alt"));

</script>

結果：

顯示2個，不喝橘子汁不是123

4.2獲取<ul>裏第2個<li>設置class。

$("ul li:eq(1)").attr({className:"lili"});

</script>

結果：

4.3獲取<ul>裏第2個<li>設置id。

$("ul li:eq(1)").attr({id:"lili"});

</script>

結果：

4.4獲取<ul>裏第2個<li>設置style。

$("ul li:eq(1)").attr({style:"color:red"});

</script>

結果：

在li中添加alt是錯誤的，它只能用在img、area和input元素中（包括applet元素）。對於input元素，alt屬性意在用來替換提交按鈕的圖片。在這裏爲了很詳細說明attr()方法，沒有合適的屬性，全部用了alt進行舉例，只供學習參考attr()方法用法。

在此說明下alt和tite的區別。

alt：這是用以描述圖形的文字，當圖片沒法顯示時，這些文字會替代圖片而被顯示。當鼠標移至圖片上該些文字亦會顯示。

title：是鼠標放上去以後，會顯示出來的文字。

那麼怎麼刪除屬性呢?

jquery中刪除屬性的關鍵詞是: removeAttr 注意A是大寫的. 看看怎麼用的:

一樣是用法一中的html代碼, 我想刪掉li的title屬性, 那麼就這樣:

$("ul li:eq(1)").removeAttr("title");

</script>

就這麼簡單， attr 其實就是原生js中 getAttribute 的簡化實現, 而removeAttr 就是 removeAttribute 的簡寫了。

那麼是否有跟attr()類似的屬性呢？

jquery中val()與之相似，

$(this).val();獲取某個元素節點的value值，至關於$(this).attr("value");

$(this).val(value);設置某個元素節點的value值，至關於$(this).attr("value",value);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Jquery attr()方法 屬性賦值和屬性獲取 - MwSoft

Jquery attr()方法屬性賦值和屬性獲取 - MwSoft