JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture

To catch up with the stars 2021-02-23 02:40:47
jquery jquery basic syntax jquery


Sort out the knowledge points

Lecture notes

1、JQuery Quick start

1.1、JQuery Introduce

  • jQuery It's a JavaScript library .

    • frame :Mybatis (jar package ) Big tools

    • plug-in unit :PageHelper (jar package ) Gadget

    • library :js library :jquery (js file ) Gadget ( For native language upgrades , Expand )

  • The so-called Library , It's just one. JS file , It encapsulates many predefined functions , For example, getting elements , Perform hidden 、 Mobile, etc , The purpose is It is called directly in use , There's no need to redefine , This greatly simplifies JavaScript Programming .

  • jQuery Official website :https://www.jquery.com

 

 

1.2、JQuery Quick start

  • The development train of thought

  1. To write HTML file .

  2. introduce jQuery file .

  3. Use jQuery Get elements .

  4. Use the browser to test .

  • Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title> Quick start </title>
</head>
<body>
   <div id="div"> I am a div</div>
</body>
<!-- introduce jQuery file -->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
   // JS The way , adopt id Property value to get div Elements
   let jsDiv = document.getElementById("div");
   //alert(jsDiv);
   //alert(jsDiv.innerHTML);

   // jQuery The way , adopt id Property value to get div Elements
   let jqDiv = $("#div");
   alert(jqDiv);
   alert(jqDiv.html());
</script>
</html>

1.3、 Summary

  • jQuery It's a JavaScript library .

  • To put it bluntly, it is a well-defined one JS file , Many functions are encapsulated inside , Can greatly simplify our JS Operation steps .

  • jQuery Official website :https://www.jquery.com.

  • Want to use , You have to import the file .

  • jQuery The core grammar of $();

2、JQuery Basic grammar

2.1、JS Objects and JQuery Object conversion

  • jQuery In essence, though JS, But if you want to use jQuery Then you must ensure that the object is jQuery object , instead of JS How to get it DOM object , Of the two API Methods cannot be mixed , If you want to use the other party's API, You need to convert objects .

  • JS Of DOM Object conversion to jQuery object

    //$(JS Of DOM object );

    // JS The way , adopt id Property value get div Elements
    let jsDiv = document.getElementById("div");
    alert(jsDiv.innerHTML);
    //alert(jsDiv.html()); JS Object cannot be used jQuery The function inside

    // take JS Object to jQuery object
    let jq = $(jsDiv);
    alert(jq.html());
  • jQuery Object conversion to JS object

    /*jQuery object [ Indexes ];
    jQuery object .get( Indexes );*/

    // jQuery The way , adopt id Property value get div Elements
    let jqDiv = $("#div");
    alert(jqDiv.html());
    // alert(jqDiv.innerHTML);   jQuery Object cannot be used JS The function inside

    // take jQuery Object to JS object ( Will get js Object into an array ,jq An object is an object that contains js An array of objects )
    let js = jqDiv[0];
    alert(js.innerHTML);

2.2、 The basic use of events

  • Common events

     

     

  • stay jQuery Encapsulates the event as the corresponding method . Removed JS Medium .on grammar .

  • Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Use of events </title>
    </head>
    <body>
       <input type="button" id="btn" value=" Am I ">
       <br>
       <input type="text" id="input">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
       // Click events
       $("#btn").click(function(){
           alert(" What do you want me to do ?");
      });

       // Get focus events
       // $("#input").focus(function(){
       //     alert(" You have to input data ...");
       // });

       // Loss of focus event
       $("#input").blur(function(){
           alert(" Your input is complete ...");
      });
    </script>
    </html>

2.3、 Binding and unbinding of events

  • The binding event

    //jQuery object .on( Event name , Functions performed );

    // to btn1 Button binding click event 
    $("#btn1").on("click",function(){
    alert(" What do you want me to do ?");
    });
  • Unbind event

    If you do not specify an event name , All events bound to the object are unbound

    //jQuery object .off( Event name );

    // adopt btn2 Unbundling btn1 Click event for 
    $("#btn2").on("click",function(){
    $("#btn1").off("click");
    });

