jQuery教程 DOM操作-获取内容和属性-职坐标

jQuery教程 DOM操作-获取内容和属性

沉沙 2018-10-09 来源：阅读 1360 评论 0

摘要：本篇教程介绍了jQuery教程 DOM操作-获取内容和属性，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

本篇教程介绍了jQuery教程 DOM操作-获取内容和属性，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

jQuery拥有可操作HTML元素和属性的强大方法。
其中非常重要的部分就是操作DOM的能力。
DOM--文档对象模型。

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
6 <script type="text/javascript">
7     $(function(){
8         $("#btn1").click(function(){
9             alert("Text:"+$("#test").text());
10         })
11         $("#btn2").click(function(){
12             alert("HTML:"+$("#test").html());
13         })
14         $("#btn3").click(function(){
15             alert("值:"+$("#test2").val());
16         })
17         $("#btn4").click(function(){
18             alert("href值:"+$("#a1").attr("href"));
19         })
20     })
21 </script>
22 </head>
23
24 <body>
25     <p id="test">这是段落中的<b>粗体</b>文本。</p>
26     <p>名称：<input type="text" id="test2" value="你我他学习吧" /></p>
27     <p><a href="www.nwtxxb.com" id="a1">你我他学习吧</a></p>
28     <button id="btn4">显示href属性的值</button>
29     <button id="btn3">显示值value</button>
30     <button id="btn1">显示文本</button>
31     <button id="btn2">显示HTML</button>
32 </body>
33 </html>