jquery(接在JavaScript之后)

妖狐艹你老母 2022-12-16 11:59 94阅读 0赞

# jQuery #

jquery选择器选择到的都是伪数组,伪数组有自己的操作

jquery伪数组不能使用原生js的dom操作，反之一样

jquery使用原生js的dom操作( 取下标或者遍历):

$("li")[0].innerText;
    $("li").get(0).innerText;

js使用原生jquery操作(类似于dom的方法,dom无法使用):

var li = document.querySelector("li");
    $(li).text();

## jquery选择器 ##

$(“这里放css选择器”)，一个jquery选择器就制作好了

$一般是加在jquery变量之前的，只是表示这是一个jquery变量

$("#li");//id选择器
    var $six = $('.six')//类名选择器
    // 标签选择器
    var $lis = $('li')
    // 通配选择器
    var _ = $('*')
    //没什么用的变量取名为"_"
    
    //属性选择器
    $seven = $("[name=''seven]")
    
    //伪类选择器
    $first = $("li:first-child")
    
    //选择为空的li
    $empty = $("li:empty");

## jquery筛选器（像是另类的选择器） ##

**粗暴型**：

$first =$("li:first");//第一个li
    $last = $("li:last");//最后一个li
    $even = $("li:even");//选下标为偶数的
    $odd = $("li:odd");//下标为奇数的

**方法**：

获取指定下标
    $("li:eq(4)");//下标等于4的
    $("li:gt(4)");//下标大于4的
    $("li:lt(4)");//下标小于4的

## 表单元素选择器 ##

代码太长不想看，跳过

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
    <script src="./js/jquery-3.5.1.js"></script>
    </head>
    <body>
    <form action="">
        <input type="text">
        <input type="password">
        <input type="file">
        <input type="radio">
        <input type="checkbox">
        <select name="" id="">
            <option value="">山东省</option>
            <option value="">安徽省</option>
        </select>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <input type="button" value="按钮">
        <input type="submit">
        <input type="image" src="./images/1.png">
        <input type="reset">
        <input type="hidden" name="hhh" value='333'>
    </form>
    </body>
    <script type="text/javascript">
    // console.log( $(':input') );
    // console.log( $(':text') );
    console.log( $(':hidden') ); // 选择不显示的标签
    </script>
    </html>

**总结**：

样子和筛选器差不多，
    $(":input");//选input
    $(":text");//选type = text
    $(":hidden");//选择不显示的标签，包含HTML等，不止表单范围

## 表单对象选择器 ##

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
    <script src="./js/jquery-3.5.1.js"></script>
    </head>
    <body>
        <form action="">
            <select name="province">
                <option value="0">请选择省份</option>
                <option value="1">安徽省</option>
                <option value="2" selected>河南省</option>
                <option value="3">河北省</option>
            </select>
    
            <input type="checkbox">足球
            <input checked type="checkbox">美容
            <input type="checkbox">篮球
            <input type="checkbox">医生
    
    
            <input type="submit" disabled>
            <input type="submit">
        </form>
    </body>
    <script type="text/javascript">
    // 选中被选中的下拉框选项 - option:selected
    console.log( $('[name="province"]>option:selected') );
    
    // 选择到被选中的复选框    复选框:checked
    console.log( $('input[type="checkbox"]:checked') );
    
    // 选择被禁用的表单元素
    console.log( $('[type="submit"]:disabled') );
    
    // 选择可用的表单元素
    console.log( $('[type="submit"]:enabled') );
    </script>
    </html>

**总结**

$("input[name='province']>option:selected");//被选的下拉框被选中
    
    $("input[type='checkbox']:checked");//被选中的复选框
    
    $("input[type='submit']:disabled")//被禁用的表单元素
    
    $("input[type='submit']:enabled");//可用的表单元素

## 筛选器方法（类似节点操作） ##

var $ul = $("ul");
    var $lis = $ul.children();//选所有的子元素
    
    
    
    
    var $first = $lis.first();//li的第一个			（不想背，为什么不$lis.get(0)？瞬间感觉鸡肋）
    
    var $last = $lis.last();//li最后一个
    
    var $prev =$last.prev();//$last的上一个
    
    var $next = $first.last();//$first的下一个
    
    
    
    var $siblings = $next.siblings();//选择所有的兄弟（不包含自己的）
    
    var $prevall =$prev.prevAll();//前面的所有兄弟
    
    var $nextAll = $next.nextAll();//后面的所有兄弟
    
    
    
    
    var parent = $nextAll.parent()//选择所有的父元素
    var parents = $first.parents()//从爸爸选到祖宗
    var find = $lis.find(".li");//所有的后代（儿子，孙子，等等）里面找
    var eq = $lis.eq(4);//选下标为4的

## jquery事件(事件绑定方式) ##

on去掉，把函数变成回调函数（作为形参），事件源改为伪数组就完工

jquery版事件的好处：整个伪数组内的元素都绑定了事件

下面就是所有的li都绑定了点击事件：

$("li").click(function(){
        
        console.log("jquery版点击事件");
        this.style.background ="#ff0";
    })

### 鼠标的移入移出方法 ###

**针对鼠标的移入移出**：mouseover();mouseout();mouseenter();mouseleave();

你收到了jQuery的礼包:hover方法

//一个方法实现移入移出效果
    console.log("公堂 三个人 被打 画面感出来了没有");
    $(".box").hover(function(){
        
        //鼠标移入执行函数
        console.log("哎，我进来了~");
    },function(){
        
        //鼠标移出执行函数
        console.log("哎，我又出来了~");
    })

### onload事件： ###

单独拿出来的都是特殊情况

$(window).load(function(){
        
        console.log("最后加载");
    })

不建议使用，jquery1.8之后不支持.load()

$(window).height()是可视区域的高度
    $(document).height()是整个文档的高度
    
    $(window).scroll()和$(document).scroll()
    使用效果差别不大，但是$(window).scroll()支持的情况$(document).scroll()不一定支持
    .scrollTop()  和.scrollLeft()效果一致

#### ready() ####

jquery给你准备个差不多的\*\*ready()\*\*方法,功能和长相都十分的相似：

$("document").ready(function(){
        
    	$("li").click(function(){
        
            console.log(this.innerText);
        })
    })

#### onload高效版 ####

但是，为了效率（比上面的效率高)，我们再次奢侈一把

$(function(){
        
        $("li").click(function(){
        
            console.log(this.inenrText);
        })
    })
    
    //在HTML加载完成后就执行，不等js,css，图片等

window.onload等资源加载完成：资源指的是html,css,js,引入的图片

#### 事件绑定的jquery版（jquery方法） ####

##### on() #####

$("li").on("click","li",[10,20],function(e){
        
        console.log(123);
        console.log(e);
    })
    
    //第三个参数是可选项：是传给第四个事件方法的
    //存在第四个参数的事件对象里面

##### one():加载后只执行一次的方法 #####

jquery版的事件解绑

$("div").one("click",function(){
        
        console.log("this is a div")
    })//这个事件只能执行一次了

##### trigger（):手动触发事件的方法 #####

$("div").trigger("click");//不需要点击自己触发

##### off()：解绑 #####

jquery伪数组.off(事件类型,[函数])

return false在jquery里面是无敌的，可以阻止一切,兼容写法jquery已经写好了，不需要你处理

### 小总结： ###

事件绑定方式：

jquery伪数组.事件类型(回调函数)

jquery伪数组.on(事件类型,\[委托的子元素,传入事件对象的参数\],回调函数) // 参数在事件对象的data属性上

jquery伪数组.one(事件类型,回调函数) // 只能执行一次的事件

jquery伪数组.hover(鼠标移入的回调函数，鼠标移出的回调函数)

类似于window.onload

$(document).ready(回调函数)

$(function()\{\}) // 推荐

手动触发事件

jquery伪数组.trigger(事件类型)

解绑事件：

jquery伪数组.off(事件类型,\[函数\])

return false阻止一切

事件对象是兼容的

## jquery的属性操作（方法）： ##

操作自定义的属性：

$("img").attr("src","./images/三上悠亚.gif");

删除属性的方法：

$("img").removeAttr("src");

**特殊的来了**

prop:操作特殊属性，一般是checked：

$("input").click('checked',false);//按钮不选中

特殊删除：removeProp(‘checked’);

