jQuery基础笔记

最新推荐文章于 2024-07-10 17:54:35 发布

程序猿小离

最新推荐文章于 2024-07-10 17:54:35 发布

阅读量301

点赞数 1

文章标签： jquery ajax javascript

本文链接：https://blog.csdn.net/weixin_45641191/article/details/119395885

版权

jQuery基础笔记

一、初识jQuery

1.1 jQuery是什么?

在这里插入图片描述
● jQuery是一款优秀的JavaScript库, 从命名可以看出jQuery最主要的用途是用来做查询(jQuery=js+Query) ，正如jQuery官方Logo副标题所说 (write less, do more)使用jQuery能上我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单

● 原生JS设置背景(先不要求看懂代码，先看看谁更爽)

window.onload = function (ev) {
            //1.利用原生的JS查找DOM元素
            var div1 = document.getElementsByTagName("div")[0];
            var div2 = document.getElementsByClassName("box1")[0];
            var div3 = document.getElementById("box2");
            console.log(div1);
            console.log(div2);
            console.log(div3);
            //2.利用原生的JS修改背景颜色
            div1.style.backgroundColor = "red";
            div2.style.backgroundColor = "blue";
            div3.style.backgroundColor = "yellow";
        }

● 使用jQuery设置背景

$(function () {
            var $div1 = $("div");
            var $div2 = $(".box1");
            var $div3 = $("#box2");
            console.log($div1);
            console.log($div2);
            console.log($div3);

            $div1.css({
                background: "blue"
            });
            $div2.css({
                background: "red"
            });
            $div3.css({
                background: "yellow"
            });

        })

从上面可以看出，jQuery在原生的js上可以省区很多的代码。

1.2 为什么要使用jQuery？

快速获取文档元素
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
创建AJAX无刷新网页
AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。
提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。
增强的事件处理
jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。
更改网页内容
jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

简而言之，言而简之，就是比原生js代码量少，加载速度更快

1.3如何使用JQuery

下载jQuery库
下载地址：http://code.jquery.com/
引入下载的jQuery库

<head>
    <meta charset="UTF-8">
    <title>jQuery-HelloWorld</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>

在这里插入图片描述
引入一个就可以了，为了避免兼容问题，建议引用1.0版本的
3. 编写jQuery代码

<script>
        //原生js的固定写法
        window.onload = function (ev) {

        };

        //jQuery的固定写法
        $(document).ready(function () {
            alert("hello xiaoli")
        });
</script>

在这里插入图片描述

二、jQuery和JS入口函数的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-jQuery和JS入口函数的区别</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>

        window.onload = function (ev) {
            //1.通过原生的JS入口函数可以拿到DOM元素
            var img = document.getElementsByTagName("img")[0];
            console.log(img);
            //2.通过原生的JS入口函数可以拿到DOM元素的宽高
            var width  = window.getComputedStyle(img).width;
            console.log(width);
        }

    </script>
</head>
<body>
<img src="https://img.alicdn.com/imgextra/i3/6000000001955/O1CN01Cir4dg1QJR0OXoWaY_!!6000000001955-0-octopus.jpg_240x240q90.jpg"
     alt="">

</body>
</html>

原生JS和jQuery入口函数的加载模式不同
原生JS会等到DOM元素加载完毕，并且图片也加载完毕才执行
jQuery会等到D0M元素加载完毕，但不会等到图片也加载完毕就会执行

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-jQuery和JS入口函数的区别</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>

        window.onload = function (ev) {
            //1.通过原生的JS入口函数可以拿到DOM元素
            var img = document.getElementsByTagName("img")[0];
            console.log(img);
            //2.通过原生的JS入口函数可以拿到DOM元素的宽高
            var width  = window.getComputedStyle(img).width;
            console.log(width);
        }

    </script>
</head>
<body>
<img src="https://img.alicdn.com/imgextra/i3/6000000001955/O1CN01Cir4dg1QJR0OXoWaY_!!6000000001955-0-octopus.jpg_240x240q90.jpg"
     alt="">

</body>
</html>

原生的JS如果编写了多个入口函数，后面编写的会覆盖前面编写的

jQuery中编写多个入口函数，后面的不会覆盖前面的

window.onload = function (ev) {
            alert("hello xiaoli1");
        }
        window.onload = function (ev) {
            alert("hello xiaoli2");
        }

        $(document).ready(function (ev) {
            alert("hello xiaoli1");
        });
        $(document).ready(function (ev) {
            alert("hello xiaoli2");
        });

三、jQuery入口函数的其他写法

<script>
        //1.第一种写法
        $(document).ready(function () {
           // alert("hello xiaoli")
        });
        //2.第二种写法
        jQuery(document).ready(function () {
           // alert("hello xiaoli")
        });
        //3.第三种写法（推荐）
        $(function () {
            alert("hello xiaoli")
        });
        //4.第四种写法
        jQuery(function () {
            alert("hello xiaoli")
        });
    </script>

四、jQuery冲突问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery冲突问题</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/test.js"></script>
    <script>
        //使用多种框架时
        //1.释放$使用权
        //注意点:释放操作必须在编写其它jQuery代码之前编写
        //       释放之后就不能再使用$，改为使用jQuery
        //jQuery.noConflict();        //添加这句话之后，以后的代码都不能使用$符号，必须使用jQuery

        //2.自定义一个访问符号
        var nb = jQuery.noConflict();
        nb(function () {
           alert("hello xiaoli") ;
        });
    </script>
</head>
<body>

</body>
</html>

test.js

var $ = 123;

五、jQuery核心函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-jQuery核心函数</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        //$();  就代表着调用jQuery的核心函数

        // 1.接收一个函数
        $(function () {
           alert("hello xiaoli");
            // 2.接收一个字符串
            // 2.1接收一个字符串选择器
            //返回一个jQuery对象， 对象中保存了找到的DOM元素
            var $box1 = $(".box1");
            var $box2 = $("#box2");
            console.log($box1);
            console.log($box2);
            // 2.2接收一个代码片段
            var $p =  $("<p>我是段落</p>");
            console.log($p);
            $box1.append($p);
            // 3.接收一个DOM元素
            //会被包装成个jQuery对象返回给我们
            var span = document.getElementsByTagName("span")[0];
            console.log(span);
            var $span = $(span);
            console.log($span);
        });


    </script>
