$(function(){
        //请求参数
        var list = {};
        //
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "http://127.0.0.1/admin/list/",
            //数据，json字符串
            data : JSON.stringify(list),
            //请求成功
            success : function(result) {
                console.log(result);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });

手写一个jQuery，考虑插件和扩展性（原型和原型链）
 
//jquery做dom查询的
class jquery{
  constructor(selector){
    cons result = documnent.querySelectorAll(selector)
    const length = result.length;
    for(let i = 0;i < length;i++){
      this[i] = result[i]
    }
    this.length = length;
    this.selector = selector;
  }
  get(index){
     return this[index]
  }
  each(fn){
    for(let i =0;i<this.length;i++){
      const elem  = this[i];
      fn(elem)
    }
  }
  on(type,fn){
    return this.each(elem=>{
      elem.addEventListener(type,fn,false)
    })
  }
}
 
基于jauery做扩展
 
//1、插件机制
jQuery.prototype.dialog = function(info){
  alert(info)
}

//2、造轮子
class myJQuery extends jQuery{
  constructor(selector){
    super(selector)
  }
  //扩展自己的方法
  addClass(className){

  }
  style(data){

  }
}

jQuery安装与下载
 
JQuery 是一个javaScript库，是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery 极大地简化javaScript编程
 
 
--juery相比js优点：
 
jquery的onload加载事件速度更快，并且多个加载并行   
  
【jq绑定事件都是使用的事件函数，不需要加on】；
js的onload加载事件，后面的覆盖前面的；
在jQuery中，$(  )是其运行环境；
jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块。
-- jQuery库包含以下功能：
 
    HTML 元素选取
    HTML 元素操作
    CSS 操作
    HTML 事件函数
    JavaScript 特效和动画
    HTML DOM 遍历和修改
    AJAX
    Utilities
1、jQuery的版本下载网址：http://www.jq22.com/jquery-info122
 
找到要下载的版本，点击下载
 
 
 
 
2、下载hBuilder并运行hBuilder , 在hBuilder中创建一个web项目
 
下载地址：http://www.dcloud.io/
 
在主页面轮播图中点击HBuilder界面进入下载。
 
 
 
 
这里根据自己的电脑来选择，我们尽量下载下面的版本，功能强大点，可以支持app开发。
 
 
 
 
3、下载好之后进行安装，并且新建项目名称为Jquery练习
 
         将第一步中下载好的jQuery资源包进行解压，将解压好的.js文件移动到自己的web项目js包里面。
 
        
 
 
 
 
 
 
 
4、引入资源文件，并测试是否引加载成功，如果是undefinition 就没有引入。
 
创建一个html页面，将jQuery的min.js 的资源文件。
 
<!-- 引用jQuery 资源文件 -->

       <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>

       <title>JQuery 练习</title>

       <!-- 测试JQuery 是否加载     如果是undefinition 就是没引入。-->

       <script>

           if(typeof jQuery== "undefined"){

              window.alert("jQuery引用失败!");

           }else{

              window.alert("jQuery引用成功!");

           }

    </script>
 
 
 
 
5、创建一个简单的项目，显示/隐藏 文本框
 
<!-- 引用jQuery 资源文件 -->
 
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>

       <title>JQuery 练习</title>

       <p id="demo">这是一个文本框</p>

       <button onclick="hide()">点击隐藏文本</button><br />

       <button onclick="show()">点击显示文本</button>     

       <script>

           //隐藏文本

           function hide(){

              $("#demo").hide();

           }

           //显示文本

           function show(){

              $("#demo").show();

           }

       </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

一、JQuery3.3.1
 
1、概述
 
 简介：jquery是一个优秀的javascript的轻量级框架，兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作。并且 jquery的插件非常丰富，大多数功能都有相应的插件解决方案。
 
Jquery就是1个js文件，只不过它对JS进行了简化。
 
Jquery由美国人John Resig在2006年创建。
 
官网：http://jquery.com/
 
分为1.X、2.X、3.X三个大版本，提供的方法基本一致，只不过2.X 3.X不再兼容IE 6、7、8之类的低版本浏览器。
 
宗旨：Write less, do more.	写得少，做得多。
 
特性：jQuery 是一个 JavaScript 函数库。
 
jQuery 库包含以下特性：
 
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
引入：
 
<script src="jquery-3.3.1.min.js></script>		该标签如果用来引包，里面不允许写任何js语句！
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    alert("hello world.");
</script>
 
注：使用jQuery要先引入包、jquery-3.3.1.min.js去注释、缩短了变量等长度、比较小、所以引用这个min.js包
 
 
 
2、入口函数
 
$()或jQuery() 称之为jq选择器环境，在里面加上引号填写相关选择器即可，就可以获取匹配的元素。
 
 
 
js：window.onload=function(...){}
jq：$(document).ready(function(){...});
$(function(){...});
 
1.	两者功能都一致，都可以让获取元素的行为发生在渲染元素之后；
2.	JS入口只允许存在一个，书写多个的话，后面的会覆盖前面的；
3.	JQ入口允许存在多个，且并行存在，都会生效；
4.	JS入口需要等待页面上所有资源加载完毕，而JQ入口只需要等待页面上标签渲染完毕即可，JQ入口速度更快。
 
演示：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>

    // JS 页面加载完成
    window.onload = function () {
        alert("test1");
    }

    window.onload = function () {
        alert("test2");
    }

    // $ 符号就是 jquery 的简写方式.
    // 复杂书写 : 
    $(document).ready(function () {
        alert("test3");
    });

    // 简化书写
    $(function () {
        alert("test4");
    })

</script>
 
 
 
 
3、事件
 
js：js对象.onclick = function(){...}
jq：jquery对象.click(function(){...})
注意：jq中的事件类型统一不要加on
 
演示：
 
js代码：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // 注意 : JS 的代码都是写在 = 后面.   jquery 的代码基本上都是写在 () 里面.
    // jquery 入口函数 :
    $(function () {

        // JS 代码 :
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert("按钮被点击了...");
        }
    });
