JQuery知识点

站长

2024年03月31日 19:42 · 阅读数 39

JQuery

一个快速、简洁、兼容性高的 JS 框架 ( 辅助工具 )
与JS可以共存，但不能混用

文档👇

j查询 (jquery.com)

jQuery 教程 (w3school.com.cn)

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

🏝️设计思想：

一. 选择网页元素

模拟css选择元素
- CSS 选择器 | 菜鸟教程 (runoob.com)
独有的表达式写法
多种筛选方式


<head>
    <script  type="text/javascript" src="jquery-1.10.1.min.js"></script>
    
    <script>
        // 页面加载完成执行的代码
        window.onload=function(){
            // 1. 模拟css选择元素
            $("#div1").css("backgroundColor",'blue');

           // 2. 独有表达式选择
           // 第一个变成红色
           $("li:first").css("backgroundColor",'red');
           //第一个:first,最后一个:last，偶数:even，基数:odd，指定下标 eq:()
           //$("li:eq(2)").css("backgroundColor",'red');
           //$("li").eq(3).css("backgroundColor",'red');
           
           // 3. 多种筛选方法
           $("li").filter(".box").css("backgroundColor",'yellow');
        }
    </script>
</head>
<body>
    <div id="div1">
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li class="box">5555</li>
        </ul>
        <span title="name">span</span>
        <div title="name">div</div>
        <p>p</p>
    </div>
</body>
</html>

二. JQery写法

方法函数化
- 意思也就是，在JQ中几乎见不到等于=操作，所有赋值操作都是函数赋值

        $(function(){
            alert("相当于window.onload=function(){}")
            
            //事件添加
            //不用这么写了$("h1").onclick=function(){}
            //直接写成一个函数
            $("h1").click(function(){
                alert("我被点击了")
            })
        });

链式操作
- 如果多个操作，操作的都是同一个选择器，那么就可以用链式操作来简化

    <script>
        $(function(){
            $("h1").click(function(){
                alert("我被点击了")
            }).css("backgroundColor","red")
            .mouseover(function(){
                this.style.backgroundColor='orange'
            }).mouseout(function(){
                this.style.backgroundColor='blue'
            })
        });
    </script>

取值赋值合体（取值赋值都用一个函数）

<head>
...
    <script>
        $(function(){
            //innerHTML  value
            //取值 $("").html()
            alert($("#div1").html())
            //赋值 $("").html()，同一个函数
            $("#div1").html("<h2>我是新赋值的标签</h2>")
            $("input").val("hello")
        });
    </script>
</head>
<body>
    <div id="div1">
        <em>em</em>
        div文本
    </div>
    <input type="text" value="hello world">
</body>

🏝️JQuery方法

Part1

$()下的常用方法	🥝🥝🥝
.has()	拥有，直接判定子节点中是否有符合条件的元素
.not()	filter的反义词
.filter()	过滤，对已经获取到的网页元素进行过滤
.next()	查找当前兄弟节点中的下一个节点
.prev()	查找当前兄弟节点中的上一个节点
.find()	可以查找子节点
.eq()	通过下标获取指定的元素节点
.index()	获取当前节点在兄弟节点中的下标（同层级）
.attr("行内属性名","新的")	设置和修改单个行内的属性
.attr({...：""})	设置和修改多个行内的属性
————————
.html()	标签间的内容，相当于innerHTML
.text()	标签间的纯文本，相当于innerText

选项卡案例

