JQuery提供了以有效方式操作DOM的方法.您不需要编写大代码来修改任何元素属性的值或从段落或分区中提取HTML代码.
JQuery提供诸如.attr(),. html等方法()和.val()充当getter,从DOM元素中检索信息供以后使用.
html()方法获取第一个匹配元素的html内容(innerHTML).
以下是方法的语法 :
selector .html()
以下是使用.html()和.text(val)方法的示例.这里.html()从对象中检索HTML内容,然后.text(val)方法使用传递的参数&minus来设置对象的值;
<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("div").click(function () { var content = $(this).html(); $("#result").text( content ); }); }); </script> <style> #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;} </style> </head> <body> <p>Click on the square below:</p> <span id = "result"> </span> <div id = "division" style = "background-color:blue;"> This is Blue Square!! </div> </body> </html>
这将产生以下结果 :
您可以使用指定的HTML或DOM元素替换完整的DOM元素. replaceWith(content)方法很好地实现了这个目的.
这是方法:
selector.replaceWith( content )
这里的内容是您想要的而不是原始元素. 这可以是HTML或简单文本.
以下是用"<h1> JQuery很好</h1>"替换除法元素的示例:
<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("div").click(function () { $(this).replaceWith("<h1>JQuery is Great</h1>"); }); }); </script> <style> #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;} </style> </head> <body> <p>Click on the square below:</p> <span id = "result"> </span> <div id = "division" style = "background-color:blue;"> This is Blue Square!! </div> </body> </html>
您可能希望从文档中删除一个或多个DOM元素. JQuery提供了两种方法来处理这种情况.
empty()方法从匹配元素集中删除所有子节点,其中方法remove(expr)方法从DOM中删除所有匹配的元素.
这是方法:
selector.remove( [ expr ]) or selector.empty( )
You can pass optional parameter expr to filter the set of elements to be removed.
以下是单击单击后立即删除元素的示例:
<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("div").click(function () { $(this).remove( ); }); }); </script> <style> .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} </style> </head> <body> <p>Click on any square below:</p> <span id = "result"> </span> <div class = "div" style = "background-color:blue;"></div> <div class = "div" style = "background-color:green;"></div> <div class = "div" style = "background-color:red;"></div> </body> </html>
您可能希望在现有文档中插入新的一个或多个DOM元素. JQuery提供了各种方法来在不同位置插入元素.
after(内容)方法在每个匹配元素之后插入内容,其中作为前面的方法(内容)方法在每个匹配元素之前插入内容.
这是方法:
selector.after( content ) orselector.before( content )
Here content is what you want to insert. This could be HTML or simple text.
以下是在单击元素之前插入<div>元素的示例:
<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("div").click(function () { $(this).before('<div class="div"></div>' ); }); }); </script> <style> .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} </style> </head> <body> <p>Click on any square below:</p> <span id = "result"> </span> <div class = "div" style = "background-color:blue;"></div> <div class = "div" style = "background-color:green;"></div> <div class = "div" style = "background-color:red;"></div> </body> </html>
下表列出了所有可以使用的方法用来操纵DOM元素 :
Sr.No. | 方法&说明 |
---|---|
1 | after(content) 在每个匹配的元素之后插入内容. |
2 | append(content) 将内容附加到每个匹配元素的内部. |
3 | appendTo(selector) 将所有匹配的元素追加到另一个指定的元素集. |
4 | before( content ) 在每个匹配的元素之前插入内容. |
5 | clone(bool) 克隆匹配的DOM元素及其所有事件处理程序,并选择克隆. |
6 | clone() 克隆匹配的DOM元素并选择克隆. |
7 | empty() 从匹配元素集中删除所有子节点. |
8 | html(val) 设置每个匹配元素的html内容. |
9 | html() 获取第一个匹配元素的html内容(innerHTML). |
10 | insertAfter( selector ) 在另一个指定的元素集之后插入所有匹配的元素. |
11 | insertBefore(selector) ) 在另一个指定的元素集之前插入所有匹配的元素. |
12 | prepend(content) 将内容预先添加到每个匹配元素的内部. |
13 | prependTo(selector) 将所有匹配的元素添加到另一个指定的元素集. |
14 | remove( expr ) 从DOM中删除所有匹配的元素. |
15 | replaceAll(selector) 用匹配的元素替换指定选择器匹配的元素. |
16 | replaceWith(content) 用指定的HTML或DOM元素替换所有匹配的元素. |
17 | text(val) 设置所有匹配元素的文本内容. |
18 | text() 获取所有匹配元素的组合文本内容. |
19 | wrap(elem) W用指定的元素说出每个匹配的元素. |
20 | wrap(html) 用指定的包装元素包装每个匹配的元素HTML内容. |
21 | wrapAll(elem) 将匹配集中的所有元素包装到单个包装元素中. |
22 | wrapAll(html) 将匹配集中的所有元素包装到一个包装元素中. |
23 | wrapInner(elem) 用DOM包装每个匹配元素(包括文本节点)的内部子内容元素. |
24 | wrapInner(html) 用HTML结构包装每个匹配元素(包括文本节点)的内部子内容. |