2.4、 Switching of events

Switching of events : You need to bind multiple events to the same object , And there is a sequence of events .

  • Mode one : Individually define

    $( Elements ). Event method name 1( Functions to perform );

    $( Elements ). Event method name 2( Functions to perform );

    // Mode one Individually define 
    $("#div").mouseover(function(){
       // Background color : Red
       //$("#div").css("background","red");
       $(this).css("background","red");
      });
    $("#div").mouseout(function(){
       // Background color : Blue
       //$("#div").css("background","blue");
       $(this).css("background","blue");
    });
  • Mode two : Chain definition

    $( Elements ). Event method name 1( Functions to perform )

    . Event method name 2( Functions to perform );

    // Mode two Chain definition 
    $("#div").mouseover(function(){
      $(this).css("background","red");
    }).mouseout(function(){
      $(this).css("background","blue");
    });

2.5、 Traversal operation

  • Mode one : The traditional way

    for(let i = 0; i < Container object length ; i++){
    Executive function ;
    }
    // Mode one : The traditional way 
    $("#btn").click(function(){
       let lis = $("li");// What's passed in is a tag name , Will get all the tag objects , Put the label object in jQuery object
       for(let i = 0 ; i < lis.length; i++) {
           alert(i + ":" + lis[i].innerHTML);
      }
    });
  • Mode two : object .each() Method

     Container object .each(function(index,ele){
    Executive function ;
    });
    // Mode two : object .each() Method 
    $("#btn").click(function(){
       let lis = $("li");
       lis.each(function(index,ele){// Anonymous functions are passed as arguments to each Method , Is the each Method
           alert(index + ":" + ele.innerHTML);
           // each The first time the method calls an anonymous function ,0 , lis[0]
           // each Method calls the anonymous function the second time ,1 , lis[1]
      });
    });
  • Mode three :$.each() Method

    $.each( Container object ,function(index,ele){
    Executive function ;
    });
    // Mode three :$.each() Method 
    $("#btn").click(function(){
       let lis = $("li");
       $.each(lis,function(index,ele){
           alert(index + ":" + ele.innerHTML);
      });
    });
  • Mode 4 :for of sentence

    for(ele of Container object ){
    Executive function ;
    }
    // Mode 4 :for of Statement traversal 
    $("#btn").click(function(){
       let lis = $("li");
       for(ele of lis){
           alert(ele.innerHTML);
      }
    });

2.6、 Summary

  • JS Objects and jQuery Object to object conversion

    • $(JS Of DOM object ): take JS Object to jQuery object .

    • jQuery object [ Indexes ] jQuery

    • object .get( Indexes ): take jQuery Object to JS object .

  • event

    • stay jQuery Encapsulates the event as the corresponding method . Removed JS Medium .on grammar .

    • on( Event name , Functions performed ): The binding event .

    • off( Event name ): Unbind event .

  • Traverse

    • The traditional way .

    • object .each() Method .

    • $.each() Method .

    • for of sentence .

3、JQuery Selectors

3.1、 Basic selector

  • Selectors : Be similar to CSS Selector , Can help us get elements .

  • for example :id Selectors 、 Class selectors 、 Element selector 、 Property selectors and so on .

  • jQuery The syntax of selectors in :$();

     

     

     

    Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Basic selector </title>
    </head>
    <body>
       <div id="div1">div1</div>
       <div class="cls">div2</div>
       <div class="cls">div3</div>
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
       //1. Element selector   $(" Name of element ")
       let divs = $("div");
       //alert(divs.length);

       //2.id Selectors   $("#id The attribute value ")
       let div1 = $("#div1");
       //alert(div1);

       //3. Class selectors     $(".class The attribute value ")
       let cls = $(".cls");
       alert(cls.length);

    </script>
    </html>