## 全选案例 ##

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
    <script src="./js/jquery-3.5.1.js"></script>
    </head>
    <body>
        <input type="button" value="全选" class='checkAll'>
        <input type="button" value="全不选" class='checkNo'>
        <input type="button" value="反选" class='checkReverse'>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    </body>
    <script type="text/javascript">
    // 全选
    $('.checkAll').click(function(){
        
        $('[type="checkbox"]').prop('checked',true)
    })
    // 全不选
    $('.checkNo').click(function(){
        
        $('[type="checkbox"]').prop('checked',false)
    })
    // 反选
    $('.checkReverse').click(function(){
        
        // jquery提供了一个专门用来遍历伪数组的方法 - each
        $('[type="checkbox"]').each(function(i,v){
        
            // console.log(i,v);
            // if($(v).prop('checked')){
        
            //     $(v).prop('checked',false)
            // }else{
        
            //     $(v).prop('checked',true)
            // }
            $(v).prop('checked',!$(v).prop('checked'))
        })
    })
    </script>
    </html>

## 类名操作(属性下的class) ##

添加：

$(this).addClass("red");

删除：

$(this).removeClass("red");

切换类名和删除类名：

$(this).toggle();//切换显示和消失

判断元素是否有类名：

$("div").hasClass("red");

## 一行代码实现tab切换 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style>
    ul,ol{
        
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .tab:hover{
        
        cursor: pointer;
    }
    .tab{
        
        width: 500px;
        height: 300px;
        border:1px solid #000;
    }
    .tab ul{
        
        height: 50px;
        display:flex;
        justify-content: space-evenly;
        align-items: center;
        background-color: pink;
    }
    .tab ul li{
        
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-size:20px;
        font-weight:bold;
        background-color: #ff0;
        text-align: center;
    }
    .tab ul li.active{
        
        background-color: #0f0;
        color:#00f;
    }
    .tab ol{
        
        height: 250px;
    }
    .tab ol li,.tab ol li img{
        
        width: 500px;
        height: 250px;
    }
    .tab ol li{
        
        display:none;
    }
    .tab ol li.active{
        
        display:block;
    }
    </style>
    <body>
    <div class="tab">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">
                <a href="#">
                    <img src="./images/1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/3.jpg" alt="">
                </a>
            </li>
        </ol>
    </div>
    </body>
    <script src="./js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
    $('ul li').click(function(){
        
        // console.log( $(this).index() )
        $(this)
            .addClass('active')
            .siblings()
            .removeClass('active')
            .parent()
            .next()
            .children()
            .eq($(this).index())
            .addClass('active')
            .siblings()
            .removeClass('active')
        // 取下标 - jquery提供了一个方法 index() 用来获取自己的下标
    })
    </script>
    </html>

## 样式操作(CSS) ##

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
    <script src="./js/jquery-3.5.1.js"></script>
    </head>
    <style>
    div{
        
        width: 100px;
        height: 100px;
        border:1px solid #000;
    }
    </style>
    <body>
    <div></div>
    </body>
    <script type="text/javascript">
    $('div').click(function(){
        
        // 获取宽度 - 使用css方法获取width样式
        // var w = $(this).css('width')
        // console.log(w);
        // 设置背景颜色 - 参数1：css属性名，参数2：css的属性值
        // $(this).css('backgroundColor','red')
        // 设置多个样式
        $(this).css({
        
            width:'200px',
            height:'200px',
            background:'blue'
        })
    })
    </script>
    </html>

$("div").css("width");
    $("div").css({
        
        width:"100px",
        height:"200px"
    })

## 内容操作 ##

获取文本内容：

$(this).text();

设置文本内容：

$(this).text("<i>斜体</i>")

设置标签内容:

$(this).html("<i>斜体</i>")；
    $("this").html();

设置和获取表单元素的值：

$("input").val("密码");

# jQuery二 #

## ajax回顾： ##

//ajax请求
    
    //1、创建对象
    var xhr = new XMLHttpRequest();
    
    //2、监听状态
    xhr.onreadystatechange = function(){
        
        //判断是否完成
        if(xhr.readyState ==4){
        
            //判断是否请求成功
            if(xhr.status>=200&&xhr.status<300){
        
                var res= xhr.responseText;
                res = JSON.parse(res);
                console.log(res);
            }
        }
    }
    
    //3、打开连接
    xhr.open("post","demo.php",true);
    
    //4、发送请求
    xhr.send("username=张三");

## jsonp回顾： ##

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/0/normalize.css" rel="stylesheet">
    <style>
    body{
        
        /* font-family: webdings;
        font-size:100px;
        color:red; */
        font-family: '微软雅黑';
    }
    div{
        
        width: 400px;
        height: 400px;
        border:1px solid #f00;
        background-color: #f00;
    }
    </style>
    <link rel="stylesheet" href="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/css/components/user_quit_dialog-527f3ede74.css">
    </head>
    <body>
    <div class="sui-dialog-mask">
        aaa
        
    </div>
            
    
    
    </body>
    <script type="text/javascript">
    // 具备一些常识
    /*
    http请求 - 从平常打开的页面中，在network看到的所有信息都是http请求
    先把network打开，再打开页面
    打开看到的每一行都是一次请求
    
    所有引入的文件、请求的图片 统统都是get请求
    js文件的请求响应的是js文件中的js代码
    css文件的请求响应的css文件中的css代码
    
    */
    
    // jsonp为了跨域
    // 为什么要跨域？
    // 因为想要别的网站的数据
    // 因为浏览器不允许
    // 浏览器有什么规定？
    // 当前ajax发送的地址跟自己的地址 必须是同源的，才可以请求
    // 同源：同协议、同域名、同端口
    // 不同源的就不允许请求，希望请求到不同源地址 - 所以要跨域
    // jsonp：跨域的原理 - 利用标签的src、href属性不受同源策略的限制
    // 选择使用哪个标签？
    // link的href、img的src、script的src、iframe的src
    // 选择script 的 src
    
    // cb - callback === 回调函数
    // function jQuery110208508544480066098_1602293276493(obj){
        
    //     console.log(obj.g);
    // }
    
    // jQuery110208508544480066098_1602293276493(
    //     {
        
    //         "q":"js",
    //         "p":false,
    //         "g":[
    //             {"type":"sug","sa":"s_1","q":"js是什么意思"},
    //             {"type":"sug","sa":"s_2","q":"js防水涂料"},
    //             {"type":"sug","sa":"s_3","q":"js舞蹈全国连锁"},
    //             {"type":"sug","sa":"s_4","q":"js防水是什么材料"},
    //             {"type":"sug","sa":"s_5","q":"江苏"},
    //             {"type":"sug","sa":"s_6","q":"jsk工房游戏合集17款"},
    //             {"type":"sug","sa":"s_7","q":"jsk工作室游戏"},
    //             {"type":"sug","sa":"s_8","q":"js集团"},
    //             {"type":"sug","sa":"s_9","q":"jsn-tl00是什么型号手机"},
    //             {"type":"sug","sa":"s_10","q":"鉴赏"}
    //         ],
    //         "slid":"4965182199320195464",
    //         "queryid":"0x1fdee75392b188"
    //     }
    // )
    
    // wd == word
    
    
    function jsonp(obj){
        
        var script = document.createElement("script");
        var url = obj.url;
        url += '?cb=cb';
        window.cb = obj.cb; // 将这个函数，暴露在全局，让这个函数可以在任何一个地方都能调用
        url += '&';
        var f = '';
        for(var attr in obj.data){
        
            url += f + attr + '=' + obj.data[attr];
            f = '&';
        }
        script.setAttribute('src',url)
        document.head.appendChild(script);
        document.head.removeChild(script);
    }
    var wd = 'js';
    jsonp({
        
        url:'https://www.baidu.com/sugrec',
        data:{
        
            pre:1,
            p:3,
            ie:'utf-8',
            json:1,
            prod:'pc',
            from:'pc_web',
            wd:wd,
            req:2,
            csor:2
        },
        cb:function(obj){
        
            console.log(obj);
        }   
    });
    </script>
    
    
    
    
    </html>

## 简单轮播图 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    </head>
    <style>
    ul,ol,a{
        
        list-style: none;
        padding: 0;
        margin: 0;
        text-decoration: none;
        color:#000;
    }
    .carousel{
        
        width: 500px;
        height: 300px;
        border:1px solid #f00;
        position: relative;
    }
    .carousel ul,.carousel ul li,.carousel ul li a img{
        
        width: 500px;
        height: 300px;
    }
    .carousel ul li{
        
        display:none;
    }
    .carousel ul li.active{
        
        display:block;
    }
    .carousel>a{
        
        position: absolute;
        width: 20px;
        height: 40px;
        color:#fff;
        font-weight: bold;
        text-align: center;
        line-height:40px;
        font-size:18px;
        top:50%;
        transform: translateY(-50%);
        background-color: rgba(10,10,10,.5);
    }
    .carousel>a.leftBtn{
        
        left:0;
    }
    .carousel>a.rightBtn{
        
        right:0;
    }
    .carousel ol{
        
        width: 60px;
        height: 20px;
        background-color: rgba(255,255,255,.3);
        position: absolute;
        left:50%;
        transform: translateX(-50%);
        bottom:10px;
        border-radius:10px;
    }
    .carousel ol li{
        
        width: 10px;
        height: 10px;
        border-radius:50%;
        background-color: #999;
        float:left;
        margin:5px;
    }
    .carousel ol li.active{
        
        background-color: #aa0000;
    }   
    .carousel:hover{
        
        cursor: pointer;
    }
    </style>
    <body>
        <div class="carousel">
            <ul>
                <li class="active"><a href="#"><img src="./images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
            </ul>
            <ol>
                <li class="active"></li>
                <li></li>
                <li></li>
            </ol>
            <a href="javascript:;" class="leftBtn"><</a>
            <a href="javascript:;" class="rightBtn">></a>
        </div>
    </body>
    <script type="text/javascript">
    var index = 0;
    var timerId = null;
    $('a.rightBtn').click(function(){
        
        index++;
        if(index==$('ul li').length){
        
            index=0
        }
        $('ul li').eq(index).addClass('active').siblings().removeClass('active').parent().next().children().eq(index).addClass('active').siblings().removeClass('active')
    })
    $('a.leftBtn').click(function(){
        
        index--;
        if(index<0){
        
            index=$('ul li').length-1
        }
        $('ul li').eq(index).addClass('active').siblings().removeClass('active').parent().next().children().eq(index).addClass('active').siblings().removeClass('active')
    })
    $('ol li').click(function(){
        
        index = $(this).index()
        $('ul li').eq(index).addClass('active').siblings().removeClass('active').parent().next().children().eq(index).addClass('active').siblings().removeClass('active')
    })
    timerId = setInterval(function(){
        
        index++;
        if(index==$('ul li').length){
        
            index=0
        }
        $('ul li').eq(index).addClass('active').siblings().removeClass('active').parent().next().children().eq(index).addClass('active').siblings().removeClass('active')
    },1500)
    $('.carousel').hover(function(){
        
        clearInterval(timerId);
    },function(){
        
        timerId = setInterval(function(){
        
            index++;
            if(index==$('ul li').length){
        
                index=0
            }
            $('ul li').eq(index).addClass('active').siblings().removeClass('active').parent().next().children().eq(index).addClass('active').siblings().removeClass('active')
        },1500)
    })
    </script>
    </html>

## 创建元素和插入元素 ##

### 创建元素： ###

$("完整的标签");

$div = $("<div><b class='red'>标签</b></div>")

创建的的是伪数组

### 插入元素： ###

给父元素追加子元素

$('body').append($div);

把自己加给父元素：

$div.appendTo($("body"));

将子元素添加到父元素最前面：

$("body").prepend($div);

将自己添加到父元素的最前面：

$div.prependTo($("body"));

给自己的后面添加一个兄弟元素:

var $p = $("<p>段落</p>");
    $div.after($p);

将自己添加到某个父元素的后面：

$p.insertAfter($div);

自己的前面加上一个兄弟元素:

var $i = $("<i>倾斜</i>");
    $div.before($i);

将自己添加到某个元素的前面：

$i.insertBefore($input);

## 删除元素 ##

将自己内部清空：

$("div").empty();

连自己也删除：

$("div").remove();

## 替换元素 ##

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
    <script src="./js/jquery-3.5.1.js"></script>
    </head>
    <body>
    <div>
        盒子
        <p>
            段落
        </p>
    </div>
    
    <div>
        盒子
        <p>
            段落
        </p>
    </div>
    </body>
    <script type="text/javascript">
    // 替换 - 被替换的元素.replaceWith(新元素)
    // $('p').replaceWith($('<b>文字</b>'));
    
    // 替换 - 新元素.replaceAll(旧元素)
    // $('<b>文字</b>').replaceAll($('p'))
    
    </script>
    </html>

被替换的元素.replaceWith(新元素);
    新元素.replaceAll(被替换的元素);

## 复制元素 ##

clone - 元素.clone() - 默认可以复制出里面所有的内容

参数1：是否复制自己的事件，默认为false

参数2：是否复制子元素的事件，默认跟随第一个参数

特殊：如果参数1位false，参数给true也没有用的

## 元素的尺寸 ##

获取和设置元素的大小：

$div.Width(60);
    $idv.Hieght();

获取元素包含padding的大小(不能设置)：

$("div").innerWidth();$("div").innerHeigth();

包含边框的：

$("div").outerWidth();
    $("div").outerHeight();

包含外边距的：

$("div").outerWidth(true);
    $("div").outerHeight(true);

## 元素位置 ##

offset():能获取能设置

var $offset = $(".small").offset();

offset()设置大小(没设置过定位会默认加上定位)

$(".samll").offset({
        
        left:30,
        top:20
    })

只能获取位置：

$(".small").position();

获取滚动过的距离：

$(window).scroll(function(){
        
        var t = $(window).scrollTop();
        console.log(t);
    })

设置滚动过的距离：

$("button").click(function(){
        
        $(window).scrollTop(0)//设置
    })

## 动画 ##

隐藏方法：

$("#hide").click(function{
        
    	$("div").hide();                 
    })

显示方法：

$("#show").click(function(){
        
        $("div").show();
    })

结合体：

$("#toggle").click(function(){
        
        $("div").toggle(3000,"swing",function(){
        
            console.log("结束了");
        })
    })
    
    //参数1：完成时间
    //参数2：速度方式
    //参数3：动画结束后会执行回调函数

### 透明度式隐藏显示 ###

$("#hide").click(function(){
        
        $("div").fadeOut();//显示
        $("div").fadeIn();//隐藏
         // 参数1：用多少毫秒完成整个动画
    // // 参数2：速度方式
    // // 参数3：动画结束后会执行的回调函数
    // $('#toggle').click(function(){
        
    //     // 切换方法 - toggle
    //     // $('div').fadeToggle(3000,'swing',function(){
        
    //     //     console.log("结束了");
    //     // })
    //     // 运动到指定的透明度
    //     $('div').fadeTo(2000,0.2,'linear',function(){
        
    //         console.log("透明变化结束");
    //     })
    })

## 自定义运动 ##

$('.begin').click(function(){
        
        // 设置自定义动画： animate({ css的键值对 })
        // animte方法可以进行链式操作
        $('div').animate({
        
            left:400
        },3000,'linear',function(){
        
            
        }).animate({
        
            top:200
        },1000,'swing',function(){
        
            
        }).animate({
        
            left:0
        })
    })
    
    $('.end').click(function(){
        
        // 结束动画 - stop
        // $('div').stop(true)
    
        // finish
        // $('div').finish()
    })

# jquery和ajax #

## jquery的get请求 ##

格式：$.get(url,\[data\],\[callback\],\[datatype\]),datatype默认是text----返回字符串

data传入的方式可以是字符串可以是键值对，也可以是对象object

xml语法：

1.文件后缀必须是xml

2.xml要有文档声明 - 固定的

3.xml要有一个根标签 - xml中的所有的标签都是自定义

$.get("demo.php",function(res){
        
        console.log(res);
    })

## jquery里面的post请求 ##

参数和get请求一致

$("button").click(function(){
        
        $.post("demo.php",function(res){
        
            console.log(res);
        })
    })

## jquery里面的ajax请求 ##

可以get，post，jsonp

语法：

$.ajax(\{

url:"",

data:"",//字符串，对象

method/type:"",

datatype："",

success:res=>\{

\},

errro:()=>\{

\},

async:false，//是否同步，true异步

catch:true,//是否缓存

timeout：，//指定毫秒内完成

context://用来将ajax的回调函数中的this改成自己想要的对象

\})

<?php
    header("content-type:text/html;charset=utf8");
    // echo '给get请求响应这个字符串';
    echo json_encode(["age"=>12]);

<!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    </head>
    <body>
        <button>按钮</button>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script>
    var obj={
        
        meta:{
        
            status:101,
            msg:'请求超时了'
        },
        data:null
    }
    var body = document.querySelector("body");
    $('button').click(function(){
        
        $.ajax({
        
            url:'demo.php',
            type:'POST',
            // data:'age=12'
            data:{
        
                bbb:123
            },
            // async:false,
            success:function(res){
        
                console.log(this); // context=body;this就成了body
                console.log(res);
            },
            dataType:'json',
            // context:body, // 上下文，意思是可以将回调函数中的this改成想要的对象
            error:(obj,status,err)=>{
        
                console.log(obj,status,err);
                console.log("请求错误");
            },
            // timeout:1000, // 表示这次请求必须在指定的时间内完成，如果在这段时间内没有完成，就是超时错误
            cache:false // 表示是否用缓存
        })
    })
    </script>
    </html>

error()提供了三个参数：ajax对象(xhr)，status状态，错误信息

## jquery的jsonp ##

iconfont里面文件后缀：

svg:图片文件，和字体有关系

ttf:字体

woff2:字体文件

eot:压缩字库文件（字体文件）

js:请求js文件，response响应的是js代码（引入的文件，请求的图片 必定是GET请求）

css文件请求响应的是css文件里面的代码

dataType必须是jsonp才可以

## jquery的标识符 ##

jquery里面window.$ = window.jQuery = jQuery;

如果var $ = 789;就会覆盖

. n o C o n f l i c t ( ) / / 将 .noConflict()//将 .noConflict()//将的使用权交出去

参数为true时jquery的使用权一起被交出

可以使用自定义的符号接收这个函数的返回值，作为$的替代，可以避免和自己工具库的冲突

//自己的工具库如何封装

## jquery的扩展 ##

jquery没把所有功能都封装

不能修改原码：难找，服务器上用的是.min.js，和修改的不一样

jquery的操作方式有两种：给元素实用的，给自己使用的（$)

