day 30 jQuery

1. 简介

jQuery是一个兼容多浏览器的javascript库(函数库)，核心理念是write less, do more(写得更少，做的更多)。

JQuery，顾名思义，就是JavaScript和查询 (Query)，即是辅助JavaScript开发的库。

特点：

Query 是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。

提供了强大的功能函数
解决浏览器兼容性问题
纠正错误的脚本知识
体积小，使用灵巧(只需引入一个js文件)
易扩展、插件丰富

作用：

程序员的角度：简化JavaScript和Ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。

用户体验的角度：改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页物资。

方便地选择页面元素(模仿CSS选择器更精确、灵活)
动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
控制响应事件(动态添加响应事件)
提供基本网页特效(提供已封装的网页特效方法)
快速实现通信(ajax)
如何引入jQuery包：

jQuery库文件不需要安装，只需使用 < script >标签引入到HTML文件中，拿到jQuery的库文件后，就跟自己写的JS文件同样的引入方式，即可，以下是几种引入方式：

1）引入本地的Jquery

2）引入cdn在线提供的库文件（稳定可靠高速）

2. 用法

$(function(){})

$是jQuery核心函数, 是jQuery的简写 jQuery == $
jQuery有自己的语法,它和原生是两套语法
$方法:是一个工厂模式的函数
$()相当于页面初始化函数，当页面加载完毕，会执行$()，即jQuery()
$(function(){ }) 是$(document).ready(function(){});的简写
$(document).ready(function(){})和window.onload 的区别：
- ready表示文档已加载完成（不包含图片等非文字媒体文件）
- onload 是指页面包含图片在内的所有元素都加载完成
- $(document).ready(function(){})要比 window.onload先执行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="box">123123</div>
    </body>
</html>
<script src="js/jQuery.js"></script>
<script type="text/javascript">
    // 类似于延迟加载
    $(function() {
        console.log("xixi");
    });

    //完全体
    $(document).ready(function() {
        // 原生dom
        let oBox = document.getElementById("box");
        console.log(oBox.innerHTML);

        //jQueryDom
        console.log($("#box").html());
    });
</script>

包装集

jQuery所获取的所有dom元素无论是一个还是一组，都封装成一个jQuery包装集，即集合。

jQuery包装集与DOM 对象的互转：

原生Dom -> jQueryDom
- 将原生对象放入 $(原生Dom) 如：document ---> $(document)
```
let oBox = document.getElementById("box");
console.log($(oBox).html());
```

jQueryDom -> 原生Dom

// 方法1:
let oBox = $("div").get(0);
// 方法2:
let oBox = $("div")[0];
console.log(oBox.innerHTML);

1) 基础选择器

id选择器

// 方法1:
// $("#box1").css("backgroundColor", "red");
// 方法2: 类似css代码
$("#box1").css({
    backgroundColor: "red"
});

类选择器

$(".box").css({backgroundColor: "red"});

标签选择器

$("p").css({color: "red"});

群组选择器

$("p,span,strong").css({color: "red"});

通用选择器

（这是选择全部元素）

$("*").css({backgroundColor: "green"});

1612511084450

2) 层次选择器

后代选择器

空格

后代：不只是子代

$("body div").css({backgroundColor: "red"});

子代选择器

大于号

$("body>div").css({backgroundColor: "red"});

相邻选择器

加号

$("#box1+div").css({backgroundColor: "red"});

兄弟选择器

波浪号~

$("#box2~div").css({backgroundColor: "red"});

3) 属性选择器

[属性名/属性名=属性值...]

<script type="text/javascript">
    // div带有class属性的选择器
    $("div[class]").css({backgroundColor:"red"});
    
    // div同时带有多个属性的选择器
    $("div[class][id]").css({backgroundColor:"red"});
    
    // 通过指定的属性值来获取元素
    $("div[id='box1']").css({backgroundColor:"red"});
</script>

4) 伪类选择器

:even 获取所有偶数行的元素

// 注意:从第0行开始
$("div:even").css({backgroundColor:"red"});

:odd 获取所有奇数行的元素

$("div:odd").css({backgroundColor:"red"});

:first 获取第0个元素

$("div:first").css({backgroundColor: "red"});

:last 获取最后一个元素

$("div:last").css({backgroundColor:"red"});

:eq(下标) 根据下标获取某个特定的元素

//写法1:
$("div:eq(2)").css({backgroundColor: "red"});
//写法2:
let n = 3;
$("div").eq(n).css({backgroundColor: "red"});

:not(目标元素) 除了某个元素

//写法1:
$("div:not('#box3')").css({backgroundColor: "red"});
//写法2:
$("div").not("#box3").css({backgroundColor: "red"});

:gt(n) 获取大于n的元素

$("div:gt(2)").css({backgroundColor:"skyblue"});

:lt(n) 获取小于n的元素

$("div:lt(2)").css({backgroundColor:"red"});

5) 内容选择器

:contains(内容) 根据元素的内容,获取元素

$("div:contains('hello world')").css({backgroundColor: "red"});

:empty 选中内容为空的元素,空格换行都不能有
```
$("div:empty").css({backgroundColor:"red"});
```
:has(选择器) 根据包含的元素来进行选择
```
$("div:has('span')").css({backgroundColor:"red"});
```

6) 可见性选择器