3.2、 Hierarchy selector

 

 

  • A and B Represents any basic selector

  • Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Hierarchy selector </title>
    </head>
    <body>
       <div>
           <span>s1
               <span>s1-1</span>
               <span>s1-2</span>
           </span>
           <span>s2</span>
       </div>

       <div></div>
       <p>p1</p>
       <p>p2</p>
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
       // 1. Descendant selector $("A B");     A All under B( Include B The children of )
       let spans1 = $("div span");
       //alert(spans1.length);

       // 2. Child selectors   $("A > B");   A All under B( barring B The children of )
       let spans2 = $("div > span");
       //alert(spans2.length);

       // 3. Brother selector $("A + B");   A The next one next to each other B
       let ps1 = $("div + p");
       //alert(ps1.length);

       // 4. Brother selector $("A ~ B");   A Adjacent to all B
       let ps2 = $("div ~ p");
       alert(ps2.length);
       
    </script>
    </html>

3.3、 Attribute selector

 

 

  • Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Attribute selector </title>
    </head>
    <body>
       <input type="text">
       <input type="password">
       <input type="password">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
       //1. Property name selector   $(" Elements [ Property name ]")
       let in1 = $("input[type]");
       //alert(in1.length);


       //2. Property value selector   $(" Elements [ Property name = Property value ]")
       let in2 = $("input[type='password']");
       alert(in2.length);

    </script>
    </html>

3.4、 Filter selector

 

 

  • grammar : Basic selector / Hierarchy selector : Filter selector

  • Basic selector It doesn't contain id Selectors

  • Filter selector , Is to select one or more... From multiple results

  • Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Filter selector </title>
    </head>
    <body>
       <div>div1</div>
       <div id="div2">div2</div>
       <div>div3</div>
       <div>div4</div>
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
       // 1. First element selector $("A:first");
       let div1 = $("div:first");
       //alert(div1.html());

       // 2. Tail element selector $("A:last");
       let div4 = $("div:last");
       //alert(div4.html());

       // 3. Non element selector $("A:not(B)");
       let divs1 = $("div:not(#div2)");
       //alert(divs1.length);

       // 4. Even selector   $("A:even");
       let divs2 = $("div:even");
       //alert(divs2.length);
       //alert(divs2[0].innerHTML);
       //alert(divs2[1].innerHTML);

       // 5. Odd number selector   $("A:odd");
       let divs3 = $("div:odd");
       //alert(divs3.length);
       //alert(divs3[0].innerHTML);
       //alert(divs3[1].innerHTML);

       // 6. Equal to index selector $("A:eq(index)");
       let div3 = $("div:eq(2)");
       //alert(div3.html());

       // 7. Greater than index selector $("A:gt(index)");
       let divs4 = $("div:gt(1)");
       //alert(divs4.length);
       //alert(divs4[0].innerHTML);
       //alert(divs4[1].innerHTML);

       // 8. Less than index selector $("A:lt(index)");
       let divs5 = $("div:lt(2)");
       alert(divs5.length);
       alert(divs5[0].innerHTML);
       alert(divs5[1].innerHTML);
       
    </script>
    </html>

3.5、 Form property selector

 

 

  • Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Form property selector </title>
    </head>
    <body>
       <input type="text" disabled>
       <input type="text" >
       <input type="radio" name="gender" value="men" checked> male
       <input type="radio" name="gender" value="women"> Woman
       <input type="checkbox" name="hobby" value="study" checked> Study
       <input type="checkbox" name="hobby" value="sleep" checked> sleep
       <select>
           <option>--- Please select ---</option>
           <option selected> Undergraduate </option>
           <option> Specialty </option>
       </select>
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
       // 1. Available element selectors $("A:enabled");
       let ins1 = $("input:enabled");
       //alert(ins1.length);

       // 2. Element selector not available $("A:disabled");
       let ins2 = $("input:disabled");
       //alert(ins2.length);

       // 3. The radio / The element whose check box is selected $("A:checked");
       let ins3 = $("input:checked");
       //alert(ins3.length);
       //alert(ins3[0].value);
       //alert(ins3[1].value);
       //alert(ins3[2].value);

       // 4. Drop down the selected element   $("A:selected");
       let select = $("select option:selected");
       alert(select.html());
       
    </script>
    </html>

