7-JQuery

无休止符

已于 2022-05-20 12:53:03 修改

阅读量338

点赞数

分类专栏： GoMysql与前端文章标签： jquery javascript 前端

于 2022-05-19 18:25:59 首次发布

本文链接：https://blog.csdn.net/qq23001186/article/details/124848443

版权

GoMysql与前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一、JQuery入门

1 - jquery介绍

jquery概念：jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库
jquery版本：jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的
jquery引入：jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jquery官方网站：http://jquery.com/
jquery版本下载：https://code.jquery.com/

2 - jquery文档加载完再执行

ready方法：将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快
下面的案例可以发现JQuery的弹框先出现：因为onload整个页面加载完，数据（图片资源等）加载完后才执行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div01');
            alert('原生javascript获取的div：' + oDiv);
        }

        /*
        $(document).ready(function(){
            var $div = $('#div01'); // Jquery对象我们一般在前面加$
            alert('jquery获取的div：' + $div);
        })
        */

        // 上面ready的写法可以简写成下面的形式：
        $(function () {
            var $div = $('#div01');
            alert('jquery获取的div：' + $div);
        })
    </script>
</head>

<body>
    <div id="div01">这是一个div</div>
</body>

</html>

3 - jquery选择器

jquery选择器：jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功
- $('#myId') //选择id为myId的网页元素
- $('.myClass') // 选择class为myClass的元素
- $('li') //选择所有的li元素
- $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
- $('input[name=first]') // 选择name属性等于first的input元素
对选择集进行过滤：
- $('div').has('p'); // 选择包含p元素的div元素
- $('div').not('.myClass'); //选择class不等于myClass的div元素
- $('div').eq(5); //选择第6个div元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $('#div01');
            var $div2 = $('.box');
            var $li = $('li');
            var $span = $('.box span');
            // 属性选择器
            var $div3 = $('div[class="box2"]');
            // 选择包含span标签的div
            var $div4 = $('div').has('span');
            // 选择class不是box2的div
            var $div5 = $('div').not('.box2');
            // 选择第4个li
            var $li2 = $('li').eq(3);
            $div.css({'color':'red','font-size':30});
            $div2.css({'color':'gold','fontSize':'30px'});
            $li.css({'background':'gold'});
            $span.css({'color':'red','font-weight':'bold'});
            $div3.css({'color':'pink','font-size':30});
            $div4.css({'text-indent':50});
            $div5.css({'text-decoration':'underline'});
            $li2.css({'text-indent':50});
        })
    </script>
</head>
<body>
    <div id="div01">这是一个div</div>
    <div class="box">这是第二个<span>div</span></div>
    <div class="box">这是第三个div</div>
    <div class="box2">这是第四个div</div>
    <ul>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>
</body>
</html>

选择集转移
- $('#box').prev();：//选择id是box的元素前面紧挨的同辈元素
- $('#box').prevAll();：//选择id是box的元素之前所有的同辈元素
- $('#box').next();：//选择id是box的元素后面紧挨的同辈元素
- $('#box').nextAll();：//选择id是box的元素后面所有的同辈元素
- $('#box').parent();：//选择id是box的元素的父元素
- $('#box').children();：//选择id是box的元素的所有子元素
- $('#box').siblings();：//选择id是box的元素的同级元素
- $('#box').find('.myClass');：//选择id是box的元素内的class等于myClass的元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $div = $('#div01');
            $div.prev().css({ 'color': 'red' });
            $div.prevAll().css({ 'text-indent': 50 });
            $div.next().css({ 'color': 'pink' });
            $div.nextAll().css({ 'text-indent': 30 });
            $div.siblings().css({ 'text-decoration': 'underline' });
            $div.parent().css({ 'background': '#ddd' });
            $div.children().css({ 'color': 'red' });
            $div.find('.sp02').css({ 'font-size': 20 });
        })
    </script>
</head>

<body>
    <div>
        <h2>这是一个h2标题</h2>
        <p>这是第一个段落标签</p>
        <div id="div01">这是一个
            <span>div</span>
            <span class="sp02">第二个span</span>
        </div>
        <h3>这是一个h3标题</h3>
        <p>这是第二个段落标签</p>
    </div>
</body>

</html>

