Basic operations of jQuery Html controls (routine collection and sorting) and basic operations of jquery

Basic operations of jQuery Html controls (routine collection and sorting) and basic operations of jquery

It is boring to collect and summarize the common operations of jQuery, hoping to be useful to new users.

Based on jquery 1.3.2

<!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--><!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

1. Text Box

// Text box $ ("# btnTextGet "). click (function () {alert ($ ("# txtNum "). val () ;}); $ ("# btnTextSet "). click (function () {$ ("# txtNum "). attr ("value", '000000'); // value assignment // $ ("# txtNum "). val ("123456"); // value assignment });

Html code:

Text Box:

<Input type = "text" id = "txtNum"/> <input type = "button" value = "assign a value to the text box" id = "btnTextSet"/> <input type =" button "value =" get text box value "id =" btnTextGet "/>

2. Span

// Span $ ("# btnSpanSet "). click (function () {$ ("# spanId" ).html ("Hello everyone") ;}); $ ("# btnSpanGet "). click (function () {alert ($ ("# spanId" ).html ());})

Html code

Span tag:

<Span id = "spanId"> </span> <input type = "button" value = "assign a value to the span tag" id = "btnSpanSet"/> <input type = "button "value =" Get span tag content "id =" btnSpanGet "/>

3. drop-down box:

// Drop-down box $ ("# btnSelectText "). click (function () {alert ($ ("# ddlBook option: selected "). text () ;}); $ ("# btnSelectValue "). click (function () {alert ($ ("# ddlBook option: selected "). val () ;}); $ ("# btnClearSelect "). click (function () {$ ("# ddlBook "). empty (); // clear the drop-down list}); $ ("# ddlBook "). change (function () {// Add change event var val = $ ("# ddlBook "). val (); // obtain the Valuevar text selected by the Select statement = $ ("# ddlBook option: selected "). text (); // obtain the Textvar checkIndex selected by Select = $ ("# ddlBook "). get (0 ). selectedIndex; // obtain the selected index value var maxIndex =$ ("# ddlBook option: last "). attr ("index"); // obtain the largest Select index value alert (text) ;}); $ ("# btnSelectAppend "). click (function () {$ ("# ddlBook "). append ("<option value = \" 5 \ "> physical </option>"); // append an Option for Select (drop-down )}); $ ("# btnSelectPreAppend "). click (function () {$ ("# ddlBook "). prepend ("<option value = \" 0 \ "> Select </option>"); // insert an Option for Select (first position )});

Html source code

Drop-down box:

<Select id = "ddlBook"> <option value = "1"> Chinese </option> <option value = "2"> mathematics </option> <option value = "3 "> English </option> <option value =" 4 "> politics </option> </select> <input type =" button "value =" get the value selected from the drop-down list" id = "btnSelectText"/> <input type = "button" value = "get the value selected in the drop-down box" id = "btnSelectValue"/> <input type = "button" value =" clear the drop-down box "id =" btnClearSelect "/> <input type =" button "value =" APPEND option "id =" btnSelectAppend "/> <input type =" button "value = "Insert at the first position" id = "btnSelectPreAppend"/>

4. radio single queue

// Radio single commit $ ("# btnRadioValue "). click (function () {// alert ($ ("input: radio [type = 'Radio '] [checked]"). val (); alert ($ ("input: radio [type = 'radio'] [name = IsEnable] [checked]"). val (); // This is the method of jquery 1.3, running in version 1.2 has a problem // alert ($ ("input [@ type = radio] [@ checked]"). val (); // 1.2); $ ("# btnRadioSet "). click (function () {$ ("input: radio [type = 'radio'] [name = IsEnable]"). attr ("checked", '0'); // set the item with value = 0 to the selected item });

Html source code:

Radio control:

Yes <input type = "radio" value = "1" checked = "checked" name = "IsEnable"/> NO <input type = "radio" value = "0" name = "IsEnable"/> <input type = "button" value = "Get Radio selected value" id = "btnRadioValue"/> <input type = "button" Value = "selected value "id =" btnRadioSet "/>

5. Check box

// Check box $ ("# btn1 "). click (function () {$ ("[name = 'checkbox']"). attr ("checked", 'true'); // select all}); $ ("# btn2 "). click (function () {$ ("[name = 'checkbox']"). removeAttr ("checked"); // cancel all selected}); $ ("# btn3 "). click (function () {$ ("[name = 'checkbox']: even "). attr ("checked", 'true'); // select all odd numbers}); $ ("# btn4 "). click (function () {$ ("[name = 'checkbox']"). each (function () {if ($ (this ). attr ("checked") {$ (this ). removeAttr ("checked");} else {$ (this ). attr ("checked", 'true') ;}); $ ("# btn5 "). click (function () {var str = ""; $ ("input [name = 'checkbox']: checkbox: checked "). each (function () {str + = ($ (this ). val () + "\ r") ;}); alert (str );});

