Improvement of front-end programming (14th) ---- jquery DOM operations

Improvement of front-end programming (14th) ---- jquery DOM operations

As ledi mentioned in "Recruitment background delivery settings linkage button iterative development summary", web Front-end js development involves inter-page communication, intra-page interaction, and back-end interface data access operations. The core of a page development is DOM operations. Don't forget that web pages are both online documents in history and in essence. DOM operations are document operations, and naturally become the core of js development for Web pages.

Traditionally, DOM operations include DOM core, HTML-DOM, and CSS-DOM.

DOM core can be used in any DOM programming language. Common javascript methods such as getElementById (), getElementsByClassName (), getAttribute (), and setAttribute () all belong to this class. HTML-DOM is dedicated to use js for HTML scripting method used, common concise such as element. src writing. The writing method is much simpler than DOM core. CSS-DOM is mainly used to get and set various attributes of a style object. There are two DOM operations in Jquery: HTML-DOM and CSS-DOM. The entire DOM operation can be expanded from a typical HTML statement. God says that if there is light, there will be an hmtl element, and then there will be various foreseeable operations attached. For example:

1. HTML-DOM operations in jquery 1. node operations (1) Insert a node Insert operations on nodes can be divided into two types, similar to the usage of "sentence" and "sentence" in Chinese Primary education, which are divided based on the active and passive aspects of the previous jquery object.
(2) Delete A node There are two main differences: the remove Method and the detach method. The difference between the two methods is that after a node is deleted using the remove method, the node reference is added again, and the events and data originally bound to the node will become invalid. The latter can be retained. The following is an example:

 I have read the above rules.

$ (Document ). ready (function () {var $ cr = $ ("# cr"); // jQuery object var cr = $ cr. get (0); // DOM object, get $ cr [0] $ cr. click (function () {if (this. checked) {// determine alert in DOM mode ("thank you for your support! You can continue! ");}})});

After the above Code, add the following code:

// var removeCr = $cr.remove();var removeCr =$cr.detach();$("body").append(removeCr);

When the remove method is used to delete a node and add its reference, no click event is bound. The node is deleted using the detach method, and the click event is retained after the node is added. Of course, this scenario involves deleting, adding, and binding events. Currently, this project has not been used yet. (3) copy a node The replication node adopts the clone method. If the clone method parameter is true, events bound to the node are also copied in addition to the replication node. Continue the above example and add the following code:

// var cloneCr = $cr.clone();var cloneCr = $cr.clone(true);$("body").append(cloneCr);

If the parameter is set to true, the binding method of the copied element is also copied. If no parameter is set, no binding method is copied. (4) Replacing nodes There are two methods to replace a node: The replaceWith method and the replaceAll method. These two methods also meet the above active and passive relationships. Continue the above Code. Example:

$cr.replaceWith("
hi
");

At this time, no events are bound to the replaced node. You need to re-bind the events. (5) package nodes There are two types of package nodes: external package method and internal package method. The difference is whether to wrap the selected element or its internal element (wrapInner method ). The external package is divided into one method package (the wrapAll method), or each selected element is wrapped (the wrap method ). Three methods are used for the following examples:

What is your favorite fruit?What is your favorite fruit?
 
 
  
  
  
Apple
  
  
  
Orange
  
  
  
Pineapple
 
 

// $("strong").wrap("");  // $("strong").wrapAll("");  $("strong").wrapInner("");

By viewing the HTML structure, we can see the difference between packages. (6) traverse nodes The Traversal method can be understood from the dom structure to the tree structure. From top to bottom of the tree, parent elements are used: the parents method and the parent method: next method, prev method, sibling method, closest method; child element method: children method.
2. Attribute operations Attribute operations mainly use an attr method to obtain the set attribute, and a removeAttr method to remove the attribute. Continue the above example and enter the following code: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Vc3ryb25npgo8c3ryb25np1_vc3ryb25npjxwcmugy2xhc3m9 "brush: java;" >$ ("li: eq (0 )"). attr ("title", "apple"); $ ("li: eq (0 )"). removeAttr ("title ");
We can see how to use the attribute operation method. 3. style operations The style operations here mainly include adding, deleting, and searching from the class, and changing the css style defined by the class. Continue the above example and add a css class:

.test{color: red;}

The preceding example uses four operations:

$("li:eq(0)").addClass("test"); var hasClass = $("li:eq(0)").hasClass("test"); // $("li:eq(0)").toggleClass("test"); $("li:eq(0)").removeClass("test");

The preceding operations indicate adding a class, determining whether the class exists, removing or adding a class, and switching or removing a class. 3. Get the values of various elements The val method is mainly involved here. Whether it is a text box, a drop-down list, or a single region, the element value can be returned. This uniformity makes such a situation unnecessary to reproduce the query. 2. CSS-DOM operation Three methods are involved: css method, width and height setting method, and positioning method. The difference between css height and height is that css gets the height related to style settings, while height gets the overall height of the element. It is not affected by the style. The offset method is used to obtain elements that are relatively inexpensive than the current window. The returned object contains two attributes, top and left, which are only valid for visible elements. The scrollTop and scrollLeft methods are used to obtain the distance between the top and left sides of the element's scroll bar. Continue with the previous example. Usage: