jQuery学习---这一篇就够了

最新推荐文章于 2022-09-16 14:43:31 发布

Ting7亭子

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量1.1k

点赞数 3

分类专栏：前端学习基础--计算机基础、HTML、CSS、JS 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_36932169/article/details/122423760

版权

前端学习基础--计算机基础、HTML、CSS、JS 专栏收录该内容

8 篇文章 13 订阅

订阅专栏

1 初识jQuery

官方文档可进行查看学习：http://hemin.cn/jq/.

1.1 jQuery是什么？

jQuery是一款优秀的JavaScript库，从命名可以看出jQuery最主要的用途是用来做查询（jQuery=js+Query）.
在jQuery官方Logo下方还有一个副标题（write less, do more）, 体现了jQuery除了查询以外,还能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单

1.1.1 体验jQuery

原生JS设置背景

<script>
// 查询
    var div = document.getElementsByTagName("div");
    var one = document.getElementsByClassName("one");
    var two = document.getElementById("two");
// 操作css
    div[0].style.backgroundColor = "red";
    one[0].style.backgroundColor = "yellow";
    two.style.backgroundColor = "blue";
</script>

使用jQuery设置背景

<script>
  $(document).ready(function () {
// 查询，操作CSS一步到位
      $("div").eq(0).css('background', 'red');
      $(".one").eq(0).css('background', 'yellow');
      $("#two").css('background', 'blue');
  });
</script>

1.1.2 为什么要使用jQuery

1 强大选择器: 方便快速查找DOM元素，（如上面实例所展示一样，通过jQuery查找DOM元素要比原生js快捷很多； jQuery允许开发者使用CSS1-CSS3几乎所有的选择器,以及jQuery独创的选择器）
2 链式调用: 可以通过.不断调用jQuery对象的方法（如上面实例所展示一样，jQuery可以通过.（点）.不断调用jQuery对象的方法，而原生JavaScript则不一定）

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
    // 报错,必须分开写
    div[0].style.backgroundColor = "red".width = 200+"px";
//    div[0].style.width = 200+"px";
    
    // 2.jQuery
    $(document).ready(function () {
    // 不报错,后面还可以接着继续写
        $("div").eq(1).css('background', 'yellow').css('width', '200px');
    }); 
</script>

3 隐式遍历(迭代): 一次操作多个元素

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
//    div.style.backgroundColor = "red";// 无效
    for(var i = 0; i<div.length; i++){
        div[i].style.backgroundColor = "red";
    }

    // 2.jQuery
    $(document).ready(function () {
        // 隐式遍历(迭代)找到的所有div
        $("div").css('background', 'yellow');
    });
</script>

4 读写合一: 读数据/写数据使用是一个函数

<script>
    $(document).ready(function () {
        // 读取数据
        var $tx = $("div").eq(0).text();
        alert($tx);
        // 写入数据
        $("div").eq(0).text("新的数据");
    });
</script>

事件处理
DOM操作(C增U改D删)
样式操作
动画
丰富的插件支持
浏览器兼容(前端开发者痛点)

1.1.3 版本选择

应该选择几点几版本jQuery?
查看百度网页源码使用1.x
查看腾讯网页源码使用1.x
查看京东网页源码使用1.x
综上所述学习1.x,选择1.x
应该使用开发板还是生产版?
开发板: 所有代码没有经过压缩,体积更大(200-300KB)
生产版:所有代码经过压缩,提及更小(30-40KB)
初学者为了更好的理解jQuery编码时使用开发板,项目上线时为了提升访问速度使用生产版

1.2 如何使用jQuery？

1.下载jQuery库：下载地址: http://code.jquery.com/
2.引入下载的jQuery库： <script src="code/js/jquery-1.12.4.js"></script>
3.编写jQuery代码

<script>
    $(document).ready(function () {
      // 所有jQuery代码写在这里面
         alert("hello LNJ");
    });
</script>

1.3 jQuery入口函数

1.3.1 jQuery与JavaScript加载模式对比

1 多个window.onload只会执行一次, 后面的会覆盖前面的

<script>
        window.onload = function () {
            alert("hello lnj1"); // 不会显示
        }
        window.onload = function () {
            alert("hello lnj2"); // 会显示
        }
</script>

2 多个$(document).ready()会执行多次,后面的不会覆盖前面的

<script>
        $(document).ready(function () {
            alert("hello lnj1"); //会显示
        });
        $(document).ready(function () {
            alert("hello lnj2"); // 会显示
        });
</script>

3 不会覆盖的本质(了解,后面jQuery原理会详细讲解)
jQuery框架本质是一个闭包,每次执行我们都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰

<script>
        // 相当于这样写
        var test1 = function () {
            alert("hello lnj1");
        }
        var test2 = function () {
            alert("hello lnj2");
        }
        $(document).ready(test1);
        $(document).ready(test2);
</script>

<script>
        var test3 = function () {
            var abc = "123";
//            因为在同一个函数中,所以456覆盖123
//            var abc = "456"; 
            alert(abc);
        }
        test3();
        var test4 = function () {
            // 因为在不同函数中,所以不会影响
            var abc = "456"; 
            alert(abc);
        }
        test4();
</script>

	window.onload	$(document).ready( )
执行时机	必须等待网页全部加载完毕(包括图片等),然后再执行包裹代码	只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码
执行次数	只能执行一次,如果第二次,那么第一次的执行会被覆盖	可以执行多次,第N次都不会被上一次覆盖
简写方案	无	$(function () { });

1.3.2 为什么我们能访问$符号?

因为$符号jQuery框架对外暴露的一个全局变量
JavaScript中如何定义一个全局变量?所有全局变量是 window 对象的属性

        function test () {
            var customValue = 998;
            alert(customValue);
//            1.没有如下代码customValue就不是一个全局变量,函数执行完毕之后
//            customValue会被自动释放,test函数以外的地方访问不到customValue
//            2.加上如下代码之后customValue就会变成一个全局变量,函数执行完毕也不
//            会被释放,test函数以外的地方可以访问customValue
//            window.customValue = customValue;
        }
        test();
        alert(customValue);
        ```
        所以jQuery框架源码实现    `window.jQuery = window.$ = jQuery;`
        所以想要使用jQuery框架只有两种方式,一种是通过$,一种是通过jQuery
   -  jQuery入口函数的其它编写方式如下
          ```
        <script>
        // 方式一
        $(document).ready(function () {
            alert("hello lnj");
        });
        // 方式二
        $(function () {
            alert("hello lnj");
        });
        // 方式三
        jQuery(document).ready(function () {
            alert("hello lnj");
        });
        // 方式四
        jQuery(function () {
            alert("hello lnj");
        });