Html source code:

Check box:

<Input type = "button" id = "btn1" value = "select all"/> <input type = "button" id = "btn2" value = "cancel all"/> <input type = "button" id = "btn3" value = ""/> <input type = "button" id = "btn4" value = ""/> <input type = "button" id = "btn5" value = "get all selected values"/> <br> <input type = "checkbox" name = "checkbox" value =" checkbox1 "/> checkbox1 <input type =" checkbox "name =" checkbox "value =" checkbox2 "/> checkbox2 <input type =" checkbox "name =" checkbox "value =" checkbox3 "/> checkbox3 <input type =" checkbox "name =" checkbox "value =" checkbox4 "/> checkbox4 <input type =" checkbox "name =" checkbox "value =" checkbox5 "/> checkbox5 <input type =" checkbox "name =" checkbox "value =" checkbox6 "/> checkbox6 <input type =" checkbox "name =" checkbox "value =" checkbox7 "/> checkbox7 <input type =" checkbox "name =" checkbox "value =" checkbox8 "/> checkbox8

6. Buttons

// Hide the button $ ("# btnHide "). click (function () {if ($ ("# btn "). is (": hidden") {$ ("# btnHide "). val ("Hide button"); // $ ("# btn "). show; // This method can also be $ ("# btn" ).css ('display', '');} else {$ (" # btnHide "). val ("Show button"); // $ ("# btn "). hide (); // This method can also be $ ("# btn" ).css ('display', 'None');} // $ ("# btn "). toggle (); // This sentence can implement the above functions });

Html source code:

Button:

<Input type = "button" id = "btn" value = ""/> <input type = "button" id = "btnHide" value = ""/> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Drop-down box:
<Select id = "ddlBook"> <option value = "1"> Chinese </option> <option value = "2"> mathematics </option> <option value = "3 "> English </option> <option value =" 4 "> politics </option> </select> <input type =" button "value =" get the value selected from the drop-down list" id = "btnSelectText"/> <input type = "button" value = "get the value selected in the drop-down box" id = "btnSelectValue"/> <input type = "button" value =" clear the drop-down box "id =" btnClearSelect "/> <input type =" button "value =" APPEND option "id =" btnSelectAppend "/> <input type =" button "value = "insert" id = "btnSelectPreAppend"/> <br/>
Radio control:
Yes <input type = "radio" value = "1" checked = "checked" name = "IsEnable"/> NO <input type = "radio" value = "0" name = "IsEnable"/> <input type = "button" value = "Get Radio selected value" id = "btnRadioValue"/> <input type = "button" Value = "selected value option "id =" btnRadioSet "/> <br/>
Check box:
<Input type = "button" id = "btn1" value = "select all"/> <input type = "button" id = "btn2" value = "cancel all"/> <input type = "button" id = "btn3" value = ""/> <input type = "button" id = "btn4" value = ""/> <input type = "button" id = "btn5" value = "get all selected values"/> <br> <input type = "checkbox" name = "checkbox" value =" checkbox1 "/> checkbox1 <input type =" checkbox "name =" checkbox "value =" checkbox2 "/> checkbox2 <input type =" checkbox "name =" checkbox "value =" checkbox3 "/> checkbox3 <input type =" checkbox "name =" checkbox "value =" checkbox4 "/> checkbox4 <input type =" checkbox "name =" checkbox "value =" checkbox5 "/> checkbox5 <input type =" checkbox "name =" checkbox "value =" checkbox6 "/> checkbox6 <input type =" checkbox "name =" checkbox "value =" checkbox7 "/> checkbox7 <input type =" checkbox "name =" checkbox "value =" checkbox8 "/> checkbox8 <br/>
Button:
<Input type = "button" id = "btn" value = ""/> <input type = "button" id = "btnHide" value = ""/> <br/> </body> 
I would like to introduce so much about the basic operations of jquery html controls and hope to help you!

Articles you may be interested in:

  

 
   
Implementation Code for operations on HTML controls under jquery
 
   
Jquery obtains the value and text value after the HTML tag of the client is generated by the dropdownlist and radiobuttonlist controls on the ASP. NET Server Side.
 
   
JQuery prevents bubble and HTML default operations
 
   
Example of using jquery to operate HTML5 data -*