jQuery的几个功能实现

最新推荐文章于 2023-03-28 21:55:36 发布

黑马程序员xlj

最新推荐文章于 2023-03-28 21:55:36 发布

阅读量595

点赞数 1

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_42236548/article/details/113832544

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、jQuery的几个功能实现

1.tab切换

<html>
  <head>
    <title>逗你玩啊</title>
    <style>
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .clearfix {
        *zoom: 1;
        *clear: both;
      }
      .clearfix:before,
      .clearfix:after {
        display: table;
        clear: both;
        content: "";
      }
      #cnt {
        width: 402px;
        height: 200px;
        margin: 100px auto;
        border: 1px solid #000;
      }
      #nav li {
        float: left;
        width: 25%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        border-bottom: 1px solid #000;
        background-color: #000;
      }
      #nav .item-active {
        color: #000;
        background-color: #fff;
      }
      #detail {
        padding-top: 50px;
        text-align: center;
      }
      #detail li {
        display: none;
      }
      #detail .hide {
        display: none;
      }
      #detail .show {
        display: block;
      }
    </style>
  </head>

  <body>
    <div id="cnt">
      <ul id="nav" class="clearfix">
        <li class="item-active">哈哈</li>
        <li>嘿嘿</li>
        <li>嘻嘻</li>
        <li>呵呵</li>
      </ul>

      <ul id="detail">
        <li class="show">哈哈哈哈哈哈哈哈(*^▽^*)</li>
        <li>嘿嘿嘿嘿嘿嘿嘿嘿^_^</li>
        <li>嘻嘻嘻嘻嘻嘻嘻嘻(#^.^#)</li>
        <li>呵呵呵呵呵呵呵呵o(*￣︶￣*)o</li>
      </ul>
    </div>

    <script>
      var nav = document.querySelector("#nav");
      var navItems = document.querySelectorAll("#nav>li");
      var detail = document.querySelectorAll("#detail li");

      var navIndex = 0;
      nav.addEventListener("click", function (e) {
        if (e.target.tagName.toUpperCase() === "LI") {
          e.currentTarget.children[navIndex].className = "";
          detail[navIndex].className = "hide";
          navIndex = [].indexOf.call(e.currentTarget.children, e.target);
          e.target.className = "item-active";
          detail[navIndex].className = "show";
        }
      });
    </script>
  </body>
</html>

在这里插入图片描述

2.点击按钮查询账单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单列表</title>
    <style>
        ul li {
            list-style: none;
        }

        #orderList {
            width: 315px;
            display: grid;
            grid-template-columns: repeat(auto-fill, 312px);
            grid-row-gap: 20px;
        }

        #orderList li {
            height: 145px;
            padding: 5px;
            background-color: #fff;
            box-shadow: 4px 5px 10px 0 rgba(198, 201, 203, .35);
        }

        .red {
            color: red;
        }

        .orange {
            color: orange;
        }

        .green {
            color: green;
        }
    </style>
</head>

