Jquery DOM Operations Extensions Learn

Dom operations in jquery

The DOM is the abbreviation for Document Object Medel, which means that it is a model, according to the official version of the website, Dom is a specification that has nothing to do with the browser, platform, or language, an interface that provides a mechanism to access all the nodes in the page. The DOM provides a solution for conflicts between Netscape JavaScript and Microsoft JScript.

Dom operations are usually divided into three parts, namely the core DOM (Dom Core) Html-dom and Css-dom three.

A. Core DOM:

Dom Core is not the exclusive JavaScript, any kind of support DOM design language can very good use of the DOM, the DOM core is not just to handle the Web page, it can also be used in any kind of markup language written out of the document, For example, an XML configuration file. We can use the XML file to parse the XML file into a DOM model through our own programming language, or by using a third-party solution, usually by forming a bunch of configuration objects and invoking the configuration object directly in the program to run.

getElementById (). Getelementbyname (), getattribute (), and setattribute () and so on in JavaScript are all DOM Part of the core. This example is very much in our actual programming, such as document.getelementbytagname (' form '), or Element.getattribute (' src ') The value of the SRC attribute that came to an element. Wait.

Two, Html-dom

When scripting HTML files using JavaScript and DOM, there are a lot of attributes that belong to Html-dom, and Html-dom appear even more in the morning than Dom core. Html-dom provides some more concise notation to describe the attributes of various HTML elements. For example, the method of using Html-dom to get form objects has the document.forms of using html-dom to get the src attribute of an element directly using ELEMENT.SRC. by The above method, we can find that for some objects, properties can be implemented using either the core DOM or html-dom, compared with the html-dom to be relatively short, but Html-dom, as the name implies, can only use to process the content of the Web document, This is a limitation of html-dom. Because it is designed and developed for Html-dom itself.

Three, Css-dom

Css-dom is a CSS-based operation, in JavaScript, the main function of Css-dom technology is to get and set the various properties of the style object, by changing the style object's various properties, can make the Web page presents a variety of effects, CSS is like a Web page of a dress, not only can wear, and can change clothes, bare Web page wearing colorful clothes, to provide users with a very good experience, forming a very beautiful site effect. For example, we can set an element style object, Change the font color of an element to red: element.style.color= ' red ';

N Find node

1) Find ELEMENT nodes

$ (' Ul>li:eq (1) '). Text ()

The jquery selector is positioned to the 2 sub-node of the UL element, and the text content is printed through the. Text () method. The selection of the element node can be done through jquery's selector, and the jquery selector has a basic selector. Filter selector, A hierarchy selector, as well as a form selector. The filter selector is divided into many kinds. See the jquery selector summary in detail.

2) Find attribute nodes

$ (' Ul>li:cotain (apple) '). attr (' title ')

The same is done by using the jquery selector to locate the UL element containing the text content of the ' Apple ' <li> child element node, and then get the attribute title of the element node through the attr () function.

n Create a node

$ ("<li title= ' peach ' > Peach </li>")

The $ (HTML) method dynamically creates a DOM object based on the passed HTML tag string, and then wraps the DOM object as a jquery object, which, according to one teacher, simply gives the HTML tag string to the almighty $ The symbol will get the jquery object we want.

Dynamically created new element nodes will not automatically "be added" to the document, but need to use other methods to insert the new element node into the document, here we can use the Append () method to see the effect of our new node.

$ (' ul '). Append ($ ("<li title= ' peach ' > Peach </li>"))

The above sentence means that the newly created jquery object node is inserted behind the UL object, after executing this statement, we will see in the page, the UL element behind the more a "peach" option.

When creating a single element, we should pay attention to closing the label and using the standard XHTML format, and be sure not to forget to add a pair of double quotation marks to the HTML identity language in $ (HTML), otherwise the error will occur.

var node1=$ ("<li title= ' peach ' > Peach </li>");

var node2=$ ("<li title= ' flat peach ' > Peach </li>");

$ (' ul '). Append (Node1). Append (Node2);