判断是否选择到了元素：jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $div = $('#div01');
            var $div2 = $('#div02');
            var $li = $('li');
            var $div3 = $div.prev();
            var iLen = $div.length;
            var iLen2 = $li.length;
            // 没有选择元素，length的属性值是0
            var iLen3 = $div2.length;
            var iLen4 = $div3.length;
            alert(iLen); // 1
            alert(iLen2); // 8
            alert(iLen3); // 0
            alert(iLen4); // 0
        })
    </script>
</head>

<body>
    <div id="div01">这是一个div</div>
    <ul>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>
</body>

</html>

4 - jquery样式操作

jquery思想：同一个函数完成取值和赋值

// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特别注意：选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width
操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

综合示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }

        .big {
            font-size: 30px;
        }

        .noline {
            text-decoration: none;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $div = $('#div01');
            var $div2 = $('div');
            var $a = $('#link01');

            // 读取样式属性值
            var sSize = $div.css('font-size');
            // alert(sSize);

            // 写样式属性，也叫作设置样式属性
            // 设置一个样式属性可以不写成字典的形式
            $div.css('color', 'red');
            $div.css({ 'font-size': 30, 'font-weight': 'bold' });

            // 读取多个元素的样式属性值,得到的是第一个元素的值
            var sSize2 = $div2.css('font-size'); // 30
            //alert(sSize2);

            // 操作样式类名
            $a.addClass('red');
            $a.addClass('big');
            $a.addClass('noline');

            $a.removeClass('red');
            $a.removeClass('noline');
        })
    </script>
</head>

<body>
    <div id="div01">这是一个div</div>
    <div>这是第二个div</div>
    <a href="#" id="link01">这是一个链接</a>
</body>

</html>

5 - 绑定click事件

给元素绑定click事件方法

$('#btn1').click(function(){
    // 内部的this指的是原生对象
    // 使用jquery对象用 $(this)
})

获取元素的索引值：有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1
......
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

案例演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $li = $('.list li');
            var $p = $('p');
            // 绑定click事件
            $li.click(function () {
                // this表示当前发生事件的对象,它是一个原生js对象
                // this.style.background = 'red';

                // $(this) 表示当前发生事件的jquery对象
                $(this).css('background', 'gold');

                // 获取当前点击的li的索引值
                alert($(this).index());
            })
            // 注意这个index()返回的是原始结构中的索引值，并不是eq的值
            alert($p.eq(0).index()); // 0
            alert($p.eq(1).index()); // 0
        })    
    </script>
</head>

<body>
    <ul class="list">
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>
    <div>
        <p>这是第一个段落</p>
    </div>
    <div>
        <p>这是第二个段落</p>
    </div>
</body>

</html>

案例：选项卡实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .tab_con {
            width: 500px;
            height: 350px;
            margin: 50px auto 0;
        }

        .tab_btns {
            height: 50px;
        }

        .tab_btns input {
            width: 100px;
            height: 50px;
            background: #ddd;
            border: 0px;
            outline: none;
        }

        .tab_btns .active {
            background: gold;
        }

        .tab_cons {
            height: 300px;
            background: gold;
        }

        .tab_cons div {
            height: 300px;
            line-height: 300px;
            text-align: center;
            display: none;
            font-size: 30px;
        }

        .tab_cons .current {
            display: block;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $btn = $('.tab_btns input');
            var $div = $('.tab_cons div');
            $btn.click(function () {
                // addClass默认会返回$(this)对象
                $(this).addClass('active').siblings().removeClass('active');

                // alert( $(this).index() );
                $div.eq($(this).index()).addClass('current').siblings().removeClass('current');
            })
        })
    </script>
</head>

<body>
    <div class="tab_con">
        <div class="tab_btns">
            <input type="button" value="按钮一" class="active">
            <input type="button" value="按钮二">
            <input type="button" value="按钮三">
        </div>
        <div class="tab_cons">
            <div class="current">按钮一对应的内容</div>
            <div>按钮二对应的内容</div>
            <div>按钮三对应的内容</div>
        </div>
    </div>
</body>

</html>

6 - jquery动画

animate方法：通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数

/*
    animate参数：
    参数一：要改变的样式属性值，写成字典的形式
    参数二：动画持续的时间，单位为毫秒，一般不写单位
    参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
    参数四：动画回调函数，动画完成后执行的匿名函数
*/

$('#div1').animate({
    width:300,
    height:300
},1000,'swing',function(){
    alert('done!');
});

