Examples of jQuery's values and values for html elements _ jquery

This article mainly introduces jQuery's values and values for html elements. It provides a detailed analysis of jQuery's techniques for obtaining and assigning common html elements, which is very simple and practical, for more information about jQuery's value and value assignment methods for html elements, see the following example. We will share this with you for your reference. The details are as follows:

Jquery assigns values and values to basic controls

TEXTBOX:

Var str = $ ('# txt '). val (); $ ('# txt '). val ("Set Lbl Value"); // text box, text area: $ ("# text_id "). attr ("value", ''); // clear content $ (" # text_id "). attr ("value", 'test'); // fill in the content

LABLE:

var str = $('#lbl').text();$('#lbl').text("Set Lbl Value");var valradio = $("input[@type=radio][@checked]").val();var item = $('input[@name=items][@checked]').val();var checkboxval = $("#checkbox_id").attr("value")；var selectval = $('#select_id').val();

Multiple selection 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 value is correct.

Radio Group radio:

The Code is as follows:

$ ("Input [@ type = radio]"). attr ("checked", '2'); // set the project with value = 2 to the selected one

Drop-down box select:

$ ("# Select_id"). attr ("value", 'test'); // set the value = test project to the currently selected item $ ("TestTest2"). AppendTo (" # select_id ") // Add option $ (" # select_id "). empty (); // clear the drop-down list

Obtains the value of a set of radio selected items named (items ).

The Code is as follows:

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 currently selected value $ ('# select_id') [0]. selectedIndex = 1;

The second element of the radio Group is the currently selected value.

The Code is as follows:

$ ('Input [@ name = items] '). get (1). checked = true;

Reset form:

$("form").each(function(){  .reset();});

Supplement:

JQuery's values and values for form elements:

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 an 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(){$(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 ("I was executed second ");});

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 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
Get the innerHTML, $ ("# myid" ).html ()
Obtain 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

The Code is as follows:

$ ("# Myid"). attr ("width", "20% ")

Read an attribute

The Code is as follows:

$ ("# Myid"). attr ("width ")

Specify multiple attributes at a time

The Code is as follows:

$ ("# Myid"). attr ({disabled: "disabled", width: "20%", height: "30 ″})

Delete attributes

The Code is as follows:

$ ("# Myid"). removeAttr ("disabled ")

Application Style

The Code is as follows:

$ ("# Myid"). addClass ("myclass ")

Delete A style

The Code is as follows:

$ ("# Myid"). removeClass ("myclass ")

Add a style

The Code is as follows:

$ ("# Myid" ).css ("height", "20px ")

Add a group of styles

The Code is as follows:

$ ("# 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 jQuery method is

The Code is as follows:

$ ("# 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 jQuery format is

The Code is as follows:

$ ("# Myid" ).css ({backgroundColor: "# FF0000 ″})

4. Search for elements based on the link

Find the next element at the same level as yourself

The Code is as follows:

$ ("# Myid"). next ()

Find all elements at the same level as yourself.

The Code is as follows:

$ ("# Myid"). nextAll ()

Find the last element at the same level as yourself

The Code is as follows:

$ ("# Myid"). prev ()

Find all elements on the same level as yourself.

The Code is as follows:

$ ("# Myid"). prevAll ()

Find your first child element

The Code is as follows:

$ ("# Myid"). children ()

Find your first parent Element

The Code is as follows:

$ ("# Myid"). parent ()

Find all of your parent Elements

The Code is as follows:

$ ("# 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:

The Code is as follows:

$ ("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

The Code is as follows:

$ ("Body"). append ("")

This statement inserts the html section into the end tag of the body. The result is:

The Code is as follows:

$ ("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

The Code is as follows:

$. 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 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 (''); $ ("1111"). AppendTo (" # select ") // Add the option in the drop-down box

A little explanation:

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 (); // 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.

I hope this article will help you with jQuery programming.