扩展方法：extend

jQuery.fn.extend({
        
        fn:function(){
        
            console.log(123);
        }
    })

### 给元素扩展函数： ###

$.fn.extend({
        
        checkAll:function(){
        
            //this代表的是input
            this.prop("checked",true);
        }
    })
    
    $("button").click(function(){
        
        $("input[type='checkbox']").checkAll();
    })

### 给自己扩展函数： ###

$.extend(function()\{

方法名称：函数，

方法名称，函数

\})

//数组去重
    $.noRepeat(arr);
    $.extend(
        noRepeat:function(arr){
        
        var brr = [arr[0]];
        for(var i =0;i <arr.length;i++){
        
            for(var j = 0 ; j <brr.length.;j++){
        
                if(brr[i] == arr[j]){
        
                    break;
                }
            }
            if(j ==brr.length){
        
                brr.push(arr[i]);
            }
        }
        return brr;
    })

## 表单验证插件 ##

http://www.htmleaf.com.jQuery

http://www.jq22.com

### 表单验证插件 ###

jquery-validation:认准菜鸟教程

上面的jquery-validation下载链接http://static.runoob.com/download/jquery-validation-1.14.0.zip，下载之后

按照下面的引入方式我们只需要jquery-validate.min.js即可

//引入
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.10.0/jquery.validate.min.js"></script>
    <script src="./dist/localization/messages_zh.js"></script>

