日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

JQUERY操作html--获取和设置内容、属性、回调函数

發布時間：2023/12/2 40 豆豆
生活随笔 收集整理的這篇文章主要介紹了 JQUERY操作html--获取和设置内容、属性、回调函数 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一：jQuery -?獲取內容和屬性

1.獲得內容 - text()、html() 以及 val()

? ? ? text() - 返回所選元素的文本內容

? ? ? html() - 返回所選元素的內容（包括 HTML 標記）

<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p id="p1">圣誕快樂，<b>新年快樂</b></p> //給p元素里邊的文本一部分加上b標簽 <button id="b1">顯示文本</button> <button id="b2">顯示html</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) {$("#b1").click(function(){ alert( $("#p1").text() ); //獲取文本});$("#b2").click(function(){ alert( $("#p1").html() ); //獲取html內容 結果會包含b標簽}); });</script>

? ? ? ? ?val() - 返回表單字段的value值

<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <input type="text" id="ip" value="nihao"> <button id="but">顯示value值</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) {$("#but").click(function(){alert($("#ip").val()); 結果返回表單元素的value值（nihao）});});</script>

?

2.獲取屬性 - attr()

<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <a id="aa" href="www.baidu.com"></a> <button id="but">顯示元素屬性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) {$("#but").click(function(){alert($("#aa").attr("href"));}); });</script>

?

?

二、jQuery -?設置內容和屬性

1設置內容和回調函數 - text()、html() 以及 val()

? ? ? ? ?text() - 設置所選元素的文本內容

? ? ? ? ?html() - 設置所選元素的內容（包括 HTML 標記）

<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p id="p1"></p> <button id="b1">顯示文本</button> <button id="b2">顯示html</button></body> </html> <script type="text/javascript"> $(document).ready(function(e) {$("#b1").click(function(){ $("#p1").text("圣誕快樂，<b>新年快樂</b>") ; //設置文本 });$("#b2").click(function(){ $("#p1").html("圣誕快樂，<b>新年快樂</b>") ; //設置html內容 結果會包含b標簽 }); });</script>

?text()、html()回調函數

<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p id="p1">新年快樂</p> <button id="b1">顯示文本</button> <button id="b2">顯示html</button></body> </html> <script type="text/javascript"> $(document).ready(function(e) {$("#b1").click(function(){ $("#p1").text(function(){return "happy new year"; //調用函數，返回一個新的文本}) ; });$("#b2").click(function(){ $("#p1").text(function(){return "happy <b>new</b> year"; //調用函數，返回一個新的文本} );}); });</script>

? ? ?val() - 設置表單字段的value值和回調函數?

?

<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <input type="text" id="ip"> <button id="but">顯示value值</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) {$("#but").click(function(){$("#ip").val("happy"); });});</script>

val（）的回調函數

<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <input type="text" id="ip"> <button id="but">顯示value值</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) {$("#but").click(function(){$("#ip").val(function(){return "happay";}); });});</script>

?

2.設置屬性 ?attr（）

<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <a id="aa" href="www.baidu.com">11111</a> <button id="but">顯示元素屬性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) {$("#but").click(function(){alert($("#aa").attr( { "href":"http://news.baidu.com/" } )); //attr()里邊，要加{}號 }); });</script>

?attr（）的回調函數

<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <a id="aa" href="www.baidu.com"></a> <button id="but">顯示元素屬性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) {$("#but").click(function(){alert($("#aa").attr({ "href":function(){return "http://news.baidu.com/" } } )); //attr()里邊，要加{}號 }); });</script>

?

轉載于:https://www.cnblogs.com/xingyue1988/p/6216844.html

總結

以上是生活随笔為你收集整理的JQUERY操作html--获取和设置内容、属性、回调函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。