原生JS写的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="jquery-1.10.1.min.js"></script> -->
    <style>
        #div1 button{
            width: 100px;
            height: 30px;
            background-color: gray;
            font-size: 16px;
            color: white;
        }
        #div1 div{
            width: 350px;
            height: 350px;
            background-color: gray;
            border: 1px solid black;
        }
        #div1 .active{
            background-color: orange;
            color: blue;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById("div1");
            var aBtns=oDiv.getElementsByTagName("button")
            var aDivs=oDiv.getElementsByTagName("div")


            for(var i=0;i<aBtns.length;i++){
                //添加自定义属性，记录当前按钮的下标
                //因为这个执行时index就已经等于3了
                aBtns[i].index=i
                aBtns[i].onclick=function(){
                    //清除全部样式，将div隐藏
                    for(var j=0;j<aBtns.length;j++){
                        aBtns[j].className='';
                        aDivs[j].style.display='none'
                    }

                    this.className='active';
                    aDivs[this.index].style.display='block'
                }
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <button class="active">JS</button>
        <button>HTML</button>
        <button>JQuery</button>
        <div style="display:block">111111</div>
        <div style="display:none">2222222</div>
        <div style="display:none">33333333</div>
    </div>
</body>
<script>
</script>
</html>

JQuery简化之后

    <script src="jquery-1.10.1.min.js"></script>
    <script>
        $(function(){
            var aBtns=$("#div1").find("button");
            var aDivs=$("#div1").find("div")

            aBtns.click(function(){
                aBtns.attr("class",'');
                aDivs.css("display",'none');

                $(this).attr("class",'active');
                aDivs.eq($(this).index()).css("display",'block')
            })
        })
    </script>

Part2

$()下的常用方法	🥝🥝🥝
.addClass()	添加class
.removeClass()	删除class
——————
.width()	获取宽度
.innerWidth()	获取宽度（包含内边距）
.outerWidth()	获取宽度（包括内边距，边框）
.outerWidth(true)	获取宽度（包括内边距，外边距，边框）
————————
.height()	获取宽度
.innerHeight()	获取高度（包含内边距）
.outerHeight()	获取高度（包括内边距，边框）
.outerHeight(true)	获取高度（包括内边距，外边距，边框）

TIP：

之前获取宽度只有这个，包含的太多容易搞混-

offsetWidth 获取宽度，是包括width+border+padding

$()下的常用方法	🥝🥝🥝
.insertBefore()	一个节点插入到另一个节点之前，操作句
----`$("span").insertBefore($("div"));`	意思是：span插到div之前
.before()	陈述句
----`$("div").before($("span"));`	意思是：div前面是span
.insertAfter()	一个节点插入到另一个节点之后
.after()
.appendTo()	把一个节点插到另一个节点的子节点的末尾
.append()
.prependTo()	把一个节点插到另一个节点的子节点的首位
.prepend()
.remove()	删除节点
`$('<><>')`	创建节点(中间是反引号)

TIP：给出两种方法的意义在于，在后续如果需要链式操作时，主语（主体）不同

Part3——滚动操作

$()下的常用方法	🥝🥝🥝
获取滚动操作
.scrollTop()
.scroll...()

获取滚动条，使div居中案例

JQuery知识点

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #div1 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
            display: none;
        }

        #close {
            position: absolute;
            right: 0px;
            top: 0px;
        }
    </style>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        $(function () {
            // 计算居中的top值和left值
            var top = $(window).scrollTop() + ($(window).height() - $("#div1").outerHeight(true)) / 2
            var left = ($(window).width() - $("#div1").outerWidth(true)) / 2

            $("#div1").css({
                left: left,
                top: top
            })

            // 只写到上面那样是不行的，这时候如果页面宽度变化，并不能适应性变化
            // 在这两个事件之下
            $(window).on("scroll resize", function () {
                var top = $(window).scrollTop() + ($(window).height() - $("#div1").outerHeight(true)) / 2
                var left = ($(window).width() - $("#div1").outerWidth(true)) / 2

                $("#div1").css({
                    left: left,
                    top: top
                })
            })


            $("#issue").click(function () {
                $("#div1").css("display", 'block')
            })
            $("#close").click(function () {
                $("#div1").css("display", 'none')
            })
        })
    </script>
</head>

<body>
    <button id="issue">发布</button>
    <div id="div1">
        <input type="text" placeholder="用户名">
        <input type="text" placeholder="密码">
        <div id="close">X</div>
    </div>
</body>
<script>
</script>

</html>

Part4——事件绑定 on，off

