Introduction to jquery (1) Universal selector in jquery
Introduction to jquery (2) using jquery to manipulate the attributes and styles of elements
Introduction to jquery (3) Event and event object
Introduction to jquery (4) Ajax () application in jquery
To write any JavaScript program we want to get the object first, the jquery selector can completely change the way we usually get objects, can get almost any semantic object, such as "has the title attribute and the value contains the test <a> element", To do this, you only need to write a jquery selector string, and learning jquery selectors is the most important step in learning jquery.
One, Dom object and jquery wrapper set
Whether you are writing a program or looking at an API document, we should always be careful to distinguish between DOM objects and jquery wrapper sets.
1.Dom objects
In traditional JavaScript development, we all get DOM objects first, such as:
1 var div = document.getElementById ("Testdiv"); 2 var divs = document.getElementsByTagName ("div");
We often use the document.getElementById method to get a single Dom object based on the ID, or use the document.getElementsByTagName method to get a collection of Dom objects based on the HTML tag name.
In addition, in the event function, you can use the this reference event in the method function to trigger the object (but IE6 in the multicast event function), or use the event object's target (FF) or srcelement (IE6) to get to the DOM object that raised the event.
Note that all we get here are DOM objects, and Dom objects have different types such as input, Div, span, and so on. Dom objects have only a limited number of properties and methods:
2.jQuery Package Set
The jquery wrapper set can be said to be an extension of Dom objects. In the world of jquery, all objects, whether one or a group, are encapsulated into a jquery wrapper set, such as a jquery wrapper with one element:
var jqueryobject = $ ("#testDiv");
The jquery wrapper set is called together as an object. The jquery package set has rich properties and methods that are unique to jquery:
Conversion of 3.Dom objects to jquery objects
(1) Dom to jquery package set
If you want to use the functions provided by jquery, first construct the jquery wrapper set. We can directly construct a jquery package set using the jquery selector we will introduce here, such as:
$ ("#testDiv");
The wrapper set constructed by the above statement contains only an element with an ID of testdiv.
Or we have already acquired a DOM element, such as:
var div = document.getElementById ("Testdiv");
The div in the above code is a DOM element, and we can convert the DOM elements into a jquery wrapper set:
var domtojqueryobject = $ (div);
Again, for example:window Windows object ,Document object to jquery object $ (window). Height (); $ (document). Height ();
(2) jquery wrapper set to DOM object
The jquery wrapper set is a collection, so we can access one of the elements through the indexer:
var domobject = $ ("#testDiv") [0];
Note that the index returned by the indexer is no longer a jquery wrapper set, but a DOM object! some of the traversal methods of the jquery package set, such as each (), can pass the traversal function, and this in the traversal function is also a DOM element, such as:
$ ("#testDiv"). each (function() {alert (this);})
What if we want to manipulate the DOM object using jquery's method? You can use the conversion method described above:
$ ("#testDiv"). each (function() {$ (this). HTML ("Modify content");})
Summary:
Let's first make clear the concept of DOM object and jquery package set, will greatly accelerate our learning speed. I spent a long time learning jquery in the process of not realizing the difference between the two, because the book does not specifically explain the difference between the two, so it is often "this pointer why not call jquery method" and other problems confused. Until one day the enlightened, found that as long as the ability to distinguish between the two, you can write the program is clearly time-varying.
Ii. what is a jquery selector
In DOM programming we can only use finite functions to get DOM objects by ID or tagname.
In jquery, which is quite different, jquery provides an exceptionally powerful selector to help us get the objects on the page and return the objects as a jquery wrapper set.
Let's start by looking at what a selector is:
1 // get jquery package set by ID 2 var jqueryobject = $ ("#testDiv");
In the example above, the ID selector was used, the DOM object with ID Testdiv was selected and placed in the jquery wrapper set, and finally returned in the form of a jquery wrapper set.
The "$" symbol represents a reference to a jquery object in jquery, and "jquery" is a core object that contains the following methods:
jquery (expression, context)
Returns: jquery This function receives a string of CSS selectors and then uses that string to match a set of elements. This function accepts a string containing a CSS selector which are then used to match a set of elements.
jquery (HTML, ownerdocument)
Returns: jquery dynamically creates DOM elements based on HTML raw strings. Create DOM elements On-the-fly from the provided String of Raw HTML.
jquery (elements)
Returns: jquery encapsulates one or more Dom objects in the jquery function function (that is, encapsulated as a jquery wrapper set) Wrap jquery Functionality around a single or multiple DOM Element (s).
jquery (callback)
Returns: jquery $ (document) shorthand for the ready () a shorthand for $ (document). Ready ().
Selected from the official jquery Handbook. The returns type is jquery, which means that the jquery package set is returned. There are some problems with the first method, the official interface is the CSS selector, but in fact this method not only supports CSS selectors, but all jquery-supported selectors, some even jquery custom selectors (selectors that do not exist in the CSS standard). To make it clearer to everyone, I'll modify the method as follows:
jquery (selector, context)
Returns: the jquery wrapper selects matching objects based on selectors and returns them in the form of a jquery wrapper set. The context can be either a collection of Dom objects or a jquery wrapper set, and passing in indicates that a matching object is to be selected from the context, and the range is the document object (that is, the page's entire object) without passing in.
The above method is the core method used by our selector. You can use "$" instead of jquery to make the syntax more brief, such as the following two sentences with the same effect:
1 // get jquery package set by ID 2 var jqueryobject = $ ("#testDiv"); 3 4 //$ is a reference to the JQuery object:5 var jqueryobject = jquery ("#testDiv");
Next let's learn the jquery selector system.
Three, the whole solution of jquery selector
In layman's words, the selector selector is "A string that represents a particular semantic." You can select a different DOM object and return it as a jquery wrapper set by passing the selector string into the method above.
But I'm puzzled how to classify the jquery selector. Because the classification in the book is very different from the official jquery classification. Finally, I decided to use the main practical, not to understand the CSS3 selector standard, and according to the official jquery classification to explain.
The jquery selector supports the CSS3 selector standard. The following is the latest CSS3 selector standard:
http://www.w3.org/TR/css3-selectors/
Selectors in the standard can be used in jquery.
The jquery selector is mainly divided into "select" and "Filter" by function. and is used in conjunction with. You can use the combination of a selector string together. The main difference is that the "filter" effect of the selector is that the specified condition is filtered from the previously matched content, and the filter selector can be used alone, which means filtering from all "*". Like what:
$ (": [title]")
Equivalent to:
$ ("*:[title]")
The selector for the Select feature does not have a default scope because it is "select" Instead of "filter".
In the selector category below, the classification with "filter" means "filter" selector, otherwise it is the selector of the "select" function.
The jquery selector is divided into the following categories:
1. Base selector Basics
Name |
Description |
Example |
#id |
Select based on element ID |
$ ("divID") select element with ID divid |
Element |
Depending on the name of the element, select |
$ ("a") Select all <a> elements |
. class |
Based on the CSS class selection of the element |
$ (". bgred") Select the element for which the CSS class is bgred |
* |
Select all elements |
$ ("*") Select all elements of the page |
Selector1, Selector2, Selectorn |
You can separate several selectors with "," and then spell a selector string. The contents of these selectors will be selected at the same time. |
$ ("#divId, A,. bgred") |
2. Hierarchy Selector Hierarchy
Name |
Description |
Example |
Ancestor descendant |
Use form input to select all input elements in the form. That is, ancestor (ancestor) is from, descendant (descendants) is input. |
$ (". Bgred div") selects all <div> elements in the CSS class for bgred elements. |
Parent > Child |
Select the direct child node of parent. Child must be contained in parent and the parent class is the parents element. |
$ (". Mylist>li") Select the CSS class as a direct child node <li> object in the MyList element. |
Prev + Next |
Prev and Next are two elements of the same level. Select the next element after the Prev element. |
$ ("#hibiscus +img") is selected in the IMG object after the ID of the hibiscus element. |
Prev ~ siblings |
Select the element that is filtered according to siblings after Prev Note: Siblings is a filter |
$ ("#someDiv ~[title]") Select all elements with the title attribute after the object with ID somediv |
3. Basic Filter
Basic Filters
Name |
Description |
Example |
: First |
Match the first element found |
Find the first row of a table: $ ("Tr:first") |
: Last |
Match the last element found |
Find the last line of the table: $ ("Tr:last") |
: Not (selector) |
Removes all elements that match a given selector |
Find all the unselected input elements: $ ("Input:not (: Checked)") |
: Even |
Matches all elements with an even number of index values, counting from 0 |
Find table 1, 3, 5 ... line: $ ("Tr:even") |
: Odd |
Matches all elements with an odd index value, counting from 0 |
Find 2, 4, and 6 rows of a table: $ ("tr:odd") |
: EQ (Index) |
element that matches a given index value note: Index counts from 0 |
Find second line: $ ("Tr:eq (1)") |
: GT (Index) |
Match all elements that are greater than the given index value note: Index counting starts from 0 |
Find the second third row, where the index value is 1 and 2, or greater than 0: $ ("tr:gt (0)") |
: LT (Index) |
Select elements with index less than N in result set Note: Index counts from 0 |
Find the first second row, that is, the index value is 0 and 1, which is smaller than 2: $ ("Tr:lt (2)") |
: Header |
Select All header tags of the h1,h2,h3 category. |
Add background color to all headings in the page: $ (": Header"). CSS ("Background", "#EEE"); |
: Animated |
Matches all elements that are performing an animation effect |
Only an animated effect is performed on elements that do not animate: $ ("#run"). Click (function () {$ ("Div:not (: Animated)"). Animate ({left: "+=20"}, 1000);}); |
4. Content Filter Contents Filters
Name |
Description |
Example |
: Contains (text) |
Matches the element containing the given text |
Find all DIV elements that contain "John": $ ("Div:contains (' John ')") |
: Empty |
Matches all empty elements that do not contain child elements or text |
Find all empty elements that do not contain child elements or text: $ ("Td:empty") |
: Has (selector) |
Matches the element that contains the element that the selector matches |
Add a text class to all DIV elements that contain the P element: $ ("Div:has (P)"). AddClass ("test"); |
:p arent |
Match elements that contain child elements or text |
Find all TD elements that contain child elements or text: $ ("td:parent") |
5. Visibility Filter
Visibility Filters
Name |
Description |
Example |
: Hidden |
Match all invisible elements Note: in the 1.3.2 release, hidden matches the elements of itself or the parent class that do not occupy space in the document. If you use the CSS visibility property so that it does not display but occupies a placeholder, you do not enter hidden. |
Find all the Invisible TR elements: $ ("Tr:hidden") |
: Visible |
Match all visible elements |
Find all the Visible TR elements: $ ("tr:visible") |
6. Attribute Filter
Attribute Filters
Name |
Description |
Example |
[Attribute] |
Match the element containing the given property |
Find all DIV elements containing ID attributes: $ ("div[id]") |
[Attribute=value] |
Matches a given property as an element of a particular value |
Find all the name attribute is the INPUT element of newsletter: $ ("input[name= ' newsletter ')"). attr ("Checked", true); |
[Attribute!=value] |
Matches a given property is an element that does not contain a particular value |
Find all the name attributes that are not newsletter input elements: $ ("input[name!= ' newsletter ')"). attr ("Checked", true); |
[Attribute^=value] |
Matches a given property is an element that starts with some value |
$ ("input[name^= ' News ']") |
[Attribute$=value] |
Matches a given property is an element that ends with some value |
Find all input elements with the name ' letter ': $ ("input[name$=") |
[Attribute*=value] |
Matches a given property to an element that contains some value |
Find all input elements with name ' man ': $ ("input[name*= ' Man ')") |
[AttributeFilter1] [AttributeFilter2] [Attributefiltern] |
A composite property selector that needs to be used when multiple conditions are met. |
Find all containing ID attributes, and its name attribute is the end of man: $ ("input[id][name$= ' Man ']") |
7. Sub-element filter child Filters
Name |
Description |
Example |
: Nth-child (Index/even/odd/equation) |
Matches the nth child or odd and even element under its parent element ': EQ (index) matches only one element, and this will match the child element for each parent element. : Nth-child starting from 1, and: Eq () is from 0! Available: Nth-child (even): Nth-child (odd): Nth-child (3n): Nth-child (2): Nth-child (3n+1): Nth-child (3n+2) |
Find a 2nd Li in each UL: $ ("ul Li:nth-child (2)") |
: First-child |
Match first child element ': Primary ' matches only one element, and this selector will match one child element for each parent element |
Find the first Li in each UL: $ ("ul Li:first-child") |
: Last-child |
Match last child element ': ' matches only one element, and this selector will match one child element for each parent element |
Find the last Li in each ul: $ ("ul Li:last-child") |
: Only-child |
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. |
Find in UL is the only child element of Li: $ ("ul Li:only-child") |
8. Form selector Forms
Name |
Description |
Explain |
: input |
Matches all input, textarea, select, and button elements |
Find all INPUT elements: $ (": input") |
: Text |
Match all the text boxes |
Find all text boxes: $ (": Text") |
:p Assword |
Match all Password boxes |
Find all Password boxes: $ (":p Assword") |
: Radio |
Match all radio buttons |
Find all radio buttons |
: checkbox |
Match all check boxes |
Find all check boxes: $ (": checkbox") |
: Submit |
Match all Submit buttons |
Find all Submit buttons: $ (": Submit") |
: Image |
Match all image fields |
Match all image fields: $ (": Image") |
: RESET |
Match all reset buttons |
Find all Reset buttons: $ (": Reset") |
: button |
Match all buttons |
Find all buttons: $ (": Button") |
: File |
Match all file domains |
Find all file domains: $ (": File") |
9. Form Filter Form Filters
Name |
Description |
Explain |
: Enabled |
Match all available elements |
Find all available input elements: $ ("input:enabled") |
:d isabled |
Match all unavailable elements |
Find all input elements that are not available: $ ("input:disabled") |
: Checked |
Matches all selected selected elements (Checkboxes, radio boxes, etc., excluding option in select) |
Find all selected check box elements: $ ("input:checked") |
: Selected |
Match all of the selected option elements |
Find all selected option elements: $ ("Select Option:selected") |
Introduction to jquery (1) Universal selector in jquery