实例演示：jquery动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: gold;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $btn = $('#btn');
            var $box = $('.box');
            $btn.click(function fnMove() {
                //$box.css({'width':1000});
                //$box.animate({'width':1000});
                /* animate的参数
                   参数一：要做动画的样式属性，写成字典形式
                   参数二：动画持续的时间，默认是400毫秒，设置时不写单位
                   参数三：动画曲线，默认是'swing'缓冲运动，还有'linear'匀速运动
                   参数四：动画的回调函数，它是一个匿名函数，在动画结束时会自动调用
                */
                $box.animate({ 'width': 1000 }, 1000, 'swing', function () {
                    $box.animate({ 'margin-top': 400 }, 1000, function () {
                        $box.animate({ 'width': 200, 'margin-top': 0 }, 1000, function () {
                            fnMove();
                        })
                    })
                });
            })
        })    
    </script>
</head>

<body>
    <input type="button" value="动画" id="btn">
    <div class="box"></div>
</body>

</html>

二、JQuery进阶

1 - jquery特殊效果

** jquery特殊效果**

fadeIn() 淡入
    $btn.click(function(){
        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });
    });
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

案例演示：特殊效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: gold;
            display: none;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $btn = $('#btn');
            var $box = $('.box');
            $btn.click(function () {
                // 元素显示隐藏效果
                // $box.hide();
                // $box.show();
                // $box.toggle();

                // 元素淡入淡出效果
                // $box.fadeIn();
                // $box.fadeOut();
                // $box.fadeToggle();

                // 元素向下展开和向上卷起的动画
                // $box.slideUp();
                // $box.slideDown();
                $box.stop().slideToggle(); // stop防止快速点击，stop停止掉之前的所有动画
            })
        })
    </script>
</head>

<body>
    <input type="button" value="动画" id="btn">
    <div class="box"></div>
</body>

</html>

2 - jquery链式调用

jquery链式调用：jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写（执行效率很高）

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

案例：层级菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>层级菜单</title>
    <style type="text/css">
        body {
            font-family: 'Microsoft Yahei';
        }

        body,
        ul {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
        }

        .menu {
            width: 200px;
            margin: 20px auto 0;
        }

        .menu .level1,
        .menu li ul a {
            display: block;
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            background-color: #3366cc;
            color: #fff;
            font-size: 16px;
            text-indent: 10px;
        }

        .menu .level1 {
            border-bottom: 1px solid #afc6f6;

        }

        .menu li ul a {
            font-size: 14px;
            text-indent: 20px;
            background-color: #7aa1ef;

        }

        .menu li ul li {
            border-bottom: 1px solid #afc6f6;
        }

        .menu li ul {
            display: none;
        }

        .menu li ul.current {
            display: block;
        }

        .menu li ul li a:hover {
            background-color: #f6b544;
        }
    </style>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $a = $('.level1');
            $a.click(function () {
                //$(this).next().stop().slideToggle();
                $(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();
            })
        })
    </script>
</head>

<body>
    <ul class="menu">
        <li>
            <a href="#" class="level1">手机</a>
            <ul class="current">
                <li><a href="#">iPhone X 256G</a></li>
                <li><a href="#">红米4A 全网通</a></li>
                <li><a href="#">HUAWEI Mate10</a></li>
                <li><a href="#">vivo X20A 4GB</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">笔记本</a>
            <ul>
                <li><a href="#">MacBook Pro</a></li>
                <li><a href="#">ThinkPad</a></li>
                <li><a href="#">外星人(Alienware)</a></li>
                <li><a href="#">惠普(HP)薄锐ENVY</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">电视</a>
            <ul>
                <li><a href="#">海信(hisense)</a></li>
                <li><a href="#">长虹(CHANGHONG)</a></li>
                <li><a href="#">TCL彩电L65E5800A</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">鞋子</a>
            <ul>
                <li><a href="#">新百伦</a></li>
                <li><a href="#">adidas</a></li>
                <li><a href="#">特步</a></li>
                <li><a href="#">安踏</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">玩具</a>
            <ul>
                <li><a href="#">乐高</a></li>
                <li><a href="#">费雪</a></li>
                <li><a href="#">铭塔</a></li>
                <li><a href="#">贝恩斯</a></li>
            </ul>
        </li>
    </ul>
</body>

</html>

3 - jquery属性操作

html() 取出或设置html元素包裹的内容

// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');

prop() 取出或设置某个属性的值

// 取出图片的地址
var $src = $('#img1').prop('src');
// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });

示例：操作元素属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $a = $('#link01');
            // 读取属性值
            var sId = $a.prop('id');
            // alert(sId);
            // 写属性值，也叫作设置属性值
            $a.prop({ 'href': 'http://www.baidu.com', 'title': '这是去到百度的链接' })
            // 读取元素包裹的内容
            var sTr = $a.html();
            //alert(sTr);
            // 设置元素包裹的内容
            $a.html('百度网');
            $a.html('<ul><li>列表文字</li><li>列表文字</li><li>列表文字<li><ul>')
        })
    </script>
</head>

<body>
    <a href="#" id="link01">这是一个链接</a>
</body>

</html>

聊天对话框案例jquery实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .talk_con {
            width: 600px;
            height: 500px;
            border: 1px solid #666;
            margin: 50px auto 0;
            background: #f9f9f9;
        }

        .talk_show {
            width: 580px;
            height: 420px;
            border: 1px solid #666;
            background: #fff;
            margin: 10px auto 0;
            overflow: auto;
        }

        .talk_input {
            width: 580px;
            margin: 10px auto 0;
        }

        .whotalk {
            width: 80px;
            height: 30px;
            float: left;
            outline: none;
        }

        .talk_word {
            width: 420px;
            height: 26px;
            padding: 0px;
            float: left;
            margin-left: 10px;
            outline: none;
            text-indent: 10px;
        }

        .talk_sub {
            width: 56px;
            height: 30px;
            float: left;
            margin-left: 10px;
        }

        .atalk {
            margin: 10px;
        }

        .atalk span {
            display: inline-block;
            background: #0181cc;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }

        .btalk {
            margin: 10px;
            text-align: right;
        }

        .btalk span {
            display: inline-block;
            background: #ef8201;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $words = $('#words'),
                $who = $('#who'),
                $talk = $('#talkwords'),
                $btn = $('#talksub');

            $btn.click(function () {
                // 读取属性值
                /*var sVal01 = $who.prop('value');
                var sVal02 = $talk.prop('value');
                */
                // 清空输入框里面的内容
                // $talk.prop({'value':''});
                // 操作value属性可以改成下面 val() 方法的写法：
                // 读取属性值
                var sVal01 = $who.val();
                var sVal02 = $talk.val();
                // 清空输入框里面的内容
                $talk.val('');
                // 判断输入框是否为空
                if (sVal02 == '') {
                    alert('请输入内容！');
                    return;
                }
                var sTr = ''
                if (sVal01 == 0) {
                    sTr = '<div class="atalk"><span>A说：' + sVal02 + '</span></div>';
                }
                else {
                    sTr = ' <div class="btalk"><span>B说：' + sVal02 + '</span></div>';
                }
                $words.html($words.html() + sTr);
            })
        })
    </script>
</head>

<body>
    <div class="talk_con">
        <div class="talk_show" id="words">
            <div class="atalk"><span>A说：吃饭了吗？</span></div>
            <div class="btalk"><span>B说：还没呢，你呢？</span></div>
        </div>
        <div class="talk_input">
            <select class="whotalk" id="who">
                <option value="0">A说：</option>
                <option value="1">B说：</option>
            </select>
            <input type="text" class="talk_word" id="talkwords">
            <input type="button" value="发送" class="talk_sub" id="talksub">
        </div>
    </div>
</body>

</html>

4 - jquery事件

事件函数列表
- blur() 元素失去焦点
- focus() 元素获得焦点
- change() 当表单元素的值发生改变时
- click() 鼠标单击
- mouseover() 鼠标进入（进入子元素也触发）
- mouseout() 鼠标离开（离开子元素也触发）
- mouseenter() 鼠标进入（进入子元素不触发）
- mouseleave() 鼠标离开（离开子元素不触发）
- ready() DOM加载完成
- submit() 用户递交表单
示例：jquery事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $input = $('#input01');
            var $form = $('#form01');
            // 绑定失去焦点的事件
            $input.blur(function () {
                //alert( $(this).val() )
            })
            // 绑定submit事件
            $form.submit(function () {
                // 判断数据是否合法
                // 阻止表单提交
                return false;
            })
        })
    </script>
</head>

<body>
    <form id="form01">
        <label>用户名：</label>
        <input type="text" id="input01" name="username">
        <input type="submit" value="提交">
    </form>
</body>

</html>

5 - 表单验证

