Some basic operations for assigning values to jquery forms

Source: Internet
Author: User

/* Obtain the value of text. areatext */

VaR textval = $ ("# text_id"). ATTR ("value"); // or

VaR textval = $ ("# text_id"). Val ();/* obtain the value of a single-choice button */

VaR valradio = $ ("input [@ type = radio] [@ checked]"). val ();/* Get the value of a set of Radio selected items named (items */

VaR item = $ ('input [@ name = items] [@ checked] '). Val ();/* Get 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 );

// Check if ($ ("# chk_id"). ATTR ('checked') = true)

// Determine whether or not the selected radio group is Radio:

$ ("Input [@ type = radio]"). ATTR ("checked", '2 ');

// Set the project with value = 2 as the currently selected item

// Select: $ ("# select_id"). ATTR ("value", 'test ');

// Set the project value = test as the currently selected item $ ("<option value = 'test'> test </option> <option value = 'test2'> Test2 </Option> "). appendto ("# select_id ")

// Add option $ ("# select_id"). Empty ();

// Clear the drop-down box and obtain the value of VaR item =$ ('input [@ name = items] [@ checked] ') of a set of radio items named (items). val ();

// If not selected, Val () = undefined gets the text var item of the selected select item $ ("select [@ name = items] Option [@ selected]"). text (); the second element in the select drop-down box is the currently selected value $ ('# select_id') [0]. selectedindex = 1; the second element of the radio Radio Group is the currently selected value $ ('input [@ name = items] '). get (1 ). checked = true;

// Reset the form $ ("form"). Each (function () {. Reset ();});

1. Select the element $ ("# myid"). The effect is equal 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 a div element with class = "textbox" (<Div class = "textbox"> </div>), write as follows: $ ("Div. textbox ")
Select the element with the myattr attribute $ ("Div [myattr]") and select the element with the myattr attribute and the attribute value is equal to myclass $ ("Div [myattr = 'myclass']") the property is not equal to [myattr! = 'Myclass'] the attribute starts with "my" [myattr ^ = 'my'] and ends with a class. The [myattr $ = 'class'] attribute contains the following three characters: [myattr * = 'cla']
If multiple elements are returned for one selection, and you want to apply certain attributes to each element, such as background-color and background attributes f001_1_alert(%(this%.html ()); $ (this ). width ("200px ");});

2. onload event processing method $ (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 ("triggered keydown event ");});
In addition to these common events, the bind method must be used to bind events.

3. element attribute/method to get the height of an element, $ ("# myid "). height () to 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 ,? If left is left, $ ("# myid") is used "). offset (). left to get the innerhtml of an element. Then (registry.myid=}.html () to get the innertext, $ ("# myid") of an element "). text () to get the value of a text box, $ ("# myid "). val () gets 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 ("<a href ="> asdasd </a> ") $ (" # myid "). val ("asdasd ")
Note that offset is read-only.
Set the attribute $ ("# myid") for an element "). ATTR ("width", "20%") reads an attribute $ ("# myid "). ATTR ("width") specifies multiple attributes at a time $ ("# myid "). ATTR ({disabled: "disabled", width: "20%", height: "30"}) delete attribute $ ("# myid "). removeattr ("disabled ")
Apply style $ ("# myid"). addclass ("myclass") delete style $ ("# myid"). removeclass ("myclass ")
Add a sample (##myid=).css ("height", “20px1_ ((((##myid=).css ({Height: "20px", width: "100px"}). Note that if you add a style, the name of this style 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. find the next element at the same level as the link $ ("# myid "). next () Find all the elements in the same level as yourself $ ("# myid "). nextall () finds the last element at the same level as itself $ ("# myid "). prev () searches for all elements on top of itself at the same level as itself $ ("# myid "). prevall () find your first child element $ ("# myid "). children () find your first parent element $ ("# myid "). parent () finds all its parent elements $ ("# myid "). parents () Example: $ ("Div. l4 ″). parents (). each (function () implements alert((this).html ());});
All the parent elements of the class = L4 Div are obtained, and alert outputs their html
Example: $ ("Div. l4 ″). parents ("Div. l2 ″). each (function () {alert(((this).html () ;}); the parent element of class = L4 is obtained. The parent element must be a div and its class = L2
All the methods mentioned here can contain expressions. For the expression writing method, refer to the first part.

5. add an element to the body $ ("body "). append ("<input type = 'text' value = 'asd '/>") This statement inserts the HTML into the end tag of the body, the result is <input type = 'text' value = 'asd '/> </body>
$ ("Body "). prepend ("<input type = 'text' value = 'asd '/>") This statement inserts the HTML into the start tag of the body, the result is <body> <input type = 'text' value = 'asd '/>

6. ajax uses the get method to request a page $. get ("http://www.google.com", "q = jquery", function (data, status) {alert (data)}) indicates the request http://www.google.com, the parameter is Q, the parameter value is jquery, after a request is completed (whether successful or failed), the function has two fixed parameters: Data and status. Data is the returned data and status is the status of the request.
Use the POST method to request a page $. Post (........) The parameter is the same as the get method.

7. Other Methods $. Trim (STR) Remove spaces before and after STR $. browser returns the type of the current user's browser $. browser. Version returns the version of the current Browser
8. Plug-ins jquery support plug-ins, http://jquery.com/plugins/ there are a lot of plug-ins, you can also write your own plug-ins, please refer to the http://docs.jquery.com/Core/jQ.....end#object and http://docs.jquery.com/Core/jQuery.extend#object

1. drop-down box: var PC3 =$ (". formc select [@ name = 'country'] Option [@ selected] "). text (); // get the text of the selected item in 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"); // get the ID attribute value of the selected item from the drop-down menu $ ("# select "). empty (); // clear the drop-down box // $ ("# select" example .html (''); $ ("<option value = '1'> 1111 </option> "). appendto ("# select") // Add the option in the drop-down box to explain a little: 1. select [@ name = 'country'] O Ption [@ selected] indicates the option element with the selected attribute in the select element with the name attribute and the attribute value of 'country; it can be seen that the attribute is followed by the @ parameter.

2, single sector: $ ("input [@ type = radio] [@ checked]"). val (); // get 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 alert ($ (this) cyclically ). val ());});
$ ("# CHK1 "). ATTR ("checked", ''); // do not tick $ (" # CHK2 "). ATTR ("checked", true); // tick if ($ ("# CHK1 "). ATTR ('checked') = undefined) {} // checks whether the check has been completed.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.