The awesome Jquery - mutual conversion between Jquery and DOM objects and three operations of DOM_jquery

Only jQuery objects can call various functions of the jQuery class library. Similarly, some properties and methods of dom objects cannot be called on jQuery, but basically the functions provided by the jQuery class library include all dom operations. This requires us to know how to convert jQuery objects to and from DOM.

1. The jQuery object is an object generated by wrapping the DOM object through jQuery.

2. Conversion between jQuery objects and DOM objects.

Good writing style:

Copy code The code is as follows:

var $input=$("input")

The object obtained by jQuery adds $ in front of the variable.

<1>Convert jQUery object into DOM object, two methods: [index] and get(index)

a:var $cr=$("#cr") //jQuery object
var cr=$cr[0] //DOM object
b:var $cr=$("#cr") //jQuery object
var cr=$cr.get(0); //DOM object

<2>Convert DOM object to jQuery object

var cr=document.getElementById("cr"); //DOM object
var $cr=$(cr);

3. Resolve conflicts with other libraries

jQuery.noConflict().
jQuery uses $ as its own shortcut.

4. Advantages of using jQuery

<1>Concise writing
<2>Support CC1 to CCS3
<3>Perfect processing mechanism

Run the above code and the browser will report an error!
But if you write it like this:

Copy code The code is as follows:

$('#tt').css("color","red");

The browser will not report an error because there is no such element!

5.jQuery selector

jQuery selector is the top priority of jQuery!

jQuery filter selectors are similar to pseudo-class selectors in CSS.

<1>Even and odd selectors

Even number: $("tr:even")
Odd number: $("tr:odd")

<2>CSS3 pseudo-class selector odd and even numbers

Copy code The code is as follows:

p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}

<2>Form type selector

<3>Escape selectors to prevent errors

6.DOM operation classification (1: DOM Core 2.HTML-DOM 3.CSS-DOM)

1.DOM Core

DOM Core is not exclusive to JavaScript, any programming language that supports DOM can use it. Its uses are not limited to processing web pages. It can also be used to process any document written in a markup language, such as XML.

2.HTML_DOM

When writing scripts for HTML files using JavaScript and DOM, there are many attributes specific to HTML-DOM.
HTML_DOM provides some more concise notations to describe the attributes of various HTML elements.
Such as:

Copy code The code is as follows:

document.forms
element.src

Only for WEB

3.CSS_DOM

CSS_DOM is an operation for CSS. Mainly to get and set various properties of the style object.
By changing various properties of the style object. Change different effects.

Copy code The code is as follows:

element.style.color=“red”;

7. Traverse nodes

1.children()
2.next()
3.prev()
4.siblings()
5.closest()

8.jquey css

<1> You can use opacity to set transparency, and jQuery has already taken care of the compatibility issue.

$("p").css("opacity","0.5");

<2>$("p").height(100) //The default unit of 100 is px. If you want to use other units, you must use a string

<3>offset() method

Returns the offset relative to the viewport

Copy code The code is as follows:

var offset=$("p").offset();
var left=offset.left;
var top=offset.top;

<4>position()

Copy code The code is as follows:

//Return the offset relative to the most recent position style.
var position=$("p").position();
var left=position.left;
var top=position.top;

<5>scrollTop() and scrollLeft()

Copy code The code is as follows:

//Return the distance from the top and the left side of the scroll bar.
var $p=$("p");
var top=$p.scrollTop();
var left=$p.scrollLeft();
//You can also set scroll to a specified position:
$("ab").scrollTop(300);

<6>pageX and pageY, get the position of the mouse on the page

Copy code The code is as follows:

$(document).mousemove(function(e){
$("span").text("X: " e.pageX ", Y: " e.pageY);
});