Introduction to jquery and knowledge

A) what is jquery?
"To encapsulate ideas, refactor << picture display and Hide >>"
Third-party organizations pre-written some of the practical JS files, classes, methods, are collectively referred to as JS Practical library, free of charge on the Internet, accompanied by relevant learning documents and cases,
Like the above utility library there are many, other in the Java EE field is more famous is jquery.

* II) Why use jquery?
(1) jquery is the goal is to let programmers write less code, do more things
(2) jquery library, compressed, small capacity, will not occupy the system too much information, Web page loading speed relatively fast
(3) jquery library, compatible with major mainstream browsers, it was developed by Americans, mainly based on the American browser environment at that time
(4) jquery library, can complete all the original DOM can do, and better than the DOM done
(5) jquery library, documentation and cases are very full, easy for programmers to learn
(6) jquery library, recommended for each tag, take an id attribute
(7) The jquery library is not omnipotent, it only encapsulates part of the content in JavaScript, while the rest is still used in the traditional way
Therefore, the jquery code in the project is a hybrid.

III) The development steps of jquery?
(1) Refer to the third-party JS library through the <script> tag, note the path problem of the reference library
(2) Call the relevant method API in the jquery library to complete the business operation

Four) Dom objects and jquery objects are converted to each other
(1) What is a DOM object
Through the DOM API, the returned object is called a DOM object, for example: document.getElementById ("divID"): Return Value: Dom Object

(2) What is a jquery object
A) through the jquery API, the returned object is called the jquery object, for example: $ ("#divID"): Return Value: JQuery Object
B) $ (DOM object), the return value is a jquery object, for example: $ (document), $ (this)

(3) The DOM object is converted to a jquery object
$ (DOM object)->jquery Object

(4) JQuery object turns into DOM object
A) jquery Object [0]->dom Object
B) jquery object. Get (0)->dom Object

Note: DOM objects can only invoke the DOM API
jquery objects can also only invoke the jquery API
Can't mix

(v) Display of errors in DOM objects and jquery objects
(1) Three basic positioning methods for DOM objects
A) document.getElementById ()
B) Document.getelementsbyname ()
C) document.getElementsByTagName ()

(2) Three basic positioning methods for jquery objects
A) id attribute, for example: $ ("#id")
B) tag name, for example: $ ("input")
C) style name, for example: $ (". Oneclass")

(3) Display of DOM object error
Without making a judgment, the DOM does not display when the error occurs.

(4) Error display for jquery objects
In the case of no judgment, jquery error, there is a display, displayed as "undefined"

* VI) jquery Nine class selector "in Web page," Find the node you need "(see Jqueryapi.chm Manual)
(1) Basic selector [selector_1.html]
$ ("#id")
$ ("div")
$ (". Oneclass")
$ ("P,div,span")
$ ("#id, Div,.oneclass")

(2) Hierarchy selector [selector_2.html]
$ ("Form input"): Ancestor descendants
$ ("Form>input"): Father > Direct Child
$ ("Form+input"): The first of the brothers, including only the form element below
$ ("Form~input"): All brothers, including only the form element below the

(3) Enhanced basic selector [selector_3.html]
$ ("ul Li:first")
$ ("ul Li:last")
$ ("Table Tr:even")
$ ("Table tr:odd")
$ ("Table Tr:eq (0)")
$ ("Table tr:gt (0)")
$ ("Table Tr:lt (2)")
$ (": Header")
$ (": Checkbox:not (: Checked)") Select all unchecked check boxes.

(4) Content selector [selector_4.html]
$ ("Div:contains (' John ')
$ ("P:empty")
$ ("Div:has (' P ')
$ ("p:parent")

(5) Visibility selector [selector_5.html]
$ ("Table Tr:hidden")
$ ("Table tr:visible")

(6) attribute selector [selector_6.html]
$ ("Div[id]")
$ ("input[name= ' newsletter ')")
$ ("input[name!= ' newsletter ')")
$ ("input[name^= ' News ']")
$ ("input[name$= ' letter ']")
$ ("input[name*= ' e ']")
$ ("input[id][name$= ' letter ']")

(7) Sub-element selector [selector_7.html]
$ ("ul Li:first-child")
$ ("ul Li:last-child")
$ ("ul Li:only-child")
$ ("ul Li:nth-child (1)"), index, starting from 1

(8) Form selector [selector_8.html]
(9) Form object property Selector [selector_9.html]
$ ("input:enabled")
$ ("input:disabled")
$ (": checkbox:checked")
$ (": Checkbox:not (: Checked)
$ ("Select Option:selected")

* Seven) Common methods in jquery (above) "in the Web page," action "You need the node"
jquery object. Size ()-------------DOM object. Length
jquery object. HTML ()-------------DOM object. InnerHTML, cannot be used with XML
jquery object. val ()--------------DOM object. Value
jquery object. css ("Back-ground", "Blue")
jquery object. addclass ("Onclass")
jquery object. attr ("Checked", "checked")