📌  相关文章
📜  jQuery-DOM操作

📅  最后修改于: 2020-10-23 08:16:50             🧑  作者: Mango

JQuery提供了有效地操作DOM的方法。您无需编写大型代码即可修改任何元素的属性值或从段落或分区中提取HTML代码。

JQuery提供了诸如.attr（），.html（）和.val（）之类的方法，这些方法充当获取器，从DOM元素中检索信息以供以后使用。

内容操纵

html（）方法获取第一个匹配元素的html内容（innerHTML）。

这是方法的语法-

selector.html( )

例

以下是使用.html（）和.text（val）方法的示例。在这里.html（）从对象检索HTML内容，然后.text（val）方法使用传递的参数设置对象的值-

现场演示
The jQuery Example
      
        
      
        
      
   
    
   
      
Click on the square below:

       
        
      

         This is Blue Square!!

这将产生以下结果-

DOM元素替换

您可以将完整的DOM元素替换为指定的HTML或DOM元素。 replaceWith（content）方法很好地达到了这一目的。

这是方法的语法-

selector.replaceWith( content )

这里的内容是您想要的，而不是原始元素。这可以是HTML或简单文本。

例

以下是将分隔元素替换为“

JQuery is Great ”的示例-

现场演示
The jQuery Example
      
        
      
        
      
   
    
   
      
Click on the square below:

       
        
      

         This is Blue Square!!

这将产生以下结果-

删除DOM元素

在某些情况下，您想从文档中删除一个或多个DOM元素。 jQuery提供了两种方法来处理这种情况。

empty（）方法从匹配元素集中删除所有子节点，而remove（expr）方法从DOM中删除所有匹配元素。

这是方法的语法-

selector.remove( [ expr ])

or 

selector.empty( )

您可以传递可选参数expr来过滤要删除的元素集。

例

以下是一个示例，其中单击元素即会删除它们-

现场演示
The jQuery Example
      
        
      
        
      
   
    
   
      
Click on any square below:

这将产生以下结果-

插入DOM元素

在某些情况下，您想在现有文档中插入一个或多个新DOM元素。 JQuery提供了各种方法来在各个位置插入元素。

after（content）方法在每个匹配元素之后插入内容，而before（content）方法在每个匹配元素之前插入内容。

这是方法的语法-

selector.after( content )

or

selector.before( content )

这里是您要插入的内容。这可以是HTML或简单文本。

例

以下是一个示例，其中

元素正被插入到被单击元素之前-

现场演示
The jQuery Example
      
        
      
        
      
   
    
   
      
Click on any square below:

这将产生以下结果-

DOM操作方法

下表列出了可用于操作DOM元素的所有方法-

Sr.No. Method & Description
1 after( content )

Insert content after each of the matched elements.
2 append( content )

Append content to the inside of every matched element.
3 appendTo( selector )

Append all of the matched elements to another, specified, set of elements.
4 before( content )

Insert content before each of the matched elements.
5 clone( bool )

Clone matched DOM Elements, and all their event handlers, and select the clones.
6 clone( )

Clone matched DOM Elements and select the clones.
7 empty( )

Remove all child nodes from the set of matched elements.
8 html( val )

Set the html contents of every matched element.
9 html( )

Get the html contents (innerHTML) of the first matched element.
10 insertAfter( selector )

Insert all of the matched elements after another, specified, set of elements.
11 insertBefore( selector )

Insert all of the matched elements before another, specified, set of elements.
12 prepend( content )

Prepend content to the inside of every matched element.
13 prependTo( selector )

Prepend all of the matched elements to another, specified, set of elements.
14 remove( expr )

Removes all matched elements from the DOM.
15 replaceAll( selector )

Replaces the elements matched by the specified selector with the matched elements.
16 replaceWith( content )

Replaces all matched elements with the specified HTML or DOM elements.
17 text( val )

Set the text contents of all matched elements.
18 text( )

Get the combined text contents of all matched elements.
19 wrap( elem )

Wrap each matched element with the specified element.
20 wrap( html )

Wrap each matched element with the specified HTML content.
21 wrapAll( elem )

Wrap all the elements in the matched set into a single wrapper element.
22 wrapAll( html )

Wrap all the elements in the matched set into a single wrapper element.
23 wrapInner( elem )

Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
24 wrapInner( html )

Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.