菜鸟教程：

https://www.runoob.com/jquery/jquery-plugin-validate.html

按照菜鸟教程里面的案例练习

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    </head>
    
    <body>
        <form class="cmxform" id="commentForm" method="get" action="">
            <fieldset>
                <legend>输入您的名字，邮箱，URL，备注。</legend>
                <p>
                    <label for="cname">Name (必需, 最小两个字母)</label>
                    <input id="cname" name="name" minlength="2" type="text" required>
                </p>
                <p>
                    <label for="cemail">E-Mail (必需)</label>
                    <input id="cemail" type="email" name="email" required>
                </p>
                <p>
                    <label for="curl">URL (可选)</label>
                    <input id="curl" type="url" name="url">
                </p>
                <p>
                    <label for="ccomment">备注 (必需)</label>
                    <textarea id="ccomment" name="comment" required></textarea>
                </p>
                <p>
                    <input class="submit" type="submit" value="Submit">
                </p>
            </fieldset>
        </form>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.10.0/jquery.validate.min.js"></script>
    <script src="./dist/localization/messages_zh.js"></script>
    <script>
        $.validator.setDefaults({
        
            submitHandler: function () {
        
                //ajax提交写在这
                alert("提交事件!");
            }
        });
        $().ready(function () {
        
            $("#commentForm").validate();
        });
    </script>
    
    </html>