3.6、 Summary

  • Selectors : Be similar to CSS Selector , Can help us get elements .

  • jQuery The syntax of selectors in :$();

  • Basic selector

    • $(" Name of element ");

    • $("#id The attribute value ");

    • $(".class The attribute value ");

  • Hierarchy selector

    • $("A B");

    • $("A > B");

  • Attribute selector

    • $("A[ Property name ]");

    • $("A[ Property name = Property value ]");

  • Filter selector

    • $("A:even");

    • $("A:odd");

  • Form property selector

    • $("A:disabled");

    • $("A:checked");

    • $("A:selected");

4、JQuery DOM

4.1、 Action text

  • Common methods

     

     

  • Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Action text </title>
    </head>
    <body>
       <div id="div"> I am a div</div>
       <input type="button" id="btn1" value=" obtain div The text of ">
       <input type="button" id="btn2" value=" Set up div The text of ">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //1. html()   Gets the text content of the label
        $("#btn1").click(function(){
            // obtain div Text content of label
            let value = $("#div").html();
            alert(value);
        });

        //2. html(value)   Set the text content of the label , Parsing tags
        $("#btn2").click(function(){
            // Set up div Text content of label
            //$("#div").html(" I really am div");
            $("#div").html("<b> I really am div</b>");
        });
    </script>
    </html>

4.2、 Action object

  • Common methods

     

     

    • append,appendTo,prepend,prependTo It's the operation of father son relationship ( Father adds son , Or is it , Son added to father )

    • before,after It's the operation of brotherhood

  • Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Action object </title>
    </head>
    <body>
       <div id="div"></div>
       <input type="button" id="btn1" value=" Add one span To div"> <br><br><br>

       <input type="button" id="btn2" value=" Add refueling to the bottom of the list of cities "> &nbsp;&nbsp;&nbsp;
       <input type="button" id="btn3" value=" Add refueling to the top of the list of cities "> &nbsp;&nbsp;&nbsp;
       <input type="button" id="btn4" value=" Add Xiongqi below Shanghai "> &nbsp;&nbsp;&nbsp;
       <input type="button" id="btn5" value=" Add Xiongqi to Shanghai "> &nbsp;&nbsp;&nbsp;
       <ul id="city">
           <li id="bj"> Beijing </li>
           <li id="sh"> Shanghai </li>
           <li id="gz"> Guangzhou </li>
           <li id="sz"> Shenzhen </li>
       </ul>
       <ul id="desc">
           <li id="jy"> come on. </li>
           <li id="xq"> Rise up </li>
       </ul>  <br><br><br>
       <input type="button" id="btn6" value=" Delete Xiongqi "> &nbsp;&nbsp;&nbsp;
       <input type="button" id="btn7" value=" Delete all description lists "> &nbsp;&nbsp;&nbsp;
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
       /*
          1. $(" Elements ")   Create the specified element
          2. append(element)   Add as the last child element , Called by the adder object
          3. appendTo(element) Add as the last child element , Called by the addee object
          4. prepend(element) Add as the first child element , Called by the adder object
          5. prependTo(element) Add as the first child element , Called by the addee object
          6. before(element)   Add to the front of the current element , There is a brotherhood between the two , Called by the adder object
          7. after(element)     Add after the current element , There is a brotherhood between the two , Called by the adder object
          8. remove()           Deletes the specified element ( Remove yourself )
          9. empty()           Clears all child elements of the specified element
      */
       
       // Button 1 : Add one span To div
       $("#btn1").click(function(){
           let span = $("<span>span</span>");
           $("#div").append(span);
      });
       

       // Button two : Add refueling to the bottom of the list of cities
       $("#btn2").click(function(){
           //$("#city").append($("#jy"));
           $("#jy").appendTo($("#city"));
      });

       // Button three : Add refueling to the top of the list of cities
       $("#btn3").click(function(){
           //$("#city").prepend($("#jy"));
           $("#jy").prependTo($("#city"));
      });
       

       // Button four : Add Xiongqi below Shanghai
       $("#btn4").click(function(){
           $("#sh").after($("#xq"));
      });
       

       // Button five : Add Xiongqi to Shanghai
       $("#btn5").click(function(){
           $("#sh").before($("#xq"));
      });

       // Button six : Delete Xiongqi
       $("#btn6").click(function(){
           $("#xq").remove();
      });
       

       // Button seven : Delete all description lists
       $("#btn7").click(function(){
           $("#desc").empty();
      });
       
    </script>
    </html>