正则表达式的写法：var re=new RegExp('规则', '可选参数');var re=/规则/参数;
规则中的字符
- ①.普通字符匹配：如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
- ②.转义字符匹配
  - \d 匹配一个数字，即0-9
  - \D 匹配一个非数字，即除了0-9
  - \w 匹配一个单词字符（字母、数字、下划线）
  - \W 匹配任何非单词字符。等价于 [ ^A-Za-z0-9_ ]
  - \s 匹配一个空白符
  - \S 匹配一个非空白符
  - . 匹配一个任意字符
量词：对左边的匹配字符定义个数
- ? 出现零次或一次（最多出现一次）
- - 出现一次或多次（至少出现一次）
- - 出现零次或多次（任意次）
- {n} 出现n次
- {n,m} 出现n到m次
- {n,} 至少出现n次

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 定义正则表达式
        var reTest01 = /a/;
        var reTest02 = /a/i; // i —— 忽略大小写
        var reTest03 = /\d+/;
        var reTest04 = /^\d+$/;

        var sTr01 = 'abc';
        var sTr02 = 'Abc';
        var sTr03 = '123456';
        var sTr04 = '123456abcdef';

        alert(reTest01.test(sTr01)); // true
        alert(reTest01.test(sTr02)); // false
        alert(reTest02.test(sTr02)); // true
        alert(reTest03.test(sTr03)); // true
        alert(reTest03.test(sTr04)); // true
        alert(reTest04.test(sTr03));
        alert(reTest04.test(sTr04));
    </script>
</head>

<body>
</body>

</html>

任意一个或者范围
- [abc123] : 匹配‘abc123’中的任意一个字符
- [a-z0-9] : 匹配a到z或者0到9中的任意一个字符
限制开头结尾：^ 以紧挨的元素开头；$ 以紧挨的元素结尾
修饰参数
- g： global，执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
- i： ingore case，忽略大小写，默认大小写敏感
常用正则规则

