Jquery--jquery of the Bull Fork and the conversion of Dom objects and three operations of Dom _jquery

Only jquery objects can invoke various functions of the JQuery class library, while the properties and methods of some DOM objects are not callable on jquery, but essentially the JQuery class library provides functions that contain all DOM operations. This requires that we know how to convert jquery objects and Dom into one another.

The 1.jQuery object is the object that is generated after the DOM object is wrapped through jquery.

Convert 2.jQuery objects to and from Dom objects.

Good writing style:

Copy Code code as follows:

var $input =$ ("input")

jquery gets the object in front of the variable plus $.

The <1>jquery object is converted to a 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>dom objects into jquery objects

var Cr=document.getelementbyid ("Cr"); Dom Object
var $cr =$ (CR);

3. Resolving conflicts with other libraries

Jquery.noconflict ().
jquery uses $ as its own shortcut.

4. Advantages of using jquery

<1> Concise Wording
<2> Support CC1 to CCS3
<3> the perfect processing mechanism

Run the above code browser will be an error!
But if you write this:

Copy Code code as follows:

$ (' #tt '). CSS ("Color", "red");

Browsers do not complain because they do not have this element!

5.jQuery Selector

jquery Selector is the most important of jquery!

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

<1> even and Odd selector

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

<2>CSS3 Pseudo class selector odd even

Copy Code code 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 specifically JavaScript, and 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, such as XML.

2.html_dom

When scripting HTML files with JavaScript and DOM, there are many attributes that are specifically html--dom.
Html_dom provides some more concise notation to describe the attributes of various HTML elements.
Such as:

Copy Code code as follows:

Document.forms
Element.src

Only for Web

3.css_dom

Css_dom is a CSS-oriented operation. The main is to get and set the various properties of the style object.
By changing the various properties of the style object. Change different effects.

Copy Code code as follows:

Element.style.color= "Red";

7. Traverse Node

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

8.jquey of CSS

<1> can use opacity to set transparency, and jquery has already dealt with compatibility issues.

$ ("P"). CSS ("opacity", "0.5");

<2>$ ("P"). Height (100)//100 The default unit is PX, if you want to use another unit, you must use a string

<3>offset () method

Returns the offset of a relative window

Copy Code code as follows:

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

<4>position ()

Copy Code code as follows:

Returns the offset from the nearest position style.
var position=$ ("P"). Position ();
var left=position.left;
var top=position.top;

<5>scrolltop () and ScrollLeft ()

Copy Code code as follows:

Returns the distance from the top of the scroll bar from the left side.
var $p =$ ("P");
var top= $p. scrolltop ();
var left= $p. ScrollLeft ();
You can also set scrolling to the specified location:
$ ("AB"). scrolltop (300);

<6>pagex and Pagey, get the mouse position on the page

Copy Code code as follows:

$ (document). MouseMove (function (e) {
$ ("span"). Text ("X:" + E.pagex + ", Y:" + e.pagey);
});