:hidden 选中隐藏的元素

:visible 改变可见元素的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table>
            <tr style="display:none">
                <td>Value 1</td>
            </tr>
            <tr>
                <td>Value 2</td>
            </tr>
        </table>
    </body>
</html>
<script referrerpolicy="no-referrer" src="js/jQuery.js"></script>
<script type="text/javascript">
    // :hidden 选中隐藏的元素
    $("tr:hidden").css({backgroundColor:"red"});
    // :visible 改变可见元素的样式
    $("tr:visible").css({backgroundColor:"green"});
</script>

7) jQuery的遍历

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

图示解释：

1612518658819

兄弟节点之间的遍历

next() 下一个兄弟
nextAll() 下面所有兄弟
prev() 上一个兄弟
prevAll() 上面所有

$("#box1").next().css({backgroundColor: "red"});//连缀模式
$("#box1").nextAll().css({backgroundColor: "red"});

父子节点间的遍历

parent() 找父节点

$("p").eq(1).parent().css({backgroundColor:"red"});

找子节点

find (必须写参数)

children (可以不写参数)

$("body").find("span").css({backgroundColor: "red"});
$("body").children().css({backgroundColor: "red"});//body的孩子(父子关系)

3. 文本

jQuery特点:关于读写的函数,通常都是一个,无参为读,有参为写。

innerHTML == html()
value == val()

<script type="text/javascript">
    // 读
    console.log($("div").html());
    // 写
    $("div").html(567);
    
    // 读
    console.log($("input").val());
    // 写
    $("input").val(888);    
</script>

4. 事件

Query的事件：

事件不需要带on;
可以传参数;
不用考虑兼容性;
this转jQuery的this this==$(this)

    $("#box").click(function(){
        //this要转成jQueryDom的this
        $(this).css({backgroundColor: "red"});
    })

传参：

    $("#box").click({name:"小明",age:18},function(evt){
        console.log(evt.data);//{name:"小明",age:18}
    })

5. 动画

jQueryDom对象.show([speed,[easing],[fn])；

等价于：jQueryDom对象.hide([时间]，[切换效果]，[回调函数]);

参数speed
- 即动画所需时间；
- 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)；
参数easing
- 用来指定切换效果，默认是"swing 摇摆"，可用参数"linear 线性"；
参数fn回调函数
- 在动画完成后执行的函数，每个元素执行一次；

举例：

    $('button').eq(0).click(function() {
        // 用1000毫秒将box元素隐藏，动画完成后执行回调，打印heihei
        //注意：动画需要时间，是异步，异步完成后再执行回调函数
        $("#box").hide(1000, function() {
            console.log('heihei');
        })
    });

//做一些奇奇怪怪的事情
    $("button").eq(2).click(function() {
        // 回调
        $("#box").fadeToggle(1000, arguments.callee);
    });

基本动画：show hide toggle

滑块：slideDown slideUp slideToggle

淡入淡出：fadeIn fadeOut fadeToggle

自定义动画

animate(params,[speed],[easing],[fn]) 等价于animate（数据,时间,[切换效果],回调函数）
stop([clearQueue],[jumpToEnd])
- clearQueue: 如果设置成true，则清空队列。可以立即结束动画
- jumpToEnd: 如果设置成true，则完成队列。可以立即完成动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box {
                width: 200px;
                height: 200px;
                background-color: pink;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <button type="button">变形</button>
        <button type="button">停止</button>
        <div id="box">

        </div>
    </body>
</html>
<script referrerpolicy="no-referrer" src='jQuery.js'></script>
<script type="text/javascript">
    $("button").eq(0).click(function() {
        //连缀模式
        $("#box").animate({
            height: 100,
            width: "300px",
            left: 1000
        }, 1000, function() {
            console.log(1);
        }).animate({
            top: 600
        }, 2000, function() {
            console.log(2);
        }).animate({
            left: 0
        }, 2000, function() {
            console.log(3);
        }).animate({
            top: 50
        }, 2000, function() {
            console.log(4);
        });
    });

    $("button").eq(1).click(function() {
        // 结束当前动画,其他动画正常执行 
        // $("#box").stop();//无参默认为两个false

        // 停止所有动画队列
        // $("#box").stop(true,false);

        //立即执行完当前动画，其他动画正常执行 
        // $("#box").stop(false,true);

        //立即执行完当前动画，并清空动画队列
        $("#box").stop(true, true);
    });
</script>

案例：手风琴

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                width: 500px;
                height: 150px;
                background-color: #FFC0CB;
                margin: auto;
                /* position: relative; */
            }

            li {
                list-style: none;
                float: left;
                width: 40px;
                height: 150px;
                overflow: hidden;
                border: 1px solid black;


            }

            img {
                height: 150px;
                width: 240px;
                background-size: 240px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                ![](img/1.jpg)
            </li>
            <li>
                ![](img/2.jpg)
            </li>
            <li>
                ![](img/3.jpg)
            </li>
            <li>
                ![](img/4.jpg)
            </li>
            <li>
                ![](img/5.jpg)
            </li>
        </ul>
    </body>
</html>
<script src="jQuery.js"></script>
<script type="text/javascript">
    $('li').mouseover(function() {
        $(this).stop().animate({
            width: 240
        }).siblings('li').stop().animate({
            width: 40
        });
    });
</script>