</script>

解决$符号冲突问题
为什么是window.jQuery = window.$ = jQuery;,而不是window.jQuery = jQuery;

jQuery框架之所以提供了jQuery访问还提供$访问,就是为了提升开发者的编码效率
$符号冲突怎么办?
很多js的框架都提供了类似jQuery这样的便捷访问方式,所以很有可能某一天我们在使用多个框架的时,多个框架作者提供的便捷访问方式冲突(A框架通过$访问,B框架也通过$访问)

1释放$使用权:当便捷访问符号发生冲突时,我们可以释放$使用权, 释放之后只能使用jQuery

<script>
       // 在使用jQuery之前指定自定义符号
       jQuery.noConflict();
       // 使用 jQuery
       jQuery("div p").hide();
       // 使用其他库的 $()
       $("content").style.display = 'none';
</script>

2 自定义便捷访问符号
当便捷访问符号发生冲突时,我们可以自定义便捷访问符号

<script>
       // 在使用jQuery之前指定自定义符号
       var nj = jQuery.noConflict();
       // 和使用$一样通过自定义符号调用jQuery
       nj(function () {
           alert("hello lnj");
       });
</script>

2 jQuery核心函数

从jQuery文档中可以看出,jQuery核心函数一共3大类4小类

2.1 核心函数

1 jQuery(callback):当DOM加载完成后执行传入的回调函数

<script>
        $(function () {
            alert("123");
        });
</script>

2 jQuery([sel,[context]]):接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素,并包装成jQuery对象

<script>
        $(function () {
            // 利用jquery获取所有div,得到的是一个jQuery对象
            var $box = $("div");
            console.log($box);

            // 利用js原生语法获取所有div,得到的是一个js对象
            var box = document.getElementsByTagName("div");
            console.log(box);
        });
</script>

3 原生JS对象和jQuery对象相互转换:

<script>
        $(function () {
            var $box = $("#box");
//            $box.text("新的数据");
//            jQuery对象不能使用原生js对象的方法
//            $box.innerText = "新的数据";
//            将jQuery对象转换为原生js对象
//            注意: 不是eq(0),eq函数返回的是jQuery类型对象,get函数返回的是原生类型对象
//            var box = $box.get(0);
            var box = $box[0];
            box.innerText = "新的数据";

            var box2 = document.getElementById("box");
//            原生js对象不能使用jQuery对象的方法
//            box2.text("新的数据2");
//            原生js对象只能使用原生的js方法
//            box2.innerText = "新的数据2";

//            将原生js对象转换为jQuery对象
            var $box2 = $(box);
           $box2.text("新的数据2");
        });
</script>

Tips:为了方便开发者之间沟通和阅读,一般情况下所有jQuery操作相关的变量前面加上$
4 jQuery(html,[ownerDoc]):根据 HTML 标记字符串，动态创建DOM 元素

<script>
        $(function () {
            var $eles = $("<p>我是span</p><u>我是u</u>");
            // 无论是jQuery找到的还是创建的,我们最终拿到的永远都是jQuery对象
            console.log($eles);
            // 将创建好的DOM元素添加到body中
            $("body").append($eles);
        });
</script>

2.2 jQuery对象

jQuery对象的本质是什么?
jQuery对象的本质是一个伪数组

var $div = $("div");
console.log($div);

var arr = [1, 3, 5];
console.log(arr);

什么是伪数组?有0到length-1的属性，并且有length属性
var obj = {0:"lnj", 1:"33", 2:"male", length: 3}

2.3 jQuery静态方法

什么是静态方法?
静态方法对应的是对象方法,对象方法用实例对象调用,而静态方法用类名调用

<script>
        window.onload = function () {
            function AClass(){}
            AClass.staticMethof = function(){
                alert('静态方法');
            }
            AClass.prototype.instaceMethod = function(){
                alert('实例方法');
            }
            //静态方法用类名直接调用
            AClass.staticMethof(); 

            //实例方法必须用类的实例对象调用
            var instace = new AClass();
            instace.instaceMethod();
        }
</script>

2.2.1 jQuery.holdReady(hold)

暂停或者恢复jQuery.ready()事件;传入true或false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-jQuery静态方法</title>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        // 使用$直接调用,是静态方法
        $.holdReady(true);
        $(function () {
            $("#first").click(function () {
                alert("我是你想要的弹窗");
            });
        });
    </script>
</head>
<body>
<button id="first">点击测试弹出</button>
<button id="second">解除延迟</button>
<script>
    $("#second").click(function(){
        $.holdReady(false);
    });
</script>
</body>
</html>

2.2.2 $.each(object,[callback])

遍历对象或数组,优点统一遍历对象和数组的方式,回调参数的顺序更符合我们的思维模式

<script>
        $(function () {
            // 3.1遍历数组
            var arr = [1, 3, 5, 7, 9];
            // 3.1.1通过原生方法遍历数组
            // 第一个回调函数参数是遍历到的元素
            // 第二个回调函数参数是当前遍历的索引
            // 返回值: 没有返回值
            var res = arr.forEach(function (ele, idx) {
                console.log(idx, ele);
            });
            console.log(res);
            
            // 3.1.2通过jQuery静态方法遍历数组
            // 第一个回调函数参数是当前遍历的索引
            // 第二个回调函数参数是遍历到的元素
            // 返回值: 被遍历的数组
            var $res2 = $.each(arr, function (idx, ele) {
                console.log(idx, ele);
            });
            console.log($res2);

            // 3.2遍历对象
            var obj = {name: "lnj", age:"33", gender:"male"};
            // 3.2.1js对象没有forEach方法,所以通过forin方法遍历对象
            for(var key in obj){
                console.log(key, obj[key]);
            }
            // 3.2.2通过jQuery静态方法遍历对象
            $.each(obj,function (key, value) {
                console.log(key, value);
            });
        });
    </script>

2.2.3 $.map(arr|obj,callback)