## 写一个表单验证 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    </head>
    
    <body>
        <center>
            <form action="">
                <table>
                    <caption>表单验证</caption>
                    <tr>
                        <td>用户名：</td>
                        <td><input type="text" name="username"></td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td><input type="password" name="password"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit"></td>
                    </tr>
                </table>
            </form>
        </center>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.10.0/jquery.validate.js"></script>
    <script src="./dist/localization/messages_zh.js"></script>
    <script>
        $("form").validate({
        
            rules: {
        //定义规则
                //键是name属性值，value是
                username: {
        //验证的只有一项可以是字符串，多就要对象
                    required: true,
                    maxlength: 6,
                    minlength: 3
                },
                password: {
        
                    required: true,
                    minlength: 6,
                    maxlength: 12
                }
            },
            message: {
        //自定义提示信息
                //这里的键值对需要和上面的键相对应（一致）
                username: {
        
                    required: "用户名不能为空",
                    maxlength: "最长是6位",
                    minlength: "最短是3位"
                },
                password: {
        
                    required: "密码不能为空",
                    minlength: "最短是6位",
                    maxlength: "最长是12位"
                }
            },
            submitHandler(form){
        //表单提交
                console.log(form);
            }
        });
    
    </script>
    
    <style>
        label.error{
        
            color: red;
            font-size: 12px;
            margin-left: 10px;
        }
    </style>
    </html>

