Animation and traversal of JQuery learning notes

Summary

(1) animation
(two) traversal

(1) animation

  • Default show and hide

      1. show([speed,[easing],[fn]])
      	1. parameters:
      		1. speed: the speed of animation. Three predefined values ("slow","normal", "fast") or millisecond values representing the animation duration (such as: 1000)
      		2. easing: used to specify the switching effect. The default value is "swing". The available parameter is "linear"
      			  swing: the effect of animation execution is slow first, fast in the middle, and slow finally
      			  linear: the speed of animation execution is uniform
      		3. fn: function executed at the completion of the animation, once per element
    
      2. hide([speed,[easing],[fn]])
      3. toggle([speed],[easing],[fn])
    

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        //Hidden div
        function hideFn() {
            // $("#showDiv").hide("slow", "swing", function () {
            //     alert("hidden.. "";
            // });
            $("#showDiv").hide("slow", "swing");
        }

        //Display div
        // function showFn() {
        //     $("#showDiv").show("slow", "swing", function () {
        //         alert("shows.. "";
        //     });
        function showFn() {
            $("#showDiv").show("slow", "swing");
        }

        //Switch div
        function toggleFn() {
            $("#showDiv").toggle("slow", "swing");
        }
    </script>

</head>
<body>
<input type="button" value="Click button to hide div" onclick="hideFn()">
<input type="button" value="Click the button to display div" onclick="showFn()">
<input type="button" value="Click button to switch div Show and hide" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div Show and hide
</div>
</body>
</html>
  • Slide show and hide

      1. slideDown([speed],[easing],[fn])
      2. slideUp([speed,[easing],[fn]])
      3. slideToggle([speed],[easing],[fn])
    

Code:

    <script>
        //Hidden div
        function hideFn() {
            $("#showDiv").slideDown("slow");
        }

        //Display div
        function showFn() {
            $("#showDiv").slideUp("slow");
        }

        //Switch div
        function toggleFn() {
            $("#showDiv").slideToggle("slow");
        }
    </script>
  • Fade in / out show and hide

      1. fadeIn([speed],[easing],[fn])
      2. fadeOut([speed],[easing],[fn])
      3. fadeToggle([speed,[easing],[fn]])
    

Code:

    <script>
        //Hidden div
        function hideFn() {
            $("#showDiv").fadeOut("slow");
        }

        //Display div
        function showFn() {
            $("#showDiv").fadeIn("slow");
        }

        //Switch div
        function toggleFn() {
            $("#showDiv").fadeToggle("slow");
        }
    </script>

(two) traversal

  • js traversal method: for (initialization value; loop end condition; step size)

Code:

<!DOCTYPE html>
<html>
<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 () {
            //1. Get all li under ul
            var citys = $("#city li");
            //2. Traverse citys
            for (var i = 0; i < citys.length; i++) {
                if ("Shanghai" == citys[i].innerHTML) {
                    // break; / / end the loop
                    continue;  //End this cycle and continue the next cycle
                }
                //Get content
                alert(i + ": " + citys[i].innerHTML);
            }
        });

    </script>
</head>
<body>
<ul id="city">
    <li>Beijing</li>
    <li>Shanghai</li>
    <li>Tianjin</li>
    <li>Chongqing</li>
</ul>
</body>
</html>
  • Traversal mode of jq

      1. jq object. each(callback)
      	1. syntax:
      		jquery object. each(function(index,element) {});
      			  Index: the index of an element in a collection
      			  Element: every element object in the collection
    
      			  this: every element object in the collection
      	2. Return value of callback function:
      		  true: if the current function returns false, it ends the loop (break).
      		  false: if the current function returns true, the current cycle will be ended and the next cycle will continue
      2. $.each(object, [callback])
      3. For.. of: the methods provided after jQuery version 3.0
      	 For (element object of container object)
    

Code (jq object. each method):

<!DOCTYPE html>
<html>
<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 () {
            //1. Get all li under ul
            var citys = $("#city li");
            //2. Traverse citys
            citys.each(function (index, element) {
				
                if ("Shanghai" == $(element).html()) {
                    return false;
                    //If the current function returns false, the loop ends (break)
                    //If it returns true, the current cycle will be ended and the next cycle will continue
                }

                //3.1 the first way to get li object this
                // alert(this.innerHTML);
                //3.2 the second way to get the li object is to define the parameter index element in the callback function
                // alert(index + ": " + element.innerHTML);
                //3.3 get li object the third way to convert js object to jq
                alert(index + ": " + $(element).html());
            });
        });

    </script>
</head>
<body>
<ul id="city">
    <li>Beijing</li>
    <li>Shanghai</li>
    <li>Tianjin</li>
    <li>Chongqing</li>
</ul>
</body>
</html>

Code ($. each method):

    <script type="text/javascript">
        $(function () {
            //1. Get all li under ul
            var citys = $("#city li");
            //2. Traverse citys
            $.each(citys, function () {
                alert($(this).html());
            });
        });
    </script>

Code (for of method):

    <script type="text/javascript">
        $(function () {
            //1. Get all li under ul
            var citys = $("#city li");
            //2. Traverse citys
            for (li of citys) {
                alert($(li).html());
            }
        });
    </script>
Published 152 original articles, won praise 4, visited 3269
Private letter follow

Tags: Javascript JQuery

Posted on Sat, 14 Mar 2020 23:31:39 -0700 by jossejf