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;");
    });

JQuery:JQuery Basic grammar ,JQuery Selectors ,JQuery DOM, Comprehensive case Check box , Comprehensive case More articles about random pictures

  1. jQuery Of prop and attr The difference between , And judge whether the check box is selected

    jQuery Of prop and attr The difference between about HTML The element itself has inherent attributes , When dealing with , Use prop Method . about HTML The element is our own custom DOM attribute , When dealing with , Use attr Method . The parameters are different ,att ...

  2. JQuery Mobile - Modifying the check box's selected state is invalid !

    Tonight? , Writing JQuery Mobile In the process , You need to control the check box in the code , Very simple code , It was soon finished ! It's silly to wait for the test program , The page doesn't follow the code I wrote anyway ! What's the problem ? I wrote it ...

  3. 【jQuery】 Select all of the check boxes 、 Reverse election , Infer which check boxes are selected

    This article and <[JavaScript] Select all of the check boxes . Reverse election . Infer which check boxes are selected >( Click to open the link ) For sisters , Put the contents back to jQuery In the framework , Do the same, such as the following effect : The layout is the same , ...

  4. jquery Check all / Switch none Ordinary DOM Elements Click to select / Uncheck switch

    1. The check boxes to be selected are set uniformly name use prop() prop() Method to set or return the properties and values of the selected element . $("#selectAll").click(function(){ $(&q ...

  5. jQuery practice | Check box and edit mode

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. jquery Operation menu , Check box , Drop down list implementation code

    1. Check box select all : In fact, after all, it's right Jquery The use of selectors , Check me out. Jquery Selectors  html Code : Copy the code as follows : <form>  Your favorite sport is : <input type ...

  7. jquery Gets the selected items of a set of elements - function 、jquery Get the value of the check box 、jquery Get the radio button value

    When you submit a form , If it's still in use form Submit , The user experience is terrible , So we use ajax Submit . You need to get the value of each form input element , When you get it, it's like textboxes ,Jquery Provides .val() Method , It's easy to get , ...

  8. jQuery Simple use of action check box

    In order to realize a small function in the development , It's the interaction of checkboxes , Here's the picture : It's setting permissions through the check box , Permissions are hierarchical , This is a web Application of management system , An administrator has three permissions , Permissions are hierarchical , Delete and edit permissions are equivalent ...

  9. jquery Use attr() Why the function is not valid for the check box ,javascript Those things &mdash;&mdash;properties and attributes

    The check box is one of the web page tags often used in website development , Common operations on the check box on the page include taking values and modifying the status of the check box . stay jquery in , The value function of the common operation tag is attr, However, when operating the check box , The usual method is pro ...

  10. jquery Finish highlighting table rows with check boxes

    jquery Finish highlighting table rows with check boxes adopt jquery It's easy to use technology to manipulate tables , adopt jquery The grammar of , It's easy to change the color of the table , It's just like , In practical application, there may be a check box in the table , deleted ...

Random recommendation

  1. AngularJs adopt ocLazyLoad Implementation dynamics ( lazy ) Load modules and dependencies

    Okay , Let's get to the point , stay AngularJs Implementation dynamics ( lazy ) Loading mainly depends on 3 Owners JS Files and a dependent script . The implementation process is mainly reference 3 Major JS file <script src="angula ...

  2. Apache To configure HTTPS The agreement carries SSL To configure

    Set up Apache + SSL Before , Need to do :     install Apache, Please see the : Windows In the environment Apache Installation and configuration of virtual directory , Download and install Apache Please download the ssl Version of Apache ...

  3. Test4J And Jtester Comparison of common annotations for unit testing

    package com.alibaba.ceres.catalog.biz.product.impl; import org.junit.After; import org.junit.Before; ...

  4. BZOJ 3398 Cows and cows

    dp. #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> ...

  5. Redis Local environment construction

    Windows Environment construction 1. Set up hosts set duapphosts=127.0.0.1 sqld.duapp.com set redisduapphosts=127.0.0.1 redis ...

  6. [ZT]DAS\NAS\IP SAN\FC SAN The difference between

    DAS: The server directly hangs the storage device , The most economical structure . NAS: Storage devices directly attached to the network , In fact, it is a utilization of Ethernet NFS.CIFS Wait for the file sharing server of the network file system . SAN It's the disk on the network ,NAS It's a ...

  7. Electronic label (RFID) Antenna printing technology

    Electronic tags are radio frequency identification (RFID) The common name of ,RFID Radio frequency identification technology (RadioFrequencyIdentification) abbreviation , Radio frequency identification (RFID) technology is a technology that uses radio frequency signals through spatial coupling ( An alternating magnetic or electromagnetic field ) Achieve nothing ...

  8. Explore ListBox The potential of ( 3、 ... and ): Show prompt (Tips)

    ListBox Show prompt (Tips) Listbox Content is too long to exceed Listbox The part of the width will not be displayed , One solution is to let Listbox Create a horizontal scroll bar , Scroll through the content ( See above < Explore ListBox Of ...

  9. UIViewContentMode Picture and text explanation

    stay iOS In the application development, we often have to do some research on the view contentMode Property to set , Especially in the use of UIImageView There is a high probability of setting this property when viewing . We know contentMode The type is UIViewContentM ...

  10. Velocity(7)——velocity Advanced usage

    1. Intercept some fields substring 1 Original string :$!ag.tagValue, Maybe for a long time , When the front-end page is displayed, the string needs to be intercepted . 2 #set($str=$!ag.tagValue) 3 4 #if($str ...