//用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;
//邮箱验证：        
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密码验证：
var rePass = /^[\w!@#$%^&*]{6,20}$/;
//手机号码验证：
var rePhone = /^1[34578]\d{9}$/;

6 - 案例实现：注册表单验证

在这里插入图片描述

html

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>天天生鲜-注册</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/register2.js"></script>
</head>

<body>
    <div class="register_con">
        <div class="l_con fl">
            <a class="reg_logo"><img src="images/logo02.png"></a>
            <div class="reg_slogan">足不出户 · 新鲜每一天</div>
            <div class="reg_banner"></div>
        </div>

        <div class="r_con fr">
            <div class="reg_title clearfix">
                <h1>用户注册</h1>
                <a href="#">登录</a>
            </div>
            <div class="reg_form clearfix">
                <form>
                    <ul>
                        <li>
                            <label>用户名:</label>
                            <input type="text" name="user_name" id="user_name" autocomplete="off">
                            <span class="error_tip">提示信息</span>
                        </li>
                        <li>
                            <label>密码:</label>
                            <input type="password" name="pwd" id="pwd">
                            <span class="error_tip">提示信息</span>
                        </li>
                        <li>
                            <label>确认密码:</label>
                            <input type="password" name="cpwd" id="cpwd">
                            <span class="error_tip">提示信息</span>
                        </li>
                        <li>
                            <label>邮箱:</label>
                            <input type="text" name="email" id="email">
                            <span class="error_tip">提示信息</span>
                        </li>
                        <li class="agreement">
                            <input type="checkbox" name="allow" id="allow" checked="checked">
                            <label>同意”天天生鲜用户使用协议“</label>
                            <span class="error_tip2">提示信息</span>
                        </li>
                        <li class="reg_sub">
                            <input type="submit" value="注 册" name="">
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>

    <div class="footer no-mp">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
        <p>电话：010-****888 京ICP备*******8号</p>
    </div>

</body>

</html>

js源码1

$(function () {
	var error_name = true;
	var error_pwd = true;
	var error_check_pwd = true;
	var error_email = true;
	var error_check = false;

	var $name = $('#user_name');
	var $pwd = $('#pwd');
	var $cpwd = $('#cpwd');
	var $email = $('#email');
	var $allow = $('#allow');

	$name.blur(function () {
		check_user_name();
	}).click(function () {
		$(this).next().hide();
	});;

	$pwd.blur(function () {
		check_pwd();
	}).click(function () {
		$(this).next().hide();
	});

	$cpwd.blur(function () {
		check_cpwd();
	}).click(function () {
		$(this).next().hide();
	});

	$email.blur(function () {
		check_email();
	}).click(function () {
		$(this).next().hide();
	});

	$allow.click(function () {
		if ($(this).prop('checked')) {
			error_check = false;
			$(this).siblings('span').hide();
		}
		else {
			error_check = true;
			$(this).siblings('span').html('请勾选同意').show();
		}
	});

	function check_user_name() {
		//数字字母或下划线
		var reg = /^\w{6,15}$/;
		var val = $name.val();

		if (val == '') {
			$name.next().html('用户名不能为空！').show();
			error_name = true;
			return;
		}
		if (reg.test(val)) {
			$name.next().hide();
			error_name = false;
		}
		else {
			$name.next().html('用户名是6到15个英文或数字，还可包含“_”').show();
			error_name = true;
		}
	}

	function check_pwd() {
		var reg = /^[\w@!#$%&^*]{6,15}$/;
		var val = $pwd.val();

		if (val == '') {
			$pwd.next().html('密码不能为空！').show();
			error_pwd = true;
			return;
		}

		if (reg.test(val)) {
			$pwd.next().hide();
			error_pwd = false;
		}
		else {
			$pwd.next().html('密码是6到15位字母、数字，还可包含@!#$%^&*字符').show();
			error_pwd = true;
		}
	}

	function check_cpwd() {
		var pass = $('#pwd').val();
		var cpass = $('#cpwd').val();

		if (pass != cpass) {
			$cpwd.next().html('两次输入的密码不一致').show();
			error_check_pwd = true;
		}
		else {
			$cpwd.next().hide();
			error_check_pwd = false;
		}
	}

	function check_email() {
		var re = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
		var val = $email.val();

		if (val == '') {
			$email.next().html('邮箱不能为空！').show();
			error_email = true;
			return;
		}

		if (re.test(val)) {
			$email.next().hide();
			error_email = false;
		}
		else {
			$email.next().html('你输入的邮箱格式不正确').show();
			error_email = true;
		}
	}

	$('.reg_form form').submit(function () {

		if (error_name == false && error_pwd == false && error_check_pwd == false && error_email == false && error_check == false) {
			return true;
		}
		else {
			return false;
		}

	});
})

js源码2

$(function(){
    var error_name = true;
    var $name = $('#user_name');

    /*$name.click(function(){
        $(this).next().hide();
    })

    $name.blur(function(){
        fn_check_user_name();
    })
    */

    $name.click(function(){
        $(this).next().hide();
    }).blur(function(){
        fn_check_user_name();
    })

    function fn_check_user_name(){
        var val = $name.val();
        var reUser = /^\w{6,20}$/;

        // 判断输入框是否为空
        if(val==''){
            error_name = true;
            $name.next().html('输入框不能为空！').show();
            return; 
        }

        if( reUser.test(val) ){
            error_name = false;
            $name.next().hide();
        }
        else{
            error_name = true;
            $name.next().html('用户名是6到20位的数字、字母或者下划线').show();
        }
    }
})

三、jquery高级

1 - 事件冒泡

什么是事件冒泡：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）
事件冒泡的作用：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件
阻止事件冒泡：事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止
阻止表单提交：event.preventDefault();
合并阻止操作：实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用return false;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .grandfather {
            width: 300px;
            height: 300px;
            background: purple;
        }

        .father {
            width: 200px;
            height: 200px;
            background: gold;
            position: relative;
        }

        .son {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0px;
            top: 400px;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $('.son').click(function () {
                alert(1);
                // 阻止事件冒泡的简略写法：
                return false;
            });

            // 父级阻止事件冒泡
            $('.father').click(function (ev) {
                alert(2);
                // 阻止事件冒泡的完整写法：
                ev.stopPropagation();
            });

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

            // $(document) 代表最顶级的标签
            $(document).click(function () {
                alert(4);
            });
        })
    </script>
</head>

<body>
    <!-- .grandfather>.father>.son -->
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>

</html>

案例：弹框的实现
- 需求点击弹框的其他地方关闭弹框
- 由于btn01的点击冒泡会触发document的click，导致btn01的show之后又调用了document的hide
- 解决方法在btn01中return false阻止click事件的冒泡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn01').click(function () {
                $('#pop').show();
                // 按钮阻止click的事件冒泡
                return false;
            });
            $('#shutoff').click(function () {
                $('#pop').hide();
            });
            // 点击弹框其他的地方，关闭弹框
            $(document).click(function () {
                $('#pop').hide();
            });
            // 点击弹框，弹框不应该隐藏，所以弹框也需要阻止冒泡
            $('.pop_con').click(function () {
                return false;
            })
        })
    </script>