<body>
<button>获取订单</button>
<ul id="orderList"></ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="handlebars.min-v4.7.6.js"></script>
<script type="text/x-handlebars-template" id="getOrderList">
    {{#each this}}
            <li>
                <p data-number="{{orderNo}}">订单编号：{{orderNo}}</p>
                <p class="{{payColor orderStatus}}" data-status="{{orderStatus}}">支付状态：{{judgeState orderStatus}}</p>
                <p>产品名称：{{productName}}</p>
            </li>
    {{/each}}
</script>
<script>
    /**
     *
     */
    let pay = {
        paying: {payStatus: '支付中', payColor: 'red'},
        waitPay: {payStatus: '待支付', payColor: 'orange'},
        payed: {payStatus: '已支付', payColor: 'green'}
    }

    Handlebars.registerHelper('judgeState', function (val, options) {
        return pay[val].payStatus;
    })
    Handlebars.registerHelper('payColor', function (val) {
        console.log(val);
        return pay[val].payColor;
    })

    /**
     * 判断传入的对象是否为空
     * @param {Object} obj 传入获取的数据
     * @return {boolean} 传入对象为空返回true，非空返回false
     *  */
    function isEmpty(obj) {
        if (obj instanceof Object) {
            return $.isEmptyObject(obj);
        }
    }

    getOrderList()

    /**
     * 获取商品列表数据
     * */
    function getOrderList() {
        let btn = $('button');
        btn.on('click', () => {
            btn.prop('disabled', true);
            $('#orderList').empty();
            $.ajax({
                url: 'orderData.json',
                success: function (data) {
                    if (isEmpty(data)) {
                        btn.prop('disabled', false);
                        return;
                    }
                    let orderTemplate = Handlebars.compile($('#getOrderList').html());
                    $('#orderList').append(orderTemplate(data))
                    btn.prop('disabled', false);
                },
                error: function () {
                    alert("数据加载失败！");
                    btn.prop('disabled', false);
                }
            })

        })
    }

    /**
     *点击订单弹出 订单号；若订单状态已支付 不弹出订单号
     */
    $('#orderList').on('click', 'li', function () {
        let exclude = $(this).children('p[data-status]').attr('data-status');
        if (exclude !== 'payed') {
            //console.log($(this).children('p:first-child').text().toString().split('：')[1])
            alert($(this).children('p[data-number]').attr('data-number'));
        }
    })
</script>
</body>

</html>

在这里插入图片描述

3.电影排行榜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 450px;
            margin: 50px auto;
            border: 1px solid #000;
        }
        .box>h1{
            font-size: 20px;
            line-height: 35px;
            color: deeppink;
            padding-left: 10px;
            border-bottom: 1px dashed #ccc;
        }
        ul>li{
            list-style: none;
            padding: 5px 10px;
            border: 1px dashed #ccc;
        }
        ul>li:nth-child(-n+3) span{
            background: deeppink;
        }
        ul>li>span{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #ccc;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
        }
        .content{
            overflow: hidden;
            margin-top: 5px;
            display: none;
        }
        .content>img{
            width: 80px;
            height: 120px;
            float: left;
        }
        .content>p{
            width: 180px;
            height: 120px;
            float: right;
            font-size: 12px;
            line-height: 20px;
        }
        .current .content{
            display: block;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //jq代码

            $("li").hover(function () {
                $(this).addClass("current");
            },function () {
                $(this).removeClass("current");
            });

        });
    </script>
</head>
<body>
<div class="box">
    <h1>电影排行榜</h1>
    <ul>
        <li><span>1</span>电影名称
            <div class="content">
                <img src="images/zl.jpg" alt="">
                <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
            </div>
        </li>
        <li><span>2</span>电影名称
            <div class="content">
                <img src="images/zl.jpg" alt="">
                <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
            </div>
        </li>
        <li><span>3</span>电影名称
            <div class="content">
                <img src="images/zl.jpg" alt="">
                <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
            </div>
        </li>
        <li><span>4</span>电影名称
            <div class="content">
                <img src="images/zl.jpg" alt="">
                <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
            </div>
        </li>
        <li><span>5</span>电影名称
            <div class="content">
                <img src="images/zl.jpg" alt="">
                <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
            </div>
        </li>
        <li><span>6</span>电影名称
            <div class="content">
                <img src="images/zl.jpg" alt="">
                <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

4.弹窗广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹窗广告</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .ad{
            position: fixed;
            right: 0;
            bottom: 0;
            display: none;
        }
        .ad>span{
            display: inline-block;
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
          //jq代码
            $("span").click(function () {
                $(".ad").remove();
            });
            $(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);
        });
    </script>
</head>
<body>
<div class="ad">
    <img src="img/ad-pic.png" alt="">
    <span></span>
</div>
</body>
</html>

在这里插入图片描述

5.对联广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            float: left;
            position: fixed;
            left: 0;
            top: 200px;
        }
        .right{
            float: right;
            position: fixed;
            right: 0;
            top: 200px;
        }
        /*img{*/
        /*    display: none;*/
        /*}*/
    </style>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
          //jq代码
            $(window).scroll(function () {
                var offset  = $("html,body").scrollTop();
                if(offset>=500){
                    $("img").show(1000);
                }else{
                    $("img").hide(1000);
                }
            });
        });
    </script>
