【学亮IT手记】jQuery DOM操作-获取内容和属性

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>

 

posted @ 2018-08-11 18:13  学亮编程手记  阅读(138)  评论(0编辑  收藏  举报