</head>

<body>
    <input type="button" value="弹出弹框" id="btn01">
    <div class="pop_main" id="pop">
        <div class="pop_con">
            <div class="pop_title">
                <h3>系统提示</h3>
                <a href="#" id="shutoff" style="font-size: 30px;">×</a>
            </div>
            <div class="pop_detail">
                <p class="pop_text">亲！请关注近期的优惠活动！</p>
            </div>
            <div class="pop_footer">
            </div>
        </div>
        <div class="mask"></div>
    </div>
</body>

</html>

2 - 事件委托

事件委托概念：事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作
案例：
- 传统的做法绑定在每个li上，有几个li就绑定几次
- 而使用委托的话，只绑定一次在父级ul上，这也是为什么使用事件委托的效率比较高
- 另外一个优点当向ul动态添加li的时候，因为事件冒泡的原因也会触发父级ul的click事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $li = $('.list li');
            var $ul = $('.list');
            /*
            $li.click(function(){
                $(this).css({'background':'red'});
            })
            */
            // 上面的写法性能不高，可以改写成下面事件委托的写法
            $ul.delegate('li', 'click', function () {
            	// 这里的$(this)是子对象，哪个子对象发生冒泡了，$(this)就指向谁
                $(this).css({ 'background': 'red' });
            });
        })
    </script>
</head>

<body>
    <ul class="list">
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>
</body>

</html>

3 - Dom操作

Dom操作概念：Dom操作也叫做元素节点操作，它指的是改变html的标签结构，它有两种情况
- 1）移动现有标签的位置
- 2）将新创建的标签插入到现有的标签中
创建新标签

var $div = $('<div>'); //创建一个空的div
var $div2 = $('<div>这是一个div元素</div>');

移动或者插入标签的方法
- 1）append()和appendTo()：在现存元素的内部，从后面放入元素
- 2）prepend()和prependTo()：在现存元素的内部，从前面放入元素
- 3）after()和insertAfter()：在现存元素的外部，从后面放入元素
- 4）before()和insertBefore()：在现存元素的外部，从前面放入元素
删除标签：$('#div1').remove();
示例：dom操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $div = $('#div01');
            var $p01 = $('#p01');
            var $h01 = $('#h01');
            var $p02 = $('#p02');

            // 当前元素的里面的后面要放另外一个元素
            //$div.append($p01);

            // 当前元素要放到另外一个元素里面的后面
            $p01.appendTo($div);

            // 当前元素里面的前面要放另外一个元素
            // $div.prepend($h01);

            // 当前元素要放到另外一个元素里面的前面
            $h01.prependTo($div);

            // 当前元素外面的后面要放另外一个元素
            // $div.after($p02);

            // 当前元素要放到另外一个元素的外面的后面
            $p02.insertAfter($div);

            // 创建一个新的空的div标签
            var $newdiv01 = $('<div>');

            // 创建一个有内容的div标签
            var $newdiv02 = $('<div>新创建的第二个div</div>');

            // 当前元素的外面的前面要放另外一个元素
            $div.before($newdiv01);

            // 当前元素要放到另外一个元素的外面的前面
            $newdiv02.insertBefore($div);

            // 删除标签
            $newdiv01.remove();
            $h01.remove();
        })
    </script>
</head>

<body>
    <p id="p02">div01上面的p标签</p>
    <p id="p01">div01外面的p标签</p>
    <h2 id="h01">div01外面的h2标签</h2>
    <div id="div01">
        <h3>div01里面的h3标题</h3>
        <p>div01里面的p标签</p>
    </div>
</body>

</html>

