本地储存、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 解决方案：

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

3. jQuery 插件

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

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

jQuery 插件演示：

1. 瀑布流
2. 图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）
   当我们页面滑动到可视区域，再显示图片。
   我们使用jquery 插件库 EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面
3. 全屏滚动（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);
    }
})