JavaScript - jQuery

最新推荐文章于 2025-03-04 20:36:36 发布

Henry_ww

最新推荐文章于 2025-03-04 20:36:36 发布

阅读量463

点赞数

分类专栏： JavaScript 文章标签： jquery javascript html5

本文链接：https://blog.youkuaiyun.com/Henry_ID/article/details/119938527

版权

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

为什么要学 jQuery

原生js实现方式及缺点:

 <script>
            // 麻烦的地方
            // 1. 获取元素的方法名太长，不好写，不好记
            // 2. 代码冗余（for循环太多）
            // 3. 使用on注册事件，存在覆盖问题，使用addEventListener来注册（兼容问题，IE678不兼容）
            // 4. 没有动画效果

            // 找对象
            const btn1 = document.querySelector("#btn1");
            const btn2 = document.querySelector("#btn2");
            const divs = document.querySelectorAll("div"); // 伪数组
            // 显示
            btn1.onclick = function () {
                for (let i = 0; i < divs.length; i++) {
                    divs[i].style.display = "block";
                }
            };
            // 设置内容
            btn2.onclick = function () {
                for (let i = 0; i < divs.length; i++) {
                    divs[i].innerHTML = "这是内容";
                }
            };
        </script>

jQuery实现方式:

 // 使用jq实现:jq实现页面交互的流程和步骤(业务处理方式)与原生js一样
      // 获取按钮绑定事件,当事件触发的时候会调用传入的回调函数进行处理
      $('#btn1').click(function() {
        // 获取所有div，为每一个div设置样式
        // $('div').css(样式属性，值)
        // $('div').css('display', 'block') 
        // show hide fadeIn fadeOut
        $('div').fadeIn(4000)
      })

      $('#btn2').click(function() {
        $('div').text('文本内容')
      })

      $('#btn2').click(function() {
        console.log('1234')
      })

优点:

⚫ 轻量级。核心文件才几十kb，不会影响页面加载速度
⚫ 跨浏览器兼容。基本兼容了现在主流的浏览器
⚫链式编程、隐式迭代
⚫ 对事件、样式、动画支持，大大简化了DOM操作
⚫ 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等 ⚫ 免费、开源

总结 : 相比原生js,jQuery用更少的代码，更优的兼容性实现更佳的效果

jQuery 概述:

1.1 JavaScript 库

仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）,jQuery就是一个js库。从封装一大堆函数的角度理解库，就
是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解：就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用
这些封装好的功能了。
比如 jQuery，就是一个js库，里面封装了很多用于操作dom的方法。

常见的JavaScript 库

⚫ jQuery
⚫ Prototype
⚫ YUI
⚫ Dojo
⚫ Ext JS
⚫ 移动端的zepto

1.2 jQuery 的概念

jQuery 是一个快速、简洁的 JavaScript 库，把js中的DOM操作做了封装
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质：就是学习调用这些函数（方法）。

jQuery的基本使用

2.1 jQuery 的下载

官网地址： https://jquery.com/

版本：
⚫ 1x ：兼容 IE 678 等低版本浏览器，官网不再更新
⚫ 2x ：不兼容 IE 678 等低版本浏览器，官网不再更新
⚫ 3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本

各个版本的下载：https://code.jquery.com/

1.1jQuery的使用步骤

引入 jQuery 文件
添加入口函数
在入口函数中调用封装好的api实现页面效果

1.2 jQuery 的入口函数

<script>

        // 入口

        // $(function(){ // 入口})
        $(function () {
            console.log('我已经进入入口了')
        })

        // $(document).ready(function(){})

        $(document).ready(function () {
            // console.log('我已出舱，感觉良好')

            let div = document.querySelector('div')
            console.log(div)

            console.log($(div))

            // div.fadeIn(1000) // 原生不能调用jq对象方法
            $(div).fadeIn(1000)
        })
    </script>

1.3 jQuery 的入口函数的特点(与window.onload的差异)

window.onload:

执行次数 : 只能执行一次，如果有多个，后面的会将前面的覆盖

执行时机 : 必须等网页所有资源(包含图片等外部资源)全部加载完毕才执行入口函数中的代码
jq的入口函数 :

执行次数 : 可以添加多个,且都会执行,不存在覆盖的问题

执行时机 : 只要页面中的dom结构加载完毕就会执行入口函数中的代码

简写 : $(function(){代码})

1.4 jQuery 的顶级对象 $

$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
$ 是jQuery 的顶级对象，把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
它的常用方式：
• 添加入口函数
• 获取元素
• dom元素转换为jQuery对象
• 创建元素

1.5 jQuery 对象和 DOM 对象

用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

🔔 注意:只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法.它们的api不能混用。

jQuery 对象和 DOM 对象之间的转换

script>
        // jq和原生js可以混合存在（不建议）
        // 用原生的原因：jq没有提供相关dom的操作（radio，video）


        $(function () {
            // 元素js获取就是DOM对象
            let div = document.querySelector('div')

            let $div = $('div')
            console.log(div, $div)

            // 原生转jq对象$(原生DOM)
            console.log($(div))

            // jq转原生：$()[下标]
            console.log($div[0])

            // jq转原生：$().get(下标)
            console.log($div.get(0))

            // jq转原生：建议使用get()
            // jq下的API：都记得带()
        })
    </script>

jQuery选择器

💥 🎃 1.1 jQuery - 基本选择器

<script>
        // 入口
        $(function () {
            // 获取所有div：标签
            console.log($('div'))

            // 获取.box：类
            console.log($('.box'))

            // 所有所有li：后代（或者子代）
            console.log($('ul li'))

        })

        // 筛选选择器
        $(function () {
            // css就是jq封装的一个操作样式的API：jq对象.css('样式名',样式值)
            console.log($('.current li:eq(2)'))

            $('.current li:eq(2)').css('backgroundColor', 'red')
            // css方法对样式的识别，可以是小驼峰，也可以是中划线（中划线内部转换成小驼峰）

            // 奇数行:odd
            $('.current li:odd').css('backgroundColor', 'green')

            // 偶数行:even
            $('.current li:even').css('backgroundColor', 'yellow')

            // 第一个:first
            $('.current li:first').css('backgroundColor', 'skyblue')

            // 最后一个:last
            $('.current li:last').css('backgroundColor', 'skyblue')
        })
    </script>

💥💥 🎃1.2 jQuery - 重点帅选方法

<script>
        // 一次性搞定隔行变色
        $(function () {
            // let res = $('li:odd').css('backgroundColor', 'green')
            // console.log(res)

            // 链式操作：API执行后返回的结果依然是jq对象本身
            $('li:odd').css('backgroundColor', 'green').next().css('backgroundColor', 'yellow')
        })

        // 入口
        // $(function () {
        //     // 获取第一个li
        //     const $li = $('.current')
        //     // console.log($li)

        //     // 获取孩子：jq.children(['选择器'])

        //     // 没有参数：所有孩子
        //     console.log($li.children())

        //     // 筛选孩子
        //     console.log($li.children('a'))

        //     // 寻找后代：find(筛选器)
        //     console.log($li.find())
        //     console.log($li.find('i'))

        //     // 找兄弟：siblings([筛选器])
        //     console.log($li.siblings())

        //     // 筛选兄弟
        //     console.log($li.siblings('li'))

        //     // 找父元素：parent()
        //     console.log($li.parent())

        //     // 找匹配元素：eq(序号)
        //     console.log($('li').eq(2))

        //     // 下一个兄弟：next()

        //     console.log($li.next())

        //     // 前一个兄弟：prev()
        //     console.log($li.prev())

        //     // 不管怎么样：最终筛选器返回的结果都是jq对象
        // })
    </script>