## 颜色动画插件 ##

display和color是没有动画的

下载地址：自己搜jquery-color

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    </head>
    <style>
        div {
        
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
    
    <body>
        <button>颜色动画</button>
        <div></div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-color/2.0.0/jquery.color.min.js"></script>
    <script>
        $("button").click(function () {
        
            $("div").animate({
        
                backgroundColor:"#000"
            },3000)
        })
    </script>
    
    </html>

## 图片懒加载插件(不行) ##

jquery-lazyload插件

先引入：

将图片的src属性换成original-src属性，设置宽高

给图片加类名，便于控制

js中调用方法：

$('img').lazyload();

下面layui也有图片懒加载

## 时间控件： ##

laydate插件

https://www.layui.com/laydate/

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    </head>
    
    <body>
        <input type="text" id="test1">
        <input type="text" id="test2">
        <input type="text" id="test3">
        <input type="text" id="test4">
        <input type="text" id="test5">
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script src="./laydate/laydate.js"></script>
    <script>
        laydate.render({
        
            elem: '#test1' //指定元素
        });
    
    
    
        //年选择器
        laydate.render({
        
            elem: '#test2'
            , type: 'year'
        });
        //年月选择器
        laydate.render({
        
            elem: '#test3'
            , type: 'month'
        });
        //时间选择器
        laydate.render({
        
            elem: '#test4'
            , type: 'time'
        });
        //时间选择器
        laydate.render({
        
            elem: '#test5'
            , type: 'datetime',
            calendar:true//显示节日
            mark:{
        
            "0-10-4":"生日",//自己设置重要日子，0表示每年都这样
            "0-0-10":"工资"，//每个月10号发工资，写全具体哪一天
        }
        });
    
    </script>
    
    </html>

## 弹出层 ##

layui插件的layer.js或者layui.all.js

ewport" content=“width=device-width, initial-scale=1.0”>

颜色动画

\`\`\`

## 图片懒加载插件(不行) ##

jquery-lazyload插件

先引入：

将图片的src属性换成original-src属性，设置宽高

给图片加类名，便于控制

js中调用方法：

$('img').lazyload();

下面layui也有图片懒加载

## 时间控件： ##

laydate插件

https://www.layui.com/laydate/

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    </head>
    
    <body>
        <input type="text" id="test1">
        <input type="text" id="test2">
        <input type="text" id="test3">
        <input type="text" id="test4">
        <input type="text" id="test5">
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script src="./laydate/laydate.js"></script>
    <script>
        laydate.render({
        
            elem: '#test1' //指定元素
        });
    
    
    
        //年选择器
        laydate.render({
        
            elem: '#test2'
            , type: 'year'
        });
        //年月选择器
        laydate.render({
        
            elem: '#test3'
            , type: 'month'
        });
        //时间选择器
        laydate.render({
        
            elem: '#test4'
            , type: 'time'
        });
        //时间选择器
        laydate.render({
        
            elem: '#test5'
            , type: 'datetime',
            calendar:true//显示节日
            mark:{
        
            "0-10-4":"生日",//自己设置重要日子，0表示每年都这样
            "0-0-10":"工资"，//每个月10号发工资，写全具体哪一天
        }
        });
    
    </script>
    
    </html>

## 弹出层 ##

layui插件的layer.js或者layui.all.js

https://layer.layui.com/

补充：[bind方法：绑定事件的一种][bind]

[bind]: https://www.runoob.com/jquery/event-bind.html