jQuery prop()和attr()的區別用法及代碼示例

在本文中，我們將了解 JQuery 中 prop() 和 attr() 之間的區別。jQuery是最快且輕量級的 JavaScript 庫，用於簡化 HTML/CSS 文檔之間的交互，或者更準確地說，文檔對象模型 (DOM)和 JavaScript。 JQuery 以其座右銘而聞名“少寫，多做。”它隻是意味著您隻需編寫幾行代碼即可實現您的目標。

jQuery .prop() 方法：此方法用於獲取匹配元素集中第一個元素的屬性值。

用法:

$(selector).prop(property)

示例 1：在此示例中，我們將使用 jQuery。 prop()方法。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script> 
  
    <script> 
        $(document).ready(function () { 
            $("button").click(function () { 
                var $val = $("div"); 
                $val.prop("font-size", "5px"); 
                $val.append("Property value = " 
                    + $val.prop("font-size")); 
            }); 
        }); 
    </script> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        button { 
            background-color: #4CAF50; 
            /* Green */ 
            border: none; 
            color: white; 
            padding: 15px 32px; 
            text-align: center; 
            text-decoration: none; 
            display: inline-block; 
            font-size: 16px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksForGeeks 
    </h1> 
      
    <button>Property</button> 
    <br> 
    <div></div> 
</body> 
  
</html>

輸出：

jQuery .attr() 方法：此方法用於從匹配集中的第一個元素獲取屬性值，或將屬性值設置到所有匹配元素上。

示例 2：在本例中，我們將使用.attr()方法。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <title>The jQuery Example</title> 
  
    <script type="text/javascript" src= 
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
    </script> 
      
    <script type="text/javascript"> 
        $(document).ready(function () { 
            var title = $("h1").attr("title"); 
            $("#divid").text(title); 
        }); 
    </script> 
  
    <style> 
        body { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        <h1 style="color:green" 
            title="A computer science portal for Geeks"> 
            GeeksForGeeks 
        </h1> 
        <p id="myid">GeeksForGeeks</p> 
        <div id="divid"></div> 
    </div> 
</body> 
  
</html>

輸出：

說明：在上麵的示例中，您可以注意到“極客的計算機科學門戶”是 GeeksForGeeks 的值。

.prop()和attr()方法的區別：

prop() Method	attr() Method
該方法返回當前值。	該方法返回默認值。
此方法主要用於當用戶想要更改 HTML 標簽屬性的值時。	該方法主要用於設置HTML標簽屬性的默認值。
它根據 DOM 樹更改該 HTML 標記的屬性。	它更改該 HTML 標記的屬性。
它的語法是： $(選擇器).prop(屬性)	它的語法是： $(選擇器).attr(屬性)
它需要三個參數 Property 、 value 和一個函數	它需要三個參數：屬性、值和函數

相關用法

注：本文由純淨天空篩選整理自krishnanand3大神的英文原創作品 Difference between prop() and attr() Methods in jQuery。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。