案例:手风琴



    <script>
        // 入口
        $(function () {

            // 1. 获取所有的span，给所有的span提供点击事件：click(回调函数)
            $('.groupTitle').click(function () {
                // this是什么？DOM元素
                // console.log(this)
                // 原生变jq对象：$(this)


                // 2. span对应的div显示：span的下一个兄弟；其他的div要隐藏
                // $(this).next().css('display', 'block')

                // // 找到span的爸爸
                // $(this).parent().siblings().children('div').css('display', 'none')

                // 动画效果：slideDown()
                $(this)
                    .next()             // 下一个兄弟：div
                    .slideToggle()      // 收起来或者展开：当前div
                    .parent()
                    .siblings()
                    .children('div')
                    .slideUp()

                // slide是一组高度变化的动画效果
                // slideUp()：收起来，高度变0（display：none)
                // slideDown()：展开，高度变成目标高度（display:block）
                // slideToggle()：toggle是切换的意思，如果原来是收起来，就展开；原来是展开的就收起来
            })

        })
    </script>
</body>

</html>

案例:淘宝精品展示



    <script>
        // 入口
        $(function () {
            // 1. 获取所有左侧的li，中间的li，右侧的li
            let $left = $('#left li')
            // 自己的数量：length
            console.log($left.length)
            let $center = $('#center li')
            // console.log($left, $center)
            let $right = $('#right li')
            // 2. 给所有的左侧的li增加鼠标移入事件：mouseover()
            $left.mouseover(function () {
                // console.log($(this))
                // 2.1 拿到当前被移入的li的下标：$(this).index()
                let index = $(this).index()
                // 2.2 让中间li对应的显示，其他的隐藏
                $center.eq(index).show().siblings().hide()
            })

            // 3. 右侧菜单添加鼠标移入事件
            $right.mouseover(function () {
                // 3.1 获取当前右侧的index + 左侧的菜单数量
                // 3.2 当前中间对应的显示，其他的隐藏   
                $center.eq($(this).index() + $left.length).show().siblings().hide()
            })

        })
    </script>
</body>

</html>

jQuery 样式操作

🎈 1.1 jQuery - 样式操作-css

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <div class="box"></div>

    <script>
        $(function () {
            // 获取box
            let $box = $('.box')

            // css(属性名)：获取样式，得到的字符串（使用很少）
            console.log($box.css('width'))

            // css(属性名,值)：修改样式
            // $box.css('border-radius', '50%')
            $box.css('borderRadius', '50%')
            // 样式名可以是小驼峰（建议）也可以是中划线（带引号）

            // 批量操作样式：css({样式名:值,...})
            $box.css({
                width: '200px', // px单位的样式：可以带单位也可以变成数字不带单位
                height: 200,
                'background-color': 'green'
                // 不建议使用中划线：建议使用小驼峰
            })
        })
    </script>
</body>

</html>

案例: 突出展示


    <script>
        $(function () {
            // 1. 获取所有的li
            const $lis = $('.wrap li')
            // 2. 给所有的li做鼠标移入事件：mouseenter()
            $lis.mouseenter(function () {
                $(this).css({ opacity: 1 }).siblings().css({ opacity: .3 })
            })
            // 3. 给盒子做移出事件：mouseleave()
            $('.wrap').mouseleave(function () {
                $lis.css({ opacity: 1 })
            })
        })
    </script>
</body>

</html>

🎈 1.2 jQuery - 类操作 addClass()/removeClass()



        <script>
            $(function () {
                // addClass() 添加 ，removeClass() 移出 ,toggleClass() 切换
                let $box = $(".box");

                $(".btn1").click(function () {
                    $box.addClass("active");
                });

                $(".btn2").click(function () {
                    $box.removeClass("active");
                });

                $(".btn3").click(function () {
                    // $box.toggleClass('active')

                    // 手动切换：先判定是否存在
                    console.log($box.hasClass("active"));

                    if ($box.hasClass("active")) {
                        // 干掉
                        $box.removeClass("active");
                    } else {
                        $box.addClass("active");
                    }
                });
            });
        </script>
    </body>
</html>

案例:tab栏切换


    <script>
        $(function () {
            // 1. 获取所有li和所有的div.main
            const $lis = $('.tab-item')
            const $div = $('.main')
            // 2. 给所有li增加鼠标移入输入：mouseover
            $lis.mouseover(function () {
                // 3. 事件处理
                // 3.1 li的排他：解决active类的问题
                $(this).addClass('active').siblings().removeClass('active')
                // 3.2 div的排他：解决selected类的问题
                $div.eq($(this).index()).addClass('selected').siblings().removeClass('selected')
            })

        })
    </script>
</head>

<body>
    <div class="wrapper">
        <ul class="tab">
            <li class="tab-item active">国际大牌<span>◆</span></li>
            <li class="tab-item">国妆名牌<span>◆</span></li>
            <li class="tab-item">清洁用品<span>◆</span></li>
            <li class="tab-item">男士精品</li>
        </ul>
        <div class="products">
            <div class="main selected">
                <a href="###"><img src="images/guojidapai.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="images/guozhuangmingpin.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="images/qingjieyongpin.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="images/nanshijingpin.jpg" alt="" /></a>
            </div>
        </div>
    </div>


</body>

</html>

案例:京东轮播图



        <script>
            // 淡入淡出
            $(function () {
                // 1. 定义一个索引：知道当前是第几张图
                let index = 0;
                const $lis = $(".slider li");

                // 2. 给向右的箭头做点击事件
                $(".arrow-right").click(function () {
                    // 2.1 先让当前li淡出
                    $lis.eq(index).fadeTo(100, 0.4, function () {
                        // 2.2 计算下一个的下标
                        index++;

                        // 安全处理
                        if (index >= $lis.length) index = 0;

                        // 2.3 让下一个下标对应的li淡入
                        $lis.eq(index).fadeTo(100, 1).siblings().fadeOut(1);

                        // fadeTo的特点：不会隐藏元素
                        // faddeOut会隐藏元素
                    });
                });

                // 3. 给向左的箭头做点击时间
                $(".arrow-left").click(function () {
                    // 2.1 先让当前li淡出
                    $lis.eq(index).fadeTo(100, 0.4, function () {
                        // 2.2 计算下一个的下标
                        index--;

                        // 安全处理
                        if (index < 0) index = $lis.length - 1;

                        // 2.3 让下一个下标对应的li淡入
                        $lis.eq(index).fadeTo(100, 1).siblings().fadeOut(1);

                        // fadeTo的特点：不会隐藏元素
                        // faddeOut会隐藏元素
                    });
                });
            });
        </script>
    </body>
