jQuery html()
此方法獲取集合中第一個匹配元素的HTML內容或設定每一個匹配元素的html內容。
特別說明:
HTML內容就是內容中可以包含HTML標籤,並且能夠被瀏覽器渲染。
文字內容是先將內容中的HTML預定義字元轉換成html字元實體,這樣HTML標籤就不會被渲染。
語法結構一:
[JavaScript] 純文字檢視 複製程式碼.html()
返回匹配元素集合中第一個元素的HTML內容。
jQuery1.0版本新增。
語法結構二:
[JavaScript] 純文字檢視 複製程式碼.html(htmlString)
引數解析:
htmlString:用來設定匹配元素的一個HTML字串。
設定所有匹配元素的HTML內容。
jQuery1.0版本新增。
語法結構三:
[JavaScript] 純文字檢視 複製程式碼.html(function(index, oldHtml))
引數解析:
function:返回要設定的HTML內容的函式。index:可選,當前元素在匹配元素集合中的索引(從0開始),oldHtml:可選,當前元素原來的THML內容。函式中的this指向當前元素。
jQuery1.4版本新增。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ height:150px; width:150px; background-color:#ccc; margin-top:10px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function () { alert($("div").html()); }) }) </script> </head> <body> <div> <span>螞蟻部落</span> </div> <input type="button" id="bt" value="檢視演示" /> </body> </html>
上面的程式碼返回div元素的HTML內容。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ height:150px; width:150px; background-color:#ccc; margin-top:10px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function () { $("div").html("<strong>螞蟻部落</strong>"); }) }) </script> </head> <body> <div></div> <input type="button" id="bt" value="檢視演示" /> </body> </html>
設定div元素的HTML內容;html標籤會被瀏覽器渲染。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ height:150px; width:150px; background-color:#ccc; margin-top:10px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function () { $("div").html(function () { return "<strong>螞蟻部落</strong>"; }); }) }) </script> </head> <body> <div></div> <input type="button" id="bt" value="檢視演示" /> </body> </html>
功能和上一個程式碼例項相同,只不過要設定的HTML內容是通過函式返回的。
相關文章
- jQuery htmljQueryHTML
- jQuery HTML / CSS 方法jQueryHTMLCSS
- html引入jquery庫HTMLjQuery
- jQuery 操作html元素jQueryHTML
- jQuery 取自己本身HtmljQueryHTML
- jQuery之html()的實現jQueryHTML
- jQuery html(),text(),val()區別jQueryHTML
- jQuery(html,[ownerDocument])用法介紹jQueryHTML
- jquery 新增html元素後 html中click失效問題jQueryHTML
- jQuery的html()和text()區別jQueryHTML
- jquery的html()方法是個坑jQueryHTML
- jQuery匯入html的正確方式jQueryHTML
- JQuery中的html() text() val()區別jQueryHTML
- 將html字串轉化為jquery物件HTML字串jQuery物件
- JQuery中html()和val()的用法區別jQueryHTML
- JQuery1:動態操作HTML和CSSjQueryHTMLCSS
- 利用jQuery在指定元素中新增html元素jQueryHTML
- jQuery HTML5 AJAX 圖片上傳jQueryHTML
- jquery模板外掛jTemplates代替拼htmljQueryHTML
- node上HTML分析利器node-jquery 薦HTMLjQuery
- jQuery刪除html標籤程式碼例項jQueryHTML
- jQuery動態生成html元素的幾種方法jQueryHTML
- jQuery中empty與html("")的區別對比jQueryHTML
- HTML 標籤 和 JQuery線上學習網址HTMLjQuery
- 使用jQuery播放/暫停 HTML5視訊jQueryHTML
- 1.18 JQuery1:動態操作HTML和CSSjQueryHTMLCSS
- 直播app原始碼,HTML + jQuery 實現輪播圖APP原始碼HTMLjQuery
- HTML DOM querySelectorAll() 代替 jquery的 $('') CSS選擇器HTMLjQueryCSS
- jQuery動態建立html元素並設定屬性jQueryHTML
- 《jQuery移動開發》——2.1 語義HTML5jQuery移動開發HTML
- jquery data()函式和html5 data屬性jQuery函式HTML
- jQuery Mobile仿360首頁,jQuery Mobile網格佈局,jQuery Mobile網址大全,HTML5仿360首頁jQueryHTML
- jquery 操作HTML data全域性屬性快取的坑jQueryHTML快取
- 八款華麗的jQuery/HTML5應用推薦jQueryHTML
- 9款完美體驗的HTML5/jQuery應用HTMLjQuery
- 讓人心動的jQuery外掛和HTML5動畫jQueryHTML動畫
- jQuery的text()、html()和val()函式用法簡單介紹jQueryHTML函式
- jQuery data()方法和HTML5 data-*自定義屬性jQueryHTML