The code above is a demonstration of adding two sub-elements to <ul>, which uses the chain structure, the chain structure is relatively concise, and relatively easy to understand.

As you can see from the small example above, it is very easy and enjoyable to create an element node through the universal $ symbol of jquery. We can dynamically create very complex element nodes by $ ("HTML") and dynamically display them on the page. Achieve a better human-computer interaction effect. This technique is very common in real-world projects.

N Insert Node

The dynamic Insert node has already used one of the methods in the small example of "Create node" above A.append (b), which means to append the element B dynamically to the inside of a. There are several ways to insert nodes that we can use:

1) Append () and Appendto ()

Append () is to append content to the inside of the matched element, which is appended to the inner element, as if it were a queue, and the new one is always lined up to the back. When using append (), be sure to note that is appended to the inside of the matching element. Be sure to separate from after. Append in the English language "add" means that only "add" it seems to be lower than the DOM sibling feeling.

Appedto () is to add matching elements inside a given element, and this method simply reverses the order of the Append () method, why does jquery provide two ways to append elements to an element's interior? Personal feeling is the convenience of a chain-like notation provided by jquery.

2) prepend () and Prependto ()

The Prepend () method is to append the specified element to the inside of the matched element, prepend many places to translate the word "leading", in the shell command, in order to execute the built-in command dir and copy, the caller must add "cmd.exe|" to the command used Leading.. Anyway, prepend means that the specified element is in front of the element inside.

Prependto () is the addition of a matching element to the inside of the specified element, which means that the prepend () method is reversed.

It should be remembered that append () and prepend () Two methods are all going to the inside of the matching element. And the next two pair is to add the matching element to the back or front of the specified element.

3) after () and InsertAfter ()

After () adds the specified content after the matching element.

InsertAfter () is to insert the matching element behind the specified content, to see the literal meaning is very good understanding, in fact, is a reverse of after ().

4) before () and InsertBefore ()

Before () increments the specified element at the front of each matching element.

InsertBefore () is to insert a matching element in front of the specified element, in fact, this method is only a before () method of the reverse, this look at the literal meaning of insertbefore () is also very easy to grasp.

PS:

The above method is not only able to insert the newly created jquery object into the corresponding location of the document, but also use these INSERT statements to move the DOM object:

var node1=$ ("ul>li:eq (0)");

var node2=$ ("Ul>li:eq (1)");

Node1.insertafter (Node2);

The effect of the above three lines of code is to achieve two jquery elements and then displace the positions of the two elements. This shows that above after (), InsertAfter () and before (), InsertBefore () The function of the method is not only to insert into the matching node, but also to exchange the position by using the above method to achieve better human-computer interaction effect.

n Delete node

If an element in the document is redundant, it should be deleted, and jquery provides two ways to delete nodes, remove () and empty ().

1) Remove () method

The Remove () method is the function of removing all matching elements from the DOM, and the passed in parameters are used to filter the elements based on the Jquyer expression.

2) empty () method

The empty () method is not to delete a node, but to empty the node, which clears all descendant nodes in the element.

n Replication Nodes

Replication nodes are also commonly encountered in DOM operations, and JQuery provides the clone () method for the copy operation, $ (' element '). Clone () can copy the matched element. If you want the copied element to have the same method as the original element, you can use $ ( ' element '). The Clone (True) method, which simply adds a true parameter to allow the copied element to have the original element method.

n Replace node

To replace a node, jquery also provides the appropriate method, which is replacewith () and ReplaceAll ().

The purpose of the ReplaceWith () method is to replace all matching elements with a specified HTML or DOM element.

$ (' P '). ReplaceWith ("<strong> your favorite Fruit </strong>");

ReplaceAll () Replaces all matching elements with the specified HTML or DOM element. This method works the same as ReplaceWith (), except that it reverses the operation of the ReplaceWith ().

$ ("<strong> what your favorite fruit is?</strong>"). ReplaceAll (' P ');

If an event has been bound to an element before it is replaced, the previously bound event will disappear with the replaced element, and the time binding on the new element needs to be re-bound.