</html>

jQuery 效果

🎈1.1 jQuery - 动画 - 显示与隐藏 show()/hide()

<script>
        $(function () {
            const $box = $('.box')

            // 显示：show()
            $('.btn1').click(function () {
                // $box.show()  // 没有参数，没有动画

                // 需要给速度参数：fast,normal,slow
                // $box.show('fast')
                // $box.show('slow')
                // $box.show(2000)

                // 第二个参数：动画规则
                // $box.show('slow', 'swing')
                // $box.show('slow', 'linear')
                // 一般不用第二个参数

                // 第三个参数：回调函数
                // $box.show('slow', 'linear', function () {
                //     // console.log(this)
                //     this.innerText = '我是小马哥'
                // })

                // 实际使用的时候，通常会省略第二个
                $box.show('slow', function () {
                    // console.log(this)
                    this.innerText = '前端小白'
                })

                // show的内部做了判断：判断参数的类型到底是字符串还是函数，是函数就直接当做回调，是字符串就当做效果
            })


            // 隐藏：hide()，使用规则与show的规则一样
            $('.btn2').click(function () {
                $box.hide('fast')
            })

            // 切换：toggle()，规则也是一样
            $('.btn3').click(function () {
                $box.toggle('fast')
            })

            // 显示与隐藏动画的特点：如果没给速度参数，默认是没有动画效果的
        })
    </script>

🎈 1.2 jQuery - 动画 - 滑动效果 slideDown()/slideUp()/slideToggle()

 <script>
        $(function () {
            const $box = $('.box')

            // 滑动效果：本质是高度在改变
            // 自带动画效果：默认是normal，400ms内完成

            // 滑入效果：slideDown()显示
            $('.btn1').click(function () {
                $box.slideDown()
            })

            // 滑出效果：slideUp()收起
            $('.btn2').click(function () {
                $box.slideUp()
            })

            // 转换效果：slideToggle()
            $('.btn3').click(function () {
                $box.slideToggle()
            })
        })
    </script>

案例:下拉菜单

<script>
        $(function () {
            // 找到一级菜单的a做鼠标移入和移出事件
            const $aes = $('.wrap>ul>li>a')

            // 鼠标移入事件：mouseenter
            $aes.mouseenter(function () {
                // this是具体的a元素
                // console.log(this)

                // 让自己的兄弟：ul显示出来
                $(this).next().slideDown()
            }).mouseleave(function () {
                // 让自己的兄弟：ul收起来
                $(this).next().slideUp()
            })
        })
    </script>

🎈 1.3 jQuery - 动画 - 淡入淡出效果 fadeIn()/fandeOut()/fadeTo()

 <script>
        $(function () {
            const $box = $('.box')

            // 淡入淡出效果：本质是透明度在改变
            // 自带动画效果：默认是normal，400ms内完成

            // 淡入效果：fadeIn()显示
            $('.btn1').click(function () {
                $box.fadeIn()
            })

            // 淡出效果：fadeOut()隐藏
            $('.btn2').click(function () {
                // $box.fadeOut()

                // 如何实现先淡出，后加效果，再淡入
                $box.fadeOut(function () {
                    $box.css('backgroundColor', 'green').fadeIn()
                })
            })

            // 转换效果：fadeToggle()
            $('.btn3').click(function () {
                $box.fadeToggle()
            })

            // 控制到指定级别的透明度：fadeTo(速度,指定透明度)
            $('.btn4').click(function () {
                $box.fadeTo('slow', .4, function () {
                    $box.css({ backgroundColor: 'green' })
                    $box.fadeTo('slow', 1)
                })
            })

        })
    </script>

🎈 1.4 jQuery - 动画 - 自定义动画 animate()

<script>
            $(function () {
                const $box = $(".box");

                $(".btn1").click(function () {
                    // 向右移动到本质：left属性
                    // $box.css({ left: 400 })

                    $box.animate({ left: 400 });
                });

                $(".btn2").click(function () {
                    $box.animate({ left: 0 });
                });

                $(".btn3").click(function () {
                    $box.animate({ borderRadius: "50%" });
                });

                $(".btn4").click(function () {
                    $box.animate({
                        borderRadius: "50%",
                        left: 400,
                        width: 200,
                        height: 200,
                        backgroundColor: "green", // 背景色没有提供动画效果
                    });

                    // 正方形移动
                    $box.animate({
                        top: 400,
                    });

                    $box.animate({
                        left: 0,
                    });

                    $box.animate({
                        top: 100,
                        width: 100,
                        height: 100,
                        borderRadius: "0%",
                    });
                });
            });
        </script>

👉 案例 : 手风琴案例(🎈 阻止动画队列)

<script>
        // 动态实现为li添加背景图片
        $(function () {
            // 1. 获取所有的li
            const $lis = $('#box li')
            // 2. 需要遍历取出每个li（系统没有提供直接的隐式迭代可以换不同数据的方法）（for循环）
            /* for (let i = 0; i < $lis.length; i++) {
                // 3. 给每个li增加背景图片
                // console.log($lis.eq(i))
                $lis.eq(i).css(
                    {
                        backgroundImage: `url(images/${i + 1}.jpg)`,
                        backgroundSize: 'cover',
                        backgroundPosition: 'center'
                    }
                )

            } */

            // 显式迭代（主动做）
            $lis.each(function (index, ele) {

                // console.log(index, this)
                $(ele).css({
                    backgroundImage: `url(images/${index + 1}.jpg)`,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center'
                })
            })

            // 鼠标的移入事件
            $lis.mouseenter(function () {
                // 修改当前li的宽度为800，兄弟为100
                // $(this).animate({ width: 800 }).siblings().animate({ width: 100 })

                // 实际开发中：先停止动画，后开启动画
                $(this).stop().animate({ width: 800 }).siblings().stop().animate({ width: 100 })
            })

            // 鼠标的移出事件
            $('#box').mouseleave(function () {
                // $lis.animate({ width: 240 })
                $lis.stop().animate({ width: 240 })
            })

        })
			//  💥💥 stop() 方法用于停止动画或效果。
			//  💥💥 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。
    </script>

jQuery 属性操作

🎈1.1 jQuery - 属性操作 prop()/attr()

<script>
        $(function () {
            // prop()
            const $box = $('.box')
            const $input = $('input')

            // 取值
            console.log($box.prop('class'))
            console.log($input.prop('type'), $input.prop('placeholder'))

            // 非标准属性获取（拿不到）
            console.log($box.prop('data-index'))

            // 设置：两个参数
            $box.prop('id', 'userinfo')
            $input.prop('placeholder', '我被修改了')

            // prop()底层用的原生js的标准语法操作：元素.属性名 = 值


            // 非标准属性：attr()：所有属性
            console.log($box.attr('class'))

            console.log($box.attr('data-index'))

            // 修改
            $box.attr('id', 'gun')
        })

		//建议:
        //设置或获取元素固有属性值建议使用prop
		//设置或获取元素自定义属性值建议使用attr

		// 🔔 注意：操作状态值的时候(如'checked','selected','disabled'等)只能使用prop,否则无法获取到想要的结果
    </script>