$()下的常用方法	🥝🥝🥝
事件绑定方法
.on("方法名",function(){})	1. 可以一个事件添加一个函数；
	2. 也可以同时给多个方法添加同一个函数（多个事件之间可以用空格隔开）；
	3. 可以给不同事件添加不同函数（用对象方式传参`.on（{...}）`）
	4. 实现事件委托(第二个参数，是触发对象的选择器)（`$("ul").on("方法","li",function(){...})`）
	5. `.on（"方法"，“我们要传的参数，必须是个对象”，要执行的函数）`，此时在函数里就可以通过ev.data拿到我们要传的参数（一个比较间接的传参方法，往后面函数里传，其实严格来说是后面函数来拿）
.off()	1. 不传参，就是取消该节点所有事件上的所有函数
	2. 取消某一事件下的所有函数，`.off("方法")`
	3. 取消某一事件下的指定函数，`.off("方法"，函数名)`

Part5——ev事件

$()下的常用方法	🥝🥝🥝
ev	拿到的是事件对象
————————————
ev.pageX()，.pageY()	获取当前鼠标位置（带滚动距离）
ev.clientX，.clientY()	直接获取以我们可视窗口为原点的距离
ev.which()	1. 用在鼠标事件里——相当于button（1代表左键，2代表滚轮，3代表右键）
	2. 用在键盘keydown事件里——keyCode键码，不区分大小写
	3. keypress——charCode字
符码，区分大小写
ev.preventDefault()	阻止默认行为
ev.stopPropagation()	阻止事件冒泡
return false	如果想要既阻止事件冒泡，又阻止默认行为，就在这个函数最后写这句
——————————————
ev.trigger()	主动触发（就比如你的按钮button让它在没有主动点击的时候，就主动触发一下它的行为）
ev.data()	配合on使用，具体可见on方法的第五条
ev.target()	兼容后触发对象
ev.type()	输出事件类型

ev.data

 $(function(){
         $("button").on("click",{username:'phy',age:18},function(ev){
             console.log(ev.data)
             console.log(ev.data.age)
             console.log(ev.data.username)
         })
  })

JQuery知识点

ev.trigger

    <script>
        $(function(){
            $("#play").on("play",function(){
                alert("开始播放")
            })
            $("#play").on("next",function(){
                alert("切换到下一首")
            })
            $("button").eq(0).click(function(){
                $("#play").trigger("play")
            })
            $("button").eq(1).click(function(){
                $("#play").trigger("next")
            })
        })
    </script>
</head>
<body>
    <button>播放</button>
    <button>下一首</button>
    <div id="play"></div>
</body>

Part6

$()下的常用方法	🥝🥝🥝
.offset().left	直接获取当前这个元素距离最左边的距离（不管有没有父级，当前这个元素px不包括margin）
.position().left()	直接获取当前这个元素，距离第一个有css定位的父节点的距离（包括margin）
.offsetParent()	查找我第一个有定位的父节点，如果没有，那就最终找到html节点

鼠标拖拽案例

原生js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById("div1")

            oDiv.onmousedown=function(ev){
                var e=ev||window.event;
                var offsetX=e.pageX-this.offsetLeft
                var offsetY=e.pageY-this.offsetTop

                document.onmousemove=function(ev){
                    var e=ev||window.event;
                    oDiv.style.left=e.pageX-offsetX+'px';
                    oDiv.style.top=e.pageY-offsetY+'px';
                }
            }
            document.onmouseup=function(){
                document.onmousemove=null
            }
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