</head>
<body>
<div class="box1"></div>
<div id="box2"></div>
<span>我是span</span>
</body>
</html>

在这里插入图片描述

六、jQuery对象

什么是jQuery对象
jQuery对象是个伪数组
什么是伪数组?
有0到length-1的属性，并且有length属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-jQuery对象</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           var $div = $("div");
            console.log($div);

            var  arr = [1, 3, 5];
            console.log(arr);
        });
    </script>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

在这里插入图片描述

七、静态方法和实例方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-静态方法和实例方法</title>
    <script>
        //1.定义一个类
        function AClass() {
        }
        //2.给这个类添加一个静态方法
        //直接添加给类的就是静态方法
        AClass.staticMethod = function () {
            alert("staticMethod");
        }
        //静态方法通过类名来调用
        AClass.staticMethod();

        //3.给这个类添加一个实例方法
        AClass.prototype.instanceMethod = function () {
            alert("instanceMethod");
        }
        //实例方法通过类的实例调用
        //创建一个实例（创建一个对象）
        var a = new AClass();
        //通过实例调用实例方法
        a.instanceMethod();
    </script>
</head>
<body>

</body>
</html>

八、静态方法each方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-静态方法each方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        var arr = [1, 3, 5, 7, 9]
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}       //伪数组
        /*
        第一个参数:遍历到的元素
        第二个参数:当前遍历到的索引
        注意点:
        原生的forEach方法只能遍历数组，不能遍历伪数组
         */
        arr.forEach(function (value, index) {
            console.log(index, value);
        })
        obj.forEach(function (value, index) {
            console.log(index, value);
        })

        //1.利用jQuery的each静态方法遍历数组
        /*
        第一个参数:当前遍历到的索引
         */
        // $.each(arr, function (index, value) {
        //     console.log(index, value);
        // });
        $.each(obj, function (index, value) {
            console.log(index, value);
        });
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

九、静态方法map方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-静态方法map方法</title>
    <script src="js/jquery-2.2.4.js"></script>
    <script>
        var arr = [1, 3, 5, 7, 9]
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}
        //1.利用原生JS的map方法遍历
        /*
        第一个参数:当前遍历到的元素
        第二个参数:当前遍历到的索引
        第三个参数:当前被遍历的数组
        注意点：
        和原生的forEach一样，不能遍历伪数组
         */
        arr.map(function (value, index, array) {
            console.log(index, value, array);
        });
        obj.map(function (value, index, array) {
            console.log(index, value, array);
        });

        /*
        第一个参数:要遍历的数组
        第二个参数:每遍历一个元素之后执行的回调函数
        回调函数的参数:
        第一个参数:遍历到的元素
        第二个参数:遍历到的索引
        注意点:
        和jQuery中的each静态方法一样,map静态方法也可以遍历伪数组
         */
        // $.map(arr, function (value, index) {
        //     console.log(index, value);
        // });


        var res = $.map(obj, function (value, index) {
            console.log(index, value);
            return value + index;
        });

        var res2 = $.each(obj, function (index, value) {
            console.log(index, value);
            return value + index;
        });

        /*
        jQuery中的each静态方法和map静态方法的区别:
        each静态方法默认的返回值就是，遍历谁就返回谁
        map静态方法默认的返回值是一个空数组

        each静态方法不支持在回调函数中对遍历的数组进行处理
        map静态方法可以在回调函数中通过return对遍历的数组进行处理,然后生成一个新的数组返回
         */
        console.log(res);
        console.log(res2);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

十、jQuery中的其他静态方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-jQuery中的其他静态方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>

        /*
        $.trim();
        作用:去除字符串两端的空格
        参数:需要去除空格的字符串
        返回值:去除空格之后的字符串
         */
        var str = "    xiaoli    ";
        var res = $.trim(str);
        console.log("---" + str + "---");
        console.log("---" + res + "---");

//------------------------------------------------------------------------------------
        //真数组
        var arr = [1, 3, 5, 7, 9]
        //伪数组
        var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}
        //对象
        var obj = {"name":"li", age:"21"};
        //函数
        var fu = function(){};
        //window对象
        var w = window;


        $.isWindow();
        作用:判断传入的对象是否是window对象
        返回值: true/ false

        var res = $.isWindow(w);
        console.log(res);

//--------------------------------------------------------------------------------------

        /*
        $.isArray();
        作用:判断传入的对象是和否是真数组
        返回值: true/ false
         */
        var res = $.isArray(arrlike);
        console.log(res);

//--------------------------------------------------------------------------------------

        /*
        $.isFunction();
        作用:判断传入的对象是和否是一个函数
        返回值: true/ false
        注意点：
        jQuery框架本质上是一个函数
         (function (window, undefind) {
        })(window);
         */
        var res = $.isFunction(fu);
        console.log(res);

    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

十一、静态方法holdReady方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-静态方法holdReady方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        //$.holdReady(true);    作用：暂停ready执行
        $.holdReady(true);
        $(document).ready(function () {
            alert("ready");
        });
    </script>
</head>
<body>
<button>回复ready事件</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function () {
        $.holdReady(false);
    }
</script>
</body>
</html>

在这里插入图片描述

十二、通过WebStorm简化操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-通过WebStorm简化操作</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           //编写jQuery相关代码
            alert("hello")
        });
    </script>
</head>
<body>

</body>
</html>

十三、jQuery内容选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-jQuery内容选择器</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background: red;
            margin-top: 10px;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {

            // :empty       作用:找到既没有文本内容也没有子元素的指定元素
            var $div = $("div:empty");
            console.log($div);


            //  :parent     作用:找到有文本内容或者有子元素的指定元素
            var $div = $("div:parent");
            console.log($div);


            //  :contains(text)     作用：找到包含指定文本内容的指定元素
            var $div = $("div:contains('我是div')");
            console.log($div);


            //  :has(selector)
            var $div = $("div:has('span')");
            console.log($div);


        });
    </script>
</head>
<body>
<div></div>
<div>我是div</div>
<div>我是div2</div>
<div><span></span></div>
<div><p></p></div>
</body>
</html>

十四、属性和属性节点

什么是属性?
对象身上保存的变量就是属性

如何操作属性?

