10-jQuery03

作者: 努力爬行中的蜗牛 | 来源:发表于2019-01-23 23:22 被阅读5次

10-jQuery03

jquery事件

事件函数列表：

blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标点击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            // 监听获得焦点事件
            // $('#input01').focus(function() {
            //  alert('获得焦点');
            // })

            // focus一般用来让input元素开始就获取焦点
            $('#input01').focus();

            $('#input01').blur(function() {
                var sVal = $(this).val();
                alert(sVal);
            })
        })

    </script>

</head>
<body>
    <form>
        <input type="text" name="" id="input01">
        <input type="text" name="" id="input02">
        <input type="submit" name="" value="提交" id="sub">
    </form>
    
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            // 鼠标移入，移入到子元素也会触发
            $('.con').mouseover(function() {
                alert('移入');
            })
            // 鼠标移出，移出子元素也会触发
            $('.con').mouseout(function() {
                alert('移出');
            })


            // 鼠标移入，移入的子元素不会触发
            // $('.con2').mouseenter(function() {
            //  alert('移入');
            // })
            // // 鼠标移出，移出的子元素不会触发
            // $('.con2').mouseleave(function() {
            //  alert('移出');
            // })

            $('.con2').hover(function() {
                alert('移入');
            }, function() {
                alert('移出');
            })

            $('#form1').submit(function() {
                alert('提交');
                // 阻止默认的提交行为
                // return false;
            })

            $(window).resize(function() {
                var $w = $(window).width();
                document.title = $w;
            })
        })

    </script>

    <style type="text/css">
        .con, .con2 {
            width: 200px;
            height: 200px;
            background-color: gold;
        }

        .box, .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

</head>
<body>
    <div class="con">
        <div class="box"></div>
    </div>
    <br>
    <br>
    
    <div class="con2">
        <div class="box2"></div>
    </div>

    <br>
    <br>

    <form id="form1" action="https://www.baidu.com">
        <input type="text" name="data01" id="input01">
        <input type="submit" name="" value="提交" id="sub">
    </form>
</body>
</html>

绑定事件和解绑事件

<!DOCTYPE html>
<html>
<head>
    <title>绑定事件</title>

    <style type="text/css">
        
    </style>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            // $('#btn').clcik(function() {

            // })

            // 绑定事件：点击或者鼠标移入的时候绑定的函数
            $('#btn').bind('click mouseover', function() {
                alert('click事件')

                // 解绑
                $(this).unbind('mouseover');
            })

        })
    </script>
</head>
<body>
    <input type="button" name="" value="按钮" id="btn">

</body>
</html>

事件冒泡

什么是事件冒泡
在一个对象上触发某类事件（比如单机onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件就会想这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）

事件冒泡的作用
事件冒泡允许多个操作被集中处理（把时间处理器添加到一个父级元素上，避免把事件处理器添加到多个子集元素上），它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过event.stopPropagation()来阻止

阻止默认行为
阻止表单提交

$('#form').submit(function() {
event.preventDefault();
})

合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用

// event.stopPropagation();
// event.preventDefault();
// 合并写法：
return false;

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            // event 是发生事件的时候的事件对象，使用的时候通过第一个参数传进来
            $('.son').click(function() {
                alert(1);
                // 阻止事件冒泡
                // event.stopPropagation();
                return false;
            })

            $('.father').click(function() {
                alert(2);
            })

            $('.grandfather').click(function() {
                alert(3);
            })

            $(document).click(function() {
                alert(4);
            })
        })

    </script>

    <style type="text/css">
        .grandfather {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .father {
            width: 200px;
            height: 200px;
            background-color: gold;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

</head>
<body>
    <div class="grandfather">
        <div class="father">
            <dir class="son"></dir>
        </div>
    </div>
</body>
</html>

弹窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){

            $('#btn').click(function(){
                $('.pop_con').fadeIn();
                return false;

            })
            $(document).click(function(){
                $('.pop_con').fadeOut();

            })
            $('.pop').click(function(){

                return false;

            })
            $('#close').click(function(){
                $('.pop_con').fadeOut();
            })

        })


    </script>
    <style type="text/css">

        .pop_con{
            display:none;
        }       
        .pop{
            position:fixed;
            width:500px;
            height:300px;
            background-color:#fff;
            border:3px solid #000;
            left:50%;
            top:50%;
            margin-left:-250px;
            margin-top:-150px;
            z-index:9999;
        }

        .mask{
            position:fixed;
            width:100%;
            height:100%;
            background-color:#000;
            opacity:0.3;
            filter:alpha(opacity=30);
            left:0;
            top:0;
            z-index:9990;

        }

        .close{
            float:right;
            font-size:30px;
        }



    </style>
