The basic method of "turn" jQuery to take value and assign value

Source: Internet
Author: User

This article mainly introduces the value of jquery, the basic method of assignment, the need for friends can refer to the following/*get the value of Text.areatext*/varTextval = $ ("#text_id"). attr ("value"));//orvarTextval = $ ("#text_id"). Val ();/*get the value of a radio button*/varValradio = $ ("input[@type =radio][@checked]"). Val ();/*gets the value of a set of radio selected items named (items)*/varItem = $ (' input[@name =items][@checked] '). Val ();/*gets the value of the check box*/varCheckboxval = $ ("#checkbox_id"). attr ("value"));/*gets the value of the drop-down list*/varSelectval = $ (' #select_id '). Val ();//text box, text area:$ ("#text_id"). attr ("Value", "');//Clear Content$ ("#text_id"). attr ("value", ' Test ');//Populating content//multiple marquee checkbox:$ ("#chk_id"). attr ("Checked", "');//make it not tick$ ("#chk_id"). attr ("Checked",true);//Tickif($ ("#chk_id"). attr (' checked ') = =true)//determine if you have selected//Radio Group Radio:$("Input[@type =radio]"). attr ("Checked", ' 2 ');//set the value=2 item as the currently selected item//Drop- down box select:$ ("#select_id"). attr ("value", ' Test ');//set the Value=test item as the currently selected item$ ("<option value= ' test ' >test</option><option value= ' test2 ' >test2</option>"). AppendTo ("# select_id ")//option to add a drop-down box$ ("#select_id"). empty ();//empty drop-down boxgets the value of a set of radio selected items named (items)varItem = $ (' input[@name =items][@checked] '). Val ();//val () = undefined if not selectedgets the text of the Select selected itemvarItem = $ ("select[@name =items] option[@selected]"). text (); the second element of the Select drop-down box is the current check value of $ (' #select_id ') [0].selectedindex = 1; Radio the second element of the radio group is the currently selected value $ (' input[@name =items] '). Get (1). checked =true;//Resetting the form$ ("form"). each (function() {. reset ();});1The Select element $ ("#myid") Effect equals document.getElementById ("myID"), but the characters you write are much less. If you need to convert a jquery object to an HTML element, you only need to take its No. 0 element. For example $ ("# myID ") returns a JQuery object, while $ (" #myid ") [0] to return the HTML element if all of the IMG elements are selected, then write: $ ("img") if you choose to have a class= "TextBox" of the div element (<div class= "textbox" ></div>), then write: $ ("div. TextBox ")Select the element with the MyAttr attribute $ ("div[myattr]") to select the element with the MyAttr attribute and the attribute value equal to MyClass $ ("Div[myattr= ' MyClass '] property is not equal to [myattr! = ' MyClass '] Property starts with my [myattr^= ' my '] Property ends in class [myattr$= ' class '] property contains the three characters of the CLA [MyAttr*= ' CLA 'If a selection returns multiple elements, and you want to apply some attributes to the element each time you return an element, you can write $ ("div"). each (function(){$( This). CSS ("background-color "," #F00 ″); alert ($ ( This). HTML ()); $ ( This). Width ("200px");});2. Event to page Add onload 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 executed first");}); $(function() {alert ("I am second executed");}); Bind Special Event $ ("#myid"). KeyDown (function() {alert ("KeyDown event triggered");}); In addition to these commonly used, infrequently used events need to be bound by the Bind method3. Element Properties/MethodsGets the height of an element, $ ("#myid"). Height () Gets the position of an element, $ ("#myid"). Offset () Returns an offset object if the top of the element position is taken, $ ("#myid"). Offset (). Top,?take left to $ ("#myid"). Offset (). Left gets an element of innerHTML, $ ("#myid"). HTML () Gets an element of innertext, $ ("#myid"). Text () Gets the value of a text box, $ ("#myid"). Val () Gets the attribute of an element, $ ("#myid"). attr ("MyAttribute") above these methods have a basic feature, that is, without parameters to indicate the value, with the parameter to indicate the setpoint (except offset), For example, $ ("#myid"). Height ("20″); $ ("#myid"). HTML ("<a href= ">asdasd</a>")$ ("#myid"). Val ("ASDASD") need to be aware that offset is read-only. Sets the property $ ("#myid") to an element. attr ("width", "20%") reads an attribute $ (" #myid "). attr (" width ") specifies more than one property at a time (" #myid "). attr ({disabled:" Disabled ", Width:"20% ", Height:" 30″}) Delete the property $ ("#myid"). Removeattr ("disabled") applies the style $ ("#myid"). AddClass ("MyClass") Delete the style $ ("#myid"). Removeclass ("MyClass") Add a style of $ ("#myid"). CSS ("height", "20px") plus a set of styles $ ("#myid"). CSS ({height: "20px", Width: "100px"}) Note: If you add a style, The name of this style is the name of 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, such as: Myid.style.backgroundColor="#FF0000 ″, the corresponding jquery notation is $ (" #myid "). CSS ({backgroundcolor:" #FF0000 ″})4finds an element based on a relationship find the next element with its own sibling $ ("#myid"). Next () Find all of the elements below themselves ("#myid") with their peers. Nextall () finds the previous element with its own sibling $ ("#myid"). Prev () Find all the elements that are above themselves in the same class as Yourself $ ("#myid"). Prevall () find its own first-generation child element $ ("#myid"). Children () find its first parent element $ ("#myid"). Parent () Find all of its parent elements $ ("#myid"). Parents () Example: $ ("Div.l4″"). Parents () . each (function() {alert ($ ( This). HTML ());}); Will put the class=all the parent elements of the L4 div get, and alert out their HTML example: $ ("Div.l4″)." Parents ("Div.l2″."). each (function() {Alert ($ ( This). HTML ()); }); Will get classThe parent element of the =L4, which must be a div, and its class=L2 All of the methods mentioned here can be expressed in expressions, and the expression is referenced in the first part5the maintenance element adds an element of $ ("body") to the body. Append ("<input type= ' text ' value= ' asd '/> ') The statement will insert this HTML into the body end tag before the result is <input type= ' text ' value= ' ASD '/></ Body>$ ("body"). Prepend ("<input type= ' text ' value= ' asd '/> ') The statement will insert this HTML into the body start tag, 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)})Represents the request http://www.google.com, the parameter is the Q, the value of the parameter is jquery, after the request is finished (whether successful or unsuccessful) execute the following function, the function has two fixed parameters, data and status, and it is returned Status is the state of this requestuse the Post method to request a page $.post (...) parameter with Get method7Other methods $.trim (str) remove STR before and after the space $.browser returns the type of the current user's browser $.browser.version returns the version of the current browser8. Plug-in jquery support plugin, http://jquery.com/plugins/There are a lot of ready-made plugins, you can also write your ownTo write your own plugin, please refer to http://Docs.jquery.com/core/jq.....end#object and Http://docs.jquery.com/Core/jQuery.extend#object1, drop-down box:varCC1 = $ (". 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)varCC2 = $ ('. FORMC select[@name = "Country"]). Val ();//get the value of the selected item in the drop-down menuvarCC3 = $ ('. FORMC select[@name = "Country"]). attr ("id");//Gets the id attribute value of the selected item in the drop-down menu$ ("#select"). empty ();//Empty the drop-down box//$ ("#select"). HTML (");$ ("<option value= ' 1 ' >1111</option>"). AppendTo ("#select")//option to add a drop-down boxA little explanation:1.select[@name = ' country '] option[@selected] means having the Name property, and the property value is' Country 'The option element with the selected attribute inside the select element; it can be seen that an @ begins with a property. 2, Radio Box: $ ("input[@type =radio][@checked]"). Val ();//get 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 there is no space in the middle)3, check box: $ ("input[@type =checkbox][@checked]"). Val ();//gets the value of the check box for the first item selected$ ("input[@type =checkbox][@checked]"). each (function(){//Because the check box is generally selected more than one, you can loop the outputAlert ($ ( This). Val ());}); $("#chk1"). attr ("Checked", "');//no tick .$ ("#chk2"). attr ("Checked",true);//Tickif($ ("#chk1"). attr (' checked ') ==undefined) {}//To determine if a tick has been madearticles you might be interested in: jquery's approach to the value and assignment of HTML elements jquery Basic Learning notes in jquery Val () Instance code for the value assignment of a form use jquery to get the IE9 drop-down box default value problem discussion jquery Design idea complete article basic operation code for form in jquery How to get values using jquery jquery common operation code jquery using a concise tutorial jquery Text (), Val (), HTML () method difference Summary

The basic method of "turn" jQuery to take value and assign value

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.