对象.属性名称 = 值;
对象.属性名称;
对象["属性名称"] = 值;
对象["属性名称”];

什么是属性节点?
```
<span name = "it666"></span>
```
在编写HTML代码时，在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后，展开看到的都是属性
在attributes属性中保持的所有内容都是属性节点

如何操作属性节点?

     DOM元素. setAttribute("属性名称”，"值") ;
     DOM元素. getAttribute("属性名称") ;

属性和属性节点有什么区别?
任何对象都有属性，但是只有DOM对象才有属性节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-属性和属性节点</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {

           function Person() {

           }
           var p = new Person();
           //p.name = "yxd";
           // console.log(p.name);
           p["name"] = "zs";
           console.log(p["name"]);


            var  span = document.getElementsByTagName("span")[0];
            span.setAttribute("name", "yxd");
            console.log(span.getAttribute("name"));


        });
    </script>
</head>
<body>
<span name = "it666"></span>
</body>
</html>

十五、jQuery的attr方法

attr(name|pro|key,val|fn)
作用:获取或者设置属性节点的值
可以传递一个参数，也可以传递两个参数
如果传递一个参数，代表获取属性节点的值
如果传递两个参数，代表设置属性节点的值

注意点:
如果是获取:无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置:如果设置的属性节点不存在，那么系统会自动新增
```
console.log($("span").attr("class"));
$("span").attr("class", "box");
$("span").attr("abc", "123");
```
removeAttr(name)
删除属性节点

注意点:
会删除所有找到元素指定的属性节点
```
$("span").removeAttr("class name");
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-jQuery的attr方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 1.attr(name|pro|key,val|fn)
            // 作用:获取或者设置属性节点的值
            // 可以传递一个参数，也可以传递两个参数
            // 如果传递一个参数，代表获取属性节点的值
            // 如果传递两个参数，代表设置属性节点的值
            //
            //  注意点:
            //  如果是获取:无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
            //  如果是设置:找到多少个元素就会设置多少个元素
            //  如果是设置:如果设置的属性节点不存在，那么系统会自动新增
            console.log($("span").attr("class"));
            $("span").attr("class", "box");
            $("span").attr("abc", "123");

            // 2.removeAttr(name)
            // 删除属性节点
            //
            // 注意点:
            //  会删除所有找到元素指定的属性节点
            $("span").removeAttr("class name");


        });
    </script>
</head>
<body>
<span class="span1" name = "it666"></span>
<span class="span2" name = "yxd"></span>
</body>
</html>

十六、jQuery的prop方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-jQuery的prop方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            1.prop方法
            特点和attr方法一致
            2.removeProp方法
            特点和removeAttr方法一致
            */
            $("span").eq(0).prop("demo", "it666");
            $("span").eq(1).prop("demo", "yxd");
            console.log($("span").prop("demo"));

            $("span").removeProp("demo");

            /*
            注意点:
            prop方法不仅能够操作属性，他还能操作属性节点

            官方推荐在操作属性节点时，具有true 和false 两个属性的属性节点，如
            checked, selected 或者disabled 使用prop()， 其他的使用attr()I
             */
            console.log($("span").prop("class"));
            $("span").prop("calss", "box");


            console.log($("input").prop("checked"));    //true / false
            console.log($("input").attr("checked"));    //checked / undefined

        });
    </script>
</head>
<body>
<span class="span1" name = "it666"></span>
<span class="span2" name = "yxd"></span>

<input type="checkbox" checked>
</body>
</html>

在这里插入图片描述

十七、attr和prop方法的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-attr和prop方法的练习</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //1.给按钮添加点击事件
            var btn = document.getElementsByTagName("button")[0];
            btn.onclick  = function () {
                //2.获取输入框输入的内容
                var input = document.getElementsByTagName("input")[0];
                var text = input.value;
                //3.修改img的src属性节点的值
                $("img").attr("src", text);
                $("img").prop("src", text);
            }

        });
    </script>
</head>
<body>
<input type="text">
<button>切换图片</button><br>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</body>
</html>

在这里插入图片描述
在输入框中输入图片地址，点击按钮可切换图片

十八、jQuery操作类相关的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19-jQuery操作类相关的方法</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .class1{
            width: 100px;
            height: 100px;
            background: red;
        }

        .class2{
            border: 10px solid #000;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            1.addClass(class|fn)
            作用:添加一个类
            如果要添加多个，多个类名之间用空格隔开即可

            2.removeClass([class|fn])
            作用:删除一个类
            如果要删除多个，多个类名之间用空格隔开即可

            3.toggleClass(class|fn[,sw])
            作用：切换类
            有就删除，没有就添加
             */
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function () {
                //$("div").addClass("class1");
                $("div").addClass("class1 class2");
            }
            btns[1].onclick = function () {
                $("div").removeClass("class2");
                $("div").removeClass("class2 class1");
            }
            btns[2].onclick = function () {
                $("div").toggleClass("class2 class1");
            }

        });
    </script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>

在这里插入图片描述

十九、jQuqry文本值相关的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-jQuqry文本值相关的方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            1.html([val|fn])
            和原生JS中的innerHTML一模一样
            2.text([val|fn])
            和原生JS中的innerText一模一样
            3.val([val|fn|arr])
            设置输入框的值和获取输入框的值
             */


            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function () {
                $("div").html("<p>我是段落<span>我是span</span></p>")
            }
            btns[1].onclick = function () {
                console.log($("div").html());
            }
            btns[2].onclick = function () {
                $("div").text("<p>我是段落<span>我是span</span></p>")
            }
            btns[3].onclick = function () {
                console.log($("div").text());
            }
            btns[4].onclick = function () {
                $("input").val("请输入内容");
            }
            btns[5].onclick = function () {
                console.log($("input").val());
            }

        });
    </script>
</head>
<body>
<button>设置HTML</button>
<button>获取HTML</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>
</html>

在这里插入图片描述

二十、jQuery操作css样式的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21-jQuery操作css样式的方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //1.逐个设置
            $("div").css("width", "100px");
            $("div").css("height", "100px");
            $("div").css("background", "red");

            //2.链式设置
            //注意点:链式操作如果大于3步， 建议分开
            $("div").css("width", "100px").css("height", "100px").css("background", "blue");

            //3.批量设置
            $("div").css({
                width: "100px",
                height: "100px",
                background: "yellow"
            });

            //4.获取CSS样式值
            console.log($("div").css("background"));
        });
    </script>
</head>
<body>
<div></div>
</body>
</html>

在这里插入图片描述

二十一、JQuery位置和尺寸操作的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>22-JQuery位置和尺寸操作的方法</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
            border: 50px solid #000;
            margin-left: 50px;
            position: relative;
        }

        .son{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            var btns = document.getElementsByTagName("button");
            //监听获取
            btns[0].onclick = function () {
                //获取元素的宽度
                console.log($(".father").width());

                // offset([coordinates])
                //作用：获取元素距离窗口的偏移位
                console.log($(".son").offset().left);
                // position()
                //作用：获取元素距离定位元素的偏移位
                console.log($(".son").position().left);
            }
            //监听设置
            btns[1].onclick = function () {
                //设置元素的宽度
                //$(".father").width("500px");

                // $(".son").offset({
                //     left: 10
                // });

                注意点:position方法只能获取不能设置
                // $(".son").position({
                //     left: 10
                // });
                //可以用以下方法设置
                $(".son").css({
                    left: "10px"
                });
            }

        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>

在这里插入图片描述

二十二、jQuery的scrollTop方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>23-jQuery的scrollTop方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            width: 100px;
            height: 200px;
            border: 1px solid #000;
            overflow: auto;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           //编写jQuery相关代码
            var btns = document.getElementsByTagName("button");
            //监听获取
            btns[0].onclick = function () {
                //获取滚动的偏移位
                // console.log($(".scroll").scrollTop());
                //获取网页滚动的偏移位
                //注意点:为了保证浏览器的兼容，获取网页滚动的偏移位需要按照如下写法
                console.log($("body").scrollTop() + $("html").scrollTop());
            }
            btns[1].onclick = function () {
                //设置滚动的偏移位
                $(".scroll").scrollTop(300);
                //设置网页滚动的偏移位
                //注意点:为了保证浏览器的兼容，设置网页滚动的偏移位需要按照如下写法
                $("html，body").scrollTop(300);
            }
        });
    </script>
</head>
<body>
<div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我
    是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是di
    v我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我
    是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是di
    v我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div</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><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

二十三、jQuery事件绑定

jQuery中有两种绑定事件方式

eventName(fn) ;
编码效率略高/部分事件jQuery没有实现，所以不能添加
on (eventName,fn) ;
编码效率略低/所有js事件都可以添加

注意点：
可以添加多个相同或者不同类型的事件，不会覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>24-jQuery事件绑定</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           //编写jQuery相关代码
            
            // $("button").click(function () {
            //     alert("hello yxd")
            // });
            // $("button").click(function () {
            //     alert("hello 1234")
            // });
            // $("button").mouseleave(function () {
            //     alert("hello mouseleave")
            // });
            // $("button").mouseenter(function () {
            //     alert("hello mouseenter")
            // });


            $("button").on("click", function () {
                alert("hello click1")
            });
            $("button").on("click", function () {
                alert("hello click2")
            });
            $("button").on("mouseleave", function () {
                alert("hello mouseleave")
            });
            $("button").on("mouseenter", function () {
                alert("hello mouseenter")
            });

        });
    </script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>

在这里插入图片描述

二十四、jQuery事件移除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>25-jQuery事件移除</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            function test1() {
                alert("hello yxd");
            }
            function test2() {
                alert("hello 1234")
            }
           // 编写jQuery相关代码
            $("button").click(test1);
            $("button").click(test2);
            $("button").mouseleave(function () {
                alert("hello mouseleave")
            });
            $("button").mouseenter(function () {
                alert("hello mouseenter")
            });

            //off方法如果不传递参数，会移除所有的事件
            // $("button").off();
            //off方法如果传递一个参数，会移除所有指定类型的事件
            $("button").off("click");
            // off方法如果传递两个参数,会移除所有指定类型的指定事件
            $("button").off("click", test1);
        });
    </script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>

二十五、jQuery事件冒泡和默认行为

什么是事件冒泡?
就是儿子响应完会接着响应父亲的事件

如何阻止事件冒泡

$(".son").click(function (event) {
                alert("son");
                //阻止事件冒泡的两种方法
                // return false;
                event.stopPropagation();
            });
            $(".father").click(function () {
                alert("father");
            });

什么是默认行为
如何阻止默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-jQuery事件冒泡和默认行为</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           //编写jQuery相关代码
            /*
            1.什么是事件冒泡?
            就是儿子响应完会接着响应父亲的事件
            2.如何阻止事件冒泡
            3.什么是默认行为
            4.如何阻止默认行为
             */

            /*$(".son").click(function (event) {
                alert("son");
                //阻止事件冒泡的两种方法
                // return false;
                event.stopPropagation();
            });
            $(".father").click(function () {
                alert("father");
            });*/

            $("a").click(function (event) {
                alert("弹出注册框");
                //阻止默认行为的两种方法
                //return false;
                event.preventDefault();
            });
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<a href="http://www.baidu.com">注册</a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

二十六、jQuery事件自动触发

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

            $(".son").click(function (event) {
                alert("son");
            });
            $(".father").click(function () {
                alert("father");
            });
            //自动触发事件的两种方法
            // $(".father").trigger("click");
            // $(".father").triggerHandler("click");


            //trigger:如果你用trigger自动触发事件，会触发事件冒泡
            //triggerHandler:如果利用triggerHandler自动触发事件，不会触发事件冒泡
            // $(".son").trigger("click");
            // $(".son").triggerHandler("click");


            //监听
            $("input[type='submit']").click(function () {
                alert("submit")
            });
            /*
            trigger:如果利用trigger自动触发事件，会触发默认行为
            triggerHandler:如果利用triggerHandler自动触发事件，不会触发默认行为
             */
            // $("input[type='submit']").trigger("click");
            $("input[type='submit']").triggerHandler("click");
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<a href="http://www.baidu.com">注册</a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

在这里插入图片描述

二十七、jQuery自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>28-jQuery自定义事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {

            // $(".son").myClick(function (event) {
            //     alert("son");
            // });

            /*
            想要自定义事件，必须满足两个条件
            1.事件必须是通过on绑定的
            2.事件必须通过trigger或者triggerHandler来触发
             */
            $(".son").on("myClick", function () {
                alert("son");
            });
            // $(".son").trigger("myClick");
            $(".son").triggerHandler("myClick");

        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<a href="http://www.baidu.com">注册</a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

二十八、jQuery事件命名空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>29-jQuery事件命名空间</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {

            /*
            想要事件的命名空间有效，必须满足两个条件
            1.事件是通过on来绑定的
            2.通过trigger或者triggerHandler触发事件
             */
            $(".son").on("click.zs", function () {
                alert("click1");
            });
            $(".son").on("click.ls", function () {
                alert("click2");
            });
            $(".son").trigger("click.zs");

        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<a href="http://www.baidu.com">注册</a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

二十九、jQuery事件命名空间面试题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>30-jQuery事件命名空间面试题</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {

            $(".father").on("click.ls", function () {
                alert("father click1");
            });
            $(".father").on("click", function () {
                alert("father click2");
            });
            $(".son").on("click.ls", function () {
                alert("son click1");
            });
            /*
            利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发.而父元素没有命名空间的事件不会被触发
            利用trigger触发子元素带命名空间的事件，那么子元素所有相回类型的事件和父元素所有相同类型的事件都会被触发
             */
            // $(".son").trigger("click.ls");
            $(".son").trigger("click");
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<a href="http://www.baidu.com">注册</a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

在这里插入图片描述

三十、jQuery事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>31-jQuery事件委托</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            1.什么是事件委托?
            请别人帮忙做事情，然后将做完的结果反馈给我们
             */
            $("button").click(function () {
                $("ul").append("<li>我是新增的li</li>");
            });
            
            
            /*
            在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候
,jQuery会遍历所有找到的元素，给所有找到的元素添加事件
             */
            // $("ul>li").click(function () {
            //     console.log($(this).html());
            // });


            /*
            以下代码的含义，让ul帮li监听click事件
            之所以能够监听，是因为入口函数执行的时候u1就已经存在了，所以能够添加事件
            之所以this是1i,是因为我们点击的是1i，而1i没有click事件，所以事件冒泡传递
给了ul,u1响应了事件，既然事件是从1i传递过来的，所以u1必然指定this是谁
             */
            $("ul").delegate("li", "click", function () {       //把li的click事件交给ul去监听
                console.log($(this).html());
            });

        });
    </script>
</head>
<body>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
<button>新增一个li</button>
</body>
</html>

在这里插入图片描述

三十一、jQuery事件委托练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>32-jQuery事件委托练习</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .mask{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            position: fixed;
            top: 0;
            left: 0;
        }
        .login{
            width: 300px;
            height: 600px;
            margin: 50px auto;
            position: relative;
        }
        .login>span{
            width: 50px;
            height: 50px;
            /*background: red;*/
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
    <script>
        $(function () {
           //编写jQuery相关代码
            $("a").click(function () {
                var $mask = $("<div class=\"mask\">\n" +
                    "    <div class=\"login\">\n" +
                    "        <img src=\"images/mn.jpg\" alt=\"\" style=\"height: 600px; width: 300px\">\n" +
                    "        <span></span>\n" +
                    "    </div>\n" +
                    "</div>");
                $("body").append($mask);
                $("body").delegate(".login>span", "click", function () {
                    $mask.remove();
                });
                return false;
            })
        });
    </script>
</head>
<body>
<a href="http://www.baidu.com">点击看美女</a>
<!--<div class="mask">-->
    <!--<div class="login">-->
        <!--<img src="images/mn.jpg" alt="" style="height: 600px; width: 300px">-->
        <!--<span></span>-->
    <!--</div>-->
<!--</div>-->
<div>
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落

</div>
</body>
</html>

三十二、jQuery移入移出事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>33-jQuery移入移出事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           //编写jQuery相关代码
            /*
            mouseover/ mouseout事件，子元素被移入移出也会触发父元素的事件
             */
            /*
            $(".father").mouseover(function () {
                console.log("father被移入了");
            });
            $(".father").mouseout(function () {
                console.log("father被移出了");
            });
            */

            /*
            mouseenter / mouseleave事件，子元素被移入移出不会触发父元素的事件
            推荐大家使用
             */
            /*
            $(".father").mouseenter(function () {
                console.log("father被移入了");
            });
            $(".father").mouseleave(function () {
                console.log("father被移出了");
            });
            */

            //也可用hover函数，效果同上面一样
            /*$(".father").hover(function () {
                console.log("father被移入了");
            },function () {
                console.log("father被移出了");
            });
            */

            //如果只有一个方法，则同时监听两个行为
            $(".father").hover(function () {
                console.log("father被移入移出了");
            });


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

在这里插入图片描述

练习1：电影排行榜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>34-电影排行榜</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 450px;
            margin: 50px auto;
            border: 1px solid #000;
        }
        .box>h1{
            font-size: 20px;
            line-height: 35px;
            color: deeppink;
            padding-left: 10px;
            border-bottom: 1px dashed #ccc ;
        }

        ul>li{
            list-style: none;
            padding: 5px 10px;
            border: 1px dashed #ccc;
        }

        ul>li:nth-child(-n+4) span{
            background: deeppink;
        }

        ul>li>span{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #ccc;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
        }

        .content{
            overflow: hidden;
            margin-top: 5px;
            display: none;
        }

        .content>img{
            width: 80px;
            height: 120px;
            float: left;
        }

        .content>p{
            width: 180px;
            height: 120px;
            float: right;
            font-size: 12px;
            line-height: 20px;
        }

        .current .content{
            display: block;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           //编写jQuery相关代码
            /*
            //监听li的移入事件
            $("li").mouseenter(function () {
                $(this).addClass("current");
            });
            //监听li的移出事件
            $("li").mouseleave(function () {
                $(this).removeClass("current");
            });
            */

            $("li").hover(function () {
                $(this).addClass("current");
            },function () {
                $(this).removeClass("current");
            });
        });
    </script>
</head>
<body>
<div class="box">
    <h1>电影排行榜</h1>
    <ul>
        <li><span>1</span>电影名称
            <div class="content">
                <img src="images/pldd.jpg" alt="">
                <p>非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯，非常帅气，非常好看，但是只宜观赏，不宜变弯</p>
            </div>
        </li>
        <li><span>2</span>电影名称
            <div class="content">
                <img src="images/pldd.jpg" alt="">
                <p>非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯，非常帅气，非常好看，但是只宜观赏，不宜变弯</p>
            </div></li>
        <li><span>3</span>电影名称
            <div class="content">
                <img src="images/pldd.jpg" alt="">
                <p>非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯，非常帅气，非常好看，但是只宜观赏，不宜变弯</p>
            </div></li>
        <li><span>4</span>电影名称
            <div class="content">
            <img src="images/pldd.jpg" alt="">
            <p>非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯，非常帅气，非常好看，但是只宜观赏，不宜变弯</p>
        </div>
        </li>
        <li><span>5</span>电影名称
            <div class="content">
                <img src="images/pldd.jpg" alt="">
                <p>非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯，非常帅气，非常好看，但是只宜观赏，不宜变弯</p>
            </div></li>
        <li><span>6</span>电影名称
            <div class="content">
                <img src="images/pldd.jpg" alt="">
                <p>非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯，非常帅气，非常好看，但是只宜观赏，不宜变弯</p>
            </div></li>
        <li><span>7</span>电影名称
            <div class="content">
                <img src="images/pldd.jpg" alt="">
                <p>非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯。非常帅气，非常好看，但是只宜观赏，不宜变弯，非常帅气，非常好看，但是只宜观赏，不宜变弯</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

练习2：TAB选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>35-TAB选项卡</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .box{
            width: 440px;
            height: 800px;
            border: 1px solid #000;
            margin: 50px auto;
        }

        .nav>li{
            list-style: none;
            width: 110px;
            height: 50px;
            background: blueviolet;
            text-align: center;
            line-height: 50px;
            float: left;
        }

        .nav>.current{
            background: #ccc;
        }

        .content>li{
            list-style: none;
            display: none;
        }

        .content>li>img{
            width: 440px;
            height: 750px;
        }

        .content>.show{
            display: block;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            // 1.监听选项卡的移入事件
            $(".nav>li").mouseenter(function () {
               //1.1修改被移入选项卡的背景颜色
                $(this).addClass("current");
                //1.2获取当前移入选项卡的索引
                var index = $(this).index();
                //1.3根据索引找到对应的图片
                var $li = $(".content>li").eq(index);
                //1.4显示找到的图片
                $li.addClass("show");
            });
            // 1.监听选项卡的移出事件
            $(".nav>li").mouseleave(function () {
                //1.1还原选项卡的背景颜色
                $(this).removeClass("current");
                //1.2获取当前移出选项卡的索引
                var index = $(this).index();
                //1.3根据索引找到对应的图片
                var $li = $(".content>li").eq(index);
                //1.4隐藏对应的图片
                $li.removeClass("show");
            });
*/

            // 1.监听选项卡的移入事件
            $(".nav>li").mouseenter(function () {
                //1.1修改被移入选项卡的背景颜色
                $(this).addClass("current");
                //1.2还原其它兄弟选项卡的背景颜色
                $(this).siblings().removeClass("current");
                //1.3获取当前移出选项卡的索引
                var index = $(this).index();
                //1.4根据索引找到对应的图片
                var $li = $(".content>li").eq(index);
                //1.5隐藏非当前的其它图片
                $li.siblings().removeClass("show");
                //1.6显示对应的图片
                $li.addClass("show");
            });
        });
    </script>
</head>
<body>
<div class="box">
    <ul class="nav">
        <li class="current">H5+C3</li>
        <li>JQuery</li>
        <li>JAva</li>
        <li>go语言</li>
    </ul>
    <ul class="content">
        <li class="show"><img src="images/mn.jpg" alt=""></li>
        <li><img src="images/pldd.jpg" alt=""></li>
        <li><img src="images/mn.jpg" alt=""></li>
        <li><img src="images/pldd.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

三十三、显示和隐藏动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>36-jQuery显示和隐藏动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 200px;
            height: 200px;
            background: red;
            display: none;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           //编写jQuery相关代码
            $("button").eq(0).click(function () {
                // $("div").css("display", "block");
                $("div").show(1000, function () {
                    //作用：动画执行完毕后调用
                    alert("显示动画执行完毕！");
                });
            });
            $("button").eq(1).click(function () {
                // $("div").css("display", "none");
                $("div").hide(1000, function () {
                    //作用：动画执行完毕后调用
                    alert("隐藏动画执行完毕！");
                });
            });
            $("button").eq(2).click(function () {
                $("div").toggle(1000, function () {
                    //作用：动画执行完毕后调用
                    alert("切换动画执行完毕！");
                });
            });

        });
    </script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>

练习：对联广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>37-对联广告</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        img{
            width: 200px;
            height: 400px;
            display: none;
        }

        .left{
            float: left;
            position: fixed;
            left: 0;
            top: 200px;
        }

        .right{
            float: right;
            position: fixed;
            right: 0;
            top: 200px;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //1.监听网页的滚动
            $(window).scroll(function () {
                //1.1获取网页滚动的偏移位
                var offset = $("html,body").scrollTop();
                // 1. 2判断网页是否滚动到了指定的位置
                if(offset > 500){
                    //1.3显示广告
                    $("img").show(1000);
                }else {
                    //隐藏广告
                    $("img").hide(1000);
                };
            });
        });
    </script>
</head>
<body>
<img src="images/left.jpg" class="left">
<img src="images/right.jpg" class="right">
<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><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>

在这里插入图片描述

三十四、jQuery展开和收起动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>38-jQuery展开和收起动画</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        div{
            width: 100px;
            height: 300px;
            background: red;
            display: none;
        }
    </style>
    <script>
        $(function () {
           //编写jQuery相关代码
            $("button").eq(0).click(function () {
                $("div").slideDown(1000, function () {
                    alert("展开完毕");
                });
            });
            $("button").eq(1).click(function () {
                $("div").slideUp(1000, function () {
                    alert("收起完毕");
                });
            });
            $("button").eq(2).click(function () {
                $("div").slideToggle(1000, function () {
                    alert("收起完毕");
                });
            });

        });
    </script>
</head>
<body>
<button>展开</button>
<button>收起</button>
<button>切换</button>
<div></div>
</body>
</html>

在这里插入图片描述

练习1：折叠菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>39-折叠菜单</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        
        .nav{
            list-style: none;
            width: 300px;
            margin: 100px auto;
            /*border: 1px solid #000;*/
        }
        
        .nav>li{
            border: 1px solid #000;
            line-height: 35px;
            border-bottom: none;
            position: relative;
        }
        .nav>li:last-child{
            border-bottom: 1px solid #000;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .nav>li:first-child{
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .nav>li>span{
            background: url("jQuery基础/images/arrow_right.png");
            display: inline-block;
            width: 32px;
            height: 32px;
            position: absolute;
            right: 10px;
        }

        .sub{
            display: none;
        }

        .sub>li{
            list-style: none;
            background: rebeccapurple;
            border-bottom: 1px solid white;
        }

        .sub>li:hover{
            background: red;
        }

        .nav>.current>span{
            transform: rotate(90deg);
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 1.监听一级菜单的点击事件
            $(".nav>li").click(function () {
                // 1.1拿到二级菜单
                var $sub = $(this).children(".sub");
                // 1.2让二级菜单展开
                $sub.slideToggle(1000);
                //1.3拿到所有非当前的二级菜单
                 var otherSub = $(this).siblings().children(".sub");
                // 1.4让所有非当前的二级菜单收起
                otherSub.slideUp(1000);
                // 1.5让被点击的一级菜单箭头旋转
                $(this).addClass("current");
                //1.6让所有非被点击的一级菜单箭头还原
                $(this).siblings().removeClass("current");
            });
        });
    </script>
</head>
<body>
<ul class="nav">
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>

</ul>
</body>
</html>

在这里插入图片描述

练习2：下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>40-下拉菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .nav{
            list-style: none;
            width: 300px;
            height: 50px;
            background: red;
            margin: 100px auto;
        }
        .nav>li{
            width: 100px;
            height: 50px;
            text-align: center;
            float: left;
            line-height: 50px;
        }

        .sub{
            list-style: none;
            background: mediumpurple;
            display: none;
        }

    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {

            /*
            在jQuery中如果需要执行动画，建议在执行动画之前先调用stop方法，然后再执行动画
             */
            // 1.监听一级菜单的移入事件
            $(".nav>li").mouseenter(function () {
                //1.1拿到二级菜单
                var $sub = $(this).children(".sub");
                //停止当前正在运行的动画:
                $sub.stop();
                // 1.2让二级菜单展开
                $sub.slideDown(1000);
            });
            // 2.监听一级菜单的移出事件
            $(".nav>li").mouseleave(function () {
                //1.1拿到二级菜单
                var $sub = $(this).children(".sub");
                //停止当前正在运行的动画:
                $sub.stop();
                // 1.2让二级菜单收起
                $sub.slideUp(1000);
            });
        });
    </script>
</head>
<body>
<ul class="nav">
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单</li>
    <li>一级菜单</li>
</ul>
</body>
</html>

在这里插入图片描述

三十五、jQuery淡入淡出动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>41-jQuery淡入淡出动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 300px;
            height: 300px;
            background: red;
            display: none;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           //编写jQuery相关代码
            $("button").eq(0).click(function () {
                $("div").fadeIn(1000, function () {
                    alert("淡入完毕");
                });
            });
            $("button").eq(1).click(function () {
                $("div").fadeOut(1000, function () {
                    alert("淡出完毕");
                });
            });
            $("button").eq(2).click(function () {
                $("div").fadeToggle(1000, function () {
                    alert("切换完毕");
                });
            });
            $("button").eq(3).click(function () {
                $("div").fadeTo(1000, 0.5, function () {
                    alert("淡入完毕");
                });
            });

        });
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>淡入到</button>
<div></div>
</body>
</html>

在这里插入图片描述

练习：弹窗广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>42-弹窗广告</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .ad{
            position: fixed;
            right: 0;
            bottom: 0;
            display: none;
        }
        .ad>span{
            display: inline-block;
            width: 30px;
            height: 30px;
            position: absolute;
            top: 5px;
            right: 5px;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //1.监听span的点击事件
            $("span").click(function () {
                $(".ad").remove();
            });

            //2.执行广告动画
            /*
            $(".ad").slideDown(1000, function () {
                $(".ad").fadeOut(1000, function () {
                    $(".ad").fadeIn(1000);
                });
            });
            */

            $(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);
        });
    </script>
</head>
<body>
<div class="ad">
    <img src="images/ad-pic.png" alt="">
    <span></span>
</div>
</body>
</html>

在这里插入图片描述

三十六、jQuery自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>43-jQuery自定义动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 100px;
            height: 100px;
            margin-top: 10px;
            background: red;
        }

        .two{
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            
            $("button").eq(0).click(function () {
                /*
                $(".one").animate({
                    width: 500
                }, 1000, function () {
                    alert("自定义动画执行完毕");
                });
                */

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

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

        });
    </script>
</head>
<body>
<button>操作属性</button>
<button>累加属性</button>
<button>关键字</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

在这里插入图片描述

三十七、jQuery的stop和delay方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>44-jQuery的stop和delay方法</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .one{
            width: 100px;
            height: 100px;
            background: red;
        }

        .two{
            width: 500px;
            height: 10px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                /*
                在jQuery的{}中可以同时修改多个属性，多个属性的动画也会同时执行
                 */
                /*
                $(".one").animate({
                    width: 500
                    // height: 500
                }, 1000);

                $(".one").animate({
                    height: 500
                }, 1000);
                */
                /*
                delay方法的作用就是用于高速系统延迟时长
                 */
                /*
                $(".one").animate({
                    width: 500
                    // height: 500
                }, 1000).delay(2000).animate({
                    height: 500
                }, 1000);
                */

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

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

            });
            $("button").eq(1).click(function () {
                //立即停止当前动画， 继续执行后续的动画
                // $("div").stop();
                // $("div").stop(false);
                // $("div").stop(false, false);

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

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

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

        });
    </script>
</head>
<body>
<button>开始动画</button>
<button>停止动画</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

在这里插入图片描述

练习1：图标特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>45-图标特效</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        ul{
            list-style: none;
            width: 400px;
            height: 250px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        ul>li{
            width: 100px;
            height: 50px;
            margin-top: 50px;
            text-align: center;
            float: left;
            overflow: hidden;
        }

        ul>li>span{
            display: inline-block;
            width: 24px;
            height: 24px;
            background: red;
            background: url("jQuery基础/images/bg.png") no-repeat 0 0;
            position: relative;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 1.遍历所有的1i
            $("li").each(function (index, ele) {
                // 1.1生成新的图片位置
                var $url = "url(\"images/bg.png\") no-repeat 0 "+(index * -30)+"px "
                // 1.2设置新的图片位置
                $(this).children("span").css("background", $url);
            });

            // 2.监听1i移入事件
            $("li").mouseenter(function () {
                //2.1将图标往上移动
                $(this).children("span").animate({
                    top: -50
                }, 500, function () {
                    //2.2将图标往下移动
                    $(this).css("top", "50px");
                    //2.3将图片复位
                    $(this).animate({
                        top: 0
                    }, 500);
                });
            });
        });
    </script>
</head>
<body>
<ul>
    <li><span></span><p>百度</p></li>
    <li><span></span><p>百度</p></li>
    <li><span></span><p>百度</p></li>
    <li><span></span><p>百度</p></li>
    <li><span></span><p>百度</p></li>
    <li><span></span><p>百度</p></li>
    <li><span></span><p>百度</p></li>
    <li><span></span><p>百度</p></li>
</ul>
</body>
</html>

在这里插入图片描述

练习2：无限循环滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>46-无线循环滚动</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 1000px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }

        ul{
            list-style: none;
            width: 3000px;
            height: 300px;imgimages/bg1.jpg
            background: #000000;
        }

        ul>li{
            float: left;
        }

        ul>li>img{
            width: 500px;
            height: 300px;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //0.定义变量保存偏移位
            var offset = 0;
            //1.让图片滚动起来
            var timer ;
            function autoPlay(){
                timer = setInterval(function () {       //setInterval是一个定时器
                    offset += -10;
                    if (offset <= -2000){
                        offset = 0;
                    }
                    $("ul").css("marginLeft", offset)
                }, 50);
            }

            autoPlay();
            //2.监听li的移入移出事件
            $("li").hover(function () {
                //停止滚动
                clearInterval(timer);
                //给非当前选中添加蒙版
                $(this).siblings().fadeTo(100, 0.5);
                //去除当前选中的蒙版
                $(this).fadeTo(100, 1);
            }, function () {
                //继续滚动
                autoPlay();
                //去除所有的蒙版
                $("li").fadeTo(100, 1);
            });
        });
    </script>
</head>
<body>
<div>
    <ul>
        <li><img src="images/bg1.jpg" alt=""></li>
        <li><img src="images/bg2.jpg" alt=""></li>
        <li><img src="images/bg3.jpg" alt=""></li>
        <li><img src="images/bg4.jpg" alt=""></li>
        <li><img src="images/bg1.jpg" alt=""></li>
        <li><img src="images/bg2.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

三十八、jQuery添加节点相关的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>47-jQUery添加节点相关的方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            内部插入
            append(content|fn)
            appendTo(content)
            会将元素添加到指定元素内部的最后

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

            外部插入
            after(content|fn)
            insertAfter(content)
            会将元素添加到指定元素外部的最后

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

             */
            $("button").click(function () {
                //1.创建一个节点
                var $li = $("<li>新增的li</li>");
                //2.添加节点
                // $("ul").append($li);
                // $("ul").prepend($li);

                // $li.appendTo("ul");
                // $li.prependTo("ul");


                // $("li").after("ul");
                // $("li").before("ul");

                // $li.insertAfter("ul");
                $li.insertBefore("ul");

            });
        });
    </script>

</head>
<body>
<button>添加节点</button>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
<div>我是div</div>
</body>
</html>

在这里插入图片描述

三十九、jQuery删除节点方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery删除节点方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            删除
            remove([expr])
            删除指定元素
            empty()
            删除指定元素的内容和子元素，指定元素自身不会被删除
            detach([expr])
             */
            $("button").click(function () {
                // $("div").remove();
                // $("div").empty();
                $("li").detach(".item");
            });
        });
    </script>
</head>
<body>
<button>删除节点</button>
<ul>
    <li class="item">我是第1个li</li>
    <li>我是第2个li</li>
    <li class="item">我是第3个li</li>
    <li>我是第4个li</li>
    <li class="item">我是第5个li</li>
</ul>
<div>我是div
    <p>我是段落</p>
</div>
</body>
</html>

在这里插入图片描述

四十、jQuery替换节点相关方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>49-jQuery替换节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            替换
            replaceWith(content|fn)
            replaceAll(selector)
            替换所有匹配的元素为指定的元素
             */
            $("button").click(function () {
                //1.新建一个元素
                var $h6 = $("<h6>我是标题6</h6>")
                //2.替换元素
                // $("h1").replaceWith($h6);
                $h6.replaceAll("h1");

            });
        });
    </script>
</head>
<body>
<button>替换节点</button>
<h1>我是标题1</h1>
<h1>我是标题2</h1>
<p>我是段落</p>
</body>
</html>

四十一、jQuery复制节点相关方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>50-jQuery复制节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style>
        body{
            outline: none;
            resize: none;
        }
    </style>
    <script>
        $(function () {
           //复制
           //  clone([Even[,deepEven]])
            /*
            如果传入false就是浅复制，如果传入true就是深复制
            浅复制只会复制元素，不会复制元素的事件
            深复制会复制元素，而且还会复制元素的事件
             */
            $("button").eq(0).click(function () {
                // 1.浅复制一个元素
                var $li = $("li:first").clone(false);
                //2.将复制的元素添加到ul中
                $("ul").append($li);
            });
            $("button").eq(1).click(function () {
                // 1.深复制一个元素
                var $li = $("li:first").clone(true);
                //2.将复制的元素添加到ul中
                $("ul").append($li);
            });

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

        });
    </script>
</head>
<body>
<button>浅复制节点</button>
<button>深复制节点</button>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
</ul>
</body>
</html>

好的jQuery在这里先告一段落！！！

程序猿小离

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础笔记

jQuery教程从零玩转jQuery-初识jQueryjQuery是什么?从零玩转jQuery-初识jQueryjQuery是什么?● jQuery是一款优秀的JavaScript库, 从命名可以看出jQuery最主要的用途是用来做查询(jQuery=js+Query) ，正如jQuery官方Logo副标题所说 (write less, do more)使用jQuery能上我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单● 原生JS设置背景(先不要求看懂代码，先看看谁更爽)
复制链接

扫一扫