</head>
<body>
    <input type="button" name="" value="弹出" id="btn">

    <div class="pop_con">
        <div class="pop">
            弹框里面文字
            投资金额：
            <input type="text" name="">
            <a href="#" id="close" class="close">×</a>
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>

事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

<!DOCTYPE html>
<html>
<head>
    <title>事件委托</title>

    <style type="text/css">
        .list {
            background-color: gold;
            list-style: none;
            padding: 10px;
        }

        .list li {
            height: 30px;
            background-color: green;
            margin: 10px;
        }
    </style>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            // $('.list li').click(function() {
            //  $(this).css({'background-color':'red'});
            // })

            // 事件委托
            $('.list').delegate('li','click',function() {
                // $(this)指的是委托的子元素
                $(this).css({'background-color':'red'});
            })

            // 新建一个li元素赋值给$li变量
            var $li = $('<li>9</li>');
            // 把新建的li元素放到ul子集的最后面
            $('.list').append($li);

        })
    </script>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

</body>
</html>

jquery元素节点操作

创建节点
var $div =$ ('<div>');
var $div2 =$ ('<div>这是一个节点</div>');

插入节点
1、append()和appendTo():在现存元素的内部，从后面插入元素
2、prepend()和prependTo():在现存元素的内部，从前面插入元素
3、after()和insertAfter():在现存元素的外部，从后面插入元素
4、before()和insertBefore()：在现存元素的外部，从前面插入元素

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            // 通过html的字符串的方式添加节点性能最高
            // $('#div1').html($('#div1').html() + '<a href="#">链接<a/>')

            // 新建一个带有属性的a元素，把他赋值给$a
            $a = $('<a href="#">链接</a>');

            // 新建一个空的a元素
            $a2 = $('<a>');


            $p = $('<p>这是一个p元素</p>');

            $h2 = $('<h2>这是一个H2标签</h2>');

            $h3 = $('<h3>这是一个H3标签</h3>');

            //父元素内的后面放入子元素
            // $('#div1').append($a);

            //子元素放入到父元素内部的后面
            $a.appendTo($('#div1'));

            $('#div1').append($a2);

            //父元素内的前面放入子元素
            // $('#div1').prepend($p);

            //子元素放到父元素前面
            $p.prependTo($('#div1'));

            //div元素后面插入元素
            // $('#div1').after($h2);

            //将其插入到div元素后面
            $h2.insertAfter($('#div1'));

            //div1前面插入h3标签
            // $('#div1').before($h3);

            //h3插入到div1前面
            $h3.insertBefore($('#div1'));
        })

    </script>

    <style type="text/css">
        
    </style>

</head>
<body>
    <div id="div1">
        <h1>这是一个H1元素</h1>
    </div>
</body>
</html>

删除节点
$('#div1').remove();

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            // 对已有节点进行操作
            $('#p1').insertBefore($('#title01'));

            $('#span01').appendTo($('#p1'));

            $('#link01').prependTo($('#p1'));

            //删除节点
            $('#title01').remove();
        })

    </script>

    

</head>
<body>
    <h1 id="title01">这是一个h1元素</h1>
    <p id="p1">这是一个p元素</p>

    <span id="span01">这是一个span元素</span>
    <a href="#" id="link01">链接</a>
</body>
</html>

