1. Basic jQuery syntax 2. jQuery selector, Operation page document elements 3. jqueryDOM operation 4. jqueryCSS operation

1. Basic jQuery syntax

· Chained programming $ ("# div1" ).show().css ("color": "red ")

· Use a ready event as the start to process HTML documents.

$ (Document). ready (function (){

// Write your code here...

});

Abbreviation: $ (function (){

// Write your code here...

});

· The onload event starts after the dom Element Image css is loaded, and ready starts after the dom element is loaded to speed up webpage response and execute multiple ready functions!

· The jQuery object is the object after jQuery wraps the dom object!

· If you get a jQuery object, add $.

Var $ variable = jQuery object

Var variable = DOM object

· The Query object is an array object. You can use the [index] method to obtain the corresponding DOM object.

JQuery itself provides the. get (index) method to obtain the corresponding DOM object.

2. jQuery selector and document elements on the Operation page

· Basic selector exercises

The JQuery selector is used to find elements that meet the conditions.

The basic selector is the most commonly used selector in JQuery and the simplest selector. it searches for dom elements by element id, class, and tagName.

1. $ ("# id"): id selector, document. getElementById ("id ");

2. $ ("div"): Element selector document. getElementsByTagName ("div ");

3. $ (". myClass"): class selector, which returns all elements of class = "myClass"

4. $ ("*"): returns all elements, mostly used for context search.

5. $ ("div, span, p. myClass"): A Multi-condition selector that returns all elements found.

· Layered Selector

If you want to obtain specific elements through the hierarchical relationship between DOM elements, such as descendant elements, child elements, adjacent elements, and sibling elements, you need to use the hierarchical selector.

1. ancestor descendant

Usage: $ ("form input"); return value set Element

Note: match all descendant elements under the given ancestor element. This should be separated from the "parent> child" mentioned below.

2. parent> child
Usage: $ ("form> input"); return value set Element

Note: The child element and child element must be distinguished.

3. prev + next

Usage: $ ("label + input"); return value set Element

Description: matches all the next elements following the prev element.

4. prev ~ Siblings

