jQuery

吴嘉鸿

于 2023-09-05 11:01:06 发布

阅读量82

点赞数

文章标签： jquery 前端

本文链接：https://blog.csdn.net/weixin_43460646/article/details/132662821

版权

本博客主要为黑马程序员网课中关于 jQuery 模块（网课在下面有介绍）所整理记录的学习笔记，仅作学习用途，如有侵权，烦请联系本人侵删。同时感谢黑马老师们的辛苦教导付出，如有不足之处，欢迎各位小伙伴、官老爷们多多提意见或建议，感谢！

黑马程序员前端基础教程|jQuery网页开发案例精讲_哔哩哔哩_bilibili

一、jQuery 介绍

JavaScript库: 即 library，是一个封装好的特定的集合(方法和函数)。从封装一大函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取素等简单理解:就是一个JS 文件，里面对我们原生is代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了

比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)

常见的 JS 库：jQuery、prototype、YUI、Dojo、Ext JS、移动端的zepto

这些库都是对原生JavaScript的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。

概述

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码做更多的事情。 j 就是 JavaScript；Query查询；意思就是查 js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 jQuery 封装了JavaScript常用的功能代码，优化了DOM 操作、事件处理、动画设计和Aiax交互

学习jQuery本质: 就是学习调用这些函数(方法) jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

优点：

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

jQuery 的下载

官网地址: jQuery 版本: 1x:兼容IE678等低版本浏览器，官网不再更新 2x:不兼容IE678等低版本浏览器，官网不再更新 3x:不兼容E678等低版本浏览器，是官方主要更新维护的版本各个版本的下载:jQuery

将 jQuery 下载到项目中，然后<script src="jquery.min.js"></script>引用即可

入口函数

有传统和简写两种

等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装
相当于原生is 中的DOMContentLoaded
$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用$
$ 是 jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法

<script src="jquery.min.js"></script>
<script>
    // 传统写法
    $(document).ready(function(){
        ... // 此处是页面 DOM 加载完成的入口
    });
    // 简写
    $(function() {
        ... // 此处是页面 DOM 加载完成的入口
    });
    // $ 是 jQuery 的别称,同时也是 jQuery 的顶级对象
    jQuery(function(){
        // $('div').hide()
        jQuery('div').hide()
    })
</script>

DOM 对象和 jQuery 对象

DOM 对象: 用原生js获取过来的对象就是DOM对象
jQuery对象: 用jquery方式获取过来的对象是jQuery对象。本质: 通过$把DOM元素进行了包装
juery 对象只能使用 jouery 方法，DOM 对象则使用原生的 javaScirpt 属性和方法

<script>
    // 1.DOM 对象
    var myDiv = document.querySelector('div'); // myDiv 是DOM对象
    console.dir(myDiv);
    // 2.jQuery对象
    $('div'); // $(div')是一个 jQuery 对象
    console.dir($('div'))
    // 3.juery 对象只能使用 jouery 方法，DOM 对象则使用原生的 javaScirpt 属性和方法
    myDiv.style .display = 'none';
    // myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
    // $('div').style.display =none';这个$(div')是一个jouery对象不能使用原生is 的属性和方法
</script>

DOM 对象与 jQuery 对象之间是可以相互转换的

因为原生 js 比 jQuery 更大，原生的一些属性和方法 jQuery 没有给我们封装.要想使用这些属性和方法需要把 jQuery 对象转换为DOM对象才能使用

<script>
    // 1.DOM对象转换为 jQuery对象
    // (1) 我们直接获取视频，得到就是jQuery对象
    // $('video');
    // (2) 我们已经使用原生js 获取过来 DOM对象
    var myvideo = document.querySelector( 'video');
    $(myvideo)
    // $(myvideo).play(); // 报错，jquery里面没有play 这个方法
    
    // 2. jQuery对象转换为DOM对像,有两种方式
    $('video')[0].play()
    $('video').get(0).play()
</script>

二、选择器

基本选择器

名称	用法	描述
ID选择器	$("#id")	获取指定id的元素
全选选择器	$(' * ')	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	$("div, p, li")	获取多个元素
交集选择器	$("li.current")	交集元素
子代选择器	$("ul>li")	使用>号，获取亲儿子层级的元素注意，并不会获取孙子级别的元素
后代选择器	$("ul li")	使用空格，代表后代选择器获取 ul 下的所有 li 元素，包括孙子等

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式选代