遍历对象或数组,将回调函数的返回值组成一个新的数组返回

       $(function () {
            // 4.1遍历数组
            var arr = [1, 3, 5, 7, 9];
            // 4.1.1通过原生方法遍历数组
            // 第一个回调函数参数是遍历到的元素
            // 第二个回调函数参数是当前遍历的索引
            // 第三个回调函数参数是当前被遍历的数组
            // 返回值: 将回调函数返回值收集起来组成一个新的数组
            var res = arr.map(function (ele, idx, arr) {
                console.log(idx, ele, arr);
                return ele + idx;
            });
            console.log(res);
            
            // 4.1.2通过jQuery静态方法遍历数组
            // 第一个回调函数参数是遍历到的元素
            // 第二个回调函数参数是当前遍历的索引
            // 返回值: 将回调函数返回值收集起来组成一个新的数组
            var $res2 = $.map(arr, function (ele,idx) {
                console.log(idx, ele);
                return ele + idx;
            });
            console.log($res2);

            // 4.2遍历对象
            var obj = {name: "lnj", age:"33", gender:"male"};
            /*
            obj.map(function (ele, idx, obj) {
                // 报错,原生JS没有map方法
                console.log(idx, ele, obj);
            });
            */
            var $res = $.map(obj, function (value, key) {
                console.log(key, value);
                return key + value;
            });
            console.log($res);
        });

2.2.4 $.trim(str)

去掉字符串起始和结尾的空格。

<script>
        $(function () {
            var str = "   lnj   ";
            console.log("---"+str+"---");
            var $res = $.trim(str);
            console.log("---"+$res+"---");
        });
</script>

2.2.5 $.isArray(obj)

判断是否是数组

<script>
        $(function () {
            // 对象
            var obj = {name:"lnj",age: "33", gender:"male"};
            // 真数组
            var arr = [1, 3, 5, 7, 9];
            var $res = $.isArray(obj);
            console.log($res);// false
            var $res2 = $.isArray(arr);
            console.log($res2);// true
        });
</script>

2.2.6 $.isFunction(obj)

判断是否是函数

<script>
        $(function () {
            var obj = {name:"lnj",age: "33", gender:"male"};
            var arr = [1, 3, 5, 7, 9];
            var fn = function () {}
            var $res = $.isFunction(obj);
            console.log($res);// false
            $res = $.isFunction(arr);
            console.log($res);
            $res = $.isFunction(fn);
            console.log($res);
            // 通过该方法验证了我们前面所说的,jQuery框架本质是一个匿名函数
            $res = $.isFunction($);
            console.log($res);
        });
</script>

2.2.7 $.isWindow(obj)

判断是否是window对象
<script>
        $(function () {
            var obj = window;
            var arr = [1, 3, 5, 7, 9];
            var arrlike = {0:"zs", 1:"ls", length:2};
            var $res = $.isWindow(obj);
            console.log($res); // true
            $res = $.isWindow(arr);
            console.log($res); // false
            $res = $.isWindow(arrlike);
            console.log($res); // false
        });
</script>

3 选择器

3.1 基础选择器

选择器	名称	描述	返回	示例
#id	id选择器	根据给定的id匹配一个元素	单个元素	$("#box");选取id为box元素
.class	类选择器	根据给定的类名匹配元素	集合元素	$(".box");选取所有类名为box元素
element	元素选择器	根据给定的元素名称匹配元素	集合元素	$(“p”);选取所有元素
*	通配符选择器	匹配所有元素	集合元素	$("*");选取所有元素
selector1,selector2,selectorN	并集选择器	将所有选择器匹配到的元素合并后一起返回	集合元素	$(“div,p,.box”);

3.2 层次选择器

选择器	名称	描述	返回	示例
$(“ancestor descendant”)	后代选择器	选取ancestor元素的所有descendant后代标签(不光是儿子,包括孙子/重孙子等)	集合元素	$(“div span”);选取元素里所有的元素
$(“parent > child”)	子元素选择器	找到选取parent 元素中所有直接子元素child(只有儿子,不包括孙子/重孙子等)	集合元素	$(“div>span”);选取元素下元素名称是的子元素
$(“prev + next”)	相邻兄弟选择器	选取prev元素后面紧跟的那个next元素	集合元素	$(".one+div");选取类名为one的下一个同级的元素
$(“prev ~ siblings”)	通用兄弟选择器	选取prev元素后面的所有next元素	集合元素	$("#two~div");选取id名为two元素后面所有同级的元素

3.3 序选择器

3.4 属性选择器

3.5 内容过滤选择器

选择器	描述	返回
:empty	选取不包含子元素或文本为空的元素	集合元素
:parent	选取含有子元素或文本的元素	集合元素
:contains(text)	选取含有文本内容为text的元素	集合元素
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素

:empty

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery选择器</title>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           // 找到所有div中不包含文本内容或子元素的元素
            var $res = $("div:empty");
            console.log($res.length); // 找到1个元素
            $res.each(function (idx,ele) {
                console.log(idx, ele); // one
            });
        });
    </script>
</head>
<body>
<div class="one"></div>
<div class="two">zs</div><!--包含内容不会被找到-->
<div class="three"><!--包含子元素不会被找到-->
    <span>lnj</span>
</div>
<span class="five"></span><!--不是指定元素不会被找到-->
</body>
</html>

:parent

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>05-jQuery选择器</title>
   <script src="代码/js/jquery-1.12.4.js"></script>
   <script>
       $(function () {
          // 找到所有div中包含文本内容或子元素的元素
           var $res = $("div:parent");
           console.log($res.length);
           $res.each(function (idx, ele) {
               console.log(idx, ele);
           });
       });
   </script>
</head>
<body>
<div class="one"></div>
<div class="two">zs</div><!--有文本内容会被找到-->
<div class="three"><!--有子元素会被找到-->
   <span>lnj</span>
</div>
<span class="five"></span>
</body>
</html>

:contains(text)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery选择器</title>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 找到所有div中包含文本内容为lnj的元素
            var $res = $("div:contains('lnj')");
            console.log($res.length);// 找到2个元素
            $res.each(function (idx, ele) {
                console.log(idx, ele);// one,three,four
            })
        });
    </script>
</head>
<body>
<div class="one">lnj</div>
<div class="two">zs</div>
<div class="three">lnj</div>
<div class="four"><!--子元素中包含该文本也会被找到-->
    <span>lnj</span>
</div>
<span class="five"></span>
</body>
</html>

:has(selector)
和:parent区别,parent只要有子元素就会被找到,:has(selector)不仅要有子元素,而且子元素还必须满足我们的条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery选择器</title>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 找到所有div中包含后代元素为span的元素
            var $res = $("div:has('span')");
            console.log($res.length);
            $res.each(function (idx, ele) {
                console.log(idx, ele);
            });
        });
    </script>
</head>
<body>
<div class="one"> <!--后代中包含span元素会被找到-->
    <span>jjj</span>
