Web開發——JavaScript庫（jQuery HTML——獲取/設定內容和屬性（DOM操作） 續，需要整合在一起）
阿新 • • 發佈：2018-11-12
3.2 text()、html() 以及 val()的回撥函式
上面的三個 jQuery 方法：text()、html() 以及 val()，同樣擁有回撥函式。回撥函式由兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。
下面的例子演示帶有回撥函式的 text() 和 html()：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery庫，src可以直接指向本地下載的jQery庫--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 14 $(document).ready(function() { 15 $("#btn1").click(function() { 16 $("#test1").text(function(i, origText){ 17 return"Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 18 }); 19 }); 20 $("#btn2").click(function() { 21 $("#test2").html(function(i, origText){ 22 return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; 23 }); 24 }); 25 }); 26 27 </script> 28 </head> 29 30 <body> 31 32 <p id="test1">這是<b>粗體</b>文字。</p> 33 <p id="test2">這是另一段<b>粗體</b>文字。</p> 34 <button id="btn1">顯示舊/新文字</button> 35 <button id="btn2">顯示舊/新 HTML</button> 36 37 </body> 38 </html>
輸出結果：
這是粗體文字。
這是另一段粗體文字。
3.3 設定內容 - attr()
jQuery attr() 方法也用於設定/改變屬性值。
舉例1（下面的例子演示如何改變（設定）連結中 href 屬性的值）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery庫，src可以直接指向本地下載的jQery庫--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 14 $(document).ready(function() { 15 $("button").click(function() { 16 $("#w3s").attr("href","http://www.w3school.com.cn/jquery"); 17 }); 18 }); 19 20 </script> 21 </head> 22 23 <body> 24 25 <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p> 26 <button>改變 href 值</button> 27 <p>請把滑鼠指標移動到連結上，或者點選該連結，來檢視已經改變的 href 值。</p> 28 29 </body> 30 </html>
輸出結果：
請把滑鼠指標移動到連結上，或者點選該連結，來檢視已經改變的 href 值。
舉例2（attr() 方法也允許您同時設定多個屬性。下面的例子演示如何同時設定 href 和 title 屬性）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery庫，src可以直接指向本地下載的jQery庫--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 14 $(document).ready(function() { 15 $("button").click(function() { 16 $("#w3s").attr({"href","http://www.w3school.com.cn/jquery", "title" : "W3School jQuery Tutorial"}); 17 }); 18 }); 19 20 </script> 21 </head> 22 23 <body> 24 25 <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p> 26 <button>改變 href 值</button> 27 <p>請把滑鼠指標移動到連結上，或者點選該連結，來檢視已經改變的 href 值。</p> 28 29 </body> 30 </html>
輸出結果：
請把滑鼠指標移動到連結上，或者點選該連結，來檢視已經改變的 href 值。
3.4 attr() 的回撥函式
jQuery 方法 attr()，也提供回撥函式。回撥函式由兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。
下面的例子演示帶有回撥函式的 attr() 方法：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery庫，src可以直接指向本地下載的jQery庫--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 14 $(document).ready(function() { 15 $("button").click(function() { 16 $("#w3s").attr("href", function(i, origValue) { 17 alert(origValue + "/jquery"); 18 }); 19 }); 20 }); 21 22 </script> 23 </head> 24 25 <body> 26 27 <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p> 28 <button>改變 href 值</button> 29 <p>請把滑鼠指標移動到連結上，或者點選該連結，來檢視已經改變的 href 值。</p> 30 31 </body> 32 </html>
輸出結果：
請把滑鼠指標移動到連結上，或者點選該連結，來檢視已經改變的 href 值。