todolist demo

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>

    <style type="text/css">
        .list_con{
            width:600px;
            margin:50px auto 0;
        }
        .inputtxt{
            width:550px;
            height:30px;
            border:1px solid #ccc;
            padding:0px;
            text-indent:10px;           
        }
        .inputbtn{
            width:40px;
            height:32px;
            padding:0px;
            border:1px solid #ccc;
        }
        .list{
            margin:0;
            padding:0;
            list-style:none;
            margin-top:20px;
        }
        .list li{
            height:40px;
            line-height:40px;
            border-bottom:1px solid #ccc;
        }

        .list li span{
            float:left;
        }

        .list li a{
            float:right;
            text-decoration:none;
            margin:0 10px;
        }
    </style>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            var $inputtxt = $('#txt1');
            var $btn = $('#btn1');
            var $ul = $('#list');

            $btn.click(function() {
                // 获取input输入框的内容
                var $val = $inputtxt.val();

                if($val == "") {
                    alert("请输入内容");
                    return;
                } 

                //javascript:; 执行JavaScript的空语句，表示什么都不做，但是有链接的样式
                var $li = $('<li><span>' + $val +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');

                // var $a = $li.find('.del');
                // $a.click(function() {
                //  $(this).parent().remove();
                // })

                $ul.append($li);
                $inputtxt.val("");
            })

            // $('.del').click(function() {
            //  $(this).parent().remove();
            // })

            $ul.delegate('a','click',function() {
                var $handler = $(this).prop('class');
                if ($handler == 'del') {
                    $(this).parent().remove();
                }

                if ($handler == 'up') {
                    if ($(this).parent().prev().length==0) {
                        alert('到顶了！');
                        return;
                    }
                    $(this).parent().insertBefore($(this).parent().prev());
                }

                if ($handler == 'down') {
                    if ($(this).parent().next().length==0) {
                        alert('到底了！');
                        return;
                    }
                    $(this).parent().insertAfter($(this).parent().next())
                }

            })
        })

    </script>

    

</head>
<body>
    <div class="list_con">
    <h2>To do list</h2>
        <input type="text" name="" id="txt1" class="inputtxt">
        <input type="button" name="" value="增加" id="btn1" class="inputbtn">
        
        <ul id="list" class="list">

            <li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>

        </ul>

    </div>
</body>
</html>

滚轮事件与函数节流

jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js
函数节流
javascript中有些事件的触发频率非常高，比如onresize事件（jq中是resize），onmousemove事件（jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙的使用定时器来减少触发的次数，实现函数节流。

整屏滚动demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>整页滚动</title>
    <link rel="stylesheet" type="text/css" href="css/test.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript">
        $(function(){
            var $screen = $('.pages_con');
            var $pages = $('.pages');
            var $len = $pages.legnth;
            var $h = $(window).height();
            var $points = $('.points li');
            var timer = null;

            var $nowscreen = 0;

            $pages.css({'height':$h});

            $pages.eq(0).addClass('moving');

            $points.click(function() {
                $nowscreen = $(this).index();
                $points.eq($nowscreen).addClass('active').siblings().removeClass('active');
                $screen.animate({'top':-$h * $nowscreen},300);
                $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');

            })

            $(window).mousewheel(function(event, dat) {
                // 定时器实现函数节流效果
                clearTimeout(timer);

                timer = setTimeout(function() {
                    if (dat == -1) {
                    $nowscreen++;
                } else {
                    $nowscreen--;
                }


                if ($nowscreen < 0) {
                    $nowscreen = 0;
                } else if ($nowscreen > $len - 1) {
                    $nowscreen = $len - 1;
                }

                $screen.animate({'top':-$h * $nowscreen},300);

                $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');

                $points.eq($nowscreen).addClass('active').siblings().removeClass('active');
                }, 200)
                
            })
        })

    </script>   
</head>
<body>
    <div class="pages_con">

        <div class="pages page1">
            <div class="main_con">
                <div class="left_img"><img src="images/001.png"></div>
                <div class="right_info">
                Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
                    
                </div>
            </div>
        </div>

        <div class="pages page2">
            <div class="main_con">
                <div class="right_img"><img src="images/002.png"></div>
                <div class="left_info">
                2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
                </div>
            </div>
            
        </div>

        <div class="pages page3">
            <div class="main_con">
                <div class="left_img"><img src="images/004.png"></div>
                <div class="right_info">
                以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

                    
                </div>
            </div>          
        </div>

        <div class="pages page4">
            <div class="main_con">
                <div class="left_img"><img src="images/003.png"></div>
                <div class="right_info">
                    Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
                </div>
            </div>          
        </div>

        <div class="pages page5">
            <div class="main_con">
                <div class="center_img"><img src="images/005.png"></div>        
            </div>
            
        </div>
    </div>
    <ul class="points">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

ajax与jsonp

ajax技术的目的是让JavaScript发送的http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续JavaScript的执行，从而实现异步。

同步和异步
现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。

局部刷新和无刷新
ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

同源策略
ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。

json

json是javascript object notation的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于JavaScript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

