本地储存、jQuery

文章目录

- 1. 本地储存
- - 1. window.sessionStorage
  - 2. window.localStorage
  - 案例：记住用户名
- 2. jQuery入门
- - jQuery 的概念
  - jQuery 的入口函数
  - jQuery 的顶级对象 $
  - jQuery 对象和 DOM 对象
3. jQuery 常用API
- 1. jQuery 选择器
- - 1.基础选择器
  - 2.层级选择器
  - 隐式迭代（重要）
  - 3.jQuery筛选选择器
  - jQuery筛选方法（重点）
  - jQuery 里面的排他思想
  - 案例：淘宝服饰精品案例
  - 链式编程
- 2. jQuery 样式操作
- - 操作 css 方法
  - 设置类样式方法
  - 案例：tab 栏切换
  - 类操作与className区别
- 3. jQuery 效果
- - 显示隐藏效果
  - 滑动效果
  - 事件切换
  - 动画队列及其停止排队方法
  - 淡入淡出效果
  - 自定义动画 animate
  - 案例：王者荣耀手风琴效果
- 4. jQuery 属性操作
- - 设置或获取元素固有属性值 prop()
  - 设置或获取元素自定义属性值 attr()
  - 数据缓存 data()
  - 案例：购物车案例模块-全选
  - 案例：购物车案例模块-选中商品添加背景
- 5. jQuery 文本属性值
- - 案例：购物车案例模块-增减商品数量-修改商品小计
- 6. jQuery 元素操作（遍历、创建、添加、删除）
- - 遍历元素
  - 案例：购物车案例模块-计算总计和总额
  - 创建、添加元素
  - 删除元素
  - 案例：购物车案例模块-删除商品模块
- 7. jQuery 尺寸、位置操作
- - jQuery 尺寸
  - jQuery 位置操作
  - 案例：带有动画的返回顶部
  - 案例：品优购电梯导航
4. jQuery 事件注册
- 1. jQuery 事件处理
- - 事件处理on()绑定事件
  - 案例：发布微博案例
  - 事件处理 off() 解绑事件
  - 自动触发事件 trigger()
- 2. jQuery 事件对象
5. jQuery 其他方法
- 1. jQuery 拷贝对象
- 2. 多库共存
- 3. jQuery 插件
- 4. 案例：todolist
- - 本地存储的数据格式
  - toDoList按下回车键把新数据添加到本地存储里面

1. 本地储存

在这里插入图片描述

1. window.sessionStorage

在这里插入图片描述

 <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        console.log(localStorage.getItem('username'));
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            // 当我们点击了之后，就可以把表单里面的值存储起来
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
        get.addEventListener('click', function() {
            // 当我们点击了之后，就可以把表单里面的值获取过来
            console.log(sessionStorage.getItem('uname'));
        });
        remove.addEventListener('click', function() {
           //             sessionStorage.removeItem('uname');
        });
        del.addEventListener('click', function() {
            // 当我们点击了之后，清除所有的
            sessionStorage.clear();
        });
    </script>

2. window.localStorage

在这里插入图片描述

 <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            var val = ipt.value;
            localStorage.setItem('username', val);
        })
        get.addEventListener('click', function() {
            console.log(localStorage.getItem('username'));
        })
        remove.addEventListener('click', function() {
            localStorage.removeItem('username');
        })
        del.addEventListener('click', function() {
            localStorage.clear();
        })
    </script>

案例：记住用户名

如果勾选记住用户名，下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名
在这里插入图片描述

<input type="text" id="username">
    <input type="checkbox" id="remember">记住用户名
    <script>
        var username=document.querySelector('#username');
        var remember=document.querySelector('#remember');
        if(localStorage.getItem('username')){
            username.value=localStorage.getItem('username');
            remember.checked=true;
        }
        remember.addEventListener('change',function(){
            if(this.checked){
                localStorage.setItem('username',username);
            }else{
                localStorage.removeItem('username');
            }
        })

2. jQuery入门

jQuery 的概念

在这里插入图片描述

下载：官网地址： https://jquery.com/
各个版本的下载：https://code.jquery.com/

jQuery 的入口函数