</div>
<div class="two"><!--后代中不包含span元素不会被找到-->
    <p>zs</p>
</div>
<div class="three"><!--后代中包含span元素会被找到-->
    <p>
        <span>lnj</span>
    </p>
</div>
</body>
</html>

4 属性相关

4.1 属性和属性节点

4.1.1 什么是属性?

属性就是对象身上的变量
只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)

<script>
            // 1.自定义一个对象
            var obj = {};
            console.log(obj);
            // 2.动态给自定义对象添加属性
            obj.name = "lnj"; // name就是对象obj的一个属性
            obj.age = 33; // age就是对象obj的一个属性
            console.log(obj);
</script>

在这里插入图片描述

4.1.2 什么是属性节点?

在html中编写的所有标签，里面的属性都是属性节点
<span class = 'box' nj = '666'></span> // 这里的class和nj就是属性节点
在这里插入图片描述

4.2 如何操作属性和属性节点

4.2.1 如果操作属性?

添加或修改属性(没有就会添加,有就会修改)
对象.属性名称 = 值;
对象[“属性名称”] = 值;
获取属性
对象.属性名称
对象[“属性名称”]

4.2.2 如何操作属性节点?

获取属性节点
DOM对象.getAttribute(“属性节点名称”)
设置属性节点
DOM对象.setAttribute(“属性节点名称”, “值”);

4.3 jQuery中的attr和prop方法

4.3.1 attr(name|pro|key,val|fn)方法

用于设置或获取属性节点的值

<script>
        $(function () {
            // 1.获取指定属性节点值
            var $res = $(".span1").attr("nj");
            console.log($res);
            // 2.设置属性节点
            $(".span1").attr("nj", "666");
            $(".span2").attr("id", "box1 box2");

            // 3.注意点:
            // 3.1.获取属性节点时,只会获取找到所有元素中第一个元素的属性节点
            $res = $("span").attr("class");
            console.log($res);
             $("span").attr("class", "lnj");
        });
</script>

4.3.2 removeAttr(name)方法

用于删除指定属性节点

<script>
        $(function () {
            // 1.设置属性节点时,会给所有找到元素设置属性节点
            $("span").attr("test", "jonathan");
            // 2.删除属性节点时,会删除所有找到元素的属性节点
            $("span").removeAttr("test");
        });
</script>

4.3.3 prop(n|p|k,v|f)方法

用于设置或者获取元素的属性值

<script>
        $(function () {
            // 1.设置属性
            // 1.1.设置属性时,会设置所有找到元素的属性
            $("span").prop("demo", "lnj");
            // 2.获取属性
            // 2.1.获取属性时,只会获取找到第一个元素的属性
            console.log($("span").prop("demo"));
        });
</script>

4.3.4 removeProp(name)方法

<script>
        $(function () {
            // 删除所有找到元素的demo属性
            $("span").removeProp("demo");
        });
</script>

4.3.5 attr方法和prop方法区别

既然所有的DOM对象，都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr(),因为如果具有 true 和 false 两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false

<script>
        $(function () {
            // 1.可以通过prop获取属性节点
            console.log($("input").prop("class"));
            // 2.可以通过prop设置属性节点
            $("input").prop("class", "tag");

            // 3.如果没有默认值,那么attr获取返回undefined
//            console.log($("input[type=checkbox]").attr("checked"));
            // 4.如果没有默认值,那么prop获取返回false
            console.log($("input[type=checkbox]").prop("checked"));
            // 5.通过attr设置选中
//            $("input[type=checkbox]").attr("checked", true);
            
            // 6.通过prop设置选中
            $("input[type=checkbox]").prop("checked", true)

        });
</script>

4.4 jQuery增删Class

jQuery CSS类相关方法都是用于操作DOM对象的class属性节点的值

4.4.1 addClass(class|fn)

给元素添加一个或多个类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-jQueryCSS类</title>
    <style>
        .class1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .class2{
            border: 5px solid #000;
        }
    </style>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           $("button").eq(0).click(function () {
               // 1.添加一个类
//               $("div").addClass("class1");
               // 2.再添加一个类
//               $("div").addClass("class2");
               // 3.一次性添加多个类(用空格隔开)
               $("div").addClass("class1 class2");
           });
        });
    </script>
</head>
<body>
<button>添加</button>
<button>删除</button>
<button>切换</button>
<div></div>
</body>
</html>

4.4.2 removeClass([class|fn])

删除元素的一个或多个类

<script>
        $(function () {
            $("button").eq(1).click(function () {
                // 4.删除一个类
//                $("div").removeClass("class2");
                // 5.再删除一个类
//                $("div").removeClass("class1");
                // 6.一次性删除多个类(用空格隔开)
                $("div").removeClass("class1 class2");

            });
        });
</script>

4.4.3 toggleClass(class|fn[,sw])

添加或删除一个类(存在就删除不存在就添加)

<script>
        $(function () {
            $("button").eq(2).click(function () {
                // 7.切换一个类
//                $("div").toggleClass("class2");
                // 8.切换多个类
                $("div").toggleClass("class1 class2");
            });
        });
    </script>

4.5 jQuery代码/文本/值

4.5.1 html([val|fn])

添加或获取元素中的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-jQuery代码文本值</title>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            var $btns = $("button");
            var $div = $("div");
            $btns.eq(0).click(function () {
                // 1.添加html, 相当于innerHTML
//                $div.html("<p>我是p标签</p>");
//                $div.html("<p><span>我是span标签</span></p>");
                $div.html("我是文本");
            });
            $btns.eq(1).click(function () {
                // 2.获取html
                console.log($div.html());
            });
        });
    </script>
</head>
<body>
<button>添加html</button>
<button>获取html</button>
<button>添加文本</button>
<button>获取文本</button>
<div></div>
</body>
</html>

4.5.2 text([val|fn])

添加或获取元素中的文本:text方法能做的html方法都能做,所以一般使用html方法即可

