jQuery操作得到DOM元素
Posted llguanli
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery操作得到DOM元素相关的知识,希望对你有一定的参考价值。
jQuery再DOM操作方面提供了一些函数及其用法,这里就对DOM元素的包装简单说明一下,怎样使用会了,对其它方法也能灵活的使用。以下是一个小样例及其效果图。
代码例如以下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>演示jquery操作得到的元素</title> <%--引入jquery文件--%> <script type ="text/javascript" src ="jquery-2.1.4.js"></script> <script type ="text/javascript"> $(document).ready(function () { //触发onclick事件 $("#testbutton").click( function () { //使用class为test的元素包裹给定元素 $("p").wrap($(".test")); } ); }); </script> <%--基本样式设定--%> <style type ="text/css"> .test { color :white ; background-color :#ffd800; } .wrap { background-color :green ; } </style> </head> <body> <form id="form1" runat="server"> <div id="content"> <button id="testbutton">測试</button> <br /><br /> <div class ="test"></div> <p id ="first">第一段文字,id为first</p> <p id ="second">第二段文字。id为second</p> <p id ="third">第三段文字,id为third</p> </div> </form> </body> </html>对于jQuery的使用自己要多多实践,这样才干对它了如指掌啊~
以上是关于jQuery操作得到DOM元素的主要内容,如果未能解决你的问题,请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段