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

Posted 学亮编程手记

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学亮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>

 

以上是关于学亮IT手记jQuery DOM操作-获取内容和属性的主要内容,如果未能解决你的问题,请参考以下文章

学亮IT手记jQuery callback方法实例

学亮IT手记jQuery each()函数用法实例

学亮IT手记jQuery text()/html()回调函数实例

学亮IT手记mysql创建/查看/切换数据库

学亮IT手记Servlet的生命周期

jQuery笔记——DOM操作