<script>
        $(function () {
            $btns.eq(2).click(function () {
                // 3.添加文本, 相当于innerText
                // 如下内容不会被转换为标签
//                $div.text('<p>我是段落</p>');
               $div.text('我是文本');
            });
            $btns.eq(3).click(function () {
                // 4.获取文本
                console.log($div.text());
            });
</script>

4.5.3 val([val|fn|arr])

添加或获取元素value属性的值

<script>
        $(function () {
            $btns.eq(4).click(function () {
                // 4.添加value值
                $("input").val("我是一个输入框");
            });
            $btns.eq(5).click(function () {
                // 4.获取value值
                console.log($("input").val());
            });
        });
</script>

5 CSS操作

5.1 jQuery操作CSS样式

css(name|pro|[,val|fn])方法:用于设置或获取元素CSS样式

格式1:DOM元素.css("样式名称", "值");
格式2:DOM元素.css({"样式名称1":"值1","样式名称2":"值2"});

    <script>
        $(function () {
            $("button").click(function () {
                // 1.单个样式设置
//                $("div").css("width", "100px");
//                $("div").css("height", "100px");
//                $("div").css("background", "red");

                // 2.链式设置样式
//                $("div").css("width", "100px").css("height", "100px").css("background", "red");

                // 3.传入对象一次性设置样式
                $("div").css({
                   "width":"100px",
                    "height":"100px",
                    "background":"blue"
                });

                // 4.获取指定样式的值
                console.log($("div").css("width"));
            });
        });
    </script>

5.2 jQuery操作元素尺寸

5.2.1 width([val|fn])方法

设置或获取元素宽度(相当于获取width属性值)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-jQuery操作位置和尺寸</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 250px;
            height: 250px;
            background-color: red;
            margin-left: 50px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 1.获取元素宽度(不包括padding和border)
//                alert($('.son').width());
            });
            $("button").eq(1).click(function () {
                // 2.设置元素宽度(不包括padding和border)
//                $(".son").width("50px");
            });
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>

5.2.2 height([val|fn])方法

设置或获取元素宽度(相当于获取height属性值)

5.2.3 innerHeight()/innerWidth()

5.2.4 outerHeight/outerWidth()

5.3 jQuery操作元素位置

5.3.1 offset([coordinates])

获取或设置元素相对窗口的偏移位

    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 1.获取距离窗口的偏移位(从border开始)
                alert($('.son').offset().left); // 100
            });
            $("button").eq(1).click(function () {
                // 2.设置距离窗口的偏移位
                $('.son').offset({left:10, top:10});
            });
        });
    </script>

5.3.2 position()

获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离

   <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 1.获取匹配元素相对父元素的偏移
                alert($('.son').position().left);// 50
            });
            $("button").eq(1).click(function () {
                // 2.无效,不能设置相对定位元素的偏移位
                $('.son').position({left:10, top:10})
            });
        });
    </script>

5.3.3 scrollTop([val])

设置或获取匹配元素相对滚动条顶部的偏移。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-jQuery操作位置</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            margin-top: 100px;
            margin-left: 100px;
            width: 100px;
            height: 200px;
            border: 1px solid #000;
            overflow: auto;
        }
    </style>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 7.获取匹配元素相对滚动条顶部的偏移
//                alert($('.scroll').scrollTop());
//                alert($('html').scrollTop());
                // 兼容所有浏览器写法
                alert($('html').scrollTop()+$('body').scrollTop());
            });
            $("button").eq(1).click(function () {
                // 8.设置匹配元素相对滚动条顶部的偏移
//                $('.scroll').scrollTop(100);
//                $('html').scrollTop(100);
                // 兼容所有浏览器写法
                $('html,body').scrollTop(100);
            });
        });
    </script>
</head>
<body>
<div class="scroll">
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
<button>获取</button>
<button>设置</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>

5.3.4 scrollLeft([val])

6 事件处理

6.1 事件绑定

jQuery中事件绑定有两种方式
1 eventName(function(){})
绑定对应事件名的监听, 例如：$('#div').click(function(){});
2 on(eventName, funcion(){})
通用的绑定事件监听, 例如：$('#div').on('click', function(){});

优缺点:
eventName: 编码方便, 但有的事件监听不支持
on: 编码不方便, 但更通用

企业开发中如何选择?能用eventName就用eventName, 不能用eventName就用on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-jQuery事件绑定和解绑</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
            overflow: hidden;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            margin-top: 50px;
            margin-left: 50px;
        }
    </style>
    <script src="../day01/代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            // 1.通过eventName绑定事件
            $(".son").click(function () {
                alert("son");
            });
            // 2.通过on绑定事件
           $(".son").on("click", function () {
               alert("son");
           });
             */

            // 2.可以多次添加相同类型的监听,后面添加不会覆盖前面添加
            function test1() {
                alert("son1");
            }
            function test2() {
                alert("son2");
            }
            function test3() {
                alert("son3");
            }
            $(".son").click(test1);
            $(".son").click(test2);
            $(".son").on("mouseleave", test3);
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

6.2 事件解绑

jQuery中可以通过off(eventName,function);解绑事件

<script>
        $(function () {
            function test1() {
                alert("son1");
            }
            function test2() {
                alert("son2");
            }
            function test3() {
                alert("son3");
            }
            $(".son").click(test1);
            $(".son").click(test2);
            $(".son").on("mouseleave", test3);

            // 1.1不传入任何参数,移除所有事件
//            $(".son").off();
            // 1.2传入一个参数,移除指定事件
//            $(".son").off("click");
            // 1.3传入两个参数,移除指定事件中的指定回调
            $(".son").off("click", test1);
        });
</script>

6.3 获取事件的坐标

当事件被触发时,系统会将事件对象(event)传递给回调函数,通过event对象我们就能获取时间的坐标

获取事件坐标有三种方式
event.offsetX, event.offsetY 相对于事件元素左上角
event.pageX, event.pageY 相对于页面的左上角
event.clientX, event.clientY 相对于视口的左上角
event.page和event.client区别
网页是可以滚动的,而视口是固定的
所以想获取距离可视区域坐标通过event.client
想获取距离网页左上角的坐标通过event.client

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-jQuery事件绑定和解绑</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
            overflow: hidden;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            margin-top: 50px;
            margin-left: 50px;
        }
    </style>
    <script src="../day01/代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 获取事件的坐标
            $(".son").click(function (event) {
                // 获取相对于事件元素左上角坐标
                console.log(event.offsetX, event.offsetY);
                // 获取相对于视口左上角坐标
                console.log(event.clientX, event.clientY);
                // 获取相对于页面左上角坐标
                console.log(event.pageX, event.pageY);
            });
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>

6.4 阻止事件冒泡

什么是事件冒泡?事件冒泡是从目标元素逐级向上传播到根节点的过程
小明告诉爸爸他有一个女票,爸爸告诉爷爷孙子有一个女票,一级级向上传递就是事件冒泡
如何阻止事件冒泡?
多数情况下，我们希望在触发一个元素的事件处理程序时，不影响它的父元素, 此时便可以使用停止事件冒泡

