One: What is jQuery
In order to simplify the development of JavaScript, some JavsScript libraries were born. JavaScript libraries encapsulate many predefined objects and utility functions. It can help users to build rich client pages with Web2.0 features that are highly interactive, and is compatible with major browsers
jQuery can keep the code and html content separate in the user's html page, that is to say, there is no need to insert a bunch of js in the html to call commands, just define the id.
Two: Basic selectors
The basic selector is the most commonly used selector in jQuery, and the simplest selector, which finds DOM elements by element id, class and tag name (id can only be used once in a web page, class allows repeated use).
1. #id usage: $("#myDiv"); Return value A collection of single elements
Description: This is to directly select the id=”myDiv” in the html
2. Element usage: $("div") return value collection element
Note: The English translation of element is "element", so element is actually a label element that has been defined in html, such as div, input, a, etc.
3. class usage: $(".myClass") return value collection element
Description: This tag directly selects the element or element group with class=”myClass” in the html code (because there can be multiple classes with the same value in the same html page).
4. * Usage: $("*") Return value Collection element
Description: Match all elements, mostly used to search in context
5. selector1, selector2, selectorN Usage: $("div,span,p.myClass") Return value Collection element
Description: Combine the elements matched by each selector and return them together. You can specify any number of selectors, and combine the matched elements into one result. Where p.myClass is the matching element
p class=”myClass”
three-level selector
If you want to get a specific element through the hierarchical relationship between DOM elements, such as descendant elements, child elements, adjacent elements, sibling elements, etc., you need to use hierarchical selectors.
1 、ancestor descendant
Usage: $("form input") ; return value collection element
Description: Match all descendant elements under a given ancestor element. This is to be distinguished by "parent > child" described below.
2. Parent > child usage: $("form > input") ; return value collection element
Description: Match all child elements under a given parent element. Note: To distinguish between descendant elements and child elements
3、prev + next
Usage: $("label + input") ; return value collection element
Description: Matches all next elements immediately after the prev element
4、prev ~ siblings
Usage: $("form ~ input") ; return value collection element
Description: Matches all siblings elements after the prev element. Note: It is the element after the match, excluding this element, and siblings matches the elements of the same generation as prev, and its descendants are not matched.
Note: ("prev ~ div") selectors can only select sibling elements behind the "# prev" element; while the method siblings() in jQuery has nothing to do with the position before and after, as long as it is a sibling node, it can be selected
Three basic filter selectors
1. :first usage: $("tr:first") ; return value A collection of single elements
Description: Match the first element found
2. :last usage: $("tr:last") return value collection element
Description: Matches the last element found. Corresponds to :first.
3. :not(selector) usage: $("input:not(:checked)") return value collection element
Description: Removes all elements that match the given selector. Similar to "non", meaning an input that is not selected (when input's type="checkbox").
4. :even usage: $("tr:even") return value collection element
Description: Match all elements with an even index value and start counting from 0. JS arrays are counted from 0. For example, to select rows in a table, because it is counted from 0, the first tr in the table is an even number 0.
5. : odd usage: $("tr:odd") return value collection element
Description: Match all elements with odd index values, corresponding to :even, counting from 0.
6. :eq(index) usage: $("tr:eq(0)") return value collection element
Description: Match an element with a given index value. eq(0) is to get the first tr element. The index value in the parentheses is not the number of element arrays.
7. :gt(index) usage: $("tr:gt(0)") return value collection element
Description: Matches all elements greater than the given index value.
8. :lt(index) usage: $("tr:lt(2)") return value collection element
Description: Matches all elements less than the given index value.
9. :header (fixed writing) usage: $(":header").css("background", "#EEE") Return value Collection element
Description: Match title elements such as h1, h2, h3. This is specially used to obtain title elements such as h1, h2.
10. :animated (fixed writing) return value collection element
Four content filter selectors
The filtering rules of the content filtering selector are mainly reflected in the sub-elements and text content it contains
1. :contains(text) usage: $("div:contains('John')") Return value Collection element
Description: Match elements that contain the given text. This selector is more useful. It comes in handy when we want to select elements other than the dom tag. Its function is to find out whether the text content "enclosed" by the tag is not conforms to the specified content.
2. :empty usage: $("td:empty") return value collection element
Description: Matches all empty elements that do not contain child elements or text
3、:has(selector)
Usage: $("div:has(p)").addClass("test") return value collection element
Description: Match elements that contain the element matched by the selector. This explanation takes a bit of work, but it's completely clear once you see the example in use: add class="test" to all div tags that contain p elements.
4. :parent usage: $("td:parent") return value collection element
Description: Match elements that contain child elements or text. Note: This is ":parent", not ".parent"! It feels like the opposite of ":empty" mentioned above.