current position:Home>`JQuery ` advanced

`JQuery ` advanced

2022-04-29 14:31:21Yusheng 168

JQuery senior

Animation

Three ways to show and hide elements

The default way to show and hide
show(spedd,easing,fnu); Show 

hide(spedd,easing,fun); hide 

toggle(spedd,easing,fun); Switch 
Slide show and hide
slideDown([speed],[easing],[fn]); The slide show  

slideUp([speed,[easing],[fn]]); Hide display 

slideToggle([speed],[easing],[fn]); Toggle display 
Fade in and out show and hide
fadeIn([speed],[easing],[fn]); Fade out 

fadeOut([speed],[easing],[fn]); Fade in and hide 

fadeToggle([speed,[easing],[fn]]); Toggle display 

The parameters of the above nine methods are the same

speed: Animation speed , Three predefined values ("slow","normal", "fast") Or use the millisecond value to represent the animation ( Such as :1000)【 That is, the first parameter can pass in a predetermined value or a millisecond value 】

easing: Used to specify the toggle effect , The default is :`swing`, The available parameters `linear`,`swing` The effect of animation execution is slow, fast and slow ,`linear` uniform 

fn: Functions executed at the completion of animation , Only once 

The second parameter and the third parameter can be omitted

Case study :

 Slide show hide , Fade in, fade out, show and hide are the same as the default 

<script> //  hide  function hideFn() {
       $("#showDiv").hide("slow","swing",function () {
      //  These three parameters , The last two can be omitted , The first one can pass in the millisecond value  alert(" hide "); }); } //  Show  function showFn() {
       $("#showDiv").show(5000,"swing");// swing Is the default value  } //  Switch  function toggleFn() {
       $("#showDiv").toggle(3000);// Indicates that the display becomes hidden , Hide changes to show  } </script>

Traverse

Javascript Way to traverse the

for( initialize value ; The loop ends ; step )

$(function () {
            // Javascript The way 
           var $citys = $("#city>li");
            for (let i = 0; i < $citys.length; i++) {
                //  When it was Shanghai , Jump cycle 
                if (" Shanghai "==element.innerHTML){
                    break;
                }
                //  When it was Shanghai , Jump to this cycle 
                if (" Shanghai "==element.innerHTML){
                    continue;
                }            
                var innerHTML = $citys[i].innerHTML;
                alert(i+":"+innerHTML);
            }
        });
Jquery Way to traverse the
Mode one :each
 Mode one :
Jquery object .each(function (){});
 grammar :
Jquery object .each(function (){});
 or 
jquery object .each(function(index,element){});
	index: Is the index of the element in the collection  
	element: Is every element in the set 
	this: Every element object in the collection 
	
 Callback function return value : because `each` Out of commission `break` and `continue` To jump the loop and jump this loop , Only use `return false or true` Jump to the loop and jump to this loop 
	true: If at present function return false, End cycle `(break)`
	false: If at present function return true, Then end this cycle , So let's move on to the next cycle `(continue)`

because each Out of commission break and continue To jump the loop and jump this loop , Only use return false or true Jump to the loop and jump to this loop , But in Javascript Can be used in break and continue The way

// Jquery In the way each Method 
            // obtain city Medium li object ,
            var $city = $("#city>li");
            $city.each(function () {
    
                //  Acquired this It's every one li, Attention is obtained in this way this It's a Javascript object 
                alert(this.innerHTML);
                //  Turn it into Jquery object 
                alert($(this).html());
            });
            // Because in the above way , Cannot get index , Pass in the index and element in the callback function 
            $("#city>li").each(function (index,element) {
    
                //  What we get is a Javascript object 
                alert(index+" : "+element.innerHTML);
                //  Turn it into Jquery object 
                alert(index+" : "+$(element).html());
            });

            //  because each Method cannot be used `break` and `continue` Jump cycle and jump this cycle 
            $("#city>li").each(function (index,element) {
    
                //  When it was Shanghai , Jump cycle 
                if (" Shanghai "==element.innerHTML){
    
                    return false;
                }
                //  When it was Shanghai , Jump to this cycle 
                if (" Shanghai "==element.innerHTML){
    
                    return true;
                }
                alert(index+" : "+element.innerHTML);
            })
Mode two :$.each(object,function(){})
//  Mode two :`$.each(object,function(){})`, Use in a similar way 
            $.each($("#city>li"),function () {
    
                alert(this.innerHTML);
            });
Mode three :for( type of aggregate ){}
//  Mode three :for( type  of  aggregate ): And enhanced for equally , It must be Jquery stay 3.0 Only after that can we use 
            for(li of $("#city>li")){
    
                alert(li.innerHTML);
            }

Traverse the case :

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript"> $(function () {
       // Javascript The way  var $citys = $("#city>li"); for (let i = 0; i < $citys.length; i++) {
       var innerHTML = $citys[i].innerHTML; alert(i+":"+innerHTML); } // Jquery In the way each Method  //  obtain city Medium li object , var $city = $("#city>li"); $city.each(function () {
       //  Acquired this It's every one li, Attention is obtained in this way this It's a Javascript object  alert(this.innerHTML); //  Turn it into Jquery object  alert($(this).html()); }); // Because in the above way , Cannot get index , Pass in the index and element in the callback function  $("#city>li").each(function (index,element) {
       //  What we get is a Javascript object  alert(index+" : "+element.innerHTML); //  Turn it into Jquery object  alert(index+" : "+$(element).html()); }); //  because each Method cannot be used `break` and `continue` Jump cycle and jump this cycle  $("#city>li").each(function (index,element) {
       //  When it was Shanghai , Jump cycle  if (" Shanghai "==element.innerHTML){
       return false; } //  When it was Shanghai , Jump to this cycle  if (" Shanghai "==element.innerHTML){
       return true; } alert(index+" : "+element.innerHTML); }) //  Mode two :`$.each(object,function(){})`, Use in a similar way  $.each($("#city>li"),function () {
       alert(this.innerHTML); }); //  Mode three :for( type  of  aggregate ): And enhanced for equally , It must be Jquery stay 3.0 Only after that can we use  for(li of $("#city>li")){
       alert(li.innerHTML); } }); </script>