案例: 点餐系统

<script>
            $(function () {
                // 1. 获取两组tr：一个是全选，一组单选
                const $cbAll = $("#j_cbAll");
                const $cbs = $("#j_tb input");
                // console.log($cbAll, $cbs)
                // 2. 给全选做点击事件：将全选的状态赋值给所有的单选
                $cbAll.click(function () {
                    // console.log($(this).prop('checked'))
                    $cbs.prop("checked", $(this).prop("checked"));
                });
                // 3. 给所有的单选做点击事件：判定是否所有都有选中，如果有，全选就勾选，否则不勾选
                $cbs.click(function () {
                    // console.log(this)
                    // console.log($('#j_tb input:checked'))

                    // 判定选中状态的数量与所有数量的对比：一样代表都选中了，否则就没有
                    if ($("#j_tb input:checked").length === $cbs.length) {
                        // 全部选中
                        $cbAll.prop("checked", true);
                    } else {
                        $cbAll.prop("checked", false);
                    }
                });
            });
        </script>

🎈1.2 jQuery - data存储数据

<script>
            $(function () {
                // data()
                const $box = $(".box");

                // 获取是所有以data-开头的自定义属性
                console.log($box.data());

                // 设置：内存有效：不会放入到DOM元素中
                $box.data("name", "张三");

                console.log($box.data("name"));
                console.log($box.data());

                // data()如果不是写死在元素结构中的，是动态添加的：一旦页面刷新，数据就会丢失

                // 类似于js原生中的：dataset
            });
        </script>

🎈1.3 jQuery - data临时存储数据 - 数据编辑

<body>
    <input type="text" name="username" value="前端小白">

    <button class="btn2">撤回</button>

    <script>
        // 编辑：让input框拿到光标：focus()

        $(function () {
            $('input').focus(function () {
                // 原始数据保存
                // console.log($(this).prop('value'))

                $(this).data('oldValue', $(this).prop('value'))
            })

            // 撤回
            $('.btn2').click(function () {
                // console.log($('input').data())

                $('input').prop('value', $('input').data('oldValue'))
            })
        })
    </script>
</body>

jQuery 内容文本值

🎈1.1 jQuery - 文本操作/表单操作 html()/text()/val()

<script>
        $(function () {
            // html()操作
            const $box = $('.box')
            const $input = $('input')

            // 没有参数：获取
            console.log($box.html())

            // text()只获取文本
            console.log($box.text())

            // 有参数：修改
            $box.text('<a href="">翻滚吧</a>')  // 标签当做了字符串
            $box.html('<a href="">翻滚吧</a>')

            // 表单：val()
            console.log($input.val())

            $input.val('宝宝')
        })
    </script>

jQuery 元素操作

🎈1.1 jQuery - 显示迭代(遍历) each()

<script>
            $(function () {
                // each主要还是遍历jq对象
                const $lis = $("li");

                // 1. 遍历jq对象：jq对象.each(function(){})
                $lis.each(function (i, ele) {
                    // console.log(i, ele);
                });

                // 2. 其他对象遍历：$.each(对象,function(){})
                let lis = document.querySelectorAll("li");

                $.each(lis, function (i, ele) {
                    // console.log(i, ele);
                });

                // 遍历数组
                $.each([1, 2, 3, 4], function (i, ele) {
                    console.log(i, ele);
                });
            });
        </script>

案例:购物车

// 入口
$(function () {
    // 加法点击事件
    $(".add").click(function () {
        // console.log($(this).prev());

        // 拿到 input的值,转数字
        let value = $(this).prev().val() - 0;
        console.log(value);

        // 改变value值
        value++;

        // 赋值给input
        $(this).prev().val(value);

        // 获取单价
        let price = $(this).parents(".item").find(".price").text();
        console.log(price);

        // 计算总价
        let total = price * value;
        $(this).parents(".item").find(".computed").text(total);

        // 调用函数,计算新的总价
        getTotalPrice();
    });

    // 减法点击事件
    $(".reduce").click(function () {
        // console.log($(this).prev());

        // 拿到 input的值,转数字
        let value = $(this).next().val() - 0;
        // console.log(value);

        // 改变value值
        value--;

        // 安全
        if (value < 1) value = 1;

        // 赋值给input
        $(this).next().val(value);

        // 获取单价
        let price = $(this).parents(".item").find(".price").text();
        console.log(price);

        // 计算总价
        let total = price * value;
        $(this).parents(".item").find(".computed").text(total);

        // 调用函数,计算新的总价
        getTotalPrice();
    });

    // 封装 : 计算商品总数与总价
    function getTotalPrice() {
        // 获取元素
        let $items = $(".item-list .item");

        // 定义变量,保存总数总价
        let count = 0;
        let total = 0;

        // 遍历
        $items.each(function (index, ele) {
            // console.log(index, ele);

            // 判定选中
            if ($(ele).find(".item-ck").prop("checked")) {
                // 改变总数
                count++;

                // 计算总价,转数字
                total += $(ele).find(".computed").text() - 0;
            }
        });

        console.log(count, total);

        // 将总数总价赋值给元素
        $(".selected").text(count);
        $(".total-money").text(total);

        // 复选框点击事件
        $(".item .item-ck").click(function () {
            // 调用函数
            getTotalPrice();
        });
    }

    // 调用函数,页面一加载就显示在页面
    getTotalPrice();
});

🎈1.2 jQuery - 创建元素(父子关系) - 内部添加 append()/prepend()

  <script>

        $(function () {
            // 创建元素
            const $li1 = $('<li></li>')
            const $li2 = $('<li><a href="#">小马哥</a></li>')

            const $img = $('<img src="images/1-small.jpg">')

            // console.log($li1, $li2, $img)

            // 添加到父元素：jq对象：父元素

            // append()放到父元素的最后面：appendChilid
            $('body').append($img)

            // prepend()放到父元素的最前面
            $('body').prepend($li2)
        })
    </script>

🎈1.3 jQuery - 创建元素(兄弟关系) - 外部添加 after()/before()

 <script>
        $(function () {
            // 1. 创建元素
            // 2. 添加元素（外部添加）：after()  before()

            const $box = $('.box')

            $box.after($('<span>我是后来的</span>'))

            $box.before($('<span>我是最大的</span>'))
        })
    </script>

案例:微博发布

<script>
        $(function () {
            // 1. 获取元素：文本，按钮，ul
            const $txt = $('#txt')
            const $ul = $('#ul')
            // 2. 给 发布 绑定点击事件
            $('#btn').click(function () {
                // 2.1 拿到用户输入的内容：为空不要        // ' a b c ' ==> 'a b c'
                let value = $txt.val().trim()           // trim()去除字符串两边的空格

                // 非空 判定
                    if (value == "") {
                        // 提示
                        alert("请输入内容");

                        // 光标聚焦
                        $txt.focus();

                        // 结束
                        return;
                    }
                // 2.2 创建li
                // 2.3 给li添加文本：用户输入的内容
                const $li = $(`<li>${value}</li>`)

                // 2.4 给li添加一个删除的按钮：input:button
                const $del = $('<input type="button" value="删除">')
                $li.append($del)

                // 2.5 将li放入ul中：放第一个prepend()
                $ul.prepend($li)

                // 2.6 清理用户输入的数据
                $txt.val('')

				// 光标聚焦
                $txt.focus();

                // // 删除
                $('input').click(function () {
                    $(this).parent().remove()
                })
            })

            // 用到事件委托：ul绑定点击事件
            // 事件对象：e.target
            // $ul.click(function (e) {
            //     // console.log(e.target)

            //     if (e.target.nodeName === 'INPUT') {
            //         $(e.target).parent().remove()
            //     }
            // })
        })
    </script>

