The basic method of value and assignment of JQuery

Source: Internet
Author: User

/* Get the Text.areatext value * *
var textval = $ ("#text_id"). attr ("value");
Or
var textval = $ ("#text_id"). Val ();
/* Get the value of the radio button * *
var Valradio = $ ("input[@type =radio][@checked]"). Val ();
/* Get a set of radio items named (items) the value of the selected item * *
var item = $ (' input[@name =items][@checked] '). Val ();
/* Get check box value * *
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", "");/empty content
$ ("#text_id"). attr ("value", ' test ');//fill content
Multi-selection box checkbox:
$ ("#chk_id"). attr ("Checked", "");//Leave it unchecked
$ ("#chk_id"). attr ("Checked", true);//tick
if ($ ("#chk_id"). attr (' checked ') ==true)//judge whether it has been selected

Radio Group Radio:

$ ("input[@type =radio]"). attr ("Checked", ' 2 ');//Set value=2 item is currently selected

Dropdown box Select:
$ ("#select_id"). attr ("value", ' test ');//Set Value=test item is currently selected
$ ("<option value= ' test ' >test</option><option value= ' test2 ' >test2</option>"). Appendto ("# select_id ")/option to add a dropdown box
$ ("#select_id"). empty ();//Empty Drop-down box

Gets the value of a set of radio selected items named (items)
var item = $ (' input[@name =items][@checked] '). Val ()//If not selected, val () = undefined
Gets the text of the Select selected item
var item = $ ("select[@name =items] option[@selected]"). Text ();
The second element of the Select Drop-down box is the currently selected value
$ (' #select_id ') [0].selectedindex = 1;
Radio the second element of a radio group is the currently selected value
$ (' input[@name =items] '). Get (1). checked = true;

Resetting a form
$ ("form"). each (function () {
. Reset ();
});

1. Select elements
$ ("#myid") effect is equal to document.getElementById ("myID"), but write a lot less characters.

If you need to convert a jquery object to an HTML element, you only need to take the No. 0 element. For example, $ ("#myid") returns a JQuery object, and $ ("#myid") [0] returns an HTML element

If you select all of the IMG elements, then write: $ ("img")

If you select a DIV element with a class= "TextBox" (<div class= "textbox" ></div>), then write: $ ("div. TextBox ")

Select element with MyAttr attribute $ ("div[myattr]")
Select the element $ ("div[myattr= ' MyClass ') with the MyAttr property and the property value equal to MyClass"
property is not equal to [myattr!= ' MyClass ']
Property starts with my [myattr^= ' my ']
Attribute ends with class [myattr$= ' class ']
property contains the CLA three characters [myattr*= ' CLA ']

If a selection returns multiple elements, and you want to apply some attributes to the element every time you return an element, you can write
$ ("div"). each (function ()
{
$ (this). CSS ("Background-color", "#F00 ″);"
Alert ($ (this). html ());
$ (this). Width ("200px");
});

2. The event
Add onload to the page event handling method
$ (function ()
{
Alert ("The page structure is loaded, but some pictures may not have been loaded (in general, this event is sufficient)");
});

You can bind multiple onload event handling methods to a page
$ (function ()
{
Alert ("I was first executed");
});

$ (function ()
{
Alert ("I am second to be executed");
});

Binding Special Events
$ ("#myid"). KeyDown (function ()
{
Alert ("Triggers a KeyDown event");
});

In addition to these commonly used, infrequently used events need to be bound by the Bind method

3. Element Attributes/Methods
Gets the height of an element, $ ("#myid"). Height ()
Gets the position of an element, $ ("#myid"). Offset () Returns an offset object, or $ ("#myid") if the top of the element position is taken. Offset (). Top, take left $ ("#myid"). Offset (). Left
Gets the innerHTML of an element, $ ("#myid"). HTML ()
Gets the innertext of an element, $ ("#myid"). Text ()
Gets the value of a text box, $ ("#myid"). Val ()
Gets the attribute of an element, $ ("#myid"). attr ("MyAttribute")

One of the basic features of these methods is that the values are represented without parameters, with parameters representing the settings (except for offset), such as
$ ("#myid"). Height ("20″");
$ ("#myid"). HTML ("<a href=" >asdasd</a>)
$ ("#myid"). Val ("ASDASD")

Be aware that offset is read-only.

Sets the attribute $ ("#myid") for an element. attr ("width", "20%")
Reads a property $ ("#myid"). attr ("width")
Specify multiple attributes at once $ ("#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 Style $ ("#myid"). CSS ("height", "20px")
Add a group of styles $ ("#myid"). CSS ({height: "20px", Width: "100px"})
Note that if you add a style, the name of the style is the name in the CSS, such as style= "Background-color: #FF0000 ″, the corresponding jquery notation is $ (" #myid "). CSS (" Background-color "," #FF0000 ″)
But when you add a set of styles, the name of the style is the CSS name in JavaScript, for example: Myid.style.backgroundColor = "#FF0000 ″, and the corresponding jquery notation is $ (" #myid "). CSS ({ BackgroundColor: "#FF0000 ″})

4. Find elements based on relationships
Find the next element $ ("#myid") with your own sibling. Next ()
Find all of the elements below yourself $ ("#myid") at the same level as yourself. Nextall ()
Find the previous element $ ("#myid") with your own sibling. Prev ()
Find all the elements ("#myid") above yourself at the same level as yourself. Prevall ()
Find your own first generation of child elements $ ("#myid"). Children ()
Find your own first parent element $ ("#myid"). Parent ()
Find all of your own parent elements $ ("#myid"). Parents ()
Example:
$ ("Div.l4″"). Parents (). each (
function () {
Alert ($ (this). html ());
});

Will get all the parent elements of the Class=l4 div and alert out their HTML

Example:
$ ("Div.l4″"). Parents ("Div.l2″"). each (function () {Alert ($ (this). html ());
Gets the Class=l4 's parent element, which must be a div, and its class=l2

All the methods mentioned here can be expressed with expressions, and the expression is written as reference to the first part

5. Maintenance elements
Add an element to the body
$ ("Body"). Append ("<input type= ' text ' value= ' asd '/>")
The statement inserts this HTML into the body end tag, resulting in <input type= ' text ' value= ' ASD '/></body>

$ ("Body"). Prepend ("<input type= ' text ' value= ' asd '/>")
The statement inserts this HTML into the body start tag, resulting in <body><input type= ' text ' value= ' ASD '/>

6.AJAX
Request a page with a Get method
$.get ("http://www.google.com", "Q=jquery", function (data, status) {alert (data)})
Represents the request http://www.google.com, the parameter is Q, the value of the parameter is jquery, and after the request (whether successful or unsuccessful) executes the following function, which has two fixed parameters, data and status, Data is returned, status is the state of this request

Request a page with the Post method
$.post (...) parameter same get method

7. Other methods
$.trim (str) removes STR before and after spaces
$.browser returns the current user's browser type
$.browser.version returns the version of the current browser

8. Plugin
jquery support Plug-ins, http://jquery.com/plugins/has a lot of ready-made plug-ins, can also write their own
Write your own plug-ins, please refer to Http://docs.jquery.com/Core/jQ.....end#object and Http://docs.jquery.com/Core/jQuery.extend#object

1, dropdown box:
var cc1 = $ (". FORMC select[@name = ' country '] option[@selected]"). Text (); Gets the text of the selected item in the Drop-down menu (note that there are spaces in the middle)
var CC2 = $ ('. FORMC select[@name = ' country '] '). Val (); Gets the value of the selected item in the Drop-down menu
var cc3 = $ ('. FORMC select[@name = ' country '] '). attr ("id"); Gets the id attribute value of the selected item in the Drop-down menu
$ ("#select"). Empty ()//Empty Drop-down box//$ ("#select"). HTML (");
$ ("<option value= ' 1 ' >1111</option>"). Appendto ("#select")//option to add a drop-down box
A little explanation:
1.select[@name = ' country '] option[@selected] Represents the Name property,
and the attribute value is the option element with the selected attribute inside the Select element of ' country ';
It can be seen that a @ begins with a property that follows.

2, Radio Box:
$ ("input[@type =radio][@checked]"). Val (); Gets the value of the selected item in the Radio box (note that there are no spaces in the middle)
$ ("input[@type =radio][@value =2]"). attr ("Checked", ' checked '); Sets the value=2 of the radio box to the selected state. (Note that there are no spaces in between)

3, check box:
$ ("input[@type =checkbox][@checked]"). Val (); Gets the value of the first item selected in the check box
$ ("input[@type =checkbox][@checked]"). each (function () {//, because the check box is typically selected for more than one, you can cycle the output
Alert ($ (this). Val ());
});

$ ("#chk1"). attr ("Checked", "");/no tick.
$ ("#chk2"). attr ("Checked", true);/tick
if ($ ("#chk1"). attr (' checked ') ==undefined) {}//judge whether it has been ticked

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.