4.3、 Operation style

  • Common methods

     

     

  • Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Operation style </title>
       <style>
           .cls1{
               background: pink;
               height: 30px;
          }
       </style>
    </head>
    <body>
       <div style="border: 1px solid red;" id="div"> I am a div</div>
       <input type="button" id="btn1" value=" obtain div The style of "> &nbsp;&nbsp;
       <input type="button" id="btn2" value=" Set up div The background color is blue ">&nbsp;&nbsp;
       <br><br><br>
       <input type="button" id="btn3" value=" to div Set up cls1 style "> &nbsp;&nbsp;
       <input type="button" id="btn4" value=" to div Delete cls1 style "> &nbsp;&nbsp;
       <input type="button" id="btn5" value=" to div Set or delete cls1 style "> &nbsp;&nbsp;
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
       // 1.css(name)   obtain css style
       $("#btn1").click(function(){
           alert($("#div").css("border"));
      });

       // 2.css(name,value)   Set up CSS style
       $("#btn2").click(function(){
           $("#div").css("background","blue");
      });

       // 3.addClass(value)   Add a style class name to the specified object
       $("#btn3").click(function(){
           $("#div").addClass("cls1");
      });

       // 4.removeClass(value) Delete the style class name for the specified object
       $("#btn4").click(function(){
           $("#div").removeClass("cls1");
      });

       // 5.toggleClass(value) If there is no style class name , Then add . If there is , Delete
       $("#btn5").click(function(){
           $("#div").toggleClass("cls1");
      });
       
    </script>
    </html>

4.4、 Operation properties

  • Common methods

     

     

    • prop Special for manipulating radio boxes , Check box , The drop-down list

  • Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Operation properties </title>
    </head>
    <body>
       <input type="text" id="username">
       <br>
       <input type="button" id="btn1" value=" Get the id attribute ">  &nbsp;&nbsp;
       <input type="button" id="btn2" value=" Set... To the input box value attribute ">
       <br><br>

       <input type="radio" id="gender1" name="gender"> male
       <input type="radio" id="gender2" name="gender"> Woman
       <br>
       <input type="button" id="btn3" value=" Selected women ">
       <br><br>
       
       <select>
           <option>--- Please select ---</option>
           <option id="bk"> Undergraduate </option>
           <option id="zk"> Specialty </option>
       </select>
       <br>
       <input type="button" id="btn4" value=" Choose a bachelor's degree ">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
       // 1.attr(name,[value])   get / Set the value of the property
       // Button 1 : Get the id attribute
       $("#btn1").click(function(){
           alert($("#username").attr("id"));
      });
       
       // Button two : Set... To the input box value attribute
       $("#btn2").click(function(){
           $("#username").attr("value","hello...");
      });
       

       // 2.prop(name,[value])   get / Set the value of the property (checked,selected)
       // Button three : Selected women
       $("#btn3").click(function(){
           $("#gender2").prop("checked",true);
      });

       // Button four : Choose a bachelor's degree
       $("#btn4").click(function(){
           $("#bk").prop("selected",true);
      });
    </script>
    </html>

4.5、 Summary

  • Action text

    • html() html(…): Gets or sets the text of the label , Parsing tags .

  • Action object

    • $(“ Elements ”): Create the specified element .

    • append(element): Add as the last child element , Called by the adder object .

    • prepend(element): Add as the first child element , Called by the adder object .

    • before(element): Add to the front of the current element , There is a brotherhood between the two , Called by the adder object .

    • after(element): Add after the current element , There is a brotherhood between the two , Called by the adder object .

    • remove(): Deletes the specified element ( Remove yourself ).

  • Operation style

    • addClass(value): Add a style class name to the specified object .

    • removeClass(value): Delete the style class name for the specified object .

  • Operation properties

    • attr(name,[value]): get / Set the value of the property .

    • prop(name,[value]): get / Set the value of the property (checked,selected).

5、 Comprehensive case Check box

5.1、 Case effect

 

 

5.2、 Analyze and implement

