JQuery Learning Content summary. Learning manual, jquery learning Manual

JQuery Learning Content summary. Learning manual, jquery learning Manual

JQuery query manual:

I. JQuery usage

1. First download the Jquery js file and load the js file using the

<Script type = "text/javascript" src = "js/jquery. js"> </script>

Enter the JQuery code in the next line: <script> JQuery Code </script>

2. JQuery code starts with the following code:

Complete Syntax: $ (document). ready (function () {JQuery code })

Simple Syntax: $ (function () {JQuery code })

3. Four applications of the "$" symbol in JQuery code

(1) $ (function () {}): Start of JQuery code

(2) $ (selector): Search for tags and attributes in html (JQuery selector)

(3) $ (dom element): converts a DOM object obtained by using the documentElementById () method in javascript to a JQuery object,

In this way, you can continue to use JQuery methods.

(4) $ (html): convert html to JQuery object. Example: $ ("<p> I love you </p> ")

4. The most important usage of JQuery, $ (selector). action (): adds an event to the html element found.

(1) The selector includes the following four categories:

① Basic selector:

A. Tag selector ("div"): Select All div labels.

B. id selector ("#123"): select a tag whose id value is 123 in the attribute.

C. class selector (". 123"): select a tag with the class value equal to 123 in the attribute.

D. Union set selector ("p, div"): select all p and div tags.

E. Intersection selector ("div.123"): select the div tag whose class attribute is 123 or higher,

F. Global selector ("*"), select all tags

② Level selector:

A. Descendant selector ("ul li"): Select All lies under ul (including all labels under the specified tag, including son and grandson)

B. Sub-selector ("ul> li"): select the ul tag's sub-tag li (only including the sub-layer of the specified tag, not including Sun Tzu)

C. Adjacent selector ("ul + p"): select the adjacent peer p tag after ul tag (it must be followed by and next to the adjacent peer tag)

D. Peer selector ("ul ~ P "): select all peer p tags after ul tags (all peer p tags after ul)

③ Attribute selector ([]):

A. Select the tag containing this attribute ("div [id]"): select the div tag containing the id attribute

B. Select the tag whose property value is equal to the given value ("div [id = '000000']"): select the div tag whose property value is equal to 123.

C. Select the tag whose property value is not equal to the given value ("div [id! = '000000'] "): select the div tag whose property value is not equal to 123.

D. Select the tag whose property value starts with a given value ("div [id ^ = '000000']"): select the div tag whose property value starts with 123.

E. Select the tag whose property value ends with a given value ("div [id $ = '000000']"): select the div tag whose property value ends with 123.

F. Select the tag whose property value contains the given value ("div [id * = '000000']"): select the div tag whose property value contains 123.

G. select tags whose attributes match the specified value ("div [id] [class = '000000']"): select the div tag that includes the id attribute and the class attribute is equal to 123.

④ Filter selector (:):

A. Select the first label ("ul li: first"): select the first label under ul.

B. Select the last selected label ("ul li: last"): select the last li label under ul.

C. Select the selected odd-number label ("ul li: odd"): select all the odd-number li tags under ul (the label starts from scratch, so the first label is an even number)

D. Select the selected odd number label ("ul li: even"): select all even numbers of li tags under ul (the label starts from scratch, so the first label is an even number)

E: inverse tag ("p: not (. a)"): select other p tags other than the p tag whose class attribute is.

F: Title Tag (": header"): Select All h1 -- h6 title tags.

G: select the tag for obtaining the focus ("input: focus"): select all the input tags for obtaining the focus.

H: select the tag with the index equal to the given value ("ul li: eq (0)"): select the li tag with the index 0 under the ul tag, that is, the first li tag

I: select the label with the index greater than the given value ("ul li: gt (1)"): select the li label with the index greater than 1 under the ul label, that is, the li label after the third

J: select the label with the index smaller than the given value ("ul li: lt (2)"): select the li label with the index smaller than 1 under the ul label, that is, the first two li labels

K: select all hidden tags (": hidden"): select all hidden tags (that is, type = "hidden ")

L: select all visible elements (": visible"): select all visible elements (that is, no type = "hidden ")

(2) content contained in action

