JQuery Basic Selector Practice (instance explanation)

1. Enter a number in the input box, click the button to implement the function of the corresponding event. HTML code:

    jQuery code :  
/ / Change the row background greater than N as green $ (“# Button5”). Click (function () {// Get the input box for ID TXT1 The text value var Num = $ (“# txt1”). Val (); // TR’s row starts from 0, so the reality should be reduced Num = Num – 1; $ (“TR: GT (“+ Num +”) “). CSS (” Background-Color “,” Green “);});

Second, click on each blue when wireframe div, change the background immediately after the element for its green
 html Code:   

1

4

5
6
  7 
8
jQuery code:
$ ("DIV ") .click (function () {$This) .Next ("DIV"). CSS ("Background-Color", "Green");});
After the page is loaded, let all numbers are The font color of the odd DIV is changed to Blue
// 2. After the page is loaded, the font color of all numbers is odd Div should be blue // $ ( "Div.Mainbox> Div: EVEN"). CSS ("color", "blue"); for (var i = 0; i
div "). Length; i ++) {// Get a collection of per div VAR VALU = $ (". Mainbox> Div"); // Get the text content var TXT = $ (VALU [i]) in each DIV. text (); // converts String to int value = PARSEINT TXT); // Taking the pattern for parity IF (value% 2! = 0) {$ (VALU [I]). CSS ("Color", "Blue");}}
Third, write JavaScript code to complete the following functional requirements:

Implemented the selection, reverse selection, all-in-selection function
   
HTML code:

all selected
   

Andy Lau

Zhang Xueyou

jquery之基本选择器practice(实例讲解)

 jQuery code:    $ (Function () {// 全 选 全 方法 1: $ ("# selectall"). Click (function () {$ ("# checkbox3, # Checkbox4, # checkbox5, # checkbox6 "). Prop (" Checked ", true);}; // Method 2: $ (" # selectall "). Click (function () {//: Checkbox - Select all types Input tag $ (": checkbox") for Checkbox. Prop ("Checked", true);}; //$ ("# SelectNotall"). Click (": CheckBox"). Prop ("Checked", false);}; // Reverse Selection method 1: $ ("# selectrevorse"). click. Function () {$ (": checkbox"). Each (function () {$ (this) .prop ("checked",! $ (this) .prop ("checked"));});}); / / Reverse selection Method 2 2: $ ("# selectrevorse"). Click ("INPUT [Type = Checked]"). Each (function (i, n) {n.checked =! N.Checked; });}); // Reverse selection method 3: $ ("# selectrevorse"). Click (function () {var $ bob = $ ("INPUT [Type = Checked]"); for (var i = 0; i    Change the foreground color of i's grandfather to Orange   HTML code:       Sleepworm    
jQuery code:

$ Function () {/ / Changed to RED $ (“# Button1”). Click (“color”). CSS (“color”). CSS (“color”). CSS (“color”). css (“color”, “red “);}); // change all Div tagged grandson SPAN outlasts to Green $ (” # Button2 “). Click (” Div “). Children (). Children (). CSS (“Color”, “Green”);}); // Change the foreground color of the grandfather of i to Orange $ (“# Button3”). Click (“” {$ (“i”). Parent () .parent (). CSS (“color”, “orange”);};});
  < $bob.length; i++) {
          if ($bob[i].checked == true) {
            $bob[i].checked == false;
          }
          else {
            $bob[i].checked == true;
          }
        }
      });
    }); 5, please write JavaScript code to complete the following function Requirements: 
Every 1 second, let all numbers counterclockwise

The effect is as follows:

HTML code:

  
2

jQuery Code:

$ (Function () {WINDOW.SetInterval (Fun, 1000);}); // Method 1: Function fun () {$ ("# Table1 Label "). Each (Function (i, n) {// Gets the current Label text value var $ item = $ (n) .text (); // convert it to INT $ item = PARSEINT ($ Item ); if (item == 8) {// gives the current Label $ (n) .text ("1");} else {// assigns $ (n) .Text ($ item + 1) }});}; // Method 2: Function fun2 () {$ ("# Table1 Label"). Each (function () {var n = $ (this) .Text (); n ++; if (n> 8) {n = 1;} this.textcontent = n; // $ (this) .Text () = n;});}

The above JQuery Basic Selector Practice (instance explanation) is the full content of Xiaobian sharing to everyone, I hope I can give you a reference, I hope everyone will support Tumi Cloud.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment