Home > Developer > Web Develop
One
1. Vsdoc: You need to introduce this version of the JQuery class library in Visual Studio to enable IntelliSense. such as: Jquery-1.3.2-vsdoc2.js
<body>
<div id= "divmsg" >hello world!</div>
<input id= "btnshow" type= "button" value= "Display"/>
<input id= "btnhide" type= "button" value= "Hide" /><br/>
<input id= "btnchange" type= "button" value= "Modify content for Hello world, too!"/>
<script type= "Text/javascript" >
$ ("#btnShow"). Bind ("click", Function (event) {$ ("#divMsg"). Show ();});
$ ("#btnHide"). Bind ("click", Function (event) {$ ("#divMsg"). Hide ();});
$ ("#btnChange"). Bind ("click", Function (event) {$ ("#divMsg"). HTML ("Hello World, Too!");});
</script>
</body>
This example uses the following:
(1) jquery ID selector: $ ("#btnShow")
(2) Event binding function bind ()
(3) Show and Hide functions. Show () and hide ()
(4) function HTML to modify the HTML inside the element ()
2.Dom elements converted into jquery package set
we have 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);
3. 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!
JQuery (Selector, context) Returns:jquery wrapper set----Selector element selector
The jquery selector is mainly divided into "select" and "filter" according to the function. and is used in conjunction with. You can combine it into a selector string.
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, indicating filtering from all "*". For example:
$ (": [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:
[description] 1. Click on "name" to jump to the official jquery documentation for this method. 2. You can test various selectors in the jquery selector lab in the next section
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") |
[Learning suggestions]: We temporarily remember the basic selector, you can jump directly to the next section "jquery selector Lab" for hands-on practice, and then come back to learn all the selectors, or use the time to come back to query.
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 |
| 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 | An animated effect is only performed on elements that do not animate: $ ("#run"). Click (function () {$ ("Div:not (: Animated)"). Animate ({left: "+=20"}, 1000); }); |
| 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") |
| Name | Description | Example |
: Hidden |
Match all the Invisible elements Note: In the 1.3.2 release, hidden matches an element that itself or the parent does 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") |
| 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 ']") |
| Name | Description | Example |
| : Nth-child (index/even/odd/equation) | matches the nth child or odd even element under its parent element ': eq (index) ' matches only one element, and this will match child elements for each parent element. : Nth-child starting from 1, and: Eq () is from 0! can use: nth-child (even) : Nth-child (Odd) : Nth-child (3n) : Nth-child (2) : Nth-child (3n+1) : Nth-child (3n+2) |
find 2nd li: & in each UL nbsp; $ ("ul Li:nth-child (2)") |
| : First-child | Match first child element ': First ' 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 ': Last ' 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") |
| 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") |
| 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") |
Reprint: http://www.cnblogs.com/engine1984/archive/2012/02/28/2371214.html
jquery Basic Note One
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
