當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript（19）jQuery HTML 获取和设置内容和属性
生活随笔
收集整理的這篇文章主要介紹了
JavaScript（19）jQuery HTML 获取和设置内容和属性
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery HTML
jQuery 擁有可操作 HTML 元素和屬性的強大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。
提示：DOM = Document Object Model（文檔對象模型）
DOM 定義訪問 HTML 和 XML 文檔的標準：“W3C 文檔對象模型獨立于平臺和語言的界面，允許程序和腳本動態訪問和更新文檔的內容、結構以及樣式?！?
jQuery HTML - 獲得內容和屬性
獲得內容 - text()、html() 以及 val()
三個簡單實用的用于 DOM 操作的 jQuery 方法：
通過 jQuery text() 和 html() 方法來獲得內容：
[javascript] view plaincopy$("#btn1").click(function(){?? ??alert("Text:?"?+?$("#test").text());?? });?? $("#btn2").click(function(){?? ??alert("HTML:?"?+?$("#test").html());?? });??
通過 jQuery val() 方法獲得輸入字段的值：
[javascript] view plaincopy$("#btn1").click(function(){?? ??alert("Value:?"?+?$("#test").val());?? });??
獲取屬性 - attr()
jQuery attr() 方法用于獲取屬性值。
獲得鏈接中 href 屬性的值：
[javascript] view plaincopy$("button").click(function(){?? ??alert($("#Attr").attr("href"));?? });??
jQuery HTML - 設置內容和屬性
設置內容 - text()、html() 以及 val()
還是上面提過的3個方法（ 區別在于參數）：
[javascript] view plaincopy$("#btn1").click(function(){?? ??$("#test1").text("Hello?world!");?? });?? $("#btn2").click(function(){?? ??$("#test2").html("<b>Hello?world!</b>");?? });?? $("#btn3").click(function(){?? ??$("#test3").val("Dolly?Duck");?? });??
text()、html() 以及 val() 的回調函數
text()、html() 以及 val()，擁有回調函數。回調函數由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。
然后以函數新值返回希望使用的字符串。
帶有回調函數的 text() 和 html()：
[javascript] view plaincopy$("#btn1").click(function(){?? ??$("#test1").text(function(i,origText){?? ????return?"Old?text:?"?+?origText?+?"?New?text:?Hello?world!?? ????(index:?"?+?i?+?")";?? ??});?? });?? ?? $("#btn2").click(function(){?? ??$("#test2").html(function(i,origText){?? ????return?"Old?html:?"?+?origText?+?"?New?html:?Hello?<b>world!</b>?? ????(index:?"?+?i?+?")";?? ??});?? });??
設置屬性 - attr()
jQuery attr() 方法也用于設置/改變屬性值。
改變（設置）鏈接中 href 屬性的值：
[javascript] view plaincopy$("button").click(function(){?? ??$("#w3s").attr("href","http://www.csdn.net");?? });??
attr() 方法也允許同時設置多個屬性。
同時設置 href 和 title 屬性：
[javascript] view plaincopy$(document).ready(function(){?? ??$("button").click(function(){?? ????$("#csdn").attr({?? ??????"href"?:?"http://www.csdn.net",?? ??????"target"?:?"_blank"?? ????});?? ??});?? });??
attr() 的回調函數
回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數新值返回希望使用的字符串。
帶有回調函數的 attr() 方法：
[javascript] view plaincopy$("button").click(function(){?? ??$("#csdn").attr("href",?function(i,origValue){?? ????return?origValue?+?"/u014194675";??? ??});?? });??
提示：
[javascript] view plaincopy<p><a?href="http://blog.csdn.net"?id="csdn">csdn</a></p>??
哈哈~
<!DOCTYPE?html>?? <html>?? ?? <head>?? <script?src="jquery-1.11.1.js"></script>?? <script>?? $(document).ready(function(){?? ?? ??$("#btn1").click(function(){?? ????alert("Text:?"?+?$("#test1").text());?? ??});?? ??$("#btn2").click(function(){?? ????alert("HTML:?"?+?$("#test1").html());?? ??});?? ??$("#btn3").click(function(){?? ????alert("Value:?"?+?$("#test2").val());?? ??});?? ?? ??$("#btn4").click(function(){?? ????$("#test1").text("可以呀");?? ??});?? ??$("#btn5").click(function(){?? ????$("#test1").html("<b>真的么</b>");?? ??});?? ??$("#btn6").click(function(){?? ????$("#test2").val("周董");?? ??});?? ?? ??$("#btn7").click(function(){?? ????$("#test1").text(function(i,?origText){?? ??????return?(origText?+?"?應該可以吧");?? ????});?? ??});?? ??$("#btn8").click(function(){?? ????$("#test1").html(function(i,?origText){?? ????????return?(origText?+?"?<b>好的</b>");?? ????});?? ??});?? ??$("#btn9").click(function(){?? ????$("#test2").val(function(i,?origText){?? ??????return?(origText?+?"?Jay?Chou");?? ????});?? ??});?? ?? ??$("#button1").click(function(){?? ????alert($("#xyxy").attr("href"));?? ??});?? ??$("#button2").click(function(){?? ????$("#xyxy").attr({?? ??????"href"?:?"http://www.suxin.yeyou.eu",?? ??????"target"?:?"view_frame"?? ????});?? ??});?? ??$("#button3").click(function(){?? ????$("#xyxy").attr("href",?function(i,origValue){?? ??????return?origValue?+?"/answer.html";??? ????});?? ??});?? ?? });?? </script>?? </head>?? ?? <body>?? ?? <p?id="test1"?value="csdn">我可以繼續用<b>杰倫</b>來舉例子么</p>?? <button?id="btn1">顯示文本</button>?? <button?id="btn2">顯示?HTML</button>?? ?? <button?id="btn4">設置文本</button>?? <button?id="btn5">設置?HTML</button>?? ?? <button?id="btn7">回調函數設置文本</button>?? <button?id="btn8">回調函數設置?HTML</button>?? ?? <p>姓名：<input?type="text"?id="test2"?value="周杰倫"></p>?? <button?id="btn3">顯示?value</button>?? <button?id="btn6">設置?value</button>?? <button?id="btn9">回調函數設置?value</button>?? ?? <p><a?href="http://www.suxin.yeyou.eu/test.html"?target="_blank"?id="xyxy">自己的網頁</a></p>?? <button?id="button1">獲取?href</button>?? <button?id="button2">設置?href?多個屬性</button>?? <button?id="button3">回調函數設置?href?</button>?? <p>先點擊鏈接；然后點擊button2，再點擊鏈接；之后再點擊button3，再點擊鏈接。</p>?? ?? </body>?? ?? </html>??
再補充一下剛才設定<a>標簽的 target 屬性遇到的小問題。
之前在“設置 href 多個屬性”時，我將 target 設為 _self。這樣的話，“然后點擊button2，再點擊鏈接”后，雖然仍然是同一個頁面，但 href 已經由http://www.suxin.yeyou.eu變成了http://www.suxin.yeyou.eu/test.html"，這不是我想要的結果，因為這樣會導致“之后再點擊button3，再點擊鏈接”達不到我想要的效果。
于是我將 target 設為 view_frame。這樣就既改變了屬性，又不會出問題。那 view_frame 和 _blank 有什么區別呢？
target="view_window"
當用戶第一次選擇內容列表中的某個鏈接時，瀏覽器將打開一個新的窗口，將它標記為 "view_window"，然后在其中顯示希望顯示的文檔內容。如果用戶從這個內容列表中選擇另一個鏈接，且這個 "view_window" 仍處于打開狀態， 瀏覽器就會再次將選定的文檔載入那個窗口，取代剛才的那些文檔。
jQuery 擁有可操作 HTML 元素和屬性的強大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。
提示：DOM = Document Object Model（文檔對象模型）
DOM 定義訪問 HTML 和 XML 文檔的標準：“W3C 文檔對象模型獨立于平臺和語言的界面，允許程序和腳本動態訪問和更新文檔的內容、結構以及樣式?！?
jQuery HTML - 獲得內容和屬性
獲得內容 - text()、html() 以及 val()
三個簡單實用的用于 DOM 操作的 jQuery 方法：
- text() - 設置或返回所選元素的文本內容
- html() - 設置或返回所選元素的內容（包括 HTML 標記）
- val() - 設置或返回表單字段的值
通過 jQuery text() 和 html() 方法來獲得內容：
[javascript] view plaincopy
通過 jQuery val() 方法獲得輸入字段的值：
[javascript] view plaincopy
獲取屬性 - attr()
jQuery attr() 方法用于獲取屬性值。
獲得鏈接中 href 屬性的值：
[javascript] view plaincopy
jQuery HTML - 設置內容和屬性
設置內容 - text()、html() 以及 val()
還是上面提過的3個方法（ 區別在于參數）：
[javascript] view plaincopy
text()、html() 以及 val() 的回調函數
text()、html() 以及 val()，擁有回調函數。回調函數由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。
然后以函數新值返回希望使用的字符串。
帶有回調函數的 text() 和 html()：
[javascript] view plaincopy
設置屬性 - attr()
jQuery attr() 方法也用于設置/改變屬性值。
改變（設置）鏈接中 href 屬性的值：
[javascript] view plaincopy
attr() 方法也允許同時設置多個屬性。
同時設置 href 和 title 屬性：
[javascript] view plaincopy
attr() 的回調函數
回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數新值返回希望使用的字符串。
帶有回調函數的 attr() 方法：
[javascript] view plaincopy
[javascript] view plaincopy
本來想學到這里就結束了，但是看看上面都是不完整的例子，練習起來可能不太方便，但是如果貼好幾個小例子，看起來會很亂吧。。。于是我總結了一個大例子。。。順便可以放在我的網頁中。。。。。。圖片不想貼了。。。。。。附個鏈接吧，點擊打開鏈接。
[javascript] view plaincopy再補充一下剛才設定<a>標簽的 target 屬性遇到的小問題。
之前在“設置 href 多個屬性”時，我將 target 設為 _self。這樣的話，“然后點擊button2，再點擊鏈接”后，雖然仍然是同一個頁面，但 href 已經由http://www.suxin.yeyou.eu變成了http://www.suxin.yeyou.eu/test.html"，這不是我想要的結果，因為這樣會導致“之后再點擊button3，再點擊鏈接”達不到我想要的效果。
于是我將 target 設為 view_frame。這樣就既改變了屬性，又不會出問題。那 view_frame 和 _blank 有什么區別呢？
target="view_window"
當用戶第一次選擇內容列表中的某個鏈接時，瀏覽器將打開一個新的窗口，將它標記為 "view_window"，然后在其中顯示希望顯示的文檔內容。如果用戶從這個內容列表中選擇另一個鏈接，且這個 "view_window" 仍處于打開狀態， 瀏覽器就會再次將選定的文檔載入那個窗口，取代剛才的那些文檔。
總結
以上是生活随笔為你收集整理的JavaScript（19）jQuery HTML 获取和设置内容和属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQuery获取与设置HTML元素的内容
- 下一篇： jQuery - 获取并设置 CSS 类