This article mainly introduces the basic methods of jQuery value and value assignment. For more information, see/* Get the value of TEXT. AREATEXT */
Var textval = $ ("# text_id"). attr ("value ");
// Or
Var textval = $ ("# text_id"). val ();
/* Obtain the value of the single-choice button */
Var valradio = $ ("input [@ type = radio] [@ checked]"). val ();
/* Obtain the value of a set of radio selected items named (items */
Var item = $ ('input [@ name = items] [@ checked] '). val ();
/* Obtain the value of the check box */
Var checkboxval = $ ("# checkbox_id"). attr ("value ");
/* Get the value of the drop-down list */
Var selectval = $ ('# select_id'). val ();
// Text box, text area:
$ ("# Text_id"). attr ("value", ''); // clear the content
$ ("# Text_id"). attr ("value", 'test'); // fill in the content
// Multiple choice box checkbox:
$ ("# Chk_id"). attr ("checked", ''); // make it unchecked
$ ("# Chk_id"). attr ("checked", true); // select
If ($ ("# chk_id"). attr ('checked') = true) // you can check whether the selected
// Single-choice group radio:
$ ("Input [@ type = radio]"). attr ("checked", '2'); // set the project with value = 2 to the selected one
// Select from the drop-down list:
$ ("# Select_id"). attr ("value", 'test'); // set the project with value = test as the selected item
$ (" Test Test2"). AppendTo (" # select_id ") // Add the option in the drop-down box
$ ("# Select_id"). empty (); // clear the drop-down list
Obtains the value of a set of radio selected items named (items ).
Var item = $ ('input [@ name = items] [@ checked] '). val (); // if not selected, val () = undefined
Obtain the text of the selected select item.
Var item = $ ("select [@ name = items] option [@ selected]"). text ();
The second element in the select drop-down box is the selected value.
$ ('# Select_id') [0]. selectedIndex = 1;
The second element of the radio Group is the currently selected value.
$ ('Input [@ name = items] '). get (1). checked = true;
// Reset the form
$ ("Form"). each (function (){
. Reset ();
});
1. Select Elements
$ ("# Myid") is equivalent to document. getElementById ("myid"), but the number of characters written is much less.
If you want to convert a jQuery object to an html element, you only need to take its 0th elements. for example, $ ("# myid") returns a jQuery object, while $ ("# myid") [0] returns an html element.
If you select all the img elements, write as follows: $ ("img ")
If you select the p element with class = "TextBox (
), Then write: $ ("p. TextBox ")
Select an element with the myattr attribute $ ("p [myattr]")
Select the element with the myattr attribute and the property value is equal to myclass $ ("p [myattr = 'myclass']")
The property is not equal to [myattr! = 'Myclass']
Property starts with "my" [myattr ^ = 'my']
Attribute ends with class [myattr $ = 'class']
The attribute contains the three characters "[myattr * = 'cla']".
If multiple elements are returned for one selection, and each element is returned, some attributes are applied to the element.
$ ("P"). each (function ()
{
Certificate (this).css ("background-color", "# F00 ″);
Alert(%(this%.html ());
$ (This). width ("200px ");
});
2. Events
Add onload event handling method to the page
$ (Function ()
{
Alert ("the page structure has been loaded, but some images may not have been loaded (in general, this event is enough )");
});
You can bind multiple onload event handling methods to the page.
$ (Function ()
{
Alert ("I was executed first ");
});
$ (Function ()
{
Alert ("My second execution ");
});
Bind Special Events
$ ("# Myid"). keydown (function ()
{
Alert ("keydown event triggered ");
});
In addition to these common events, the bind method must be used to bind events.
3. Element attributes/methods
Get the height of an element, $ ("# myid"). height ()
Get the position of an element, $ ("# myid "). offset () returns an offset object. If the top position of an element is obtained, $ ("# myid") is returned "). offset (). top ,? Take left, then $ ("# myid"). offset (). left
Obtain the innerHTML, identifier ((#myid+).html () of an element ()
Get the innerText, $ ("# myid"). text () of an element ()
Get the value of a text box, $ ("# myid"). val ()
Get the attribute of an element, $ ("# myid"). attr ("myattribute ")
These methods have a basic feature, that is, they do not contain a parameter to indicate a value, but contain a parameter to indicate a set value (except offset). For example
$ ("# Myid"). height ("20 ″);
(("#Myid”).html ("asdasd ")
$ ("# Myid"). val ("asdasd ")
Note that offset is read-only.
Set attributes for an element $ ("# myid"). attr ("width", "20% ")
Read an attribute $ ("# myid"). attr ("width ")
Specify multiple attributes at a time $ ("# myid"). attr ({disabled: "disabled", width: "20%", height: "30 ″})
Delete attribute $ ("# myid"). removeAttr ("disabled ")
Application style $ ("# myid"). addClass ("myclass ")
Delete style $ ("# myid"). removeClass ("myclass ")
Add a sample (##myid”).css ("height", "20px ")
Add a sample ("#myid”).css ({height: "20px", width: "100px "})
Note: If you add a style, the style name is the name in css, for example, style = "background-color: # FF0000". The corresponding jquerywrite method is (("#myid”).css ("background-color ", "# FF0000 ″)
However, when adding a set of styles, the style name is the css name in javascript, for example, myid. style. backgroundColor = "# FF0000". The corresponding jquerywrite method is certificate ({{myid=}.css ({backgroundColor: "# FF0000 ″})
4. Search for elements based on the link
Find the next element at the same level as yourself $ ("# myid"). next ()
Find all elements in the same level as yourself $ ("# myid"). nextAll ()
Find the last element at the same level as yourself $ ("# myid"). prev ()
Find all elements on the same level as yourself $ ("# myid"). prevAll ()
Find your first child element $ ("# myid"). children ()
Find your first parent element $ ("# myid"). parent ()
Find all of your parent elements $ ("# myid"). parents ()
Example:
$ ("P. l4"). parents (). each (
Function (){
Alert(%(this%.html ());
});
All the parent elements of class = l4 p will be obtained, and alert will output their html
Example:
$ ("P. l4"). parents ("p. l2"). each (function () {alert(%(this%.html ());});
The parent element of class = l4 is obtained. The parent element must be p and its class = l2
All the methods mentioned here can contain expressions. For the expression writing method, refer to the first part.
5. Maintenance Elements
Add an element to the body
$ ("Body"). append (" ")
This statement inserts the html section into the end tag of the body. The result is:
$ ("Body"). prepend (" ")
This statement inserts the html section into the start tag of the body. The result is:
6. AJAX
Request a page using the get Method
$. Get ("http://www.google.com", "q = jquery", function (data, status) {alert (data )})
Indicates the request http://www.google.com, the parameter is q, the value of the parameter is jquery, after the request ends (whether successful or failed) after the execution of the function, the function has two fixed parameters, data and status, data is the returned data, and status is the status of this request.
Request a page using the post method
$. Post (........) The parameter is the same as the get method.
7. Other Methods
$. Trim (str) Remove spaces before and after str
$. The browser returns the type of the current user's browser.
$. Browser. version: returns the current version of the browser.
8. Plug-ins
JQuery supports plug-ins. http://jquery.com/plugins/ there are many plug-ins available, you can also write them by yourself
Write your own plug-ins, see http://docs.jquery.com/Core/jQ.....end#object and http://docs.jquery.com/Core/jQuery.extend#object
1. drop-down box:
Var C0 = $ (". formc select [@ name = 'country'] option [@ selected] "). text (); // get the text of the selected item from the drop-down menu (note that there is a space in the middle)
Var cc2 = $ ('. formc select [@ name = "country"]'). val (); // obtain the value of the selected item from the drop-down menu.
Var cc3 = $ ('. formc select [@ name = "country"]'). attr ("id"); // obtain the ID attribute value of the selected item from the drop-down menu
$ ("# Select"). empty (); // clear the drop-down box // $ ("# select" example .html ('');
$ (" 1111"). AppendTo (" # select ") // Add the option in the drop-down box
A little explanation:
1. select [@ name = 'country'] option [@ selected] indicates that the name attribute exists,
In addition, the select element with the selected attribute in the 'country' select element has the selected attribute;
It can be seen that the attribute is followed by the @ parameter.
2, single region:
$ ("Input [@ type = radio] [@ checked]"). val (); // obtain the value of the selected item of a single sequence (note that there is no space in the middle)
$ ("Input [@ type = radio] [@ value = 2]"). attr ("checked", 'checked'); // set single checked value = 2 to the selected status. (Note that there is no space in the middle)
3. Check box:
$ ("Input [@ type = checkbox] [@ checked]"). val (); // obtain the value of the first check box.
$ ("Input [@ type = checkbox] [@ checked]"). each (function () {// Since multiple check boxes are selected, You can output them cyclically.
Alert ($ (this). val ());
});
$ ("# Chk1"). attr ("checked", ''); // do not check
$ ("# Chk2"). attr ("checked", true); // check
If ($ ("# chk1"). attr ('checked') = undefined) {}// you can check whether a check has been performed.