案例:城市选择

 <body>
        <h1>城市选择：</h1>
        <!-- multiple：可以显示多行 -->
        <select id="src-city" name="src-city" multiple>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">深圳</option>
            <option value="4">广州</option>
            <!-- 如果option有selected属性，说明它当前是被选中的 -->
            <option value="5">西红柿</option>
        </select>
        <div class="btn-box">
            <!--实体字符-->
            <button id="btn1">&gt;&gt;</button>
            <button id="btn2">&lt;&lt;</button>
            <button id="btn3">&gt;</button>
            <button id="btn4">&lt;</button>
        </div>
        <!-- multiple 支持多选 -->
        <select id="tar-city" name="tar-city" multiple></select>

        <script>
            $(function () {
                // 1. 获取两个select框
                $srcCity = $("#src-city");
                $tarCity = $("#tar-city");
                // 2. 分别给四个按钮添加点击事件
                // 2.1 >> || << 将所有的option转移到另外一个
                // 2.2 > || < 将选中的option转移到另外一个

                $("#btn1").click(function () {
                    // select框中的所有option：children('option')
                    // console.log($srcCity.children('option'))
                    // append()可以批量操作
                    $tarCity.append($srcCity.children("option"));
                });

                $("#btn2").click(function () {
                    $srcCity.append($tarCity.children("option"));
                });

                $("#btn3").click(function () {
                    $tarCity.append($srcCity.children("option:selected"));
                    $tarCity.children("option:selected").prop("selected", false);
                });

                $("#btn4").click(function () {
                    $srcCity.append($tarCity.children("option:selected"));
                    $srcCity.children("option:selected").prop("selected", false);
                });
            });
        </script>
    </body>

🎈1.4 jQuery - 删除元素remove()/empty()

 <script>
        $(function () {
            // 分两组拿
            $odd = $('li:odd')
            $even = $('li:even')
            console.log($odd, $even)

            // 清空内容：empty() || html('')
            // $odd.empty()    // 清空元素的内容
            $odd.html('')

            // 删除元素：remove()
            $even.remove()
        })
    </script>

jQuery 尺寸 / 位置操作

🎈1.1 jQuery - 尺寸 width() / height() / nnerWidth() / innerHeight() / outerWidth() / outerHeight() / outerWidth(true) / outerHeight(true)

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .box {
                width: 100px;
                height: 100px;
                background-color: pink;
                border: 10px solid skyblue;

                padding: 50px;
                margin: 50px;
            }
        </style>
        <script src="../课堂练习/js/jquery-1.12.4.js"></script>
    </head>

    <body>
        <div class="box">假如没有如果</div>
        <script>
            $(function () {
                // 如果要多次使用，且不会产生修改：可以先获取
                $box = $(".box");

                // 宽高
                console.log("元素内容宽高,只算width height", $box.width(), $box.height());

                // 可视区域
                console.log("可视区域,包含 padding", $box.innerWidth(), $box.innerHeight());

                // 真实宽高
                console.log("真实宽高,包含 padding border", $box.outerWidth(), $box.outerHeight());

                // 带margin
                console.log("真实宽高带margin", $box.outerWidth(true), $box.outerHeight(true), ",包含 padding border margin");

                // 修改数据（不会使用一下方式修改元素的宽高样式）

                // $box.width(200) // 带数字参数就可以修改

                // $box.innerWidth(500) // 修改的是元素width部分

                // $box.outerWidth(1000)
                // console.log($box.outerWidth())

                // 提问：如何获取页面的可视宽度？
                // 一般用：html根元素比较多（实际上，谷歌下：document、html、body都可以
                console.log($(document.documentElement).innerWidth());
            });
        </script>
    </body>
</html>

案例:弹幕

NO.1

<script>
        $(function () {
            // 给按钮发射做点击事件
            $('#btn').click(function () {
                // 1. 获取用户输入的值
                let value = $('#text').val().trim()
                if (value.length == 0) return

                // 2. 创建一个span：把值直接放进去
                let $span = $(`<span>${value}</span>`)
                // 3. 给span做好位置运算：修改样式
                $span.css({
                    // 3.1 left值：视口的宽度
                    // 3.2 top值：随机（视口的一般）
                    // 3.3 颜色随机
                    left: $(window).width(),
                    top: -Math.ceil(Math.random() * ($('.boxDom').height() - $('.idDom').height())),
                    color: `rgb(${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)})`
                })

                // 4. 将span放到页面中
                $('.idDom').prepend($span)
                // 5. 动画移动：left：-自身的宽度
                $span.animate({ left: -$span.width() }, 5000, function () {
                    // 6. 删除元素
                    $span.remove()
                })

            })

        })
    </script>

NO.2

