Introduction to jquery (4)

One, Element attribute operation
In jquery, you can perform get, set, delete operations on the attributes of an element, and the attr () method allows you to perform get and set operations on element properties, and the Removeattr () method can delete a specified property.
1. Get the attributes of an element
Syntax: attr (name)
The name of the property indicates the parameter
2. Setting the attributes of an element
Single Property Set Syntax: attr (Key,value)
Multiple Property Set Syntax: attr ({key0:value0,key1:value1})
3. Deleting an element's properties
Syntax: removeattr (name)
We will explain the above syntax through the following example:
Examples are as follows:
(1) Description
Use the attr () method to set, get, and delete the href attribute in the a tag.
(2) Code implementation

<script type="Text/javascript">$ (function(){ $ ("#a1"). attr ("href","http://www.baidu.com" ); //Set the HREF attribute in the A tag var $url = $ ("#a1"). attr ("href"); //Gets the href attribute $ ("#tip") in the A tag. html ($url);}) $ (function(){//Remove the HREF attribute $ ("#a1") in the A tag. Removeattr (" href ");})    </script>... Omit code<h3>attr () method setting element properties</h3><a data="http://www.hubwiz.com" id="A1">Point I will change</a><div>Changed address:<span id="Tip"></span></div>

Second, the element content operation

<script type="Text/javascript">$ (function(){ //Increases all attributes in the form to the available element category var $strHtml = $ ("#divShow" ). html (); //Get HTML content var $strText = $ ("#divShow"). Text (); //Get text content $ ("#divHtml"). HTML ($strHtml); //Set HTML content $ ("#divText"). Text ($strText); //Set text content })        </script>... Omit code<div id="Divshow"><b><i>Hello</i></b></div><div id="divhtml"></div><div id="Divtext"></div>

Iii. appending content to an element
If you add an element to the page, you only need to find the ancestor node of the element, and then append the content to the specified element via append () or append the content to the specified element via Appendto ().
If you insert content before or after an element, use the before () and after () methods to insert content before and after the element, respectively, by inserting the specified element or content before and after the entire element. The parameter HTML is used to find the element string that needs to be appended, and the content of the parameter is the appended contents, which can be a character, an HTML element tag, or a function that returns the contents of a string.

<script type="Text/javascript">$ (function   ()  { //add all the attributes in the form to the available element category   $content =  "<b> I am the Append () method appended content </b>" ; var  $contentTo =  "<b> I am the Appendto () method Append content </b    > "; var  $before =  "<b> I am the Before () method appended to the preceding content </b    > "; var  $after =  "<b> I am the Before () method appended to the following </b>    ";    $ ( "#id1" ). Append ($content);    $ ($contentTo). AppendTo ( "#id2" );    $ ( "#id3" ). Before ($before); $ ( "#id4" ). After ($after);}) </script>... Omit code<p id="Id1">Append () Additional content:</P><p id="Id2">AppendTo () Additional content:</P><p id="ID3">Before () Append to front</P><p id="Id4">After () append to the back</P>

Iv. copying elements
To copy an element, call the Clone () method to generate a copy of the selected element, which copies a selected element, including its nodes, text, and attributes.
Syntax form: $ (content). Clone ()
Parameter content can be HTML content, HTML element tags.
V. Replacement of elements
In jquery, the ReplaceWith () and ReplaceAll () methods can be used to replace the contents of elements or elements, but when they are called, the content and the location of the substituted element are different

ReplaceWith () syntax form: $ (selector). ReplaceWith (content)

ReplaceAll () syntax form: $ (content). ReplaceAll (selector)

The parameter selector is the replaced element, and the content is the contents of the replacement.

VI. Package Elements
The Wrap () and Wrapinner () methods are used in jquery to wrap elements and content, but the former is used to wrap the elements themselves, while the latter is used to wrap the contents of the elements.

Wrap () syntax form: $ (selector). Wrap (wrapper)

Wrapinner () syntax form: $ (selector). Wrapinner (wrapper)

The parameter selector is the wrapped element, and the wrapper parameter is the format of the package element.
VII. Traversal of elements
In DOM element operations, it is sometimes necessary to uniformly manipulate all elements of the same tag. In jquery, you can use the each () method to implement the traversal of an element.

Syntax form: $ (selector). each (callback)

The parameter callback is a function that can also receive a line parameter index, which is the ordinal of the traversing element, starting at 0, or, if the attribute in the element needs to be accessed, by using the parameter index, with the This keyword, to set or get the element property.
Viii. deleting elements
In DOM element operations, JQuery provides two methods for deleting elements: Remove () and empty (). Remove ()-Deletes the selected element (and its child elements), empty ()-Removes the child element from the selected element

Introduction to jquery (4)