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

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

7) jQuery的遍历

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

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

自定义动画

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

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

自定义动画

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复