欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

JavaScript（19）jQuery HTML 获取和设置内容和属性

发布时间：2025/6/15 49 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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 方法：
  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值

通过 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>  
    • 哈哈~

    本来想学到这里就结束了，但是看看上面都是不完整的例子，练习起来可能不太方便，但是如果贴好几个小例子，看起来会很乱吧。。。于是我总结了一个大例子。。。顺便可以放在我的网页中。。。。。。图片不想贴了。。。。。。附个链接吧，点击打开链接。

    [javascript] view plaincopy
  • <!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" 仍处于打开状态， 浏览器就会再次将选定的文档载入那个窗口，取代刚才的那些文档。

    总结

    以上是生活随笔为你收集整理的JavaScript（19）jQuery HTML 获取和设置内容和属性的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。