jquery organizes your banknotes four----jquery Operation Dom

First, using jquery to create a node

Nodes are the DOM infrastructure. Depending on the DOM product specification, node is a broad concept that contains elements, attributes, bodies, documents, and so on. In the actual development process, to create dynamic content, the main operations of the node include elements,

Properties and text.

See example example 4-1:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >

Run effect

A very easy line of code can be finished creating elements, text, and attributes and placing the element under the BODY element. It's a lot easier than JavaScript.
Ii. inserting elements using jquery
1. Inserting content inside a node
jquery provides 4 ways to insert content inside a node

 
 
 
  
  
 Table 4-1 inserting content methods inside a node 
  
 
  
  
 
   
 
    
Method
 
    
Description
 
   
 
  
 
  
  
 
   
 
    
Append ()
 
    
Append content to each matching element (since it is ' append ', the old description is added after the matching element)
 
   
 
   
 
    
AppendTo ()
 
    
Appends all matching elements to a specified set of elements, in effect. This method reverses the application of the Append () method. such as $ (A). Append ($B) and
$B. AppendTo ($A) is equivalent
 
   
 
   
 
    
Prepend ()
 
    
Contrary to append (). It's inserting elements into the front of the matching elements.
 
   
 
   
 
    
Prependto ()
 
    
and prepend () Use the method upside down, not much to say
 
   
 
  
 
 
 

The parameters of these four methods can be a string, a DOM element object, or a jquery object.
The following demo sample demonstrates the Append () method to add DOM element objects, jquery objects, and strings to the following UL objects, respectively.
Example 4-2:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Run results
2. Inserting content outside the node
jquery provides the same four methods

 
  
 
  
   
 Table 4-2 inserting content methods outside a node 
   
 
  
   
 
    
 
     
Method
 
     
Description
 
    
 
   
 
  
   
 
    
 
     
After ()
 
     
Insert content after each matching element
 
    
 
    
 
     
Before ()
 
     
Insert content before each matching element
 
    
 
    
 
     
InsertAfter ()
 
     
Inserts all matching elements into the back of a specified set of elements
 
    
 
    
 
     
InsertBefore ()
 
     
Inserts all matching elements into the front of a specified set of elements
 
    
 
   
 
 
  

These four methods are similar to those used in the previous four methods, look at a sample
Example 4-3:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Run effect
Special Note: The AppendTo (), Prependto (), InsertAfter (), InsertBefore () Four methods have destructive operation characteristics.
That is, assuming that the existing content is selected and inserted into the specified object, the
The contents of the reset will be deleted.
Example 4-4:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Operating effect:
Add a section of JS:
$ ("P"). InsertAfter ($ ("div"))
The results of the operation are as follows:
Third, use jquery to delete elements
jquery supports two ways to delete elements: remove () and empty (). The DOM only defines the RemoveChild () method corresponding to the remove () method of jquery.

 
    
 
  
     

       Table 4-3 jquery methods for deleting elements 
     
 
  
     
 
      
 
       
Method
 
       
Description
 
      
 
     
 
  
     
 
      
 
       
Remove ()
 
       
Remove all the matching elements from the DOM, that is, delete them.
 
      
 
      
 
       
Empty ()
 
       
This meaning is emptied. Is emptied internally, itself reserved.
 
      
 
     
 
 
    

Iv. copying elements using jquery
jquery defines the Clone () method used to replicate nodes, and the corresponding DOM defines the Clonenote () method to achieve the same operational functionality.
This is relatively simple. Take a look at some examples:
Example 4-5:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >

Operation Result:
V. Replacing elements with jquery

jquery defines the ReplaceWith () method and the ReplaceAll () method to replace the node, and the corresponding DOM defines the ReplaceChild () method to achieve the same operational functionality. It's just that they use different ways.
The ReplaceWith () method can replace all matching elements with the specified HTML or DOM element. The ReplaceAll () method is the same as the function. But the opposite is true, such as replacing all p elements with DIV elements in the following example
Example 4-6:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Take a look at its DOM structure:
Vi. Manipulating properties using jquery
Both jquery and Dom provide a basic way to manipulate element attributes
1. Setting properties
jquery typically uses the attr () method to set properties, and the DOM defines the setattribute () method to set the attributes of an element.
When using the attr () method provided by jquery. You need to set two parameters for the method, each of which is a property name and a property value. You can also replace the second parameter (property value) with a function. Serves as the property value with the return result of the function.
The use of the method is very easy, for example: $ ("P"). attr ("title", "paragraph text");
2. Get Properties
jquery is still used in attr (), Dom with GetAttribute ().
When a reference is set for attr (), it represents the property value to get the property, assuming that there is no property, then return undefined. Not for example, very easy. also used frequently.
3. Delete Attributes
The method defined in jquery is that the Removeattr () method deletes the specified element attribute, and the DOM defines RemoveAttribute ().
$ ("P"). Removeattr ("title");
Vii. jquery Operation class Style
When designing a dynamic style, it is often necessary to deal with the class attribute of the element, which defines the style for the element. Since the attribute as an element. We can of course use the attr () method described above to make dynamic changes to the class of elements.
Only, jquery is easy for developers to manipulate. Several methods related to class operations are also defined separately.
1. Append Style AddClass
First define the style class before using the AddClass method. The use method is also very easy. Take a look at the sample
Example 4-7:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Pre-run effects and changes after clicking on three buttons respectively
watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvy2fvagfpy2hlbmc=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/southeast ">
2. Remove Style Removeclass ()
The usage is similar. Do not introduce.
3. Toggle Style Toggleclass ()
Style switching is useful in mouse dynamic operations. Interactive switching is required in web development such as folding, switching, scaling, tab switching and other dynamic effects. jquery defines the Toggleclass () method for this purpose. This method can be used to
On/off Specifies the class style, which implements the goal of switching class styles.
The Toggleclass () method of jquery consists of two parameters, the first parameter specifies the class style name as the switch, and the second parameter determines whether to open the class style. The number of references is optional.
Assuming a second parameter is not set, the
The Toggleclass () method is assumed to exist, depending on whether there is a style for the parameter setting. On removal, otherwise append.
Example 4-8:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >

4. Inference Style hasclass ()
Summarized in the filter function. Do not write again and again.
Viii. manipulating HTML, text, and values using jquery
Is the frequently used HTML () text () Val ()
It is read when there are no parameters. It is assigned when there are parameters.



 
Copyright notice: This article Bo Master original article. Blog, not reproduced without consent.
 
jquery organizes your banknotes four----jquery Operation Dom