<script>
    $(function() {
      $('.btn').click(function() {
        // 1. 获取用户输入内容
        let content = $('#text').val()
        // 2. 根据内容创建一个元素。如span
        let $span = $(`<span>${content}</span>`)
        // 3.设置样式，主要是颜色和位置
        $span.css({
          color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 *
            Math.random()})`,
          position: 'absolute',
          left: $(window).width() - 100,
          top: Math.ceil((Math.random() * $(window).height()) / 2)
        })
        // 4.将元素添加到指定的容器中
        $('#boxDom').prepend($span)
        // 5.为元素添加动画，让其从右移动到左侧
        $span.animate(
          {
            left: -$span.width()
          },
          5000,
          'linear',
          function() {
            // 当动画完成之后，将元素移除
            $span.remove()
          }
        )
      })
    })
  </script>

🎈1.2 jQuery - 位置 offset()、position()、scrollTop()/scrollLeft()

1. offset() 设置或获取元素偏移

offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，
offset().left 用于获取距离文档左侧的距离。
可以设置元素的偏移：offset({ top: 10, left: 30 });

<body>
    <div class="box">
        <div class="son"></div>
    </div>

    <script>
        $(function () {
            const $son = $('.son')

            // 获取偏移
            console.log($son.offset())

            // 获取具体值：.left || top
            console.log($son.offset().left)
            // 数字（方便加工）

            // 可以修改
            $son.offset({ left: 300 })
            // 本质是在原来的自身的left基础之上，修改自己的left
        })
    </script>
</body>

2. position() 获取元素偏移

position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位左侧的距离。
该方法只能获取。

<script>
        $(function () {
            const $son = $('.son')

            // 获取定位偏移
            console.log($son.position())
            // 到定位父级的偏移（原来原生的offset家族中的：偏移部分）

            // 获取数据
            console.log($son.position().left)

        })
    </script>

3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

scrollTop() 方法设置或返回被选元素被卷去的头部。
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

 <script>
        // 原生滚动
        // window.onscroll = function () {
        //     console.log('原生滚动了', pageXOffset, pageYOffset)
        // }

        // jq滚动：将原生对象转成jq对象，将事件去掉on即可
        $(function () {
            $(window).scroll(function () {
                console.log('jq滚动了')
                // console.log($(this))

                // 获取滚动距离
                // scrollLeft() || scrollTop()
                console.log($(this).scrollLeft(), $(this).scrollTop())

                // $(this).scrollTop(500)
                // 实际开发中为了兼容处理，不会给window加滚动距离
                $('html,body').scrollTop(0)
                // 实际浏览器的支持：一般要么是html，要么是body
            })
        })
    </script>

案例:固定导航栏

<script>
            $(function () {
                // 1. 获取相关元素
                const $top = $("#topPart");
                const $nav = $("#navBar");
                const $main = $("#mainPart");
                // 2. 拿到main部分的原始的margin-top：css('marginTop')
                let oldMarginTop = parseFloat($main.css("marginTop"));
                // console.log(oldMarginTop)
                // 3. 给页面添加滚动事件
                $(window).scroll(function () {
                    // 3.1 获取滚动的高度
                    let scrollTop = $(this).scrollTop();
                    // 3.2 获取顶部的高度
                    let topHeight = $top.height();
                    let navHeight = $nav.height();
                    // console.log(scrollTop, topHeight)
                    // 3.3 比较
                    if (scrollTop > topHeight) {
                        // 3.3.1 超出顶部高度：固定定位（增加底部margin）
                        $nav.addClass("fixed");

                        $main.css({ marginTop: oldMarginTop + navHeight });
                    } else {
                        // 3.3.2 没有超出顶部高度：取消固定定位（恢复原始margin）
                        $nav.removeClass("fixed");
                        $main.css({ marginTop: oldMarginTop });
                    }
                });
            });
        </script>

jQuery 事件机制

🎈1.1 jQuery - 事件发展历程

jq事件发展的历程：简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐）

简单事件注册
- 语法：事件类型(事件处理函数)
- 不能同时注册多个事件,同时也不能实现委托事件
bind方式注册事件
- 语法：$(jq).bind(‘事件类型’，事件处理函数)
- 不支持动态事件绑定
delegate注册委托事件
- 语法：$(jq).delegate(‘子元素选择器’，‘事件类型’，事件处理函数)
- 只能注册委托事件，因此注册时间需要记得方法太多了

<script>
        $(function () {
            const $ul = $('ul')

            // 1. 简单事件注册
            /* $ul.mouseenter(function () {
            $(this).css({ backgroundColor: 'green' })
        }) */

            // 绑定鼠标移出事件
            /* $ul.mouseleave(function () {
            $(this).css({ color: '#fff' })
        }) */

            // jq中有事件列队：jq中不会使用on注册事件：事件一定可以同时存在多个相同类型的事件

            // bind绑定事件：bind('事件类型',回调函数)
            /*  $ul.children().bind('mouseenter mouseleave', function () {
             console.log('here')
             $(this).css({ backgroundColor: 'green' })
         }) */
            // 可以绑定多个事件：bind('事件1  事件2 ',共用一个回调函数)

            /*  $ul.append($('<li>新老王</li>')) */
            // bind缺点：不会给动态产生的元素绑定事件

            // 事件委托：delegate('目标子元素选择器','事件类型',回调函数)

            // 原生（事件对象.target）结合jq
            /*  $ul.mouseover(function (e) {
             // console.log(e.target)
             if (e.target.nodeName == 'LI') {
                 $(e.target).css({ backgroundColor: 'green' })
             }
 
         }) */

            // jq简化了原生的事件委托
            $ul.delegate('li', 'mouseover', function () {
                // 永远只触发当前ul中的li的事件：别的都不会触发
                // console.log(this)
                $(this).css({ backgroundColor: 'green' })
            })
        })
    </script>

🎈1.2 jQuery - on 注册事件

在这里插入图片描述

<script>
        $(function () {
            // on的简单注册
            // $('ul').on('click', function () {
            //     console.log(this)
            //     $(this).css({ backgroundColor: 'green' })
            // })

            // on的委托事件
            /*  $('ul').on('click', 'li', function () {
                 console.log(this)
                 $(this).css({ backgroundColor: 'green' })
             }) */

            // on注册多个事件：
            $('ul').on({
                mouseover: function () {
                    $(this).css({ backgroundColor: 'green' })
                },
                mouseout: function () {
                    $(this).css({ backgroundColor: '' })
                },
                click: function () {
                    $(this).css({ color: 'yellow' })
                }
            }, 'li')


            // on可以注册任何事件

            // 1. 常用的：简单事件，on('事件类型：1个',回调函数)
            // 2. 事件委托：on('事件类型','目标子元素的选择器',回调函数)
            // 3. 同时多个事件：共用一个回调函数：on('事件1 事件2 ...',回调函数)：比较多的切换效果toggle系列的
            // $('ul').children('li:last').on('mouseover mouseout', function () {
            //     console.log(this)
            //     $(this).toggleClass('current')
            // })
            // 4. 同时注册多个事件：每个回调函数都不同：on({事件1:回调函数1,事件2:回调函数2...})
        })
    </script>

🎈1.3 jQuery -事件解绑

 <script>
        $(function () {
            // 事件委托：ON
            $('ul').on('click', 'li', function () {
                $(this).css({ backgroundColor: 'green' })
            })

            $('li').on({
                mouseover: function () {
                    $(this).css({ listStyle: 'none' })
                },
                mouseout: function () {
                    $(this).css({ fontSize: 28 })
                }
            })

            $('li').last().on('click', myClick)
            function myClick() {
                $(this).css({ width: 500 })
            }

            // 解绑事件
            // 1. off()：全部干掉事件：只能干掉给自己绑定的事件，委托给父元素的干不掉（如果非要干掉：干掉父元素的事件）
            // $('li').off()

            // 2. 干掉指定的事件类型：off('事件类型')
            // $('li').off('mouseout')

            // 3. 干掉指定的事件：off('事件类型',回调函数的名字)：有名回调
            $('li').off('click', myClick)

            // 可以用来做动画的节流阀


            // 一句话的总结：jq中所有的事件，都可以被解绑：off()
            // 元素.off()

        })
    </script>

🎈1. jQuery - 触发事件 trigger

在这里插入图片描述

<script>
        $(function(){
            // 1.$(jq对象).事件类型()
            // 2.$(jq对象).trigger('事件类型')

            $('#btn1').on('click',function(e){
                console.log(e)
                console.log('我是p元素')
            })

            setInterval(() => {
                // $('#btn1').click()
                $('#btn1').trigger('click')
            }, 2000);

        })
    </script>

案例: 音乐导航

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .nav {
        width: 700px;
        height: 60px;
        background-color: black;
        margin: 0 auto;
      }

      .maps {
        width: 700px;
        text-align: center;
      }

      .maps img {
        width: 80%;
        margin-top: 30px;
      }

      .nav li {
        width: 100px;
        height: 60px;
        /*border: 1px solid yellow;*/
        float: left;
        position: relative;
        overflow: hidden;
      }

      .nav a {
        position: absolute;
        width: 100%;
        height: 100%;
        font-size: 24px;
        color: blue;
        text-align: center;
        line-height: 60px;
        text-decoration: none;
        z-index: 2;
      }

      .nav span {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: yellow;
        top: 60px;
      }
    </style>
  </head>

  <body>
    <div class="nav">
      <ul>
        <li><a href="javascript:void(0);">导航1</a><span></span></li>
        <li><a href="javascript:void(0);">导航2</a><span></span></li>
        <li><a href="javascript:void(0);">导航3</a><span></span></li>
        <li><a href="javascript:void(0);">导航4</a><span></span></li>
        <li><a href="javascript:void(0);">导航5</a><span></span></li>
        <li><a href="javascript:void(0);">导航6</a><span></span></li>
        <li><a href="javascript:void(0);">导航7</a><span></span></li>
      </ul>
      <div class="maps">
        <img src="1.jpg" alt="" />
      </div>
      <div class="mp3">
        <audio src="mp3/1.mp3"></audio>
        <audio src="mp3/2.mp3"></audio>
        <audio src="mp3/3.mp3"></audio>
        <audio src="mp3/4.mp3"></audio>
        <audio src="mp3/5.mp3"></audio>
        <audio src="mp3/6.mp3"></audio>
        <audio src="mp3/7.mp3"></audio>
      </div>
    </div>
    <script src="../js/jquery-1.12.4.js"></script>
    <script>
      $(function() {
        // 获取所有的多媒体标签
        let $audios = $('audio')
        // 为所有li元素添加鼠标进入事件
        $('li').on('mouseenter', function() {
          // 让当前li元素的子元素span 以动画的方式显示(top:60 》 0)
          $(this)
            .children('span')
            .stop()
            .animate(
              {
                top: 0
              },
              'linear'
            )
          // 让对应索引位置的音乐播放
          let index = $(this).index()
          // 播放指定索引位置的音乐,多媒体的api，jq并没有进行封装，所有我们要以原生的方式进行调用
          // play():播放
          // stop():停止
          // pause():暂停
          // load():加载音乐，强制立刻加载音乐
          $audios[index].load()
          $audios[index].play()
        })

        // 为的有li元素鼠标移出事件，在移出事件中将span恢复到top:60的位置
        $('li').on('mouseleave', function() {
          // 让当前li元素的子元素span 以动画的方式显示(top:0 》 60)
          $(this)
            .children('span')
            .stop()
            .animate(
              {
                top: 60
              },
              'linear'
            )
        })

        let flag = true
        // 添加键盘按键事件
        $(document).on('keydown', function(e) {
          if (flag == true) {
            flag = false
            // 1.获取按键所对应的索引
            let index = e.keyCode - 49
            // 2.让对应索引位置的li触发mouseenter
            // $('li').eq(index).mouseenter()
            $('li')
              .eq(index)
              .trigger('mouseenter')
          }
        })
        $(document).on('keyup', function(e) {
          flag = true
          // 1.获取按键所对应的索引
          let index = e.keyCode - 49
          // 2.让对应索引位置的li触发mouseenter
          // $('li').eq(index).mouseenter()
          $('li')
            .eq(index)
            .trigger('mouseleave')
        })

        // 单击切换乐谱
        let index = 1
        $('.maps').on('click', function() {
          index++
          if (index == 4) {
            index = 1
          }
          $(this)
            .children('img')
            .prop('src', `${index}.jpg`)
        })
      })
    </script>
  </body>
</html>

jQuery 补充

🎈1.1 jQuery - 事件对象

<script>
        $(function(){
            // on注册事件四个参数
            //  on(type, selector, data, fun);
            //   data携带的数据, 可以在事件处理函数中使用, 通过事件对象e.data来获取

            // 在jq代码中，使用return false 既能阻止事件冒泡，又能阻止浏览器默认行为。
            // 在原生js代码中，使用return false 只能阻止浏览器默认行为。

            $("div").on("click", function () {
                alert("div");
            })


            $("a").on("click", function () {
                alert("a");
                return false; // 既能阻止事件冒泡, 阻止浏览器默认行为 
            })


            // const arr = [10, 20, 30];
            /*$("#box").on("click", function (e) {
                // console.log(e.data);
                // console.log(arr);
            })*/

            $(document).on("keyup", function (e) {
                console.log(e.keyCode);
            })

        })
    </script>

🎈1.2 jQuery - 两大特性隐式迭代/链式编程

 <script>
        $(function(){
            // jQuery的两大特征
            // 1. 隐式迭代： 偷偷地遍历
                // 1.1 对于设置性操作，会把获取到的所有元素都设置上相同的操作
                // 1.2 对于获取性操作，只会获取到第一个元素对应的值
                // 1.3 如果需要给每一个元素设置上的不同的操作，就需要手动遍历

            // 2. 链式编程

            $("li").css("color", "red");
            $("li").click(function () {
                console.log(123);
            })

            const arr = ["lime", "yellow", "pink"];
            const $lis = $("li");

            // 手动遍历--不建议
            for (var i = 0; i < $lis.length; i++) {
                // i 0 1 2
                $lis.eq(i).css("backgroundColor", arr[i]);
            }
        })
    </script>

🎈1.3 jQuery - 链式编程

<body>

    这是测试文字，大家加油
    
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            // 链式编程：可以通过.一直调用写下去
            // 限制
            //  对于设置性操作，会把当前的jq对象给返回出去, 所以是可以继续链式编程的
            //  对于获取性操作，会把当前的值返回出去（值不是jq对象），所以是不可以继续链式编程的

            // $("body").css("color", "red").css("fontSize").css("backgroundColor", "pink"); // error
            $("body").css("color", "red").css("backgroundColor", "pink").css("fontSize") // 才可以这样链式编程

            // console.log( $("body").css("color", "red") ); // $("body")
            // console.log( $("body").css("color", "red").css("fontSize") ); // 16px
        })
    </script>
</body>

案例:五星评分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: #ff16cf;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>

    <script src="../js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

    <script>
        $(function () {
            // 定义符号
            const wjx_s = "★"
            const wjx_k = "☆"

            // 定义一个变量：记录当前被点击的位置：默认为-1
            let index = -1

            // 获取到所有到li
            const $lis = $('.comment li')

            // 鼠标移入移出事件
            $lis.on('mouseover', function () {
                // 获取到当前li以及前面的所有的li
                // end()当jq对象变了之后，回到上一个对象
                let res = $(this).text(wjx_s).prevAll().text(wjx_s).end().nextAll().text(wjx_k)
                // console.log(res)
                // prevAll()：前面所有的兄弟
                // nextAll()：后面所有的兄弟
                // end()：回调上一次改变的this
            })

            $lis.on('mouseout', function () {
                // $(this).text(wjx_k).prevAll().text(wjx_k).end().nextAll().text(wjx_k)

                // $lis.text(wjx_k)

                // 松开的时候：应该是用户点击的位置及前面都是实心，只清空后面的内容
                if (index == -1) $lis.text(wjx_k)
                else
                    $lis.eq(index).text(wjx_s).prevAll().text(wjx_s).end().nextAll().text(wjx_k)
            })

            // 点击事件
            $lis.on('click', function () {
                // 点击的li，记录位置
                index = $(this).index()
                console.log(index)
            })
        })
    </script>
</body>

</html>

🎈1.4 jQuery - 多库共存

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
      console.log($)

      let c = $.noConflict()
      // $(function() {
      console.log(c)
      // })
    </script>
    <script src="./js/mylib.js"></script>
  </head>
  <body>
    <script>
      console.log($)
      console.log(c)

      // })
    </script>
  </body>
</html>

🎈1.5 jQuery - 插件的使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #222;
        }
    </style>

    <!-- 引入的顺序：先jq，后jq插件 -->
    <script src="../js/jquery-1.12.4.min.js"></script>

    <!-- 引入jquery.color.js -->
    <script src="../js/jquery.color.js"></script>
    <!-- jquery.color.js：修改了jq里面animate方法，处理了里面的样式属性：backgroundColor -->
</head>

<body>
    <div class="box"></div>

    <!-- 需求：点击图片，背景渐变成白色 -->
    <script>
        $(function () {

            $('.box').on('click', function () {
                // 渐变：动画
                $(this).animate({
                    backgroundColor: 'green'
                }, 2000)
            })
        })
    </script>
</body>

</html>

🎈1.2 jQuery - 图片懒加载

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 400px;
            background-color: #f99;
            margin: 10px;
        }

        img {
            width: 300px;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/jquery.lazyload.js"></script>
</head>

<body>
    <div></div>
    <div></div>
    <img class="lazyload" data-original="lazyloadimgs/01.gif" alt="">
    <div></div>
    <div></div>
    <img class="lazyload" data-original="lazyloadimgs/02.gif" alt="">
    <div></div>
    <div></div>
    <img class="lazyload" data-original="lazyloadimgs/03.gif" alt="">
    <div></div>
    <div></div>
    <img class="lazyload" data-original="lazyloadimgs/04.gif" alt="">
    <div></div>
    <div></div>

    <script>
        // 调用lazyload的lazyload方法即可
        $(function () {
            $('img.lazyload').lazyload({
                effect: 'fadeIn'
            })
        })

        // lazyload：懒加载
        // 节省服务器资源：只用用户看到的图片才被加载出来
        // 加速用户的视觉体验
    </script>
</body>

</html>```

🎈1.3 jQuery - 表格操作

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

            .wrap {
                width: 410px;
                margin: 100px auto 0;
            }

            table {
                border-collapse: collapse;
                border-spacing: 0;
                border: 1px solid #c0c0c0;
            }

            th,
            td {
                border: 1px solid #d0d0d0;
                color: #404060;
                padding: 10px;
            }

            th {
                background-color: #09c;
                font: bold 16px "Î¢ÈíÑÅºÚ";
                color: #fff;
            }

            td {
                font: 14px "Î¢ÈíÑÅºÚ";
            }

            td a.get {
                text-decoration: none;
            }

            a.del:hover {
                text-decoration: underline;
            }

            tbody tr {
                background-color: #f0f0f0;
            }

            tbody tr:hover {
                cursor: pointer;
                background-color: #fafafa;
            }

            .btnAdd {
                width: 110px;
                height: 30px;
                font-size: 20px;
                font-weight: bold;
            }

            .form-item {
                height: 100%;
                position: relative;
                padding-left: 100px;
                padding-right: 20px;
                margin-bottom: 34px;
                line-height: 36px;
            }

            .form-item > .lb {
                position: absolute;
                left: 0;
                top: 0;
                display: block;
                width: 100px;
                text-align: right;
            }

            .form-item > .txt {
                width: 300px;
                height: 32px;
            }

            .mask {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                background: #000;
                opacity: 0.15;
                display: none;
            }

            .form-add {
                position: fixed;
                top: 30%;
                left: 50%;
                margin-left: -197px;
                padding-bottom: 20px;
                background: #fff;
                display: none;
            }

            .form-add-title {
                background-color: #f7f7f7;
                border-width: 1px 1px 0 1px;
                border-bottom: 0;
                margin-bottom: 15px;
                position: relative;
            }

            .form-add-title span {
                width: auto;
                height: 18px;
                font-size: 16px;
                font-family: ËÎÌå;
                font-weight: bold;
                color: rgb(102, 102, 102);
                text-indent: 12px;
                padding: 8px 0px 10px;
                margin-right: 10px;
                display: block;
                overflow: hidden;
                text-align: left;
            }

            .form-add-title div {
                width: 16px;
                height: 20px;
                position: absolute;
                right: 10px;
                top: 6px;
                font-size: 30px;
                line-height: 16px;
                cursor: pointer;
            }

            .form-submit {
                text-align: center;
            }

            .form-submit input {
                width: 170px;
                height: 32px;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <input type="text" placeholder="课程名称" id="name" />
            <input type="text" placeholder="所属学院" id="college" /><br />
            <input type="button" value="清空内容" id="btn" />
            <input type="button" value="添加" id="btnAdd" />
            <table>
                <thead>
                    <tr>
                        <th>课程名称</th>
                        <th>所属学院</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="j_tb">
                    <tr>
                        <td>JavaScript</td>
                        <td>我是不会脸红的男孩</td>
                        <td><a href="javascript:;" class="get">DELETE</a></td>
                    </tr>
                    <tr>
                        <td>css</td>
                        <td>我是不会脸红的男孩</td>
                        <td><a href="javascript:;" class="get">DELETE</a></td>
                    </tr>
                    <tr>
                        <td>html</td>
                        <td>我是不会脸红的男孩</td>
                        <td><a href="javascript:;" class="get">DELETE</a></td>
                    </tr>
                    <tr>
                        <td>jQuery</td>
                        <td>我是不会脸红的男孩</td>
                        <td><a href="javascript:;" class="get">DELETE</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script src="./js/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                // 功能：
                // 1. 清空内容 ==> tbody里面的内容清空掉 ==> empty()
                const $tbody = $("#j_tb");
                $("#btn").on("click", function () {
                    // 清空内容，但是要保留tbody结构，所以不使用remove
                    $tbody.empty();
                    // $tbody.remove(); // 自杀式效果
                });

                // 2. 添加新的一行放到tbody
                $("#btnAdd").on("click", function () {
                    let name = $("#name").val();
                    let college = $("#college").val();
                    // 创建新的一行
                    const $newTr = $(`<tr>
                <td>${name}</td>
                <td>${college}</td>
                <td><a href="javascript:;" class="get">DELETE</a></td>
            </tr>`);

                    $tbody.append($newTr);
                });

                // 3. 点击delete，删除一整行（对应的tr）

                $tbody.on("click", ".get", function () {
                    // parent() 当前元素的父元素
                    // parents() 当前元素的所有的祖先元素
                    // $(this).parent().parent().remove();
                    $(this).parents("tr").remove();
                });
            });
        </script>
    </body>
</html>