</script>
 
jQuery代码：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // 注意 : JS 的代码都是写在 = 后面.   jquery 的代码基本上都是写在 () 里面.
    // jquery 入口函数 :
    jQuery(function () {

        // jquery 代码 :
        $("#btn").click(function () {
            alert("按钮被点击了...");
        });
    });
</script>
 
  <input type="button" value="按钮" id = "btn"/>
 
 
4、整体操作
 
1、在jq里面，通过$()返回的数组，允许开发者整体操纵
2、选择数组中的其中一个元素：js对象[下标]           jq对象.eq(下标) 
 
html代码：
 
<body>
<input type="button" value="按钮1111" />
<input type="button" value="按钮2222" />
</body>
 
js代码：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // jquery 入口函数 :
    $(function () {

        // JS 代码为两个按钮绑定事件 (JS代码不可以进行整体绑定)
        // JS 中 document.getElementsByTagName 该方法返回的是一个数组, 只能取出对应的元素才可以绑定.
        var inputs = document.getElementsByTagName("input");
        inputs[0].onclick = function () {
            alert("按钮1111被点击了...");
        }

        inputs[1].onclick = function () {
            alert("按钮2222被点击了...");
        }
    });
</script>
 
jQuery代码：
 
A、JQuery整体操作绑定
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // jquery 入口函数 :
    $(function () {

        // jquery 书写 :
        $("input").click(function () {
            alert("按钮被点击了...");
        });
    });
</script>
 
 
B、单个标签实现事件绑定
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // jquery 入口函数 :
    $(function () {

        // jquery 书写 :
        $("input").eq(0).click(function () {
            alert("按钮1111被点击了...");
        });

        $("input").eq(1).click(function () {
            alert("按钮2222被点击了...");
        });
    });
</script>
 
 
5、对象互转
 
说明：
 
jquery本质上虽然也是js，但是使用jquery的属性和方法必须保证对象是通过jquery的方式获取的，使用js获取的对象是js对象，使用jquery方式获取的对象是jquery对象。如果想交替使用，那么必须对象互转。
 
格式：
 
js对象转换成jq对象：$(js对象)
jq对象转换成js对象：jq对象[索引] 或 jq对象.get(索引)
 
演示：
 
html代码：
 
<body>
    <input type="button" value="按钮" id="btn" />
</body>
 
js转jQuery对象
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // jquery 入口函数 :
    $(function () {

        // JS 对象转 jquery 对象
        var btn = document.getElementById("btn");
        // JS 对象调用 jquery 的方法. (行不通)
        /*btn.click(function () {
            alert("按钮被点击了...");
        });*/

        // 需求 : 将 JS 对象转成 jquery 对象. 给点钱就行了.
        $(btn).click(function () {
            alert("按钮被点击了...");
        });
    });
</script>
 
jQuery转js对象
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // jquery 入口函数 :
    $(function () {

        // jquery 对象 转 JS 对象
        /*$("#btn").onclick = function () {
            alert("按钮被点击了...");
        }*/
：jq对象[索引] 或 jq对象.get(索引)
        // 方式一 : [下标]
        /*$("#btn")[0].onclick = function () {
            alert("按钮被点击了...");
        }*/

        // 方式二 : get(下标)
        $("#btn").get(0).onclick = function () {
            alert("按钮被点击了...");
        }
    });
</script>
 
 
6、控制css
 
6.1、单属性访问：
 