</head>
<body>
<body>
<img src="img/left_ad.png" class="left">
<img src="img/right_ad.png" class="right">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</body>
</html>

在这里插入图片描述

6.下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            background: red;
            display: none;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                $("div").fadeIn(1000, function () {
                    alert("淡入完毕");
                });
            });
            $("button").eq(1).click(function () {
                $("div").fadeOut(1000, function () {
                    alert("淡出完毕");
                });
            });
            $("button").eq(2).click(function () {
                $("div").fadeToggle(1000, function () {
                    alert("切换完毕");
                });
            });
            $("button").eq(3).click(function () {
                $("div").fadeTo(1000, 0.2, function () {
                    alert("切换完毕");
                });
            });
        });
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>淡入到</button>
<div></div>
</body>
</html>

在这里插入图片描述

二、知识整理

1.事件解除

<script src="js/jquery-1.10.1.js"></script>
    <script>
            $(function () {
                function test1() {
                    alert("hello lnj");
                }
                function test2() {
                    alert("hello 123");
                }
                // 编写jQuery相关代码
                $("button").click(test1);
                $("button").click(test2);
    当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
                $("button").mouseleave(function () {
                    alert("hello mouseleave");
                });
                $("button").mouseenter(function () {
                    alert("hello mouseenter");
                });
                //jq代码
                // off方法如果不传递参数, 会移除所有的事件
                // $("button").off();
                // off方法如果传递一个参数, 会移除所有指定类型的事件
                // $("button").off("click");
                // off方法如果传递两个参数, 会移除所有指定类型的指定事件
                $("button").off("click", test1);
            });
    </script>

2.文本值操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
<!--    <script src="js/jquery-3.5.1.js"></script>-->

    <script>
        $(function () {
            /*
        1.html([val|fn])
        和原生JS中的innerHTML一模一样
        2.text([val|fn])
        和原生JS中的innerText一模一样
        3.val([val|fn|arr])
        */
            alert(1)
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function () {
                $("div").html("<p>我是段落<span>我是span</span></p>");
            }
            btns[1].onclick = function () {
                console.log($("div").html());
            }
            btns[2].onclick = function () {
                $("div").text("<p>我是段落<span>我是span</span></p>");
            }
            btns[3].onclick = function () {
                console.log($("div").text());
            }
            btns[4].onclick = function () {
                $("input").val("请输入内容");
            }
            btns[5].onclick = function () {
                console.log($("input").val());
            }
        });
    </script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>
</html>

3.jq-position-尺寸操作的方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .father {
        width: 200px;
        height: 200px;
        background: red;
        border: 50px solid #000;
        margin-left: 50px;
        position: relative;
      }

      .son {
        width: 100px;
        height: 100px;
        background: blue;
        position: absolute;
        left: 50px;
        top: 50px;
      }
    </style>
    <script src="js/jquery-1.10.1.js"></script>
    <script>
      $(function () {
        //jq代码
        var btns = document.getElementsByTagName("button");
        btns[0].onclick = function () {
          console.log($(".father").width());
        };
        btns[1].onclick = function () {
          //   $(".son").css({
          //     left: "10px"
          //   });
          //   获取元素位置的左偏移量
          console.log($(".son").position().left);
        };
      });
    </script>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置</button>
  </body>
</html>

4.jq操作css样式的方法

 <script>
        $(function () {
            // 编写jquery 相关代码
            /*
            * 1.逐个设置
            * 2.链式设置
            * 3.批量设置
            * */
            $("div").css({
                width:"100px",
                height:"100px",
                background :"red"
            });
            console.log($("div").css("width"));
        });
    </script>

5.jq的事件绑定

jQuery中有两种绑定事件方式

1.eventName(fn);

编码效率略高/ 部分事件jQuery没有实现,所以不能添加

2.on(eventName, fn);

编码效率略低/ 所有js事件都可以添加

注意点:

可以添加多个相同或者不同类型的事件,不会覆盖