<script>
        $(function () {
            $(".son").click(function (event) {
                console.log(".son");
                // 在子元素中停止事件冒泡,时间不会继续向上传播,所以父元素click方法不会被触发
                event.stopPropagation();
            });
            $(".father").click(function () {
                console.log(".father");
            });
        });
</script>

6.5 阻止事件默认行为

什么是默认行为?
网页中的元素有自己的默认行为,例如单击超链接后会跳转,点击提交表单按钮会提交
如何阻止事件默认行为?
可以使用event.preventDefault();方法阻止事件默认行为方法

<script>
        $(function () {
            $("a").click(function (event) {
                var str = $("a").attr("href");
                // 如果超链接是百度就不跳转
                if(str.indexOf("baidu") > 0){
                    // 阻止默认行为
                    event.preventDefault();
                }
            });
        });
</script>

<script>
        $(function () {
            $("form").submit(function () {
                var userName = $("input[type='text']").val().length > 0;
                var password =  $("input[type='password']").val().length > 0;
                if(!userName && !password){
                    event.preventDefault();
                }
            });
        });
</script>

6.6 自动触发事件

什么是自动触发事件?
通过代码控制事件, 不用人为点击/移入/移除等事件就能被触发
自动触发事件方式
1 $("selector").trigger("eventName");
触发事件的同时会触发事件冒泡
触发事件的同时会触发事件默认行为
2 $("selector").triggerHandler("eventName");
触发事件的同时不会触发事件冒泡
触发事件的同时不会触发事件默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-自动触发事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="../day01/代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            $(".son").click(function () {
                alert("son");
            });
            $(".father").click(function () {
                alert("father");
            });

            // trigger会触发事件冒泡
//            $(".father").trigger("click");
//            $(".son").trigger("click");

            // triggerHandler不会触发事件冒泡
//            $(".father").triggerHandler("click");
//            $(".son").triggerHandler("click");
            */

            $("input[type='submit']").click(function () {
                alert("点击了A标签");
            });
            // trigger会触发系统默认事件
//            $("input[type='submit']").trigger("click");
            // triggerHandler不会触发系统默认事件
            $("input[type='submit']").triggerHandler("click");

        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>

<form action="http://www.baidu.com">
    <input type="text">
    <input type="password">
    <input type="submit" name="sub" value="提交">
</form>
</body>
</html>

6.7 事件命名空间和自定义事件

6.7.1 自定义事件

什么是自定义事件?
自定义事件就是自己虾XX起一个不存在的事件名称来注册事件, 然后通过这个名称还能触发对应的方法执行, 这就是传说中的自定义事件
自定义事件的前提条件
1.事件必须是通过on绑定的
2.事件必须通过trigger来触发
因为trigger方法可以自动触发对应名称的事件,所以只要事件的名称和传递给trigger的名称一致就能执行对应的事件方法

<script>
       $(function () {
           $(".father").on("njClick", function () {
               alert("njClick");
           });
           $(".father").trigger("njClick");
       });
   </script>

6.7.2 事件命名空间

什么是事件命名空间?
众所周知一个元素可以绑定多个相同类型的事件.企业多人协同开发中,如果多人同时给某一个元素绑定了相同类型的事件,但是事件处理的方式不同,就可能引发事件混乱,为了解决这个问题jQuery提出了事件命名空间的概念
事件命名空间主要用于区分相同类型的事件,区分不同前提条件下到底应该触发哪个人编写的事件,格式: “eventName.命名空间”
添加事件命名空间的前提条件
1.事件是通过on来绑定的
2.通过trigger触发事件
注意点(面试题!!!面试题!!!面试题!!!):
不带命名空间事件被trigger调用,会触发带命名空间事件
带命名空间事件被trigger调用,只会触发带命名空间事件
下级不带命名空间事件被trigger调用,会冒泡触发上级不带命名空间和带命名空间事件
下级带命名空间事件被trigger调用,不会触发上级不带命名空间事件
下级带命名空间事件被trigger调用,会触发上级带命名空间事件

<script>
        $(function () {
            // 给父元素添加不带命名空间事件
            $(".father").on("click", function () {
                alert("father");
            });
            // 给父元素添加带命名空间事件
            $(".father").on("click.66", function () {
                alert("66 - father");
            });

            $(".son").on("click.nj", function () {
                alert("nj - 向左走");
            });
            $(".son").on("click.66", function () {
                alert("66 - 向右走");
            });
            // 会同时触发NJ和66编写的click事件
            // 事件会冒泡到不带命名空间上级元素和带相同命名空间的上级元素
//            $(".son").trigger("click");
            // 只会触发NJ编写的click事件
            // 事件不会冒泡到不带命名空间上级元素
//            $(".son").trigger("click.nj");
            // 只会触发66编写的click事件
            // 事件只会冒泡到带相同命名空间的上级元素
            $(".son").trigger("click.66");
        });
</script>

6.8 事件委托

什么是事件委托?
例如: 张三在寝室不想去食堂吃饭,那么张三可以"委托"李四帮忙带一份饭
例如: 张三先找房,但是对要找房的地点又不熟悉,那么张三可以"委托"中介帮忙找房
所以得出结论:
事件委托就是请其他人帮忙做我们想做的事
做完之后最终的结果还是会反馈到我们这里
js中事件委托的好处
1 减少监听数量
添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间
每个监听的函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差
… …
2 新增元素自动有事件响应处理
默认情况下新增的元素无法响应新增前添加的事件
3 jQuery中如何添加事件委托
添加前
$("li").click隐式迭代给界面上所有li都添加了click事件(监听数量众多)
通过$("ul").append新添加的li无法影响click事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-jQuery事件委托</title>
    <script src="../day01/代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 1.监听li点击事件
            $("li").click(function () {
                // 弹出当前点击行内容
                alert($(this).html());
            });

            // 2.监听新增按钮点击
            var count = 0;
            $("button").eq(0).click(function () {
                count++;
                // 新增一行内容
                $("ul").append("<li>我是新增内容"+count+"</li>")
            });
        });
    </script>
</head>
<body>
<ul>
    <li>我是第1行</li>
    <li>我是第2行</li>
    <li>我是第3行</li>
</ul>
<button>新增一行</button>
<button>移除事件委托</button>
</body>
</html>