Usage: $ ("form ~ Input); return value set Element

Description: It matches all the siblings elements after the prev element. Note: it is a matching element.

The adjacent selector prev + next can be replaced by the next () method.

Adjacent sibling selector prev ~ Siblings can be replaced by nextAll ().

You can use the siblings () method to select adjacent brothers.

· Filter Selector

The filter selector mainly filters out the required DOM elements based on specific filter rules. All the selectors start ":".

Based on different filtering rules, the filter selector can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, subelement filtering, and form object attribute filtering selector.

· Basic filter Selector

1.: first
Usage: $ ("tr: first"); returns a collection of individual elements.

Description: matches the first element found.

2.: last
Usage: $ ("tr: last") return value set Element

Description: match the last element found. It corresponds to: first.

3.: not (selector)
Usage: $ ("input: not (: checked)") return value set Element

Note: Remove all elements that match the given selector. It is a bit similar to "Non", meaning that the input is not selected (when the input type = "checkbox ").

4.: even
Usage: $ ("tr: even") return value set Element

Description: matches all elements with an even index value and starts counting from 0. js arrays are counted from 0. for example, to select rows in the table, because the count starts from 0, the first tr in the table is an even number of 0.

5.: odd
Usage: $ ("tr: odd") return value set Element

Description: matches all elements whose index values are odd, corresponding to: even, and starts counting from 0.

6.: eq (index)
Usage: $ ("tr: eq (0)") return value set Element

(Matching an element with a given index value. eq (0) is used to obtain the first tr element. The index value in the brackets is not the number of elements.

7.: gt (index)
Usage: $ ("tr: gt (0)") return value set Element

Description: It matches all elements greater than the given index value.

8.: lt (index)
Usage: $ ("tr: lt (2)") return value set Element

Description: matches all elements smaller than the given index value.

9. header (fixed Statement)
Usage: $ (": header=).css (" background "," # EEE ") return value set Element

Note: Match title elements such as h1, h2, and h3. This is used to obtain title elements such as h1 and h2.

10.: The returned value set element of the animated statement.

Description: matches all the elements that are executing the animation effect.

· Content filtering Selector

The filtering rules of the content filtering selector are mainly reflected in the child elements and text content contained in the selector.

1.: contains (text)
Usage: $ ("div: contains ('john')") return value set Element

Description: matches the elements that contain the given text. this selector is useful. It is useful when we choose not dom tag elements, it is used to find whether the text content enclosed by tags meets the specified content.

2. empty
Usage: $ ("td: empty") return value set Element

Description: matches all null elements that do not contain child elements or text.

3. has (selector)

Usage: $ ("div: has (p)"). addClass ("test") return value set Element

Description: matches the elements that contain the elements matched by the selector. this explanation needs to be well understood, but once you have read the example, it is completely clear: add class = "test" to all div labels containing p elements ".

4.: parent
Usage: $ ("td: parent") return value set Element

Note: match the elements that contain child elements or text. Here is ": parent", not ". parent! It is similar to the "empty" mentioned above.

· Visibility filter Selector

The visibility filter selector selects the corresponding elements based on the visible and invisible states of the elements.

1.: hidden
Usage: $ ("tr: Den den") return value set Element

Note: All invisible elements are matched. If the type attribute of the input element is "hidden", all the display: none elements in. css will be matched.

2. visible
Usage: $ ("tr: visible") return value set Element

Description: matches all visible elements.

· Attribute filter Selector

The filter rule of the attribute filter selector obtains the corresponding element through the attribute of the element.

1. [attribute]
Usage: $ ("div [id]"); return value set Element

Description: matches the element containing the given attribute. In this example, all div labels with the "id" attribute are selected.

2. [attribute = value]
Usage: $ ("input [name = 'newsletter ']"). attr ("checked", true); return value set Element

Description: matching a given attribute is an element of a specific value. In this example, all the name attributes are selected as the input element of newsletter.

3. [attribute! = Value]
Usage: $ ("input [name! = 'Newsletter'] "). attr (" checked ", true); return value set Element

Description: It matches all elements that do not contain specified attributes or that do not equal to a specific value. this selector is equivalent to: not ([attr = value]). to match an element that contains a specific attribute but is not equal to a specific value, use [attr]: not ([attr = value]). previously we saw that not came in handy.

4. [attribute ^ = value]
Usage: $ ("input [name ^ = 'News']") return value set Element

Note: matching a given attribute is an element starting with some values.

5. [attribute $ = value]
Usage: $ ("input [name $ = 'Letter ']") return value set Element

Note: matching a given attribute is an element ending with some values.

6. [attribute * = value]
Usage: $ ("input [name * = 'man']") return value set Element

Note: matching a given attribute is an element that contains certain values.

7. [attributeFilter1] [attributeFilter2] [attributeFilterN]
Usage: $ ("input [id] [name $ = 'man']") return value set Element

Note: The composite attribute selector is used when multiple conditions must be met at the same time. it is a combination, which is commonly used in actual use. in this example, all elements that contain the id attribute and whose name attribute ends with man are selected.

· Child element filter Selector

1. nth-child (index/even/odd)
Usage: $ ("ul li: nth-child (2)") return value set Element

Description: matches the nth child or parity element under the parent element. this selector is similar to the eq () in the basic filter. The difference is that the former starts from 0 and the latter starts from 1.

2.: first-child
Usage: $ ("ul li: first-child") return value set Element

Note: match the first child element. ': first' matches only one element, and this selector matches a child element for each parent element. Special differences are needed here.

3. last-child
Usage: $ ("ul li: last-child") return value set Element

Description: match the last child element. ': la' matches only one element, and this selector matches one child element for each parent element.

4.: only-child
Usage: $ ("ul li: only-child") return value set Element

NOTE: If an element is the only child element in the parent element, it will be matched. if the parent element contains other elements, it will not be matched. this means that only one child element will be matched!

· Nth-child () selector details are as follows:

(1): nth-child (even/odd): select an element whose index value under each parent element is an even (odd) number.

(2): nth-child (2): select an element with an index value of 2 under each parent element.

(3): nth-child (3n): You can select an element whose index value under each parent element is a multiple of 3.

(3): nth-child (3n + 1): select the element whose index value is 3n + 1 for each parent element.

· Form object attribute filter Selector

This selector mainly filters selected form elements.

1. enabled
Usage: $ ("input: enabled") return value set Element

Description: It matches all available elements. It means to find all input with no disabled = "disabled". If it is not disabled, it is enabled.

2.: disabled
Usage: $ ("input: disabled") return value set Element

Description: matches all unavailable elements. It corresponds to the one above.

3.: checked
Usage: $ ("input: checked") return value set Element

Note: All selected elements (such as check boxes and single-choice columns, excluding option in select) are matched.

4.: selected
Usage: $ ("select option: selected") return value set Element

Description: matches all selected option elements.

· Form Selector

1. input
Usage: $ (": input"); return value set Element

Description: All input, textarea, select, And button elements are matched.

2. text
Usage: $ (": text"); return value set Element

Description: match all single-line text boxes.

3. password
Usage: $ (": password"); return value set Element

Note: All password boxes are matched.

4. radio
Usage: $ (": radio"); return value set Element

Description: All radio buttons are matched.

5.: checkbox
Usage: $ (": checkbox"); return value set Element

Note: All check boxes are matched.

6. submit
Usage: $ (": submit"); return value set Element

Description: matches all the submit buttons.

7.: image
Usage: $ (": image") return value set Element

Description: It matches all image domains.

8. reset
Usage: $ (": reset"); return value set Element

Description: All reset buttons are matched.

9.: button
Usage: $ (": button"); return value set Element

Description: All buttons are matched. This includes the directly written button element.

10.: file
Usage: $ (": file"); return value set Element

Description: All file domains are matched.

11.: hidden
Usage: $ ("input: hidden"); return value set Element

: Matches all invisible elements, or elements whose type is hidden. This selector is not limited to forms. Except for hidden matching input, those whose style is hidden will also be matched.

Note: The method used in the preceding example is to select the value of hidden in input. However, if ": hidden" is used directly, all the invisible elements on the page are matched, including the width or height of 0,

3. jqueryDOM operation

1. Use the html () method to read or set the innerHTML of the element:

Alert ($ ("# btn1" 2.16.html ());

$ ("# Btn1" ).html ("hello ");

2. Use the text () method to read or set the innerText of the element:

Alert ($ ("# btn1"). text ());

$ ("# Btn1"). text ("hello ");

3. Use the attr () method to read or set the attributes of an element. Use attr to operate on attributes that are not encapsulated by JQuery (all browsers have no different attributes.

Alert ($ ("# img1"). attr ("src "));

$ ("# Img1"). attr ("alt", "Netease ");

4. Use removeAttr ("src") to delete attributes. The deleted attribute cannot be seen in the source code, which is different from clearing the attribute. "View source files" can only view the downloaded files on the server.

· Create a node

Create a node: Use the jQuery factory function $ (): $ (html); To create a DOM object based on the input html Tag string, and wrap the DOM object into a jQuery object to return.

Note:

The newly created element node is not automatically added to the document, but needs to be inserted to the document in other ways;

When creating a single element, you must close the tag and use the standard XHTML format. for example, to create a <p> element, you can use $ ("<p/>") or $ ("<p> </p> "), but cannot use $ ("<p>") or $ ("</P> ")

When creating a text node, you can directly write the text content when creating an element node. When creating an attribute node, you can also create an element node together.

· Insert nodes internally

Dynamic HTML element creation is not actually useful. You also need to insert the newly created node into the document to become a subnode of a node in the document.

* Append (content): append content to the internal end of each matching element.

* AppendTo (content): append each matching element to the internal end of the specified element.

* Prepend (content): insert content to the beginning of each Matching Element

* PrependTo (content): inserts each matching element into the beginning of the specified element.

· Insert nodes externally

* After (content): insert content after each Matching Element

* Before (content): inserts content before each matching element.

* InsertAfter (content): inserts all matching elements to the end of another specified Element Set.

* InsertBefore (content): inserts all matching elements in front of another specified Element Set.

The preceding method not only inserts a newly created DOM element into the document, but also moves the original DOM element.

Var $ one_li = $ ("ul li: eq (0 )");

Var $ two_li = $ ("ul li: eq (1 )");

$ Two_li.insertBefore ($ one_li );

· Delete a node

Remove (): removes all matching elements from the DOM. The input parameters are used to filter elements based on jQuery expressions. when a node is deleted using the remove () method, all child nodes contained in the node will be deleted at the same time. the return value of this method is a reference pointing to the deleted node.

Empty (): Clear nodes-clear all child nodes in the element

· Copy a node

Clone (): clone the matched DOM element. The returned value is the cloned copy, but the copied new node does not have any behavior.

Clone (true): copying an element and copying an event in the element

· Replacing nodes

ReplaceWith (): replaces all matched elements with specified HTML or DOM elements.

ReplaceAll (): The Reverse replaceWith () method.

NOTE: If an event has been bound to an element before replacement, the previously bound event will disappear with the original element after replacement.

· Attribute operations

Attr (): Get and set attributes

When a parameter is passed for this method, it is used to obtain the specified attribute of an element.

When two parameters are passed for this method, that is, the attribute value specified for an element is set.

Many methods in jQuery are used to obtain and set functions. such as attr (), html (), text (), val (), height (), width (), css (), etc.

RemoveAttr (): deletes a specified attribute of a specified element.

· Style operations

Obtain the class and set the class: class is an attribute of the element. Therefore, you can use the attr () method to obtain the class and set the class.

Append style: addClass ()

Remove style: removeClass () --- delete all or the specified class from the matched element

Switching style: toggleClass () --- controls repeated switching of a style. If the class name exists, delete it. If the class name does not exist, add it.

Determines whether a style exists: hasClass () --- determines whether the element contains a class. If yes, true is returned; otherwise, false is returned.

· Set and obtain HTML, text, and values

Read and set the HTML content of an element: html (). This method can be used for XHTML, but not for XML documents.

Read and set text content in an element: text (). This method can be used for both XHTML and XML documents.

Read and set the value in an element: val () --- this method is similar to the value attribute in JavaScript. for the text box, drop-down list box, single comment this method can return the value of the element (multiple select box can only return the first value ). if you select multiple drop-down lists, an array containing all selected values is returned.

· Common node traversal methods

Obtain a set of all child elements that match an element: children (). This method considers only child elements, not any child elements.

Obtains the set of peer elements next to the matching element: next ();

Get the set of peer elements adjacent to the matching element: prev ()

Obtain all peer elements before and after matching elements: siblings ()

· CSS-DOM operations

Get and set the style attribute of the element: css ()

Get and set element transparency: opacity attribute

Note: IE6 and IE7 do not support this attribute. Use Firefox1.5 or Opera9 for browsing.

Opacity: 0.1

Obtain and set the element height, width: height (), width (). when setting the value, if only a number is passed, the default unit is px. if you want to use another unit, you need to pass a string, for example, $ ("p: first "). height ("2em ");

Obtains the relative displacement of an element in the current window: offset (). The returned object contains two attributes: top and left. This method is only valid for visible elements.

Em is the unit of relative length. Font size relative to the text in the current object

4. Jquery events

· Events

Event binding in JQuery: $ ("# btn "). bind ("click", function () {}). It is too troublesome to call this call every time, So jQuery can use $ ("# btn "). click (function () {}) to simplify.

Merging event hover and hover (enterfn, leavefn). The enterfn method is called when the mouse is placed on the element, and the leavefn method is called when the mouse leaves the element.

If you want to obtain event-related information, you only need to add a parameter to the response anonymous function: e, e is the event object.

$ (Document). mousemove (function (e ){

$ ("Span" ).css ({

"Top" :( e. pageY + 20) + "px ",

"Left" :( e. pageX + 20) + "px"

}). Text ("X =" + e. pageX + ", Y =" + e. pageY );

});

· Mouse

Obtain the cursor position when an event occurs.

$ (Document). mousemove (function (e ){

Document. title = e. pageX + "," + e. pageY;

});

If a parameter e is specified in the anonymous response function for events such as mousemove and click, you can read some information about the event from e, for example, for mouse events such as mousemove, e. pageX, e. pageY to get the coordinates of the mouse on the page when an event occurs.

5. Jquery Animation

· Animation

The show () and hide () methods show and hide elements. Use toggle () to switch between display and hide

$ (". Btn1"). click (function () {$ ("div"). show ();});

$ (". Btn2"). click (function () {$ ("div"). hide ();});

If the show and hide methods do not contain parameters, they are immediately displayed and hidden. If the speed parameter is specified, the system dynamically displays and hides the parameters at a specified time, in milliseconds, you can also use three built-in speeds: fast (200 ms), normal (400 ms), slow (600 ms ), this value can also be used in jQuery animation functions where the speed is required. Toggle, slideDown, and slideUp

· Queue operations *

When multiple animation effect operations include non-animation operations, you must add the non-animation operations to the animation queue before they can be executed in order.

$ ("Div "). animate ({left: "500px", width: "300px", opacity: 1}, 3000 ). animate ({top: "200px", height: "300px" leading, 30002.16.css ("border", "5px solid blue ");

$ ("Div "). animate ({left: "500px", width: "300px", opacity: 1}, 3000 ). animate ({top: "200px", height: "300px" average, function({{}(this}.css ("border", "5px solid blue ");})