n Parcel Nodes

1) Wrap () method, which wraps an element with other elements, which is useful when a document is needed to insert an additional node, and it does not break the meaning of the original document.

$ (' P '). Wrap (' <strong></strong> ');

2) The Wrapall () method wraps all matching elements with an element, unlike the Wrap () method, which wraps all the elements individually.

$ (' P '). Wrapall (' <strong></strong> ');

3) The Wrapinner () method is to wrap the child content of each element (including the text node) with other structured tags.

$ (' P '). Wrapinner (' <strong></strong> ');

N Property Manipulation

1) Get Properties and set properties

$ (' P '). attr (' title ')

Passing a parameter is getting the property value, passing two attributes is modifying the value of the property.

$ (' P '). attr ({' title ': ' Yourtitle ', ' name ': ' Yourname '});

You can set an object in the form of a "name/value" to a property of the matching element.

The ability to implement a function to get and set the function has HTML (), text (), height (), Width (), Val () and CSS () and other methods.

2) Delete attributes

In some cases it is necessary to delete the attributes of some elements, and if you want to delete the attributes of an element, we can do so by using. removeattr (' attribute ').

$ (' P '). Removeattr (' title ');

N- style operation

1) Get style and set style

Use the. attr () method to set and get the style

2) Append style

Append styles by the. AddClass () method, if you add multiple class values to an element, it is equivalent to merging their styles, and if you have different class settings for the same style attribute, the latter overrides the former.

3) Remove Style

Delete the property by using the. Removeclass () method, removing the two attributes through. removeclass (). Removeclass () to remove all the styles through. Removeclass ().

4) Toggle Style

jquery provides a toggleclass () method to control the style of an element, and if the class name exists, delete the style and add it if the class name does not exist. This method can be used to switch between two styles.

5) Determine if there is a style

$ (' P '). Hasclass (' High '); Can be used to determine whether an element has a specified style, this method is actually called the IS () method to implement. The above method is actually equivalent to $ (' P '). is ('. High ')

n set and get HTML, text, and Values

1) Use the. HTML () method to get or set the contents of HTML in an element

2) Use the. Text () method to get or set the text content of an element

3) Use the. Val () method to get or set the value of an element in an element, or to return an array if the element is multi-select.

Ps:

The Val () method is not only able to set the value of the element, the colleague can also get the value of the element, not only that, the Val () method has a very good use, is able to make the select (Drop-down list box), CheckBox (multi Box) and radio (radio box) corresponding options are selected, This is often used in form operations.

$ ("#multiple"). val (["Select No. 2nd", "select 3rd"]);

N Traversal node

1) Use the Children () method to get a collection of child elements of the matching element.

2) Use the next () method to get the sibling elements immediately behind the matching element

3) Use the Prev () method to get the sibling element immediately preceding the matching element

4) Use the siblings () method to get all the sibling elements before and after the matched element

5) Use the closest () method to obtain the most recent matching element.

6) ......... And so on other infrequently used to look at the API

n css-dom Operation

Css-dom technology is simply to read and set the various properties of the style object, the Style property is very useful, but the biggest disadvantage is that there is no way to extract the style information through the external CSS settings, but in jquery, these are very simple.

Attention:

(1) If the value is a number, it will be automatically converted to a pixel value.

(2) in the CSS () method, if the attribute has a "-" symbol, such as the font-size and Background-color attributes, the camel-style notation.

We can use the CSS () method directly to get the style attributes of an element.

Font-size----------------à hump style-------------àfontsize

Background-color-------------------à hump style--------------------àbackgroundcolor

1) Use the offset () method to get the relative cheapness of the element in the current window. The returned object includes two properties, that is, top and left.

2) using the position () method to get the relative offset of the element relative to the nearest position style property set to relative or absolute's grandfather node, the returned object also includes two properties, which is top and left.

3) ScrollTop and ScrollLeft methods to get the distance of the element's scrollbar from the top and the distance from the left.

Jquery DOM Operations Extensions Learn