1. mouse events

A. click (): Mouse click Event

B. mouseover (): The mouse slide event

C. mouseout (): The mouse exit event

D. hover (): A composite event of mouseover and mouseout. There will be two function () {} parameters.

②. Keyboard Events

A. keypress (): it will be triggered when you press the key. We can understand it as pressing and raising the same key.

B. keydown (): triggered when the keyboard is pressed. (keyCode = 13 times table press Enter)

Example: $ (document). keydown (function (event ){
// When event. keyCode is 37 (that is, the left side Key), The to_left () function is executed ();
// When event. keyCode is 39 (that is, the right side Key), The to_right () function is executed ();
If (event. keyCode = 37 ){
To_left ();
} Else if (event. keyCode = 39 ){
To_right ();
}

});

C. keyup (): triggered when the keyboard is released

③. Animation events

A. show (), hide (): the parameter is a response event, in milliseconds

B. toogle (): composite events, show and hide composite events

B. fadein (), fadeout (): the parameter is a response event, in milliseconds.

C. slidedown (), slideup (): the parameter is a response event, in milliseconds.

④. DOM operation

A. val (), val (""): Without parameters, the value Attribute value of the tag is obtained. With parameters, the value is set.

B. text (), text (""): set or obtain the text content of the selected element (innerText)

C. html (), html (""): return or set the content of the selected element (innerHTML)

D. css (""), css ("", ""): return or set the element style.

E. addClass (""), removeClass (""), toogleClass (""): Add style, remove style, composite operation (add or remove)

F. append (), appendTo (), prepend (), prependTo (): insert the specified content (append, appendTo) at the end of the selected element (still inside ); insert the specified content (prepend, prependTo) at the beginning of the selected element (still inside); the difference between A append B and A appendTo B, the former is the end of B inserted into A, and the latter is the end of A inserted into B.

G. after (), insertafter (), before (), insertbefore (): A insertafter B indicates inserting A to B (selector; A after B indicates that B is inserted after A (selector ).

H. replaceWith (), replaceAll (): A (selector) replaceWith B, B replace A; A replaceAll B (selector), A replace B

I. clone (): generate a copy of the selected element, including sub-nodes, text and attributes. The parameter is boolean, meaning whether to copy the event

J. attr (""), attr ("", ""): gets or sets the attribute value.

K. empty (): clears all content in the specified element, including text and child elements.

L. remove (), detach (): delete all specified elements. After deletion, the elements can be restored. different restored content: remove () can only restore the element itself, but cannot restore JQuery data, events, and additional data. detach () can not only restore tags, you can also restore events and additional data.

M. childern (): Only child elements can be searched.

N. find (): all descendant elements can be searched.

O. next (), nextAll (), nextUtil (4): Peer element search, next, next, and next, until 4th.

P. prev (), prevAll (), prevUtil (4): Peer element search, previous, previous, and previous, until 4th.

Q. parent (): Only Father's Day points can be found.

R. parents (): Find all previous nodes

5. Use JQuery to complete asynchronous requests:

(1) writing format: $. ajax ({parameter })

(2) Detailed Description: $. ajax ({parameter}) is a function provided by JQuery. This function implements ajax requests and helps developers complete detailed work, such as browser compatibility, post Request Header settings. developers only need to assemble all the parameters into an object and pass in as a parameter of this function.

(3) parameters:

A. type: get or post

B. url: request url

C. async: asynchronous or not

D. success (function (data) {}): the data transmitted by the server to the client after the request is successful, and transmitted through the data variable.

E. error: error Handling Method

F. data: This is only available in post requests. It is a parameter that the browser sends to the server.

G. beforesend: Content executed before the request is sent

H. complete: The content executed after the request is completed

(4) Note: If the resource requested by ajax and the network resource to which the url points are no longer in the same server, the request can be accessed directly, however, the security mechanism of the server may cause errors on the client and the data cannot be obtained normally. We need to set two response headers on the server side:

Response. setHeader ("Access-Control-Allow-Origin", "*"); indicates that ajax requests in other domains can Access this server.

Response. setHeader ("Access-Control-Allow-Methods", "POST, GET"); allowed request Methods