Functional analysis

  • Future generations

      1. Bind click events for select all buttons .

      2. Get all item check box elements , To add checked attribute , The property value is true.

  • Totally unselected

      1. Bind click events for the none button .

      2. Get all item check box elements , To add checked attribute , The property value is false.

  • Reverse election

      1. Bind the click event for the deselect button

      2. Get all item check box elements , To add checked attribute , The property value is currently in the opposite state .

Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title> Check box </title>
</head>
<body>
   <table id="tab1" border="1" width="800" align="center">
       <tr>
           <th style="text-align: left">
               <input style="background:lightgreen" id="selectAll" type="button" value=" Future generations ">
               <input style="background:lightgreen" id="selectNone" type="button" value=" Totally unselected ">
               <input style="background:lightgreen" id="reverse" type="button" value=" Reverse election ">
           </th>
   
           <th> classification ID</th>
           <th> Category name </th>
           <th> Classification description </th>
           <th> operation </th>
       </tr>
       <tr>
           <td><input type="checkbox" class="item"></td>
           <td>1</td>
           <td> Mobile phone digital </td>
           <td> Mobile phone digital products </td>
           <td><a href=""> modify </a>|<a href=""> Delete </a></td>
       </tr>
       <tr>
           <td><input type="checkbox" class="item"></td>
           <td>2</td>
           <td> Computer office </td>
           <td> Computer office products </td>
           <td><a href=""> modify </a>|<a href=""> Delete </a></td>
       </tr>
       <tr>
           <td><input type="checkbox" class="item"></td>
           <td>3</td>
           <td> Shoes and bags </td>
           <td> Shoes, boots, bags and so on </td>
           <td><a href=""> modify </a>|<a href=""> Delete </a></td>
       </tr>
       <tr>
           <td><input type="checkbox" class="item"></td>
           <td>4</td>
           <td> Home accessories </td>
           <td> Home decoration products </td>
           <td><a href=""> modify </a>|<a href=""> Delete </a></td>
       </tr>
   </table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
   // Future generations
   //1. Add a click event for the select all button
   $("#selectAll").click(function(){
       //2. Get all the item check box elements , To add checked attribute , Property value true
       $(".item").prop("checked",true);
  });


   // Totally unselected
   //1. Add a click event for the none button
   $("#selectNone").click(function(){
       //2. Get all the item check box elements , To add checked attribute , Property value false
       $(".item").prop("checked",false);
  });


   // Reverse election
   //1. Add a click event for the deselect button
   $("#reverse").click(function(){
       //2. Get all the item check box elements , To add checked attribute , The property value is currently in the opposite state
       let items = $(".item");
       items.each(function(){
           $(this).prop("checked",!$(this).prop("checked"));
      });
  });
</script>
</html>

6、 Comprehensive case Random pictures

6.1、 Case effect

 

 

6.2、 Analysis and implementation of dynamic switching graph

  • Functional analysis

    1. Prepare an array

    2. Define counters

    3. Define timer object

    4. Define the image path variable

    5. Bind the click event for the start button

    6. Set button state

    7. Set the timer , Loop through the picture

    8. Loop to get the image path

    9. Show the current picture on the small picture

    10. Counter auto increment

  • Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Random pictures </title>
    </head>
    <body>
    <!-- Little picture -->
    <div style="border: dotted; height: 50px; width: 50px">
       <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
    </div>
    <!-- Big picture -->
    <div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
       <img src="" id="big" style="width: 400px; height: 400px; display:none;">
    </div>

    <!-- Start and end buttons -->
    <input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value=" Start ">
    <input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value=" stop it ">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
       //1. Prepare an array
       let imgs = [
           "img/01.jpg",
           "img/02.jpg",
           "img/03.jpg",
           "img/04.jpg",
           "img/05.jpg",
           "img/06.jpg",
           "img/07.jpg",
           "img/08.jpg",
           "img/09.jpg",
           "img/10.jpg"];

       //2. Define counter variables
       let count = 0;
       
       //3. Declare timer object
       let time = null;
       
       //4. Declare the image path variable
       let imgSrc = "";
       
       //5. Bind the click event for the start button
       $("#startBtn").click(function(){
           //6. Set button state
           // Disable the start button
           $("#startBtn").prop("disabled",true);
           // Enable the stop button
           $("#stopBtn").prop("disabled",false);
           
           //7. Set the timer , Loop through the picture
           time = setInterval(function(){
               //8. Loop to get the image path
               let index = count % imgs.length; // 0%10=0 1%10=1 2%10=2 .. 9%10=9 10%10=0  
                       
               //9. Show the current picture on the small picture
               imgSrc = imgs[index];
               $("#small").prop("src",imgSrc);
                       
               //10. Counter auto increment
               count++;
          },10);
      });
    </script>
    </html>