简单理解:给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作方便我们调用

<body>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 获取四个 div 元素
        console.log($('.div'))
        // 2.给四个div设置背景颜色为粉色 jquery对象不能使用style
        $("div").css("background","pink");
        // 3.隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
        $("ul li").css("color","red");
    </script>
</body>

筛选选择器

语法	用法	描述
:first	$('li:first')	获取第一个 li 元素
:last	$('li:last')	获取最后一个 li 元素
:eq(index)	$("li:eq(2)")	获取到索引号为2的 li 元素（索引号从0开始）
:odd	$("li:odd")	获取到的 li 元素中，选择索引号为奇数的元素
:even	$("li:even")	获取到的 li 元素中，选择索引号为偶数的元素

<body>
    <ul>
        <li>多个里面筛选几个</li>
        <liJ多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </o1>
    <script>
        $(function(){
            $('ul li:first').css('color', 'red')
            $('ul li:eq(2)').css('color', 'blue')
            $('ul li:odd').css('color', 'skyblue') // 奇数（注意：第一行从0开始计数的）
            $('ul li:even').css('color', 'pink') // 偶数
        })
    </script>
</body>

筛选方法（重点）

语法	用法	描述
parent()	$("li").parent()	查找父级
children(selector)	$("ul").children("li")	相当于 $("ul>li")，最近一级（亲儿子）
find(selector)	$("ul").find("li")	相当于 $("ul li")，后代选择器
siblings(selector)	$(".first").siblings("li")	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(".last").prevtAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$("div").hasClass("protected")	检查当前元素是否含有某个特定类，如有则返回true
eq(index)	$("li").eq(2)	相当于 $("li:eq(2)")，index 从 0 开始

重点记住：parent() children() find() siblings() eq()

<body>
    <div class="yeye">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>
    <div class="nav">
        <p>我是屁</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <ol>
        <li>0</li>
        <li class="item">1</li>
        <li>2</li>
    </ol>
    <script>
        $(function() {
            // 父 parent() 返回的是最近一级的父级元素，亲爸爸
            console.log($('.son').parent()) // father
            
            // 子
            // 亲儿子 children() 类似子代选择器  ul>li
            $('.nav').children('p').css('color', 'red') // '我是屁'字体变红
            // 可以选所有孩子，包括儿子孙子 find() 类似后代选择器
            $('.nav').find('p').css('color', 'pink') // '我是屁、我是p'字体都变红
            
            // 兄弟 siblings 除了自身元素之外的所有亲兄弟
            $('ol .item').siblings('li').css('color', 'blue') // 0、2字体变蓝
            // 第n个元素 eq()
            $('ol .item:eq(1)').css('color', 'yellow') // 1 变黄
            $('ol .item').eq(1).css('color', 'yellow') // 1 变黄（更推荐这种方式写，因为eq比较灵活）
            
            // 判断是否有某个类名
            console.log($('div:first').hasClass('current')) // false
        })
    </script>
</body>

排它思想

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 隐式迭代 给所有的按钮都绑定了点击事件,点击了按钮后改变该按钮字体颜色
            $('button').click(function(){
                // 当前的元素变化字体颜色
                $(this).css('color', 'pink')
                // 其余兄弟去掉字体颜色
                $(this).siblings('button').css('color', '')
                
                // 链式编程: 将上面两步骤合并为一步
                // $(this).css('color', 'pink').siblings('button').css('color', '')
            })
        })
    </script>
</body>

三、增删改查

操作 CSS 样式

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式 1.参数只写属性名，则是返回属性值

$(this).css("color");

2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css("color", "red")

3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号（但要用驼峰写法）

$(this).css({ "color":"white", "font-size":"20px"})
$(this).css({ color: white, fontSize: 20px})

操作类

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点

1.添加类：addClass()，不会覆盖前面存在的类

$('div').addClass('current')

2.移除类：removeClass()

$('div').removeClass('current')

3.切换类：toggleClass()

$('div').toggleClass('current')

操作属性

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的 href，比如 <input>元素里面的 type。

获取属性语法

// 获取属性
prop("属性")