$.ajax使用方法

常用参数：
1、url请求地址
2、type请求方式，默认是‘GET’，常用的还有‘POST’
3、dataType设置返回的数据格式，常用的是‘json’格式，也可以设置为‘html’
4、data设置发送给服务器的数据
5、success设置请求成功后的回调函数
6、error设置请求失败后的回调函数
7、async设置是否异步，默认值是‘true’，表示异步。

<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $.ajax({
                url:'data.json',
                type:'get',
                dataType:'json'
            })
            .done(function(dat) {
                $('#username').html(dat.name);
                $('#userage').html(dat.age);
            })
            .fail(function() {
                alert('服务器超时');
            })
        })
        
    </script>
</head>
<body>
    <p>姓名：<span id="username"></span></p>
    <p>年龄：<span id="userage"></span></p>
</body>
</html>

jsonp

ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性。jsonp和ajax原理完全一样，不过jquery将它们封装成同一个函数。

<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $.ajax({
                url:'js/data.js',
                type:'get',
                dataType:'jsonp',
                jsonpCallback:'fnback'
            })
            .done(function(dat) {
                alert(dat.name);
            })
            .fail(function() {
                alert('服务器超时');
            })
        })
        
    </script>
</head>
<body>
    
</body>
</html>

360联想词demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        // https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=d
        $(function(){

            $('#input01').keyup(function(){

                var $val = $(this).val();

                $.ajax({
                    url:'https://sug.so.360.cn/suggest?',
                    type:'get',
                    dataType:'jsonp',
                    data:{'word':$val}
                })
                .done(function(data){

                    //console.log(data);
                    
                    // 清空元素里面的内容
                    $('#list01').empty();

                    var dat = data.s;

                    for(var i=0;i<dat.length;i++)
                    {
                        var $newli = $('<li>');

                        $newli.html(dat[i]);

                        $newli.appendTo($('#list01'));
                    }

                })
            })
        })
    </script>
</head>
<body>

<input type="text" name="" id="input01">

<ul id="list01">
    
</ul>
    
</body>
</html>

jqueryUI

jquery UI是以jQuery为基础的代码库。包含底层用户交互、动画、特效和可更换的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。
juqeryUI网址：http://jqueryui.com/

jquerUI拖拽

<!DOCTYPE html>
<html>
<head>
    <title>拖拽</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('.box').draggable({
                // 限制在x轴拖动
                axis:'x',
                // 限定在父级的范围移动
                containment:'parent',
                drag:function(ev,ui) {
                    $('#shownumber').val(parseInt(100*(ui.position.left/600)));
                }
            });
        })
    </script>

    <style type="text/css">
        .con {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
            margin: 50px auto 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box"></div>
    </div>
    <input type="text" name="" id="shownumber">

</body>
</html>

本地存储

本地存储分为cookie，以及新增的localStorage和sessionStorage。
1、cookie存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问cookie，在设置的过期时间之前有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>cookie</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">
        // 设置cookie 过期时间为1天，存在网站更目录下
        $.cookie('mycookie','ok!',{expires:1,path:'/'});
        
        // 读取cookie 
        var mycookie = $.cookie('mycookie');
        alert(mycookie); 
    </script>
</head>
<body>
    <h1>测试页面</h1>

</body>
</html>

2、localStorage存储在本地，容量为5M或者更大，不会再请求时候携带传递，在所有同源窗口中共享，数据一致有效，除非人为删除，可作为长期数据。

3、sessionStorage存储在本地，容量为5M或者更大，不会再请求时候携带传递，在同源的当前窗口关闭前有效。
localStorage和sessionStorage合称为Web Storage，Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便。
iPhone的无痕浏览不支持Web Storage，只能用cookie。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>cookie</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">
        localStorage.setItem("dat","456");
        sessionStorage.setItem('dat1','789');
    </script>
</head>
<body>
    <h1>测试web storage</h1>

</body>
</html>

10-jQuery03
jquery事件事件函数列表： blur() 元素失去焦点focus() 元素获得焦点click() 鼠标点击m...

10-jQuery03

jquery事件

绑定事件和解绑事件

事件冒泡

事件委托

jquery元素节点操作

滚轮事件与函数节流

ajax与jsonp

json

$.ajax使用方法

jsonp

jqueryUI

本地存储

相关文章

10-jQuery03

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读