$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
 }) ;  
 $(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

在这里插入图片描述

jQuery 的顶级对象 $

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
2.$ 是jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

jQuery 对象和 DOM 对象

在这里插入图片描述

3. jQuery 常用API

1. jQuery 选择器

jQuery 设置样式：
$(‘div’).css(‘属性’, ‘值’)

1.基础选择器

在这里插入图片描述

2.层级选择器

在这里插入图片描述

隐式迭代（重要）

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

3.jQuery筛选选择器

在这里插入图片描述

jQuery筛选方法（重点）

在这里插入图片描述

jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

案例：淘宝服饰精品案例

在这里插入图片描述

链式编程

在这里插入图片描述

2. jQuery 样式操作

操作 css 方法

在这里插入图片描述

设置类样式方法

在这里插入图片描述

案例：tab 栏切换

在这里插入图片描述

类操作与className区别

原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作，不影响原先的类名

3. jQuery 效果

在这里插入图片描述

显示隐藏效果

在这里插入图片描述

滑动效果

在这里插入图片描述

事件切换

在这里插入图片描述

//1.事件切换 hover是鼠标经过和离开的复合写法
            $(function(){
                $(".nav>li").hover(function(){
                    $(this).children("ul").slideDown(200);
                },function(){
                    $(this).children("ul").slideUp(200);
                })

            }) 
 // 2.事件切换 hover 如果只写一个函数，鼠标经过和离开都会调用这个函数
            $(function(){
                $(".nav>li").hover(function(){
                    $(this).children("ul").slideToggle(200);
                })
            })

动画队列及其停止排队方法

谁做动画给谁加
在这里插入图片描述

$(function(){
     $(".nav>li").hover(function(){
     $(this).children("ul").stop().slideToggle(200);
     })
})

淡入淡出效果

在这里插入图片描述

自定义动画 animate

在这里插入图片描述

案例：王者荣耀手风琴效果

鼠标经过某个小li 有两步操作：
当前小li 宽度变为 224px，同时里面的小图片淡出，大图片淡入
其余兄弟小li宽度变为69px，小图片淡入，大图片淡出

4. jQuery 属性操作

设置或获取元素固有属性值 prop()

在这里插入图片描述

设置或获取元素自定义属性值 attr()

在这里插入图片描述

数据缓存 data()

在这里插入图片描述

<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function() {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));

            });
            // console.log($("div").prop("index"));
            // 2. 元素的自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($("div").data("index"));
      })
    </script>

案例：购物车案例模块-全选

在这里插入图片描述

案例：购物车案例模块-选中商品添加背景

在这里插入图片描述

// 1. 全选 全不选功能模块
    // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    // 事件可以使用change
    $(".checkall").change(function() {
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            // 让所有的商品添加 check-cart-item 类名
            $(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
        }
    });
    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function() {
        // if(被选中的小的复选框的个数 === 3) {
        //     就要选中全选按钮
        // } else {
        //     不要选中全选按钮
        // }
        // console.log($(".j-checkbox:checked").length);
        // $(".j-checkbox").length 这个是所有的小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }

5. jQuery 文本属性值

在这里插入图片描述

案例：购物车案例模块-增减商品数量-修改商品小计

在这里插入图片描述

// 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
    $(".increment").click(function() {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格  就是 商品的小计
        // 当前商品的价格 p  
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        var price = (p * n).toFixed(2);
        // 小计模块 
        // toFixed(2) 可以让我们保留2位小数
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        getSum();
    });
    $(".decrement").click(function() {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
        // var p = $(this).parent().parent().siblings(".p-price").html();
        // parents(".p-num") 返回指定的祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        // 小计模块 
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    //  4. 用户修改文本框的值 计算 小计模块  
    $(".itxt").change(function() {
        // 先得到文本框的里面的值 乘以 当前商品的单价 
        var n = $(this).val();
        // 当前商品的单价
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });

6. jQuery 元素操作（遍历、创建、添加、删除）

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历
遍历标签用1，遍历数组对象用2
在这里插入图片描述

<script src="jquery.min.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // $("div").css("color", "red");
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            // 1. each() 方法遍历元素 
            var arr = ["red", "green", "blue"];
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(index);
                // console.log(i);
                // 回调函数第二个参数一定是 dom元素对象 也是自己命名
                // console.log(domEle);
                // domEle.css("color"); dom对象没有css方法
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);

            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            })
        })
    </script>

案例：购物车案例模块-计算总计和总额

在这里插入图片描述