<script>
      $(function () {
        // $("button").click(function () {
        //   alert("hello jquery");
        // });
        // $("button").click(function () {
        //   alert("hello xlj");
        // });
        //
        // $("button").on("click",function () {
        //     alert("hello click1");
        // });
        $("button").on("click", function () {
          alert("hello click2");
        });
        $("button").on("mouseleave", function () {
          alert("mouseleave");
        });
        // $("button").on("mouseenter", function () {
        //   alert("mouseenter");
        // });
      });
    </script>

6.scrollTop的使用

<script>
        $(function () {
            //jq代码
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function () {
                // 获取网页滚动的偏移位
                // 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
                // console.log($("body").scrollTop()+$("html").scrollTop());
                console.log($(".scroll,html,body").scrollTop());
            }
            // 设置滚动条的值
            btns[1].onclick = function () {
                $(".scroll,html,body").scrollTop(200);
                // $("html,body").scrollTop(300);
            }
        });
    </script>
<body>
 <div class="scroll">
    我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
 </div>
 <button>获取</button>
 <button>设置</button>
</body>

6.jQuery原理及入口函数

jQuery原理

1.jQuery的本质是一个闭包

2.jQuery使用闭包的原因:为了避免多个框架的冲突

3.jQuery如何让外界访问内部定义的局部变量

window.xxx=xxx;

4.jQuery为什么要给自己传递一个window参数

为了方便后期压缩代码

为了提升查找的效率

5.jQuery为什么要给自己接收一个undefined参数

为了方便后期压缩代码

