关于jquery:day-30-jQuery

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 在线提供的库文件（稳固牢靠高速）

$ 是 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);

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"});

后辈选择器

空格

后辈：不只是子代

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

子代选择器

大于号

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

相邻选择器

加号

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

兄弟选择器

波浪号~

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

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

<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>

: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"});

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

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

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

: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 class="lazy" data-src="js/jQuery.js"></script>
<script type="text/javascript">
    // :hidden 选中暗藏的元素
    $("tr:hidden").css({backgroundColor:"red"});
    // :visible 扭转可见元素的款式
    $("tr:visible").css({backgroundColor:"green"});
</script>

jQuery 遍历，意为“挪动”，用于依据其绝对于其余元素的关系来“查找”（或选取）HTML 元素。以某项抉择开始，并沿着这个抉择挪动，直到到达您冀望的元素为止。

下图展现了一个家族树。通过 jQuery 遍历，您可能从被选（以后的）元素开始，轻松地在家族树中向上挪动（先人），向下挪动（子孙），程度挪动（同胞）。这种挪动被称为对 DOM 进行遍历。

图示解释：

兄弟节点之间的遍历

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 的孩子(父子关系)

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

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

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

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}
    })

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);
    });

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 class="lazy" data-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>

关于jquery:day-30-jQuery

1. 简介

特点：

作用：

如何引入 jQuery 包：

2. 用法

$(function(){})

包装集

1) 根底选择器

id 选择器

类选择器

标签选择器

群组选择器

通用选择器

2) 档次选择器

后辈选择器

子代选择器

相邻选择器

兄弟选择器

3) 属性选择器

4) 伪类选择器

5) 内容选择器

6) 可见性选择器

7) jQuery 的遍历

兄弟节点之间的遍历

父子节点间的遍历

3. 文本

4. 事件

5. 动画

根本动画：show hide toggle

滑块：slideDown slideUp slideToggle

淡入淡出：fadeIn fadeOut fadeToggle

自定义动画

Just My Socks（注册教程内含优惠码）

关于jquery:day-30-jQuery

1. 简介

特点：

作用：

如何引入 jQuery 包：

2. 用法

$(function(){})

包装集

1) 根底选择器

id 选择器

类选择器

标签选择器

群组选择器

通用选择器

2) 档次选择器

后辈选择器

子代选择器

相邻选择器

兄弟选择器

3) 属性选择器

4) 伪类选择器

5) 内容选择器

6) 可见性选择器

7) jQuery 的遍历

兄弟节点之间的遍历

父子节点间的遍历

3. 文本

4. 事件

5. 动画

根本动画：show hide toggle

滑块：slideDown slideUp slideToggle

淡入淡出：fadeIn fadeOut fadeToggle

自定义动画

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）