</head>
<body>
<ul id="city">
    <li> Beijing </li>
    <li> Shanghai </li>
    <li> tianjin </li>
    <li> Chongqing </li>
</ul>
</body>

Event binding

Jquery Standard binding method
<script type="text/javascript"> $(function () {
       $("#name").click(function () {
       alert(" The binding event "); }); // Jquery Binding multiple events is supported in  $("#name").mouseover(function () {
       alert(" Here comes the mouse ") }) $("#name").mouseout(function () {
       alert(" The mouse went ") }) }) </script>
on The binding event /off Unbind event

The binding event

//  Use `on` The binding event 
$("#btn").on("click",function () {
      alert(" I was ordered ");
});

Unbind event

$("#btn").off("click");// Pass in the name of the release event 
 Note that : When the event name is not passed in , All events on the component will be released by default  

Case study :

<script type="text/javascript"> $(function () {
       //  Use `on` The binding event  $("#btn").on("click",function () {
       alert(" I was ordered "); }); //  Use off Lift the incident  $("#btn2").click(function () {
       $("#btn").off("click");// Pass in the name of the release event  }); }) </script>
</head>
<body>
<input id="btn" type="button" value=" Use on Bind click event ">
<input id="btn2" type="button" value=" Use off Unbind click event ">
</body>
Event handover toggle
Jquery object .toggle(fun1,fun2,...)

When you click on Jquery Object after the corresponding component , Will execute fun1, The second click will execute fun2

Be careful :1.9 edition .toggle() Methods to remove ,jQuery Migrate( transfer ) Plug in can restore this function .

<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery-migrate-1.0.0.js"></script>
    <script type="text/javascript"> //  Due to the use Jquery yes 3.0 Version of , Switching is not supported toggle 了 , Note that plug-ins must be introduced  $(function () {
       $("#btn").toggle(function () {
       $("#myDiv").css("backgroundColor","green"); },function () {
       $("#myDiv").css("backgroundColor","red"); }); }) </script>
</head>
<body>

    <input id="btn" type="button" value=" Event handover ">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
         Click the button to turn green , Click red again 
    </div>
</body>
</html>

plug-in unit : enhance JQuery The function of

Mode one :$.fn.extend({ Method })

Enhance through Jquery Get the object function $("#id")【 What is enhanced is the object , Is to add labels , Need to get the label object 】

Case study :

<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript"> $.fn.extend({
       check:function () {
       //  Choose  this.prop("checked",true); }, uncheck:function () {
       //  No choice  this.prop("checked",false); } }); $(function () {
       $("#btn-check").click(function () {
       $("input[type=checkbox]").check(); }); $("#btn-uncheck").click(function () {
       $("input[type=checkbox]").uncheck(); }); }) </script>
</head>
<body>
<input id="btn-check" type="button" value=" Click to select the check box " onclick="checkFn()">
<input id="btn-uncheck" type="button" value=" Click the uncheck box to select " onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football"> football 
<input type="checkbox" value="basketball"> Basketball 
<input type="checkbox" value="volleyball"> Volleyball 

</body>
</html>
Mode two :$.extend({ Method })

enhance Jquery The function of the object itself :$ Is the global function , direct $ call

<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript"> // Extend the global method 2 A way , Expand min Method : seek 2 The minimum of values ; Expand max Method : seek 2 Maximum value of individual value  $.extend({
       max:function (a,b) {
       return a>=b?a:b; }, min:function (a,b) {
       return a<=b?a:b; } }); var max = $.max(4,3); alert(max); var min = $.min(4,5); alert(min); </script>

copyright notice
author[Yusheng 168],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291258262876.html

Random recommended