1.JQuery animation

Three ways to show and hide elements:
1. 默认Show and hide the way

show ([speed], [easing], [fn]): Show
hide ([speed], [easing], [fn]): Hide
toggle ([speed], [easing], [fn]): switch

2. 滑动Show and hide the way

slideDown([speed],[easing],[fn])
slideUp([speed],[easing],[fn])
slideToggle([speed],[easing],[fn])

3. 淡入淡出show and hide the way

fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed],[easing],[fn])

parameter:

speed: speed of the animation. Three predefined value (slow, normal, and fast), or represents a long (in milliseconds) animation

easing: represents the effect of the switching, the default "swing", available parameters "linear"

swing: animation effects to perform slow, middle fast, and finally slow
linear: Animation uniform implementation of the results

fn: complete animation function is executed, executed once for each element

2.JQuery traversal

2.1.JS traversal way

for (initialization value, the loop end condition, the step size)

2.2.JQuery traversal way

Object JQuery .each (callback)
$.each(Object,[callback])
for ... of: 3.0 or later provided

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历</title>
    <script src = "js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //1.获取所有ul下的li
            let city = $("#city li");

            //2.遍历li

            //2.1.JS的遍历方式
            //for(初始化值,循环结束条件,步长)
            // for (var i = 0; i < city.length; i++) {
            //     //获取内容
            //     alert(i + ":" + city[i].innerHTML);
            // }

            //2.2.JQuery的遍历方式
            // //* JQuery对象.each(callback)
            // city.each(function (index,element) {
            //     //1.获取li第一种方法，但是无法获取索引
            //     //alert(this.innerHTML);
            //
            //     //2.获取li第二种方法
            //     //在回调函数中定义参数
            //     //index(索引) element(元素对象)
            //     alert(index + ":" + element.innerHTML);
            // })
            
            // //* $.each(Object,[callback])
            // $.each(city,function () {
            //     alert($(this).html());
            // })

            //* for..of:
            for(li of city){
                alert($(li).html());
            }

        })
    </script>

</head>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
</body>
</html>

3.JQuery event binding

1.JQuery standard way of binding

. JQuery object event method (callback function);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery绑定事件</title>
    <script src = "js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        $(function () {
            // //获取name对象，绑定click对象
            // $("#name").click(function () {
            //     alert("我被点击了")
            // });

            // //给name绑定鼠标移动到元素之上的事件，绑定鼠标移出事件
            // $("#name").mouseover(function () {
            //     alert("鼠标来了")
            // });
            // $("#name").mouseout(function () {
            //     alert("鼠标走了")
            // });

            //简化操作，链式编程
            $("#name").mouseover(function () {
                alert("鼠标来了")
            }).mouseout(function () {
               alert("鼠标走了")
            });
        });
    </script>

</head>
<body>
    <input id="name" type="text" value="绑定事件">
</body>
</html>

2.on binding events / off unbind

JQuery objects .on ( "Event Name", callback)
JQuery objects .off ( "Event Name")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery绑定事件</title>
    <script src = "js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //使用on绑定单击事件
            $("#btn").on("click",function () {
                alert("我被点击了");
            })

            //使用off解除btn1按钮的单击事件
            $("#btn1").click(function () {
                //解除btn按钮的单击事件
                $("#btn").off("click")//将组件上的所有事件全部解绑
            });
        })
    </script>

</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn1" type="button" value="使用off解绑点击事件">
</body>
</html>

3. Event switch: toggle

JQuery objects .toggle (fn1, fn2 ...): When you click JQuery corresponding component object, performs fn1, the second click will perform fn2 ...

！！！注意: After the 1.9 version toggle event binding function removed, but the animation can be used if you want to use, then this needs to be introduced Migrate plug-recovery function

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery绑定事件</title>
    <script src = "js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //获取按钮，调用toggle方法
            $("#btn").toggle(function () {
                //改变div背景色为绿色
                $("#mydiv").css("backgroundColor","green");
            },function () {
                //改变背景色为粉色
                $("#mydiv").css("backgroundColor","pink");
            });
        });
    </script>

</head>
<body>
<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;hight:300px;background: pink">
    点击按钮变成绿色，再次点击变粉色
</div>
</body>
</html>

Advanced front-end --JQuery

1.JQuery animation

2.JQuery traversal

2.1.JS traversal way

2.2.JQuery traversal way

3.JQuery event binding

Guess you like