// 获取自定义属性，类似于原生js的getAttribute()
attr()

设置属性语法

prop("属性","属性值")

<body>
    <script src="jQuery.js"></script>
    <a href="http://www.itcast.cn" title="都挺好"></a>
    <input type="checkbox" name="" id="" checked />
    <div index="1" data-index="2">自定义属性</div>
    <script>
        $(function () {
            // element.prop("属性名") 获取属性值
            console.log($('a').prop('href')) // http://www.itcast.cn
            $('input').change(function(){
                // 获取是否点击了单选框，点击了打印 true,没点击则打印 false
                console.log($(this).prop('checked'))
            })
            
            console.log($('div').prop('index')) // undefined (获取不到自定义属性)
            // 元素的自定义属性，我们通过 attr() 获取
            console.log($('div').attr('index')) // 1
            console.log($('div').attr('data-index')) // 2
            // 设置自定义属性
            $('div').attr('index', 4) // <div index="4">自定义属性</div>
        })
    </script>
</body>

操作数据

data() 方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

获取、添加数据

获取数据

date("name') // 向被选元素获取数据

添加数据

data("name","value")  //向被选元素附加数据

同时，还可以读取HTML5自定义属性 data-index，得到的是数字型

<body>
    <script src="jQuery.js"></script>
    <span data-index="33"></span>
    <script>
        $(function () {
            $('span').data('uname', 'andy')
            console.log($('span').data('uname')) // andy
            // 这个方法获取 data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
            console.log($('span').data('index')) // 33
        })
    </script>
</body>

设置内容文本值

主要针对元素的内容还有表单的值操作

普通元素内容 html()（相当于原生 innerHTML）

<body>
    <script src="jQuery.js"></script>
    <div>111</div>
    <input type="text" value="请输入内容">
    <script>
        $(function() {
            // 1. 获取设置元素内容 html()
            $('div').html('123') // <div>123</div>
            console.log($('div').html()) // 123
            // 2. 获取设置元素文本内容 text()
            $('div').text('333') // <div>333</div>
            // 3. 获取设置表单值 val()
            $('input').val('yyy') // <input type="text" value="yyy">
        })
    </script>
</body>

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历.

语法1：$(...).each()，可遍历匹配的每一个元素。主要用于DOM处理

$("div").each(function (index，domEle) { xxx } )

index：每个元素的索引号；

demEle：每个DOM元素对象，不是 query 对象；

<body>
    <script src="jQuery.js"></script>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function () {
            // $("div").css("color","red");
            // 如果针对于同一类元素做不同操作，需要用到遍历元素(类似for，但是比for强大)
            let sum = 0
            // 1.each() 方法遍历元素
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
                // console.log(index);
                console.log(i) // 0 1 2
                // 回函数第二个参数一定是 dom元素对象
                console.log(domEle) // <div>1</div><div>2</div><div>3</div>
                // domEle.css("color") 报错，因为dom对象没有css方法
                $(domEle).css("color","blue") // <div style="color: blue;">1</div> ...

                // sum += $(domEle).text() // 0123 不加转换的话会变成字符串相连
                sum += parseInt($(domEle).text())
                // sum += +$(domEle).text() // 这种写法也可以转成整型
            })
            console.log(sum) // 6
        })
    </script>

</body>

语法2：$.each()

$.each() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象

$.each(object ,function (index,element) { xxx; }）

index：每个元素的索引号；

element：遍历内容；

<body>
    <script src="jQuery.js"></script>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function () {
            // 如果针对于同一类元素做不同操作，需要用到遍历元素(类似for，但是比for强大)
            let arr = ['green', 'blue', 'yellow']
            $("div").each(function(i, domEle) {
                // 2.$.each() 方法遍历元素 主要用于遍历数据，处理数据
                $.each($("div"), function(i, ele) {
                    console.log(i); // 0 1 2
                    console.log(ele); // <div>1</div> <div>2</div> <div>3</div>
                })
                $.each(arr,function(i, ele) {
                    console.log(i); // 0 1 2
                    console.log(ele); // green blue yellow
                })
                $.each({
                    name: 'andy',
                    age: 18
                }, function (i, ele) {
                    console.log(i); // name age
                    console.log(ele); // andy 18
                })
            })
        })
    </script>