IE9以下的浏览器undefined可以被修改,为了保证内部使用的undefined不被修改,所以需要接收一个正确的`undefined

2.jQ入口函数传入不同参数得到的实例

1.传入 '' null undefined NaN  0  false
会返回一个空的jQuery对象给我们

2.传入html片段
会将创建好的DOM元素存储到jQuery对象中返回

 3.传入选择器
会将找到的所有元素存储到jQuery对象中返回

4.传入数组
会将数组中存储的元素依次存储到jQuery对象中立返回

5.传入伪数组
会将数组中存储的元素依次存储到jQuery对象中立返回

6.传入对象
会将传入的对象存储到jQuery对象中返回

7.传入DOM元素
会将传入的DOM元素存储到jQuery对象中返回

8.传入基本数据类型
会将传入的基本数据类型存储到jQuery对象中返回

1.传入 '' null undefined NaN  0  false, 返回空的jQuery对象
2.字符串:
代码片段:会将创建好的DOM元素存储到jQuery对象中返回
选择器: 会将找到的所有元素存储到jQuery对象中返回
3.数组:
会将数组中存储的元素依次存储到jQuery对象中立返回
4.除上述类型以外的:
会将传入的数据存储到jQuery对象中返回

apply和call方法的作用

用于修改方法内部的this

格式

call(对象,参数1,参数2)

function sum(a, b) {
    console.log(this);
    console.log(a + b);
}
window.sum.call(obj, 1, 2);

apply(对象,数组)

window.sum.apply(obj, [3, 5]);

onload事件会等到DOM元素加载完毕,并且还会等到资源也加载完毕

window.onload = function (ev) {
    console.log("onload");
}

DOMContentLoaded事件只会等到DOM元素加载完毕就会执行回调

document.addEventListener("DOMContentLoaded", function () {
    console.log("DOMContentLoaded");
});

在IE8浏览器中无法使用上述DOM方法,需要用attachEvent

document.attachEvent("onreadystatechange", function () {
    if(document.readyState == "complete"){
        console.log("onreadystatechange");
    }
});

document.readyState属性有如下的状态
uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载，文档与用户可以开始交互
complete - 载入完成

onreadystatechange事件就是专门用于监听document.readyState属性的改变的

document.attachEvent("onreadystatechange", function () {
    if(document.readyState == "complete"){
        console.log("onreadystatechange");
    }
});

3.jQ原型上的核心方法和属性：

jQ原型上的核心方法和属性：
1、jquery 获取jQ版本号
2、selector 实例默认的选择器取值
3、length 实例默认的长度
3、push 给实例添加新元素
4、sort 对实例中的元素进行排序
5、splice 按照指定下标指定数量删除元素，也可以替换删除的元素

7、toArray 把实例转换为数组返回
8、get 获取指定下标的元素，获取的是原生DOM

9、eq 获取指定下标的元素，获取的是jQuery类型的实例对象
10、first 获取实例中的第一个元素，是jQuery类型的实例对象
11、last 获取实例中的最后一个元素，是jQuery类型的实例对象

12、each 遍历实例，把遍历到的数据传给回调使用
13、map 遍历实例，把遍历到的数据传给回调使用，然后把回调的返回值收集起来组成一个新的数组返回

4.DOM 操作:

1、empty ==> 清空指定元素中的所有内容
		$("div").empty();
2、remove ==> 删除所有的元素或指定元素
		$("div").remove();
        $("div").remove(".box");
3、html ==> 设置所有元素的内容，获取第一个元素的内容
		$div.html("123");
        $div.html("<div><span>我是span</span></div>");
4、text ==> 设置所有元素的文本内容，获取所有元素的文本内容
		$div.text("123");
		$div.text("<div><span>我是span</span></div>");

5、元素.appendTo.指定元素 ==> 将元素添加到指定元素内部的最后
	 特点:
         1.如果指定元素有多个,会将元素拷贝多份添加到指定元素中
         2.给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加
         3.给appendTo方法传递jQuery对象,会将元素添加到jQuery对象保存的所有指定元素中
         4.给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中
接收一个字符串 
    $(".item"); ==> jQuery
    $("p").appendTo(".item");
接收一个jQuery对象  
	$($("div")); ==> jQuery
    $("p").appendTo($("div"));

接收一个DOM元素 
	$(divs);  ==> jQuery
    var divs = document.querySelectorAll("div");
    $("p").appendTo(divs);

7、元素.prependTo.指定元素 ==> 将元素添加到指定元素内部的最前面
接收一个字符串 
	$(".item"); ==> jQuery
	$("p").prependTo(".item");

接收一个jQuery对象  
	$($("div")); ==> jQuery
	$("p").prependTo($("div"));

接收一个DOM元素 
	$(divs);  ==> jQuery
	var divs = document.querySelectorAll("div");
	$("p").prependTo(divs);

调用者.insertBefore(插入的元素, 参考的元素);
insertBefore方法, 调用者是谁就会将元素插入到谁里面
target.insertBefore(source, target.firstChild);

5.Ajax

1.open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）

2.send(string)

将请求发送到服务器。string：仅用于 POST 请求

6.GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

7.jQuert DOM属性操作相关方法

DOM 操作:
1、empty ==> 清空指定元素中的所有内容
2、remove ==> 删除所有的元素或指定元素

var btn = document.getElementsByTagName("button")[0];
            btn.onclick = function () {
                // $("div").empty();
                // console.log($("div").empty());
                // $("div").remove();
                // console.log($("div").remove());
                $("div").remove(".box");
            }

3、html ==> 设置所有元素的内容，获取第一个元素的内容
4、text ==> 设置所有元素的文本内容，获取所有元素的文本内容

var btn = document.getElementsByTagName("button")[0];
            btn.onclick = function () {
                var $div = $("div");
                // console.log($div.html());
                // $div.html("123");
                // $div.html("<div><span>我是span</span></div>");
                // console.log($div.text());
                // $div.text("123");
                $div.text("<div><span>我是span</span></div>");
                // console.log($div.get(0).innerText);
            }

5、元素.appendTo.指定元素 ==> 将元素添加到指定元素内部的最后
特点:
1.如果指定元素有多个,会将元素拷贝多份添加到指定元素中
2.给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加
3.给appendTo方法传递jQuery对象,会将元素添加到jQuery对象保存的所有指定元素中
4.给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中

6、指定元素.append.元素 ==> 将元素添加到指定元素内部的最后

7、元素.prependTo.指定元素 ==> 将元素添加到指定元素内部的最前面

8、指定元素.prepend.元素 ==> 将元素添加到指定元素内部的最前面

9、元素.insertBefore.指定元素 ==>将元素添加到指定元素外部的前面

DOM 操作:
// 提示这两个方法内部需要用到nextSibling和previousSibling属性
(作业)next([expr]) 获取紧邻的后面同辈元素的元素
(作业)prev([expr]) 获取元素紧邻的前一个同辈元素
// 提示: 实现insertAfter需要用到原生JavaScript的nextSibling属性
(作业)元素.insertAfter.指定元素 ==>将元素添加到指定元素外部的后面
(作业)指定元素.after.元素 ==>将元素添加到指定元素外部的后面

元素.insertBefore.指定元素 ==>将元素添加到指定元素外部的前面
(作业)指定元素.before.元素 ==>将元素添加到指定元素外部的前面

13、元素.replaceAll.指定元素 ==> 替换所有指定元素
(作业)指定元素.replaceWith.元素 ==> 替换所有指定元素

15、clone ==> 复制节点(true深复制,false浅复制)

jQueryDOM操作相关方法

1.attr(): 设置或者获取元素的属性节点值

2.prop(): 设置或者获取元素的属性值

3.css(): 设置获取样式

4.val(): 获取设置value的值

5.hasClass(): 判断元素中是否包含指定类

6.addClass(): 给元素添加一个或多个指定的类

7.removeClass(): 删除元素中一个或多个指定的类

// 传递参数, 如果元素中有指定类就删除
            // 会返回this方便链式编程
            console.log($("div").removeClass("aabb"));
            // console.log($("div").removeClass("aabb abc"));

            // 没有传递参数, 删除所有类
            // console.log($("div").removeClass());

8.toggleClass(): 没有则添加,有则删除

 // 传递参数, 如果元素中没有指定类就添加, 有就不添加
            // 会返回this方便链式编程
            // console.log($("div").toggleClass("abc"));
            // console.log($("div").toggleClass("aabb abc"));

            // 没有传递参数, 删除所有类
            console.log($("div").toggleClass());

/*
1.on(type, callback): 注册事件
2.off(type, callback): 移出事件
*/
1.注册多个相同类型事件, 后注册的不会覆盖先注册的
2.注册多个不同类型事件, 后注册的不会覆盖先注册的

8.clone: 复制一个元素

$("button").eq(0).on("click",function () {
                // 1.浅复制一个元素
                var $li = $("li").clone(false);
                console.log($li);
                // 2.将复制的元素添加到ul中
                $("ul").append($li);
 });

9.事件命名空间

利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发

利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

 $(function () {
            $(".son").on("click.ls",function () {
                alert("click1")
            });
            $(".father").on("click.ls",function () {
                alert("click2")
            });
            $(".father").on("click",function () {
                alert("click3")
            });
            $(".son").trigger("click.ls");
        });

10.事件委派

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
      $(function () {
        /*
            1.什么是事件委托?
            请别人帮忙做事情, 然后将做完的结果反馈给我们
            */
        $("button").click(function () {
          $("ul").append("<li>新增一个li</li>");
        });

        $("ul>li").click(function () {
          console.log($(this).html());
        });
        /*
            以下代码的含义, 让ul帮li监听click事件
            之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
            之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
            */
        $("ul").delegate("li", "click", function () {
          console.log($(this).html());
        });
      });
    </script>
  </head>
  <body>
    <ul>
      <li>这是1个</li>
      <li>这是2个</li>
      <li>这是3个</li>
    </ul>
    <button>新增一个li</button>
  </body>
</html>

11.显示隐藏切换效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏切换效果</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //jq代码
            $("button").eq(0).click(function () {
                $("div").show(1000);
            });
            $("button").eq(1).click(function () {
                $("div").hide(1000);
            });
            $("button").eq(2).click(function () {
                $("div").toggle(1000);
            });
        });
    </script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>

  之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
        之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
        */
    $("ul").delegate("li", "click", function () {
      console.log($(this).html());
    });
  });
</script>

这是1个
这是2个
这是3个

新增一个li ```

11.显示隐藏切换效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏切换效果</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //jq代码
            $("button").eq(0).click(function () {
                $("div").show(1000);
            });
            $("button").eq(1).click(function () {
                $("div").hide(1000);
            });
            $("button").eq(2).click(function () {
                $("div").toggle(1000);
            });
        });
    </script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>