添加后
格式:$(parentSelector).delegate(childrenSelector, eventName, callback)
$("ul").delegate隐式迭代所有ul添加事件(相比开始迭代li,必然ul的个数会少很多)
当事件被触发时,系统会自动动态查找当前是哪个li触发了事件,所以新增的li也能响应到事件

<script>
        $(function () {
            // 1.委托ul监听li的点击事件
            $("ul").delegate("li","click",function () {
                // 前面我们说过事件委托就是让别人帮忙做事,但最终的结果还是会返回到我们手里,所以这里的this是触发事件的li
                // 这里的this之所以是触发事件的li,本质是因为"事件冒泡", 触发事件的li向上传递到ul,触发了click事件.
//                console.log(this);
                // 弹出当前点击行内容
                alert($(this).html());
            });

            // 2.监听新增按钮点击
            var count = 0;
            $("button").eq(0).click(function () {
                count++;
                // 新增一行内容
                $("ul").append("<li>我是新增内容"+count+"</li>")
            });
        });
</script>

6.9 移入移出事件

6.9.1 mouseenter和mouseleave

移动到子元素不会触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-jQuery移入移除事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <script src="../code/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 移动到子元素不会触发事件
             // 2.1移入事件
             $('.father').mouseenter(function () {
               console.log('mouseenter');
             });
             // 2.2移除事件
             $('.father').mouseleave(function () {
               console.log('mouseleave');
             });
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

6.9.2 mouseover和mouseout

移动到子元素会触发事件

<script>
        $(function () {
             // 2.1移入事件
             $('.father').mouseover(function () {
               console.log('mouseover') ;
             });
             // 2.2移除事件
             $('.father').mouseout(function () {
               console.log('mouseout') ;
             });
        });
</script>

6.9.3 hover

内容监听移入和移出,内部实现就是调用mouseenter和mouseleave

<script>
        $(function () {
            /*
           // 传入两个回调函数,一个监听移入,一个监听移出
            $(".father").hover(function () {
                console.log("mouseenter");
            }, function () {
                console.log("mouseleave");
            });
            */
            // 如果只传入一个方式,那么这个方式既监听移入也监听移出
            $(".father").hover(function () {
                console.log("移入移除");
            });
        });
</script>

6.9.4 移入移出练习

1 鼠标移动到哪一行,哪一行展开效果

<script>
        $(function () {
            // 1.监听li标签移入事件
            $("li").mouseenter(function () {
                console.log("mouseenter");
                // 当移入时候给当天li标签加上current类
                $(this).addClass("current");
            });
            // 2.监听li标签移出事件
            $("li").mouseleave(function () {
                console.log("mouseleave");
                // 当移入时候移除原有li标签的current类
                $(this).removeClass("current");
            });
        });
</script>

2 鼠标移动到哪个选项卡就显示哪个选项卡对应的图片

<script>
        $(function () {
            // 1.监听tab的移入事件
            $("li").mouseenter(function () {
                // 2.修改当前移入tab背景
                $(this).addClass("cur");
                // 3.移除其它tab背景
                $(this).siblings().removeClass("cur");
                // 4.获取当前移入tab索引
                var $idx = $(this).index();
                // 5.找到对应索引的img
                var $img = $("img").eq($idx);
                // 6.让对应索引的图片显示
                $img.addClass("show");
                // 7.让其它所有图片隐藏
                $img.siblings().removeClass("show");

            });
        });
</script>

3 鼠标移入到哪个序号就显示哪个序号对应图片

<script>
        $(function () {
            // 1.监听索引移入事件
            $(".index>li").mouseenter(function () {
                // 2.给移入的索引添加背景,其它索引删除背景
                $(this).addClass("cur").siblings().removeClass("cur");
                // 3.找到当前移入索引的序号
                var $idx = $(this).index();
                // 4.找到序号对应的图片
                var $li = $(".content>li").eq($idx);
                // 5.显示对应图片,并且让其它图片小事
                $li.addClass("show").siblings().removeClass("show");
            });
        });
</script>

7 动画效果

7.1 显示、隐藏动画

show([s,[e],[fn]]) 显示动画
内部实现原理根据当前操作的元素是块级还是行内决定, 块级内部调用display:block;,行内内部调用display:inline;

// 编写jQuery相关代码
$("button").eq(0).click(function () {
    // $("div").css("display", "block");
    // 注意: 这里的时间是毫秒
    $("div").show(1000, function () {
        // 作用: 动画执行完毕之后调用
        alert("显示动画执行完毕");
    });
});

hide([s,[e],[fn]]) 隐藏动画

$("button").eq(1).click(function () {
    // $("div").css("display", "none");
    $("div").hide(1000, function () {
        alert("隐藏动画执行完毕");
    });
});

toggle([spe],[eas],[fn]):切换动画(显示变隐藏,隐藏变显示)

$("button").eq(2).click(function () {
    $("div").toggle(1000, function () {
        alert("切换动画执行完毕");
    });
});