</body>

创建、添加、删除元素

创建元素：$("<li></li>")

内部添加：element.append("内容")，把内容放到匹配元素最后面，类似于原生 appendChild

外部添加：after("内容") 放后面，before("内容") 放前面

删除元素：remove() 删除匹配的元素（本身）、empty() 删除匹配的元素集合中的所有子节点，html("") 清空匹配的元素内容

<body>
    <script src="jQuery.js"></script>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原来的div</div>
    <script>
        $(function() {
            // 1. 创建元素
            let li = $("<li>我是后来创建的li</li>");

            // 2.添加元素
            // (1) 内部添加
            $("ul").append(li) // 内部添加并且放到内容的最后面
            // $("u1").prepend(li); // 内部添加并且放到内容的最前面
            // (2) 外部添加
            let div = $("<div>我是后妈生的</div>")
            $(".test").after(div) // 添加到后面
            // $(".test").before(div) // 添加到前面
            // 3.删除元素
            // $("ul").remove() // 可以删除匹配的元素 自杀
            // $("ul").empty() // 可以删除匹配的元素里面的子节点 孩子
            $("u1").html("") // 可以删除匹配的元素里面的子节点 孩子
        })
    </script>

</body>

四、jQuery 效果

这部分去官网的 jQuery API 查看即可：

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

五、jQuery 位置

位置主要有三个: offset()、position()、scrollTop()/scrollLeft()

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

offset0方法设置或返回被选素相对于文档的偏移坐标，跟父级没有关系

该方法有2个属性left、top。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离

可以设置元素的偏移:offset({top:10,left: 30);

2. position() 获取元素偏移

position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准

<body>
    <script src="jQuery.js"></script>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function() {
            // 1. 获取设置距离文档的位置（偏移）offset
            console.log($('.son').offset()) // {top: 10, left: 8}
            // console.log($('.son').offset().left) // 8
            $('.son').offset({ // 修改盒子位置
                top: 200,
                left: 200
            })

            // 2. 获取距离带有定位父级元素位置（偏移）position,如果没有带定位的父级，则以文档为主
            console.log($('.son').position()) // {top: 10, left: 8}
        })
    </script>
</body>

六、jQuery 事件

单个事件注册

语法:

element.事件(function(){})
$("div").click(function(){事件处理程序})

其他事件和原生基本一致

多个事件注册

on() 方法：在匹配元素上绑定一个或多个事件的事件处理函数语法:

element.on(events,[selector],fn)

events：一个或多个用格分隔的事件类型，如"click"或"keydown"
selector：元素的子元素选择器
fn：回调函数即绑定在元素身上的侦听函数

优势1：可以绑定多个事件，多个处理事件处理程序

优势2：可以事件委派操作。事件委派的定义就是：把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol>

    </ol>
    <script>
        $(function() {
            // 1. 单个事件注册
            // $("div").click(function() {
            //     $(this).css("background", "purple");
            // });
            // $("div").mouseenter(function() {
            //     $(this).css("background", "skyblue");
            // });

            // 2. 事件处理on
            // (1) on可以绑定1个或者多个事件处理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     },
            //     mouseleave: function() {
            //         $(this).css("background", "blue");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
            // (2) on可以实现事件委托（委派）
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });
            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
            // (3) on可以给未来动态创建的元素绑定事件
            // $("ol li").click(function() {
            //     alert(11);
            // })
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);
        })
    </script>
</body>

自动触发事件

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click() //第一种简写形式

element.trigger("type") // 第二种自动触发模式

$("p").on("click", function () {alert("hi~");});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击

element.triggerHandler(type) // 第三种自动触发模式, 但不会触发默认行为

事件对象

事件被触发，就会有事件对象的产生

element.on(events,[selector],function(event) {})

阻止默认行为:event.preventDefault() 或者 return false

阻止冒泡:event.stopPropagation0

对象拷贝

语法

$.extend([deep]，target，object1，[objectN])

deep：如果设为true为深拷贝，默认为 false 浅拷贝
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象
objectN：待拷贝到第N个对象的对象
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
深拷贝，前面加true，完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。