jq对象.css('width');
 
6.2、单属性修改：
 
jq对象.css('width','100px');
 
6.3、多属性修改：
 
jq对象.css({'width':'100px','height':'100px'});	
可一次修改多个css属性
 
演示：
 
html代码：
 
<body>
    <div id="box"></div>
</body>
 
js代码：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // JS 控制样式 : style
        var box = document.getElementById("box");

        box.style.width = "100px";
        box.style.height = "100px";
        box.style.backgroundColor = "pink";
    });
</script>
 
jQuery代码：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // jquery 控制样式 : css
        $("#box").css({
            width: "100px",
            height: "100px",
            backgroundColor: "skyblue"
        });
        
        // 单个属性 :
        $("#box").css("backgroundColor", "red");
    });
</script>
 
 
7、控制标签属性
 
7.1、单属性访问：
 
jq对象.attr('class');          
 
7.2、单属性修改：
 
jq对象.attr('class ','myClass');  
 
7.3、多属性修改：
 
jq对象.attr({'class':'myClass','id':'myId'});   	
可一次修改多个attr属性
 
演示：
 
html代码：
 
<body>
    <div id="box" class="test" title="bbb"></div>
</body>
 
js代码：浏览器F12/开发者模式查看
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // 需求 : 修改 box 标签的class 与 title 属性数值
        var box = document.getElementById("box");

        box.className = "bbb";
        box.title = "这里什么都没有";
    });
</script>
 
 
jQuery代码：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // 需求 : 修改 box 标签的class 与 title 属性数值
        $("#box").attr("class", "aaa");
        $("#box").attr("title", "这里什么都没有");
    });
</script>
 
 
7.4、删除属性：
 
jq对象.removeAttr('class ');  
 
演示：
 
html代码：
 
<body>
    <input type="checkbox" id="ck">
    <input type="button" value="Click" id="btn">
</body>
 
jQuery代码：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // 需求 : 点击按钮, 删除 checkbox 标签的 id 属性
        $("#btn").click(function () {
            $("#ck").removeAttr("id");
        });

    });
</script>
 
 
注意：
 
获取属性我们也可以使用prop()，他跟attr()是互补的，一般来说，我们都是使用attr()来获取标签属性，但是有的时候也会有获取不到的情况，这个时候可以使用prop()的形式来获取，比如表单元素的checked属性。
 
jq对象.prop();
 
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
 
演示：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // 需求 : 点击click按钮, 查看 checkbox 选项框的 checked 属性数值
        $("#btn").click(function () {
            // attr 可以获取属性, 但是 `选项框` 的 checked 属性还是获取不到.
            var result = $("#ck").attr("checked");
            alert("result = " + result);

            // prop 属性的缩写.
            result = $("#ck").prop("checked");
            alert("result = " + result);
        });
    });
</script>
 
 
 
 
 
8、案例一：是否接受协议
 
图片演示如下：
 
 
8.1、说明：
 
按钮的本身是disabled禁用的状态
当复选框被勾选上的时候，按钮变成启用的状态，其次样式产生了变化
按钮样式的变化都已经通过特定的class名字书写好样式了，只要对按钮的class名字进行修改即可
 
8.2、演示：
 
html代码：
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*input 标签中包含 submit 的类名*/
        input.submit {
            background: #69b946;
            display: inline-block;
            height: 52px;
            width: 306px;
            text-align: center;
            cursor: pointer;
            font: 22px/52px "微软雅黑";
            color: #fff;
            border-radius: 3px;
            border-style: solid;
            border-width: 1px;
            border-color: transparent;
        }

        input.disabled {
            background: #f4f9fd;
            color: #888;
            cursor: default;
            border-color: #d0dae3;
            cursor: default;
            outline: none;
        } 
    </style>
</head>
<body>
<form action="https://www.baidu.com">
    <input id="kuang" type="checkbox" />
    <label for="kuang">同意"服务条款"和"用户须知"、"隐私权相关政策"</label>
    <br />
    <br />
    <input type="submit" disabled="disabled" class="submit disabled" id="btn" />
</form>
</body>
</html>
 
jQuery代码：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        // 1. 获取 `选项框`, 并绑定单击事件
        $("#kuang").click(function () {

            // 2. 获取 `选项框` 的状态
            // var checked = $("#kuang").attr("checked");  行不通
            var checked = $("#kuang").prop("checked");
            // alert("checked = " + checked);

            // 3. 判断
            if (checked == true) {

                // 修改 btn 提交按钮的 `属性值`
                $("#btn").attr({
                    "disabled" : false,
                    class: "submit"
                });
            } else {
                $("#btn").attr({
                    "disabled" : true,
                    class: "submit disabled"
                });
            }
        });
    })
</script>
 
 
 
