搜尋

首頁 >web前端 >js教程 >jQuery中attr()與prop()函數用法實例詳解(附用法區別)_jquery

jQuery中attr()與prop()函數用法實例詳解(附用法區別)_jquery

WBOY
WBOY原創
2016-05-16 15:22:501442瀏覽

本文實例講述了jQuery中attr()與prop()函數用法。分享給大家參考，具體如下：

一、jQuery的attr()方法

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

1. attr(屬性名稱) //取得屬性的值（取得第一個符合元素的屬性值。透過這個方法可以方便地從第一個符合元素中取得一個屬性的值。如果元素沒有對應屬性，則傳回undefined ）

2. attr(屬性名稱, 屬性值) //設定屬性的值（為所有符合的元素設定一個屬性值。）

3. attr(屬性名稱,函數值) //設定屬性的函數值  （為所有符合的元素設定一個計算的屬性值。不提供值，而是提供一個函數，由這個函數計算的值作為屬性值。

4.attr(properties) //為指定元素設定多個屬性值，即：{屬性名稱一: “屬性值一” , 屬性名稱二: “屬性值二” , … … }。 (這是在所有匹配元素中批量設定很多屬性的最佳方式。請注意，如果你要設定物件的class屬性，你必須使用'className' 作為屬性名稱。或者你可以直接使用'class'或' id'。

範例程式碼：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<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>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>
1.attr(name)//取得屬性的值

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

<script>
alert($("ul li:eq(1)").attr("title"));
</script>
結果：

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

<script>
alert($("ul li:eq(1)").attr("alt"));
</script>
結果：

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

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

<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>
結果：

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

3.1把alt屬性的值設定為title屬性的值。 

<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>
結果：

4.attr(properties)  //將一個「名稱/值」形式的物件設定為所有符合元素的屬性

4.1取得

    裡第2個
  • 設定title和alt屬性。 

    <script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>
    結果：

    4.2取得

      裡第2個
    • 設定class。 

      <script>
$("ul li:eq(1)").attr({className:"lili"});
</script>
      結果：

      4.3取得

        裡第2個
      • 設定id。 

        <script>
$("ul li:eq(1)").attr({id:"lili"});
</script>
        結果：

        4.4取得

          裡第2個
        • 設定style。 

          <script>
$("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屬性, 那麼就這樣:


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

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

          jquery中val()與之類似，
          $(this).val();取得某個元素節點的value值，相當於$(this).attr("value");
          $(this).val(value);設定某個元素節點的value值，相當於$(this).attr("value",value);

          二、jQuery的prop()方法：

          prop()函數用於設定或傳回目前jQuery物件所匹配的元素的屬性值。

          函數屬於jQuery物件(實例)。如果需要刪除DOM元素的屬性，請使用removeProp()函數。

          文法

          jQuery 1.6 新增此函數。 prop()函數有以下兩種用法：

          用法一：

          jQueryObject.prop( propertyName [, value ] )
          設定或傳回指定屬性propertyName的值。如果指定了value參數，表示設定屬性propertyName的值為value；如果沒有指定value參數，則表示傳回屬性propertyName的值。

          參數value也可以是函數，prop()將根據匹配的所有元素遍歷執行該函數，函數中的this指標將指向對應的DOM元素。 prop()也會為函數傳入兩個參數：第一個參數就是該元素在符合元素中的索引，第二個參數就是該元素propertyName屬性目前的值。函數的傳回值就是為該元素的propertyName屬性所設定的值。

          用法二：

          jQueryObject.prop( object )
          以物件形式同時設定任意多個屬性的值。物件object的每個屬性對應propertyName，屬性的值對應value。

          注意：prop()函數的所有"設定屬性"操作針對的是當前jQuery物件所匹配的每一個元素；所有"讀取屬性"的操作只針對第一個匹配的元素。
          參數

          請根據前面語法部分所定義的參數名稱尋找對應的參數。

          Parameters Description
          propertyName String type specifies the attribute name.
          value 可選/Object/Function類型指定的屬性值，或傳回屬性值的函數。
          object Object類型指定的對象，用於封裝多個鍵值對，同時設定多項屬性。
          参数value可以是包括对象和数组在内的任意类型。

          返回值

          prop()函数的返回值是任意类型，返回值的类型取决于当前prop()函数执行的是"设置属性"操作还是"读取属性"操作。

          如果prop()函数执行的是"设置属性"操作，则返回当前jQuery对象本身；如果是"读取属性"操作，则返回读取到的属性值。

          如果当前jQuery对象匹配多个元素，返回属性值时，prop()函数只以其中第一个匹配的元素为准。如果该元素没有指定的属性，则返回undefined。

          prop()和attr()的主要区别：prop()函数针对的是DOM元素(JS Element对象)的属性，attr()函数针对的是DOM元素所对应的文档节点的属性。详情请查看jQuery函数attr()和prop()的区别。

          注意事项

          1、如果通过prop()函数更改d5fd7aea971a85678ba271703566ebfd和bb9345e55eb71822850ff156dfde57c8元素的type属性，在多数浏览器上将会抛出一个错误，因为该属性一般不允许在后期更改。

          2、如果使用prop()函数操作表单元素的checked、selected、disabled等属性，如果该元素被选中(或禁用)，则返回true，否则(意即HTML中没有该属性)返回false。

          3、prop()函数还可以设置或返回DOM元素的Element对象上的某些属性，例如：tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等属性。

          4、在IE9及更早版本中，如果使用prop()函数设置的属性值不是一个简单的原始值(String、Number、Boolean)，并且在对应的DOM元素被销毁之前，该属性没有被移除，则可能会导致内存泄漏问题。如果你只是为了存储数据，建议你使用data()函数，以避免内存泄漏问题。

          示例&说明

          以下面这段HTML代码为例：

          <div id="n1">
  <p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>
  <input id="n3" name="order_id" type="checkbox" value="1">
  <input id="n4" name="order_id" type="checkbox" checked="checked" value="2">
</div>

          我们编写如下jQuery代码：

          var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性，而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined
document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function
// prop()设置的属性也是针对元素(Element对象)，因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer
// 以对象形式同时设置多个属性，属性值可以是对象、数组等任意类型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "http://www.jb51.net/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.jb51.net/
// 反选所有的复选框(没选中的改为选中，选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

          附：jquery中attr和prop的区别

          在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。

          关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：

          对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
          对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

          上面的描述也许有点模糊，举几个例子就知道了。

          a6443d4e73fb56505e4fe5afe0f45048百度5db79b134e9f6b82c0b36e0489ee08ed

          这个例子里3499910bf9dac5ae3c52d5ede7383485元素的DOM属性有“href、target和class"，这些属性就是3499910bf9dac5ae3c52d5ede7383485元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。

          ddec45da1f9fc3d73ad4ec9e6cfd94cb删除5db79b134e9f6b82c0b36e0489ee08ed

          这个例子里3499910bf9dac5ae3c52d5ede7383485元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，3499910bf9dac5ae3c52d5ede7383485元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

          再举一个例子：

          4bdf8ad58f944d2707b679ce3fbf035c是否可见
          5c7c8b9482dd4c5245d65c5e97d6f9d3是否可见

          像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

          $("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

          如果上面使用attr方法，则会出现：

          $("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

          希望本文所述对大家jQuery程序设计有所帮助。

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：jQuery語法小結(超實用)下一篇：jQuery語法小結(超實用)

相關文章

看更多