Home > Developer > Web Develop
1. First talk about the concept of jquery
jquery was first created by a America called John Resig, and then a lot of JS Gurus joined the team. In fact, jquery is a JavaScript class library, this class library collection of many functional methods, using the class library you can use some simple code to achieve some complex JS effect.
2, jquery to achieve the separation of code
No more Web pages such as the onclick, such as the event to invoke the function, directly into the jquery class library and its own written jquery code can be;
Such as:
$ (function () {
$ ("Element"). Click{function () {
Alert ("Click me Oh! ");
}
}
})；
The above code simply defines the element after which the click is the action
Alert ("Click me Oh! This is the code to execute, and of course you can have a lot of operations in this function;
The $ number in this is the meaning of jquery, which refers to the class library. That's what I understand;
3. Some methods of the core of jquery
Each (callback) ' is like a loop
$ ("Element"). Length; ' The number of elements, is a property
$ ("Element"). Size (); ' is also the number of elements, but parentheses are a method
$ ("Element"). get (); ' A collection of elements in a page, stored as an array
$ ("Element"). Get (index); ' function is the same as above, index denotes the number of elements, the subscript of the array
$ ("Element"). Get (). reverse (); ' Put the resulting array direction
$ ("Element1"). Index ($ ("Element2")); The index value of element 2 in element 1 is ...
4. Basic object Acquisition (note that the jquery object is captured here instead of the DOM object Oh, but they can be converted)
$ ("*") ' means get all objects but I haven't used them so far.
$ ("#XXX") ' Get id=xxx element object (ID can be tag ID or CSS style id) commonly used
$ ("Input[name= ' username ')") gets the element object of the input tag name= ' username ' commonly used
$ (". ABC") ' Get style class ' is the name of the. ABC element object commonly used
$ ("div") ' tag Selector selects all div elements commonly used
$ ("#a,. B,span") ' means that the ID is an element of a and the element that uses class style B and all the SPAN elements
$ ("#a. B p") ' ID number is a and all P elements with B-style are used
Example:
<title>jquery Test </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script type= "Text/javascript" src= ". /js/jquery-1.4.1.js "></script>
<style type= "Text/css" >
. checkcss{
Color:blue;
}
. rediocss{
color:red;
}
</style>
<script type= "Text/javascript" >
$ (function () {
$ ("#XXX") get all jquery objects for id=xxx
$ ("#subt"). Click (function () {
$ ("xxx") get all jquery objects for XXX tag name
Alert (the number of objects in the input tag is: "+$ (" input "). length);
$ ("Xxx[name= ' YYY ')" To get all jquery objects name= ' YYY ' under the XXX tag name
Val () Gets the property value
Alert ("Name= ' userName ' input box content is:" +$ ("Input[name= ' UserName ']"). Val ());
Note the second way to get value values
Alert (the "name=" Note's input box content is: "+$ (" input[name= ' note ') "). attr (" value ");
Alert ("The text of the selected item in the drop-down menu is:" +$ ("#sex option:selected"). Text ());
Alert (the value of the selected item in the drop-down menu is: "+$ (" #sex "). Val ());
Alert (The check box has the number selected: "+$ (" input[name= ' Check ']:checked "). length);
if ($ ("Input[name= ' Check ']:checked"). Length>0) {
var allcheckvalue= "";
var allchecktext= "";
$ ("Input[name= ' Check ']:checked"). each (function () {
allcheckvalue+=$ (This). Val () + "";
allchecktext+=$ (This). Parent (". Checkcss"). Text () + "";
});
Alert ("check box selected text is:" +allchecktext+ "value is:" +allcheckvalue);
}
if ($ ("Input[name= ' status ']:checked"). Length>0) {
Alert (the text selected in the Radio box is: "+$ (" input[name= ' status ']:checked "). The parent (". Rediocss "). Text () +" value: "+$ (" input[name= "status): Checked "). Val ());
}
});
});
</script>
<body>
Name: <input type= "text" name= "UserName" width= "><br>"
Gender: <select id= "Sex" name= "Usersex" style= "width:155" >
<option value= "1" > Men </option>
<option value= "2" > Women </option>
<option value= "3" > No male no female </option>
</select><br>
Hobbies: <span class= "checkcss" ><input type= "checkbox" name= "Check" value= "1" > Travel </span>
<span class= "Checkcss" ><input type= "checkbox" name= "Check" value= "2" > Music </span><br>
<span class= "Checkcss" ><input type= "checkbox" name= "Check" value= "3" > Sports </span>
<span class= "Checkcss" ><input type= "checkbox" name= "Check" value= "4" > Literature </span><br>
Status: <span class= "rediocss" ><input type= "Radio" name= "Status" value= "1" > Serving </span>
<span class= "Rediocss" ><input type= "Radio" name= "Status" value= "2" > Separations </span><br>
Introduction: <input type= "text" name= "note" width= "><br>"
<input type= "button" value= "Submit" id= "Subt" ><br>
</body>
5. Level element Acquisition
$ ("Element1 Element2 Element3 ....") ' Before the parent is a subset
$ ("div > P") ' gets all the P elements below the div
$ ("div + P") ' the first P element behind the DIV element
$ ("div ~ p") ' div ' all the p elements behind
6. Simple Object Acquisition
$ ("Element:first") ' The first element of a class element in an HTML page
$ ("element:last") ' The last element of a class element in an HTML page
$ ("Element:not (selector)") ' Removes all elements that match a given selector, such as: $ ("Input:not (: Checked)") to select all unchecked check boxes
$ ("Element:even") ' Get even line '
$ ("element:odd") ' Get Odd line '
$ ("Element:eq (Index)") ' gets a given index value
$ ("ELEMENT:GT (Index)") ' all elements after the element that obtained the given index value
$ ("Element:lt (Index)") ' all elements before the element that gets the given index value
。。。
7. Acquisition of content objects and object visibility
$ ("Element:contains (text)") ' element contains text content
$ (' Element:empty ") ' Gets the element that does not contain child elements or text
$ ("element:partnt") ' Gets the element that contains the child element or text
$ ("Element:has (selector)") ' contains an element, such as: $ ("P:has (span)") that represents all P elements that contain a SPAN element
$ ("Element:hidden") ' Select all visible elements
$ ("element:visible") ' Select all invisible elements
8. Other object acquisition methods
$ ("Element[id]") ' all elements with an id attribute
$ ("Element[attribute = Youlika]" ' gets all elements of a property that are Youlika
$ ("Element[attribute! = Youlika]" ' gets all elements of a property that are not Youlika
$ ("Element[attribute ^= Youlika]" ' gets all elements that have a property that is not the beginning of the Youlika
$ ("Element[attribute $= Youlika]" ' gets all elements that have a property that is not the end of the Youlika
$ ("Element[attribute *= Youlika]" ' gets all elements of a property that contain the beginning of the Youlika
$ ("element[selector1][selector2][....]") ' Conforming to the attribute selector, such as $ ("Input[id][name][value=youlika]"), indicates that an INPUT element with an ID, name, and value of Youlika is obtained.
9. Acquisition of child elements
$ ("Element:nth-child (Index)") ' Select the nth element below the parent
$ ("Element:nth-child (even)") ' Select the even number under the parent
$ ("Element:nth-child (Odd)") ' Select the odd number under the parent
$ ("Element:nth-child (3n+1)") ' Expression
$ ("Element:first-child") ' Select the first child element under the parent
$ ("Element:last-child") ' Select the last child element under the parent
$ ("Element:only-child") ' matches only one child element under the parent, for example DT is unique in the DL list, then the DT is selected
10. Form Object Acquisition
$ (: Input)//Find all of the input elements, including, of course, drop-down lists, text fields, radio boxes, checkboxes, and so on.
$ (: Text)//Match all single-line text boxes
$ (:p assword)//Match all password boxes
$ (: Radio)//Match all the radio buttons
$ (: checkbox)//Match all check boxes
$ (: Submit)//Match all the Submit buttons
$ (: image)//matches all image fields, such as <input type= "image"/>
$ (: RESET)//Match all the reset buttons
$ (: button)//Match all the buttons
$ (: file)//Match all file upload domains
$ (: Hidden)//match all invisible elements or elements of type hidden
$ (: Enabled)//matches all available input elements, such as radio:enabled to match all available radio buttons
$ (:d isabled)//Match all the unavailable input elements, acting on opposite
$ (: Checked)//Match all selected check box elements
$ (: Selected)//Match all drop-down lists
11. Setting and removing element attributes
$ ("Element"). attr (name) ' Gets the first matching property value, such as $ ("img"). attr ("src")
$ ("element". attr (Key,value) ') ' an element setting property
$ ("Element". attr ({key:value,key1:value,....})) ' Set multiple properties for an element at once
$ ("element"). attr (key,function) ' Sets a computed property value for all matching elements.
$ ("Element"). Removeattr (name)//Remove a property
Several ways to get objects using jquery
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
