美文网首页
10-jQuery03

10-jQuery03

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

      本文链接:https://www.haomeiwen.com/subject/anosjqtx.html