注意事项:
show(1000, function () {}😉 第一个参数单位是毫秒, 1000毫秒等于1秒
默认的动画时长是400毫秒,除了指定毫秒以外还可以指定三个预设参数 slow、normal、fast
slow本质是600毫秒
normal本质是400毫秒
fast本质是200毫秒

7.2 展开、收起动画

参数、注意事项和显示隐藏动画一模一样, 只不过动画效果不一样而已

slideDown([s],[e],[fn]) 展开动画

$("button").eq(0).click(function () {
    $("div").slideDown(1000, function () {
        alert("展开完毕");
    });
});

slideUp([s,[e],[fn]]) 收起动画

$("button").eq(1).click(function () {
    $("div").slideUp(1000, function () {
        alert("收起完毕");
    });
});

slideToggle([s],[e],[fn]) 切换动画(展开变收起,收起变展开)

$("button").eq(2).click(function () {
    $("div").slideToggle(1000, function () {
        alert("收起完毕");
    });
});

7.3 淡入、淡出动画

参数、注意事项和显示隐藏动画一模一样, 只不过动画效果不一样而已

fadeIn([s],[e],[fn]) 淡入动画

$("button").eq(0).click(function () {
    $("div").fadeIn(1000, function () {
        alert("淡入完毕");
    });
});

fadeOut([s],[e],[fn]) 淡出动画

$("button").eq(1).click(function () {
    $("div").fadeOut(1000, function () {
        alert("淡出完毕");
    });
});

fadeToggle([s,[e],[fn]]) 切换动画(显示变淡出,不显示变淡入)

$("button").eq(2).click(function () {
    $("div").fadeToggle(1000, function () {
        alert("切换完毕");
    });
});

fadeTo([[s],o,[e],[fn]]) 淡入到指定透明度动画,可以通过第二个参数,淡入到指定的透明度(取值范围0~1)

$("button").eq(3).click(function () {
    $("div").fadeTo(1000, 0.2, function () {
        alert("淡入完毕");
    })
});

7.4 自定义动画

有时候jQuery中提供的集中简单的固定动画无法满足我们的需求, 所以jQuery还提供了一个自定义动画方法来满足我们复杂多变的需求
animate(p,[s],[e],[fn])

/*
第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数
*/
$(".two").animate({
    marginLeft: 500
}, 5000, "linear", function () {
    // alert("自定义动画执行完毕");
});

每次开始运动都必须是初始位置或者初始状态,如果想在上一次位置或者状态下再次进行动画可以使用累加动画

$("button").eq(1).click(function () {
    $(".one").animate({
        width: "+=100"
    }, 1000, function () {
        alert("自定义动画执行完毕");
    });
});

同时操作多个属性,自定义动画会执行同步动画,多个被操作的属性一起执行动画

$(".one").animate({
    width: 500,
    height: 500
}, 1000, function () {
    alert("自定义动画执行完毕");
});

7.5 动画队列

多个动画方法链式编程,会等到前面的动画执行完毕再依次执行后续动画

$("div").slideDown(1000).slideUp(1000).show(1000);

$(".one").slideDown(1000,function () {
    $(".one").slideUp(1000, function () {
        $(".one").show(1000);
    });
});

但是如果后面紧跟一个非动画方法则会被立即执行

// 立刻变为黄色,然后再执行动画
$(".one").slideDown(1000).slideUp(1000).show(1000).css("background", "yellow");

如果想颜色再动画执行完毕之后设置, 1.使用回调 2.使用动画队列

$(".one").slideDown(1000,function () {
    $(".one").slideUp(1000, function () {
        $(".one").show(1000, function () {
            $(".one").css("background", "yellow")
        });
    });
});

$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function () {
    $(".one").css("background", "yellow")
});

注意点:
动画队列方法queue()后面不能继续直接添加queue()
如果想继续添加必须在上一个queue()方法中next()方法

$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function (next) {
    $(".one").css("background", "yellow");
    next(); // 关键点
}).queue(function () {
    $(".one").css("width", "500px")
});

7.6 动画相关方法

delay(d,[q]) 设置动画延迟时长

$(".one").animate({
    width: 500
    // height: 500
}, 1000).delay(2000).animate({
    height: 500
}, 1000);

stop([c],[j]) 停止指定元素上正在执行的动画

// 立即停止当前动画, 继续执行后续的动画
// $("div").stop();
// $("div").stop(false);
// $("div").stop(false, false);

// 立即停止当前和后续所有的动画
// $("div").stop(true);
// $("div").stop(true, false);

// 立即完成当前的, 继续执行后续动画
// $("div").stop(false, true);

// 立即完成当前的, 并且停止后续所有的
$("div").stop(true, true);

8 文档处理

8.1 添加节点

8.1.1 内部插入

将元素添加到指定元素内部的最后
append(content|fn)
appendTo(content)

// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
// $("ul").append($li);
$li.appendTo("ul");

将元素添加到指定元素内部的最前面
prepend(content|fn)
prependTo(content)

// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
// $("ul").prepend($li);
$li.prependTo("ul");

8.1.2 外部插入

将元素添加到指定元素外部的后面
after(content|fn)
insertAfter(content)

// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
// $("ul").after($li);
$li.insertAfter("ul");

将元素添加到指定元素外部的前面
before(content|fn)
insertBefore(content)

// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
// $("ul").before($li);
$li.insertBefore("ul");

8.2 删除节点

empty() 删除指定元素的内容和子元素, 指定元素自身不会被删除 $("div").empty();
remove([expr]) 删除指定元素

// 删除所有div
$("div").remove();
// 删除div中id是box1的那个div
$("div").remove("#box1");

detach([expr])

// 删除所有div
$("div").detach();
// 删除div中id是box1的那个div
$("div").detach("#box1");

remove和detach区别
remove删除元素后,元素上的事件会被移出
detach删除元素后,元素上的事件会被保留

$("button").click(function () {
    // $("div").remove();
    // $("div").empty();
    // $("li").remove(".item");

    // 利用remove删除之后再重新添加,原有的事件无法响应
    // var $div = $("div").remove();
    // 利用detach删除之后再重新添加,原有事件可以响应
    var $div = $("div").detach();
    // console.log($div);
    // 将删除的返回值重新添加到body上
    $("body").append($div);
});
$("div").click(function () {
    alert("div被点击了");
});

8.3 替换节点

replaceWith(content|fn)将所有匹配的元素替换成指定的HTML或DOM元素
replaceWith参数可以是一个DOM元素
replaceWith参数也可以是一个代码片段
replaceAll(selector)用匹配的元素替换掉所有 selector匹配到的元素

// 编写jQuery相关代码
$("button").click(function () {
    // 创建一个新的节点
    var $item = $("<h6>我是标题6</h6>");
    // 利用新的节点替换旧的节点
    // $("h1").replaceWith($item);
    $item.replaceAll("h1");
});

8.4 复制节点

clone([Even[,deepEven]]) 复制一个节点
浅复制不会复制节点的事件
深复制会复制节点的事件

$(function () {
    // clone([Even[,deepEven]])
    $("button").eq(0).click(function () {
        // 1.浅复制一个元素
        var $li = $("li:first").clone(false);
        // 2.将复制的元素添加到ul中
        $("ul").append($li); // 点击li无法响应事件
    });
    $("button").eq(1).click(function () {
        // 1.深复制一个元素
        var $li = $("li:first").clone(true);
        // 2.将复制的元素添加到ul中
        $("ul").append($li); // 点击li可以响应事件
    });

    $("li").click(function () {
        alert($(this).html());
    });
});

Ting7亭子

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习---这一篇就够了

目录1 初识jQuery1.1 jQuery是什么？1.1.1 体验jQuery1.1.2 为什么要使用jQuery1.1.3 版本选择1.2 如何使用jQuery？1.3 jQuery入口函数1.3.1 jQuery与JavaScript加载模式对比1.3.2 为什么我们能访问$符号?2 jQuery核心函数2.1 核心函数2.2 jQuery对象2.3 jQuery静态方法2.2.1 jQuery.holdReady(hold)2.2.2 $.each(object,[callback])2.2.3 $
复制链接

扫一扫

专栏目录