9、val()函数
 
针对表单元素的value属性的值，在jq里面单独封装了一个方法，本身使用attr()也是不能正确获取的。
 
格式：
 
jq对象.val()；
 
注意：val()函数有参时，修改value值；无参时，返回value值。
 
演示：
 
html代码：
 
<body>
    <input type="text" id="text" value="请输入内容..." />
    <input type="button" value="Click" id="btn" />
</body>
 
js代码：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // 需求 : 点击 btn 按钮, 获取 text 文本框中的 value 值.
        // JS 方式 :
        var btn = document.getElementById("btn");
        var text = document.getElementById("text");
        btn.onclick = function () {
            var value = text.value;
            alert("value = " + value);
        }
    });
</script>
 
jQuery代码：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // 需求 : 点击 btn 按钮, 获取 text 文本框中的 value 值.
        // jquery 获取属性
        $("#btn").click(function () {

            // 方式一 : attr 行不通
            var value = $("#text").attr("value");
            alert(value);

            // 方式二 : prop 保险,安全
            value = $("#text").prop("value");
            alert(value);

            // 方式三 : val();
            value = $("#text").val();
            alert(value);
        });
    });
</script>
 
 
 
 
10、案例二：线上搜索框
 
10.1、说明：
 
1.	当文本输入框获取焦点的时候，里面默认的文字清空，当失去焦点的时候，里面的文字又会回来。
2.	当里面有用户输入的内容的时候，获取焦点不能清空文字。失去焦点也不可以还原文字。
 
10.2、演示：
 
html代码：
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
        }

        .box {
            height: 40px;
            width: 258px;
            margin: 100px auto 0;
        }

        .box input {
            float: left;
            width: 210px;
            padding-left: 6px;
            height: 40px;
            background: url(../img/left.jpg);
            color: #ccc;
        }

        .box button {
            float: right;
            width: 42px;
            height: 40px;
            background: url(../img/right.jpg);
        }

    </style>
</head>
<body>
<div class="box">
    <input type="text" value="请输入文字..." />
    <button></button>
</div>
</body>
</html>
 
jQuery实现方式一：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // 需求 : 为 input 标签绑定 focus 聚焦事件
        $("input").focus(function () {
            // 1. 获取 input 标签的 value 值
            var value = $("input").val();
            // alert(value);

            // 2. 判断
            if (value == "请输入文字...") {
                // 3. 清空文字, 并同时设置样式
                $("input").val("").css("color", "black");
            }
        });
        
        // 需求 : 为 input 标签绑定 blur 聚焦事件
        $("input").blur(function () {
            if ($("input").val() == "") {
                $("input").val("请输入文字...").css("color", "gray");
            }
        });
    })
</script>
 
jquery实现方式二：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // 需求 : 为 input 标签绑定 focus 聚焦和离焦事件
        $("input").focus(function () {
            // 1. 获取 input 标签的 value 值
            var value = $("input").val();
            // alert(value);

            // 2. 判断
            if (value == "请输入文字...") {
                // 3. 清空文字, 并同时设置样式
                $("input").val("").css("color", "black");
            }
        }).blur(function () {
            if ($("input").val() == "") {
                $("input").val("请输入文字...").css("color", "gray");
            }
        });
    })
</script>
 
 
11、控制标签内容
 
jq对象.html();
括号里面写参数，代表修改，不写代表获取。
 
演示：
 
<body>
    <div id="box"></div>
</body>
 
js代码：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        // 1. 获取 box 容器
        document.getElementById("box").innerHTML = "<h1>你好, JS.</h1>";
    })
</script>
 
JQuery代码：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        // 1. 获取 box 容器
        $("#box").html("<h1>你好, 世界!</h1>");
    })
</script>
 
 
 
12、控制class
 
Jq对象.addClass()			添加类
Jq对象.removeClass()		删除类
Jq对象.hasClass()			判断是否有类
Jq对象.toggleClass()		切换类
 
演示：
 
html代码：
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .bgcolor{
            background: skyblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <input type="button" value="新增class" />
    <input type="button" value="移除class" />
    <input type="button" value="切换class" />
    <input type="button" value="判断是否有class" />
</body>
</html>
 
jQuery代码：
 
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        var inputs = $("input");

        // 添加 class
        inputs.eq(0).click(function () {
            $(".box").addClass("bgcolor");
        });

        // 移除 class
        inputs.eq(1).click(function () {
            $(".box").removeClass("bgcolor");
        });

        // 切换 class
        inputs.eq(2).click(function () {
            $(".box").toggleClass("bgcolor");
        });

        // 判断是否存在 class
        inputs.eq(3).click(function () {
            var result = $(".box").hasClass("bgcolor");
            alert("result = " + result);
        });
    });
</script>