案例：todolist(计划列表)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>todolist</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-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $txt = $('#txt1');
            var $btn = $('#btn1');
            var $list = $('#list');
            $btn.click(function () {
                var sVal = $txt.val();
                // 清空输入框里面的内容，防止重复添加
                $txt.val('');
                // 判断输入框是否为空		
                if (sVal == '') {
                    alert('请输入内容！');
                    return;
                }
                var $li = $('<li><span>' + sVal + '</span><a href="javascript:;" class="up"> ↑ </a>\
					<a href="javascript:;" class="down"> ↓ </a>\
					<a href="javascript:;"class="del">删除</a></li>');
                $li.appendTo($list);
                /*var $del2 = $li.find('.del');
                $del2.click(function(){
                    $(this).parent().remove();
                })
                */
            })
            /*
            var $del = $('.del');
            $del.click(function(){
                $(this).parent().remove();
            })
            */
            // 上面的写法太复杂，而且性能不高，可以改写成事物委托的写法：
            $list.delegate('a', 'click', function () {
                var sTr = $(this).prop('class');
                // 删除操作
                if (sTr == 'del') {
                    $(this).parent().remove();
                }
                // 上移操作
                if (sTr == 'up') {
                    // 判断是否是第一条
                    if ($(this).parent().prev().length == 0) {
                        alert('到顶了！');
                        return;
                    }
                    $(this).parent().insertBefore($(this).parent().prev());
                }
                // 下移操作
                if (sTr == '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>

4 - javascript对象

javascript中的对象：可以理解成是一个键值对的集合，键是调用每个值的名称，值可以是基本变量，还可以是函数和对象
通过顶级Object类来实例化一个对象，然后在对象上面添加属性和方法

var person = new Object();
// 添加属性：
person.name = 'tom';
person.age = '25';
// 添加方法：
person.sayName = function(){
    alert(this.name);
}
// 调用属性和方法：
alert(person.age);
person.sayName();

通过对象直接量的方式创建对象

var person2 = {
    name:'Rose',
    age: 18,
    sayName:function(){
        alert('My name is' + this.name);
    }
}
// 调用属性和方法：
alert(person2.age);
person2.sayName();

示例：javascript创建对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 直接量的方式定义对象
        var person = {
            name: 'Tom',
            age: 18,
            showName: function () {
                alert('我的名字是：' + this.name)
            },
            showAge: function () {
                alert('我的年龄是：' + this.age)
            }
        }
        // 使用对象
        // 调用对象的属性：
        alert(person.name);
        // 调用对象的方法：
        person.showName();
    </script>
</head>

<body>
</body>

</html>

5 - json

json简介
- json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式
- json数据类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，但不支持undefined，值还可以是数组或者JavaScript对象
- json写法需要注意的是，json中的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误
json格式数据

{
    "name":"tom",
    "age":18
}

json的另外一个数据格式是数组，和javascript中的数组字面量相同

["tom",18,"programmer"]

json更复杂的数据结构

{
    "name":"jack",
    "age":29,
    "hobby":["reading","travel","photography"]
    "school":{
        "name":"Merrimack College",
        "location":'North Andover, MA'
    }
}

json字符串转化为JavaScript对象

    var sJson = '{"name":"tom","age":18}';
    var oPerson = JSON.parse(sJson);
    // 操作属性
    alert(oPerson.name);
    alert(oPerson.age);

操作json数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 定义一个json数据
        var sJson = '{\
            "name":"tom",\
            "age":18,\
            "hobby":["study","shopping","singing"],\
            "school":{"name":"beida","location":"beijing"}\
           }';

        // 将json数据转化成JavaScript对象
        var oJson = JSON.parse(sJson);
        alert(oJson.name); // tom
        alert(oJson.hobby[0]); // study
        alert(oJson.school.location); // beijing
    </script>
</head>

<body>
</body>

</html>

6 - ajax

ajax介绍：ajax一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。jquery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求
$.ajax使用常用参数
- ①.url 请求地址
- ②.type 请求方式，默认是’get’，常用的还有’post’
- ③.dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’text’
- ④.data 设置发送给服务器的数据
- ⑤.success 设置请求成功后的回调函数
- ⑥.error 设置请求失败后的回调函数
- ⑦.async 设置是否异步，默认值是’true’，表示异步
旧的写法

$.ajax({
    url: '/change_data',
    type: 'get',
    dataType: 'json',
    data:{'code':300268}
    success:function(dat){
        alert(dat.name);
    },
    error:function(){
        alert('服务器超时，请重试！');
    }
});

新的写法（推荐）

$.ajax({
    url: '/change_data',
    type: 'get',
    dataType: 'json',
    data:{'code':300268}
})
.done(function(dat) {
    alert(dat.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

$.ajax的简写方式： $.ajax按照请求方式可以简写成 $.get 或者 $.post 方式
- $.get(URL,data,function(data){},dataType);
- $.post(URL,data,function(data){},dataType);

无休止符

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
7-JQuery

目录一、JQuery入门1 - jquery介绍2 - jquery文档加载完再执行3 - jquery选择器一、JQuery入门1 - jquery介绍jquery概念：jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库jquery版本：jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最
复制链接

扫一扫