Niuke's Jquery -- mutual conversion between Jquery and DOM objects and DOM operations, jquerydom

Niuke's Jquery -- mutual conversion between Jquery and DOM objects and DOM operations, jquerydom

Only jQuery objects can call various functions of the jQuery class library. Similarly, some attributes and methods of dom objects cannot be called on jQuery, however, basically the functions provided by the jQuery Class Library contain all dom operations. This requires us to know how to convert jQuery objects and DOM.

1. jQuery objects are the objects generated after DOM objects are encapsulated by jQuery.

2. Mutual conversion between jQuery objects and DOM objects.

Good writing style:

Copy codeThe Code is as follows:
Var $ input = $ ("input ")

Add $ to the object obtained by jQuery.

<1> convert a jQUery object to a DOM object. Two methods are available: [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 a DOM object to a jQuery object

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

3. Resolve conflicts with other databases

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

4. advantages of using jQuery

<1> concise writing
<2> support for ccs3.
<3> improved processing mechanism

An error is reported when you run the preceding code browser!
But if you write it like this:

Copy codeThe Code is as follows:
(('{Tt'}.css ("color", "red ");

The browser will not report an error because it does not have this element!

5. jQuery Selector

JQuery selector is the top priority of jQuery!

The jQuery filter selector is similar to the pseudo class selector in CSS.

<1> even and odd Selector

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

<2> CSS3 pseudo-class selector parity

Copy codeThe Code is as follows:
P: nth-child (odd)
{
Background: # ff0000;
}
P: nth-child (even)
{
Background: # 0000ff;
}

<2> form type Selector

<3> escape selector prevents errors

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

1. DOM Core

DOM Core is not specialized in JavaScript. It can be used by any programming language that supports DOM. Its purpose is not limited to processing web pages. It can also be used to process any document written in a markup language, for example, XML.

2. HTML_DOM

Many HTML--DOM-specific properties exist when scripting HTML files with JavaScript and DOM.
HTML_DOM provides some more concise marks to describe the attributes of various HTML elements.
For example:

Copy codeThe Code is as follows:
Document. forms
Element. src

Can only be used for WEB

3. CSS_DOM

CSS_DOM is a CSS operation. It mainly obtains and sets various attributes of the style object.
You can change the attributes of a style object. Change the effect.

Copy codeThe 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. jQuery has handled compatibility issues.

$ ("P" 2.16.css ("opacity", "0.5 ");

<2> $ ("p"). height (100) // 100 the default unit is px. To use another unit, you must use a string.

<3> offset () method

Returns the offset relative to the window.

Copy codeThe Code is as follows:
Var offset = $ ("p"). offset ();
Var left = offset. left;
Var top = offset. top;

<4> position ()

Copy codeThe Code is as follows:
// Returns the offset relative to the latest position style.
Var position = $ ("p"). position ();
Var left = position. left;
Var top = position. top;

<5> scrollTop () and scrollLeft ()

Copy codeThe Code is as follows:
// Return the distance from the top of the scroll bar to the left.
Var $ p = $ ("p ");
Var top = $ p. scrollTop ();
Var left = $ p. scrollLeft ();
// You can also set the scroll to the specified position:
$ ("AB"). scrollTop (300 );

<6> pageX and pageY are used to obtain the cursor position on the page.

Copy codeThe Code is as follows:
$ (Document). mousemove (function (e ){
$ ("Span"). text ("X:" + e. pageX + ", Y:" + e. pageY );
});