JQuery写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        $(function(){
            $("div").mousedown(function(ev){
                var offsetX=ev.pageX-$(this).offset().left;
                var offsetY=ev.pageY-$(this).offset().top;

                var _this=this;
                $(document).mousemove(function(ev){
                    $(_this).css({
                        left:ev.pageX-offsetX,
                        top:ev.pageY-offsetY
                    })
                })
            })
            $(document).mouseup(function(){
                $(document).off("mousemove")
            })
        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

Part7——val，each

$()下的常用方法	🥝🥝🥝
`.val()`	value,直接用来获取/设置表单元素的值

        $(function(){
            alert($("input").val())；
            
            $("input").val("hello")
        })
        
    <input type="text" value="aaa">
    <input type="text" value="bbb">
    <input type="text" value="ccc">
    <input type="text" value="ddd">

得到：👇

JQuery知识点

JQuery这个只能得到 第一个 符合条件的元素的值
但是赋值操作是批量操作，会对所有符合元素赋值，也就是都会变

$()下的常用方法	🥝🥝🥝
`.size()`或`.length()`	输出，获取网页元素的个数

补充一个点👇

为什么上面的案例，由原生js改为jquery之后就不用写循环了呢？？？？

因为，jQuery的css，attr，html都是批量操作的

jQuery的循环

在某些场景，比如需要下标的，就也需要用到循环了

$()下的常用方法 🥝🥝🥝
.each(function(index,item){...}) 循环

$()下的常用方法	🥝🥝🥝
.each(function(index,item){...})	循环

jQuery的特效函数

$()下的常用方法	🥝🥝🥝
.hover(function(funcOver，funcOut){})	第一个参数是移入的函数，第二个参数是移除的函数（记得是函数）
.hide()	隐藏
.hide() / .show()	第一个参数传：动画持续的毫秒数；第二个参数传：一个回调函数（在动画结束时执行）
.show()	显示
hide和show的效果是——从左上角收起，从左上角展开
————————
.slideDown()	展下来，参数传递同上
.slideUp()	卷上去
动画效果是卷闸效果
—————————
.fadeIn()	淡入，参数传递同上
.fadeOut()	淡出
.fadeTo(动画持续时间，透明度0~1，回调函数)	特殊
动画效果是淡入淡出

Part8——运动 animate

$()下的常用方法	🥝🥝🥝
动画函数
.animate()	第一个参数：目的值；第二个参数：持续时间0~1；第三个参数：回调函数

animate提供了两种运动形式(在第三个参数处写)

默认运动形式是——慢、快、慢,"swing"
匀速,"leaner"

更多的animate的运动形式

引入 jquery-ui
Jquery UI 特效（Effect） - Easing 演示_Jquery UI 中文网

TIP:

引入了jQuery-UI之后，对于添加删减class的方法也可以传递持续时间的参数了（写在第二个参数里）

这样的话，可以通过增删class来对css样式修改，“增强版”，使样式变化也有时间

但是现在有一个问题

就是如果我们多次移入移出，触发多次函数，那么这个效果就会累加，直至都执行完

总的来说：.stop(true).animate(),意思是每次调用的时候，先关闭上次的定时器

所以就引出了一个新方法👇

停止动画的函数

$()下的常用方法 🥝🥝🥝
.stop() 停止第一个动画，后面动画正常运行
.stop(true) 全部停止
.stop(true，true) 全部停止，并且将当前正在进行的动画，直接到达目的值
.finish() 停止所有动画，并将所有动画都到达目的值
.dalay(秒) 延迟

$()下的常用方法	🥝🥝🥝
.stop()	停止第一个动画，后面动画正常运行
.stop(true)	全部停止
.stop(true，true)	全部停止，并且将当前正在进行的动画，直接到达目的值
.finish()	停止所有动画，并将所有动画都到达目的值
.dalay(秒)	延迟

Part9——删除节点

$()下的常用方法	🥝🥝🥝
删除元素节点
.remove()	remove的返回值，就是我们删除的这个节点
..	但是删除节点后，并不会保留这个节点原来的行为
.detach()	会保留

Part10——ready

$()下的常用方法	🥝🥝🥝
.ready()	事件触发在当前的document加载完成以后执行

这个window.onload代表的不仅仅是当前页面，还包括location....的数据加载完毕

        $(function(){
            alert("相当于window.onload=function(){}")
        });

而这个document则只代表当前页面html，范围会比window.onload要小一些

所以document加载完毕肯定是在window加载完毕之前的

所以其实function相当于的是document；而不是function相当于window.onload

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

Part11——节点操作的方法

$()下的常用方法	🥝🥝🥝
下述所有方法的参数都是选择器（就是节点），（都不包）
.siblings()	获取除当前节点外的所有兄弟节点
.nextAll()	从当前节点往下，所有的兄弟节点
.prevAll()	从当前节点往上，所有的兄弟节点
.parentsUntil()	查找父节点。参数是直到的节点
.nextUntil()	从当前节点往下直到截止的节点（上下都不包）。里面传的参数，是截止的节点
.prevUntil()	从当前节点往上直到截止的节点（上下都不包）。里面传的参数，是截止的节点
——————————
克隆
.clone()	但它只拷贝节点本身，对于这个节点原有的操作行为并没有拷贝
.clone(true)	这样就都克隆了
——————————
.add()	多个选择器拼接在一起（这样就可以共享操作咯）
.slice(start，end)	包前不包后，获取指定范围的我选择的节点（里面传的是下标）

Part12——parent，closest

$()下的常用方法	🥝🥝🥝
.parent()	只是获取父节点
.parents()	获取父节点们
.closest()	必须传参！参数是选择器，只获取第一个符合条件的元素，而且它是从自己开始查找的

Part13——warp包装

$()下的常用方法	🥝🥝🥝
里面直接写创建JQ节点的代码
.wrap()	每一个获取到的节点都单独包装
.wrapAll()	整体包装，都包装在一起
.wrapInner()	在里面包装，内填充
.unwrap()	删除包装，将我当前获取的节点，如果外面有包装，就把它删除掉（删除上一层包装）（没有参数）

Part14——数据串联化

$()下的常用方法	🥝🥝🥝
.serialize()	将我们表单中的数据拼接成querystring（查询字符串，name1=value1&name2=value2）
.serializeArray()	将表单中数据拼接成数组

serach—— ？name1=value1&name2=value2

queryString—— name1=value1&name2=value2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        $(function(){
            alert($("input").serialize())


            console.log($("input").serializeArray())
        })
    </script>
</head>
<body>
    <input type="text" name="a" value="1">
    <input type="text" name="b" value="2">
    <input type="text" name="c" value="3">
</body>
</html>

得到👇

JQuery知识点

Part15——JQery的工具方法

和我们自己封装的js方法没有区别（也就是说jquery和js都可以使用）

$()下的工具方法	🥝🥝🥝
.type()	输出当前的数据类型，比typeof更细化
.trim()	删除字符串的首尾空格
.inArray() / indexOf()	在数组中查找某一个元素的下标
.proxy() / $.proxy	功能类似于bind
JSON.parse() / $.parseJSON()
$.noConflict()	给$起别名（一般不用）
Array.from() / $.makeArray(伪数组)	将伪数组转成数组

$.type(str)

str.trim()

$.inArray(元素，arr)
...

Part16——JQery的插件方法

如果我们想要给JQ新增函数，通过下面两个插件方法拓展函数库

$()下的插件方法	🥝🥝🥝
$.extend()	拓展的是工具方法，只能通过`$.xxx()`调用
$.fn.extend()	拓展的是JQ方法，通过`$.（""）.xxx()`调用，最后return一下this（这样下面就可以对这个调用写链式操作了）

JQuery知识点

Part16——JQuery的cookie和ajax方法

jQuery Cookie 插件 | 菜鸟教程 (runoob.com)

cookie就是客户端用来存储数据的

jquery.cookie很简单，只有一个函数，就是$.cookie()

具体调用的格式

$.cookie(name)，通过name取值

$.cookie(name，value)设置name和value

$.cookie(name，value，{可选项...})

$.cookie(name，null)删除cookie

可选项

expires：n（意思是n天后过期）

可选项中新增了一个raw，raw：true

不写这个的话，默认false，键和值都是通过编码来存的

写上这个后值就不编码存了

    <script src="jquery-1.10.1.min.js"></script>
    <script src="jquery.cookie.js"></script>
    <script>
        ...
    </script>

JQuery知识点

jquery的ajax

通过$.ajax({})下载数据

type：""指定下载的方式（比如get...）

url：""指定下载的路径

第三个参数data：{}，指定有没有参数传给它

第四个参数success：function（data）{可以拿到我们下载成功的数据}

error：function（msg）{可以拿到我们下载失败的数据}

里面可以传的参数其实还有很多！！！！（dataType：“jsonp”只是其中之一）

jquery的jsonp跨域直接是整合到ajax方法上的

直接加一句dataType：“jsonp”

这一句就可以实现动态创建script标签并把它插在页面中

并且它直接可以把你的数据data转成json格式的字符串对应的对象（意思就是不需要我们额外再利用json.parse进行解析了，已经解析好了）

ajax系列方法

ajax系列方法 🥝🥝🥝
$().load() 更加细化的加载数据的方法
将url传入后，将下载的数据直接填充到被选中元素的innerHTML中（比如下面例子中的div）
第二个参数可以传一个回调函数（是在下载完数据之后的一个回调函数）
"demo.txt h1..."这个url里面也可以跟选择器，这样就只下载符合条件的选择器
$.get() 请求
$.post() 请求

ajax系列方法	🥝🥝🥝
$().load()	更加细化的加载数据的方法
	将url传入后，将下载的数据直接填充到被选中元素的innerHTML中（比如下面例子中的div）
	第二个参数可以传一个回调函数（是在下载完数据之后的一个回调函数）
	`"demo.txt h1..."`这个url里面也可以跟选择器，这样就只下载符合条件的选择器
$.get()	请求
$.post()	请求

1. load

jQuery – AJAX load() 方法 | 菜鸟教程 (runoob.com)

JQuery知识点

//demo.txt
<h2>jQuery AJAX 是个非常棒的功能！</h2>
<p id="p1">这是段落的一些文本。</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
    </style>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
       $(function(){
        $("button").click(function(){
            $("div").load("demo.txt",function(data,statusText,xhr){
                alert(data+","+statusText);
                alert(xhr.status)//输出的是状态码
            })
        })
       })
    </script>
</head>
<body>
    <button>下载数据</button>
    <div></div>
</body>
</html>

2. get，post

JQuery知识点

🏝️案例总结

🏖️🏖️放大镜

JQuery知识点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #small{
            width:250px;
            height: 250px;
            border: 1px solid black;
            position: absolute;
            left: 100px;
            top: 100px;
        }
        #small img{
            width:100%;
            height: 100%;
        }
        #big img{
            width: 1080px;
            height: 1080px;
            position: absolute;
        }
        #big{
            display: none;
            overflow: hidden;
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: absolute;
            left: 400px;
            top: 100px;
        }
        #mask{
            display: none;
            width: 100px;
            height: 100px;
            background-color: white;
            opacity:0.5;
            filter: alpha(opacity=50);
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        $(function(){
            //首先给small设置鼠标的移入移出和移动的事件
            $("#small").mouseenter(function(){
                $("#mask,#big").show()
            }).mouseleave(function(){
                $("#mask,#big").hide()
            }).mousemove(function(ev){
                var l=ev.pageX-$(this).offset().left
                var t=ev.pageY-$(this).offset().top
                //防止遮罩出框
                if(l<=0){
                    l=0
                }
                if(l>=150){
                    l=150
                }
                if(t<=0){
                    t=0
                }
                if(t>=150){
                    t=150
                }
                //让鼠标在遮罩的中间
                $("#mask").css({
                    left:l-50,
                    top:t-50
                })
                //同时放大图片的位置，四倍于遮罩层的位置，注意为反方向
                $("#big img").css({
                    left:-4*l,
                    top:-4*t
                })
            })
        })
    </script>