6.3、 The analysis and implementation of the large picture display

  • Functional analysis

    1. Bind the click event for the stop button

    2. Cancel timer

    3. Set button state

    4. Show the picture on the big picture

  • Code implementation

    //11. Bind the click event for the stop button 
    $("#stopBtn").click(function(){
       //12. Cancel timer
       clearInterval(time);

       //13. Set button state
       // Enable the start button
       $("#startBtn").prop("disabled",false);
       // Disable the stop button
       $("#stopBtn").prop("disabled",true);

       //14. Show the picture on the big picture
       $("#big").prop("src",imgSrc);
       $("#big").prop("style","width: 400px; height: 400px;");
    });
版权声明
本文为[To catch up with the stars]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222233548300b.html

  1. An inexperienced front-end engineer, what are the common problems when writing CSS?
  2. HttpServletRequest get URL (parameter, path, port number, protocol, etc.) details
  3. Springboot starts http2
  4. Enabling http2.0 in spring boot
  5. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  6. Using JavaScript in Safari browser history.back () the page will not refresh after returning to the previous page
  7. vue.js Error in win10 NPM install
  8. In less than two months, musk made more than $1 billion, more than Tesla's annual profit
  9. Springboot starts http2
  10. Vue event bus
  11. JQuery easy UI tutorial: custom data grid Pagination
  12. Using okhttp and okhttpgo to obtain onenet cloud platform data
  13. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  14. HTTP 1. X learning notes: an authoritative guide to Web Performance
  15. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  16. HTTP 1. X learning notes: an authoritative guide to Web Performance
  17. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  18. Event bubble and capture in JavaScript
  19. The root element is missing solution
  20. Event bubble and capture in JavaScript
  21. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  22. Javascript数据类型
  23. HTTP interface debugging tool! 48000 star HTTP command line client!
  24. Parameter encryption of front end URL link band
  25. HTTP interface debugging tool! 48000 star HTTP command line client!
  26. Three front end frameworks: data binding and data flow
  27. Reading Axios source code (1) -- exploring the realization of basic ability
  28. Event bubble and capture in JavaScript
  29. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  30. R & D solution e-Car front end monitoring system
  31. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  32. R & D solution e-Car front end monitoring system
  33. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  34. 解决ajax跨域问题【5种解决方案】
  35. Top ten classic sorting of JavaScript
  36. HTTP 1. X learning notes: an authoritative guide to Web Performance
  37. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  38. My http / 1.1 is so slow!
  39. Why Vue uses asynchronous rendering
  40. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  41. The tapable instance object hook of webpack4. X core tool library
  42. The tapable instance object hook of webpack4. X core tool library
  43. Using libcurl for HTTP communication in C + +
  44. Using libcurl for HTTP communication in C + +
  45. Using CSS variable in Vue
  46. Deeply understand the update of state and props in react
  47. No matter how fast the Internet is, it's useless! In addition to Baidu disk, there is this website slow to let you eat shriveled
  48. Baidu share does not support the solution of HTTPS
  49. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  50. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  51. Vue cli creates vue3 project
  52. Nginx reverse proxy for windows authentication using NTLM
  53. Rust tutorial: introduction to rust for JavaScript developers
  54. Deploying personal blog to Tencent cloud with serverless framework
  55. R & D solution e-Car front end monitoring system
  56. JavaScript advanced learning
  57. Spend 1 minute to master these 5 ppt tips, courseware making less detours
  58. Vue: vuex persistent state
  59. React native gets the current network state of the device Netinfo
  60. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%