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 值。