</head>
<body>
    <div id="small">
        <img src="./QQ图片20231220121456.jpg" alt="">
        <div id="mask"></div>
    </div>
    <div id="big">
        <img src="./QQ图片20231220121456.jpg" alt="">
    </div>    
</body>
</html>

🏖️🏖️banner图

图片尺寸按比例缩放计算器 (gitee.io)

JQuery知识点

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        li {
            list-style: none;
        }

        img {
            border: none;
        }

        body {
            background: #ecfaff;
        }

        .play {
            width: 500px;
            height: 188px;
            position: relative;
            margin: 150px auto 0;
            overflow: hidden;
        }

        ol {
            position: absolute;
            left: 400px;
            bottom: 5px;
            z-index: 2;
        }

        ol li {
            float: left;
            margin-right: 10px;
            display: inline;
            cursor: pointer;
            background-color: #fcf2cf;
            border: 1px solid #f47500;
        }

        .active {
            padding: 3px 8px;
            font-weight: bold;
            color: #ffffff;
            background-color: #ffb442;
            position: relative;
            bottom: 2px;
        }

        ul {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        ul li {
            display: inline;
            float: left;
        }

        ul img {
            float: left;
            width: 500px;
            height: 188px;
        }
    </style>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        $(function () {
            var aBtns = $("#play ol li")
            var oUl = $("#play ul")
            var aLis = oUl.find("li")

            var iNow = 0 //当前显示图片的下标
            var timer = null

            //鼠标移入移出，清除或添加定时器
            $("#play").mouseenter(function () {
                clearInterval(timer)
            }).mouseleave(function () {
                timer = setInterval(function () {
                    iNow++
                    tab()
                }, 2000)

            })

            //点击按钮时
            aBtns.click(function () {
                iNow = $(this).index()
                tab()
            })

            //定时器
            timer = setInterval(function () {
                iNow++
                tab()
            }, 2000)

            //封装的函数
            function tab() {
                //根据index的变化给li设置active
                aBtns.attr("class", '').eq(iNow).attr("class", 'active')
                //如果到最后一张时，跳转到第一张时给第一个按钮加active
                if (iNow === aBtns.size()) {
                    aBtns.eq(0).attr("class", "active")
                }
                oUl.animate({
                    top: iNow * -188
                }, 500, function () {
                    if (iNow == aBtns.size()) {
                        iNow = 0;
                        //如果到最后一张时，跳转到第一张
                        oUl.css("top", 0)
                    }
                    //最后这个回调函数，实在500动画执行完才会执行
                })
            }




            //给所有的按钮添加点击事件
            // aBtns.click(function () {
            //     $(this).attr("class", 'active').siblings().attr("class", '')

            //     oUl.animate({
            //         top:$(this).index()*-188
            //     },500)
            // })


        })
    </script>
</head>

<body>
    <div id="play" class="play">
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
        <ul>
            <li><img src="./wrap/1.jpg" alt=""></li>
            <li><img src="./wrap/2.jpg" alt=""></li>
            <li><img src="./wrap/3.jpg" alt=""></li>
            <li><img src="./wrap/4.jpg" alt=""></li>
        </ul>
    </div>
</body>

</html>

TIP:

在线JSON校验格式化工具（Be JSON）
- 这个可以将我们的json数据视图化
- json.parse是转成数据结构（也就是数组）
- json.stringify是转成json字符串
ajax下载数据，加载页面是异步操作。
- 所以如果直接在ajax外写关于这些数据的绑定事件，是无法执行的
- 但是我们可以使用 事件委托 来解决

"加载数据是异步操作" 这句话意味着数据的加载不是立即完成的，而是在一个单独的线程或进程中执行，不会阻塞主线程或进程的执行。这种操作模式通常用于优化性能，特别是在处理耗时的操作（如网络请求、数据库查询等）时。

在异步操作中，当你发起一个数据加载请求时，程序不会等待这个请求完成就继续执行其他任务。相反，它会立即返回并继续执行后续的代码，而数据的加载则在后台进行。一旦数据加载完成，程序通常会通过某种机制（如回调函数、Promise、事件或异步/等待语法）来通知你，以便你可以处理这些数据。

cookie存储是有大小限制的

cookie只能存储字符串（数组是不能直接存储在字符串中的，但是转成json格式字符串就可以了）

cookie存储购物车数据的过程👇

转载自:https://juejin.cn/post/7352018939906490420