Initial JQuery and jquery initialization Loading

Initial JQuery and jquery initialization Loading

JQuery syntax structure

JQuery statements mainly contain three parts: $ (), doucment, and ready ().

These three parts are called factory functions, selectors, and methods in JQuery.

$ () = JQuery ()

When the $ () parameter is a DOM object, this object does not need to be enclosed in double quotation marks. If you get a doucment object, write $ (doucment ).

 

$ (Function () {$ ("li "). mousemove (function () {callback (this).css ("background", "red ");}). mouseout (function () {iterator (this).css ("background", "") ;})}) Automatic Iteration

DOM object and JQuery object Conversion

// Onload = function () {// var $ dom = $ ("# myid"); // var dom = $ dom [0]; // dom. onclick = function () {// if (dom. checked = true) {// alert ("successful ");//}//}//}

You can convert a DOM object to a JQuery object to use the rich functions provided by JQuery, convert a JQuery object to a DOM object, and use the functions provided by the unique members of the DOM object.

JQuery Selector

Basic Selector

It mainly includes: Tag selector, class selector, ID selector, Union selector, intersection selector and global selector.

$ ("P"). click (function (){

$ ("Span" ).css ("background", "# FF6 ")

});

Level selector:

Child selector, child selector, adjacent selector, and peer selector.

$ ("H2"). click (function (){

$ ("# Menu span" ).css ("background", "# FF6 ");

});

When you click the h2 element, add the background color of # FF6 to the span element under # menu.

$ ("H2"). click (function (){

$ ("Body span" ).css ("background", "# FF6 ");

$ ("Body> span" ).css ("background", "# FF7 ");

});

Attribute Selector

$ ("H2"). click (function (){

$("H2 [title]" ).css ("background", "# FF6 ");

});

When you click the h2 element, you can add a background color of # FF6 to the h2 element containing the attribute name title.

Basic filter Selector

: First select the first element

: Last selects the last element

: Even Selects all elements with an even index (index starts from 0)

: Odd Selects all elements with an odd index (index starts from 0)

: Gt (index) Select the element whose index is greater than index (index starts from 0)

: Eq (index) selects the element whose index is equal to index (index starts from 0)

: Lt (index) Select the element whose index is smaller than index (index starts from 0)

: Header Selects all header elements, such as h1-h6

: Focus: select the element for which the current focus is obtained.

$ ("Tr: even" ).css ("background-color", "# F63 ");

Visibility filter Selector

: Visible: select all visible elements

: Hidden Selects all hidden elements

$ (Function () {$ ("p "). click (function () {$ ("p: hidden "). show (); $ ("p: visible "). hide (); $ ("li: even" ).css ("background-color", "# CCC"); $ (". s ").css (" background-color "," # FF99CC ") ;})) Visibility filter Selector