Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge of what dom refers to in jquery. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Dom in jquery is the abbreviation of "Document Object Model", which refers to the document object model and is a set of Web standards of W3C international organizations. Dom defines a set of properties, methods and events for accessing html document objects, which can be used by jquery to read and change html documents.

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

What is dom in jquery

Dom in jquery refers to the document object Model (Document Object Model), which is a set of Web standards of W3C international organizations. It defines a set of properties, methods, and events that access HTML document objects.

Jquery dom refers to the document object model, namely Document Object Model, which is a set of Web standards of W3C international organizations. DOM can be used by JavaScript to read and change HTML, XHTML and XML documents.

What is DOM?

To change something on the page, JavaScript needs to get access to all elements in the HTML document. This entry, along with the methods and attributes that add, move, change, or remove HTML elements, is obtained through the document object model (DOM).

In 1998, the W3C released the first version of the DOM specification. This specification allows you to access and manipulate each individual element in a HTML page.

All browsers implement this standard, so DOM compatibility issues are almost impossible to find. DOM can be used by JavaScript to read and change HTML, XHTML and XML documents

HTML-DOM

HTML-DOM is scripting HTML files using JavaScript and DOM, with many attributes specific to HTML-DOM. HTML-DOM even predates DOM Core, providing more concise symbols to describe the attributes of various HTML elements.

For example, the method of using HTML-DOM to get form objects: document.forms

CSS-DOM

CSS-DOM is an operation for CSS. In JavaScript, the main role of CSS-DOM technology is to get and set various properties of style objects. By changing the various properties of the style object, you can make the web page show different effects.

The method for setting the font color of an element's style object: elements.style.color = "red"

DOM operation in JQuery

Find Node

The element can read the html content through the text () method, which is equivalent to the innerHTML attribute of DOM.

$(function () {var $para = $("p"); / / get

Node var $li = $("ul li:eq (1)"); / / get the second element node var p_txt = $para.attr ("title"); / / output

Element node attribute title var ul_txt = $li.attr ("title"); / / get the attribute title var li_txt of the second element node in the $li.text (); / / output the text} of the second element node)

Insert Node

Delete a node:

It is important to note that when deleting an element, if the current element includes child elements, it will be deleted together, and a reference to the currently deleted element will be returned when the element is deleted, which can be used later.

$(function () {var $li = $("ul li:eq (1)") .remove (); / / after getting the second element node, delete it from the web page. $li.appendTo ("ul"); / / add the one you just deleted to the element}); / / or $(function () {$("ul li") .remove ("li [titleapple = pineapple]"); / / delete the element whose attribute title is not equal to "pineapple"})

Empty elements:

All descendant nodes in the second li in the ul are cleared. Note: the difference between empty and remove is that empty clears the descendant nodes within the element and retains the element itself.

$(function () {$("ul li:eq (1)") .empty (); / / after finding the second element node, clear the contents of this element})

Copy the node:

The copied new element does not have any behavior, that is, there is no previously set click event when clicking on the cloned new element. If necessary, you can pass a parameter clone (true) in the clone method, indicating that the bound event in the element is copied at the same time.

$(function () {$("ul li") .click (function () {$(this). Clone (). AppendTo ("ul"); / / copy the node currently clicked and append it to the element})})

Replace the node:

$(function () {$("p"). ReplaceWith ("what's your least favorite fruit?"); / / the same implementation: $("what's your least favorite fruit?"). ReplaceAll ("p");})

Package nodes: wrap, wrapAll, wrapInner

$(function () {$("span") .wrap (");}) run the result code: select your favorite fruit $(" span ") .wrapAll ("); / / starting with the first one and clinging to this will destroy the page structure.

Post-execution result

Choose your favorite fruit $("span"). WrapInner (")

Post-execution result

Choose your favorite fruit

Attribute operation

/ / value var p_txt = $("p") .attr ("title"); / / set the attribute / / find the an element and contain the string "link", and modify the attribute href to "index.html" $(function () {$("a:contains ('link')") .attr ("href", "index.html") }) / / if you want to set multiple properties at the same time, you can use the code $("a:contains ('link')"). Attr ({"href": "index.html", "title": "test"}); / / key value pair attr ({"attribute 1": "value 1", "attribute 2": "value 2", "attribute 3": "value 3"}) / delete attribute $("a"). RemoveAttr ("title")

Note: there are many functions in jQuery that simultaneously implement the value get and set set, including html (), text (), height (), width (), val (), css () and so on.

Style operation

/ / read and set style using attribute read style var p_class = $("p") .attr ("class"); / / set style $("p") .attr ("class", "high")

Note: setting the style with attributes will replace the original style. If you want to achieve the additional effect, you can use addClass.

Append style:

Style:

.high {font-weight:bold; color:red;} .another {font-style:italic; color:blue;}

Html:

Choose your favorite fruit

/ / class= "height another" style can also be written in this way, separated by a space

JQuery:

$("p") .addClass ("another")

Note: style settings follow two rules. if multiple class values are added to an element, it is equivalent to merging their styles. If different class sets the same style property, the latter overrides the former.

Remove Styl

/ / remove styles $("p") .removeClass ("high"); / / remove multiple styles $("p") .removeClass ("high") .removeClass ("another"); / / remove all styles $("p") .removeClass ()

Toggle

Toggle event control styling and cancellation, execute the first function block in the toggle event definition on the first click, run the second function block in the toggle event definition on the second click, and so on.

$(function () {$("p") .toggle (function () {/ / built-in method 1 add style $(this) .addClass ("another");}, function () {/ / built-in method 2 delete style $(this) .removeClass ("another");}) / / will loop all the time

The toggleClass method has a similar function

When the code sets the style when the hyperlink is clicked, the style is automatically determined, adding the style if the current style is not on the corresponding element, and deleting the style if it is on the current element.

$(function () {$("# link") .click (function () {$("p") .toggleClass ("another"); return false;})})

If there is nothing in the parentheses of setting and getting, it is just the setting.

-- HTML text value / / value var p_html = $("p") .html (); / / set $("p") .html ("choose your favorite fruit");-- text () method text / / value var p_text = $("p") .text (); / / set value $("p") .text ("choose your favorite fruit") -- val () method value// takes the value var txt_value = $(this) .val (); / / sets the value $(this) .val ("")

Ergodic node

CSS-DOM

/ / set the value $("p") .css (color); / / set the value $("p") .css ("color", "red"); / / like attr, you can set more than one style at a time $("p"). Css ({"color": "red", "background": "# 003333"}); / / Transparency setting $("p"). Css ("opacity", "0.5") These are all the contents of the article "what does dom mean in jquery?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.