<body>
    <script src="jQuery.js"></script>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function() {
            var targetobj = {
                id: 0
            }
            var obj = {
                id: 1,
                name: "andy"
            }
            // $.extend(target, obj);
            // $.extend(targetobj, obj);
            // console.log(targetobj); // targetobj = {id: 1, name: 'andy'} 会覆盖 targetobj 里面原来的数据
            // console.log(obj) // obj = {id: 1, name: 'andy'}
            // // 1. 浅拷贝: 把原来对象里面的复杂数据类型地址拷贝给目标对象
            // targetobj.name = 'mike'
            // console.log(targetobj); // obj = {id: 1, name: 'mike'}
            // console.log(obj) // obj = {id: 1, name: 'mike'}

            // 2.深拷贝: 把里面的数据完全复制一份给目标对氯 如果里面有不冲突的属性,会合并到一起
            $.extend(true,targetobj,obj);
            // console.log(targetobj); // 会覆盖targetobj 里面原来的数据
            targetobj.id = 100
            console.log(targetobj); // {id: 100, name: 'andy'}
            console.log(obj); // {id: 1, name: 'andy'}
        })
    </script>
</body>

多库共存

问题概述:

jQuery使用$作为标示符，随着Query的流行,其他js 库也会用这$作为标识符，这样一起使用会引起冲突

客观需求:

需要一个解决方案，让Query 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存

jQuery 解决方案：

1.把里面的$符号统一改为jQuery。比如 jQuery(div")

2.jQuery变量规定新的名称:$.noConflict0var xx = $.noConflict();

<body>
    <script src="jQuery.js"></script>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function() {
            function $(ele) {
                return document.querySelector(ele)
            }
            console.log($("div"))
            // 1.如果$ 符号冲突 我们就使用 jQuery
            jQuery .each();
            // 2.让jquery 释放对$ 控制权 让用自己决定
            let suibian = jQuery.noConflict();
            console.log(suibian("span"));
            suibian.each()
        })
    </script>
</body>

七、jQuery插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成注意:这些插件也是依赖于jQuery来完成的，所以必须要先引入iQuery文件，因此也称为jQuery插件jQuery插件常用的网站:

jQuery插件库 http://wwwjq22.com/
iQuery之家jQuery之家-自由分享jQuery、html5、css3的插件库

jQuery插件使用步骤:

引入相关文件。(jQuery文件和插件文件)
复制相关html、css、js(调用插件)

jQuery插件演示:

瀑布流
图片懒加载(图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)当我们页面滑动到可视区域，再显示图片。我们使用iquery插件库 EasyLazyload。注意，此时的js引入文件和js调用必须写到DOM元素(图片)最后面
全屏滚动（fullpage.js ) gitHub : https://qithub.com/alvarotrigo/fullPage.js 中文翻译网站: jQuery全屏滚动插件fullPage.js演示_dowebok

八、本地存储

刷新页面不会丢失数据，因此需要用到本地存储localStorage

核心思路:不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据

存储的数据格式:var todolist= [title:“xxx，done: false}]

注意点1: 本地存储localStorage里面只能存储字符串格式，因此需要把对象转换为字符串 JSON.stringify(data)

注意点2: 获取本地存储数据，需要把里面的字符串转换为对象格式 JSON.parse() 我们才能使用里面的数据

<body>
    <script src="jQuery.js"></script>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function() {
            let todolist = [{
                title: "我今天吃八个馒头",
                done: false
            }, {
                title: "我今天学习jq",
                done: false
            },];
            // 1.本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式JSON.stringify()
            localStorage.setItem("todo", JSON.stringify(todolist));
            var data = localStorage.getItem("todo");
            // console.log(typeof data) // string
            // console.log(data[0].title) // 报错，需要转换为对象先
            // 获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()
            data = JSON.parse(data);
            console.log(data) // [{title: "我今天吃八个馒头",done: false}, { title: "我今天学习jq",done: false},]
        })
    </script>
</body>

吴嘉鸿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery

本博客主要为黑马程序员网课中关于 jQuery模块（网课在下面有介绍）所整理记录的学习笔记，仅作学习用途，如有侵权，烦请联系本人侵删。同时感谢黑马老师们的辛苦教导付出，如有不足之处，欢迎各位小伙伴、官老爷们多多提意见或建议，感谢！
复制链接

扫一扫