// 5. 计算总计和总额模块
    getSum();
    function getSum() {
        var count = 0; // 计算总件数 
        var money = 0; // 计算总价钱
        $(".itxt").each(function(i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }

创建、添加元素

创建元素语法：var li=$(''<li >内容</li>''); 
$("ul").prepend(li);

在这里插入图片描述

删除元素

在这里插入图片描述

案例：购物车案例模块-删除商品模块

在这里插入图片描述

   // 6. 删除商品模块
    // (1) 商品后面的删除按钮
    $(".p-action a").click(function() {
        // 删除的是当前的商品 
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // (2) 删除选中的商品
    $(".remove-batch").click(function() {
        // 删除的是小的复选框选中的商品
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    });
    // (3) 清空购物车 删除全部商品
    $(".clear-all").click(function() {
        $(".cart-item").remove();
        getSum();
    })
})

7. jQuery 尺寸、位置操作

jQuery 尺寸

在这里插入图片描述

jQuery 位置操作

在这里插入图片描述

案例：带有动画的返回顶部

在这里插入图片描述

案例：品优购电梯导航

在这里插入图片描述

4. jQuery 事件注册

在这里插入图片描述

1. jQuery 事件处理

事件处理on()绑定事件

在这里插入图片描述

在这里插入图片描述
绑定的是ul，除法事件的是li

案例：发布微博案例

点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。
点击的删除按钮，可以删除当前的微博留言。

<script>
        $(function(){
            //1.点击发布按钮，动态创建一个li，放入文本框的内容和删除按钮，并且添加到ul中
            $(".btn").on("click",function(){
                var li = $("<li></li>");
                li.html($(".txt").val()+"<a href='javascript:;''>删除</a>");
                $("ul").prepend(li);
                li.slideDown();
                $(".txt").val('');
            })
            //2.点击的删除按钮，可以删除当前的微博留言
           /*  $("ul a").click(function(){ //此时click不能给动态创建的a添加事件
                alert(11);
            }) */
            $("ul").on("click","a",function(){

                $(this).parent().slideUp(function(){
                    $(this).remove();
                });
            })
        })
    </script>
</head>
<body>
    <div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" class="txt" id="" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div>

事件处理 off() 解绑事件

在这里插入图片描述

自动触发事件 trigger()

在这里插入图片描述

2. jQuery 事件对象

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

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

阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()

5. jQuery 其他方法

1. jQuery 拷贝对象

在这里插入图片描述
深拷贝里面的不冲突的属性会合并到一起

2. 多库共存

在这里插入图片描述
jQuery 解决方案：

把里面的 $ 符号统一改为 jQuery。比如 jQuery(''div'')
jQuery 变量规定新的名称：$.noConflict()
var xx = $.noConflict();；

3. jQuery 插件

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

jQuery 插件库 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤：
引入相关文件。（jQuery 文件和插件文件）
复制相关html、css、js (调用插件)。

jQuery 插件演示：

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

bootstrap JS 插件：
bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js插件使用，也必须引入jQuery 文件。

4. 案例：todolist

在这里插入图片描述

本地存储的数据格式

在这里插入图片描述

toDoList按下回车键把新数据添加到本地存储里面

在这里插入图片描述

$(function() {
    // 1. 按下回车 把完整数据 存储到本地存储里面
    // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
    load();//每次打开页面时自动调用加载数据
    $("#title").on("keydown",function(event){
        if(event.keyCode===13){
            if($(this).val()===""){
                alert("请输入您想要的操作");
            }else{
                //先得到本地存储的数据
                var local = getDate();
                // console.log(local);
                //在本地存储的基础上追加数据
                local.push({title:$(this).val(),done:false});
                saveDate(local);
                // 2.todolist本地存储渲染加载到页面
                load();
                $(this).val("");
            }
        }
    });
    // 3.删除操作
    $("ol,ul").on("click","a",function(){
        // 先得到数据
        var date = getDate();
        // 再修改数据
        var index = $(this).attr("id");//attr("")获取自定义属性值
        date.splice(index,1);
        // 再保存数据
        saveDate(date);
        // 最后渲染页面
        load();
    })
    // 4.todolist正在进行和已完成选项操作
    $("ol,ul").on("click","input",function(){
        // 先得到数据
        var date = getDate();
        // 再修改数据
        var index = $(this).siblings("a").attr("id");//attr("")获取自定义属性值
        date[index].done=$(this).prop("checked");//prop("checked")获取固定属性
        // 再保存数据
        saveDate(date);
        // 最后渲染页面
        load();
    })
    //读取本地存储数据
    function getDate(){
        var date=localStorage.getItem("todolist");
        if (date!==null){
            // 本地存储里面的数据是字符串格式的，但是我们需要的是对象格式的
            return JSON.parse(date);
        }else{
            return [];
        }
    }
    // 保存本地存储数据
    function saveDate(date){
        localStorage.setItem("todolist",JSON.stringify(date));// 本地存储里面的数据是字符串格式的
    }
    // 加载到页面
    function load(){
        var date=getDate();
        // 因为用了页面加载调用了一次load,（load里的prepend是追加），渲染数据又调用了一次，数据会出现两次
        // 所以每次遍历前要清空ol里面的元素
        $("ol,ul").empty();
        var todoCount=0;
        var doneCount=0;
        //遍历每个数据，同时往ol里面添加li
        $.each(date,function(i,n){
            if(n.done){
                $("ul").prepend("<li><input type='checkbox' checked='checked'> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
                doneCount++;
            }else{
                $("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
                todoCount++;
            }
        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }
})