JQuery基础

JQuery

JS框架:相当于一些现成的函数和对象的集合,直接拿来使用就可以了
口号:Write less,do more.（写的更少，做的更多）
下载jQuery 官方网站 http://jquery.com/

jQuery分为两种：

jquery-2.1.4.js(未压缩版)
jquery-2.1.4.min.js(压缩版)

未压缩版: 开发、学习、调试时用
压缩版: 项目正式运行的时候使用,可以减少带宽,提高项目的性能，

1.如何引入jquery-2.1.4.js

<script type="text/javascript" src="jquery-2.1.4.js"></script>

2.ready方法

//ready方法的作用是当页面中的DOM加载完后执行参数中的函数
 $(document).ready(function(){
        alert("Hello World!");
 });

三．DOM对象和jQuery对象的转化
1.dom对象—>jQuery对象
$(DOM对象):是把DOM对象转化成JQuery对象

演示代码
//1.dom对象---->jQuery对象
var div1 = document.getElementById("div1");
var $div1 = $(div1);
alert($div1.html());// $div1.width()

jQuery对象实质就是map、关联数组
Dom对象是存到jQuery对象的第一个元素中

2.把jQuery对象转化为DOM对象

//2.把jQquery对象--->dom对象
var $div = $("#div1");
//第一种方式
//var div = $div[0];//div是DOM对象
//第二种方式
var div = $div.get(0);
alert(div.innerHTML);

变量定义的规范:jQuery对象 前面要加$,dom对象不用加$

使用数组模拟jQuery对象

var div1 = document.getElementById("div1");
                var arr = [div1,2,3];
                Array.prototype.aaa = "111";
                Array.prototype.get = function(i){
                    return this[i];
                }
                var haha = arr.get(0);
                alert(haha)

四.$(document).ready()和window.onload区别
(1)window.onload只能绑定一个事件处理函数，如果绑定多个
只执行最后一个，而$(document).ready()可以绑定多个函数
(2)window.onload必须等待网页中所有的内容加载完毕后(包括图片)才能执行，$(document).ready() 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完
(3)简写
window.onload 无

$(document).ready(function(){

});
可以简写成
$().ready(function(){
});
也可以简写成
$(function(){

});

五.绑定事件处理函数

//绑定事件处理函数
$("#btn1").click(function(){
        alert('你好');
});

jquery对象.click(事件处理函数);

六.修改样式
DOM方式

document.getElementById("hello").style.color = "red";//得值得时候无法得到内嵌样式的值

jQuery方式

$("#hello").css("color","#ff0000");//同一个方法名字既表示读操作，又表示写操作
$("#hello").css("color","#ff0000");//写操作
$("#hello").css("color");//读操作

jQuery中的选择器
jQuery中的选择器借鉴了CSS中选择器的思想，CSS中选择器选择出标签以后只能给标签加样式，而jQuery中的选择器选择出标签(或元素)后可以做任意操作。

一.基本选择器(basic 5个)
1.id选择器 #id
根据给定的id匹配一个元素 返回单个元素
$(“#myDiv”)选取id为myDiv的元素
演示代码:

var $obj = $("#myDiv"); 
$obj.css("background-color","burlywood");
console.dir($obj);

2.标签选择器element
返回集合元素
$(“p”)选取所有的

元素

3.类选择器 .class
根据给定的类名匹配元素 集合元素
$(“.test”)选取所有class为test的元素

4.通配符选择器 *
匹配所有元素 集合元素
$(“*”)选取所有的元素

5组合选择器 .select1,select2,….selectN
将每一个选择器匹配 集合元素
$(“div,span,p.myClass”)选取所有<div>、<span>和拥有class为myClass的

标签的一组元素

最常用的是id选择器和类选择器

二.层次选择器()level 4个
1.子级(子代选择器和后代选择器)
子代选择器: 儿子结点
$(“parent>child”) 选取parent元素下的child(子代元素) 返回集合元素
$(“div>span”)选取div下的儿子结点span

后代选择器: 儿子和孙子结点
$(“ancestor descendant”) 选取ancestor元素里的所有descendant(后代)元素 返回集合元素
$(“div span”) 选取div里的所有的span元素

2.同级(下一个和下面所有、上一个和上面所有同级兄弟)
$(‘prev+next’) 选取紧接在prev元素后的next元素 返回集合元素
$(‘.one+div’)选取class属性为one的下一个

元素
与 $(“.one”).next(“div”)等价
$(‘prev~siblings’) 选取prev元素之后的所有siblings元素 返回集合元素
$('#two~div')选取id值为two的后面的所有

兄弟元素,
与 $(“#two”).nextAll(“div”)等价
$(“#prev”).siblings(“div”) 选取和id值为prev的元素同级的div元素
上一个 prev() 上面所有 prevAll();

三.过滤选择器(filter 6个)
1基本过滤 10个
2.内容过滤 4个
3.可见性过滤 2个
4.属性过滤 7个
5.子元素过滤 4个
6.表单对象属性过滤 4个

四.表单选择器(form)
使用表单选择器 可以快速选出表单中的表单域

表格隔行换色
$(“#table1 tbody tr:even”).css(“background”,”red”);//偶数行
$(“#table1 tbody tr:odd”).css(“background”,”green”);//奇数行
演示代码:

$(function(){
            //页面加载完毕后 隔行换色      $("#table1tr:even").css("backgroundColor","#BAD0EF");
            var $object = $("tr:first");
            $object.css("backgroundColor","#000000");
            $object.css("color","#ffffff");
});

1.判断有多少选择框被选中(包括单选框和复选框)
var $obj = $(“input:checked”);
console.info($obj);

1. 查找被选中的爱好 复选框

var $obj = $("input[name='hobby']:checked");
console.info($obj);
$(".test  :hidden").length  层次选择器
$(".test:hidden") 可见性过滤

each()方法
打印每一个li中的内容
$(“li”) 是获得所有的li,如果想遍历每一个li需要使用 each()方法

$(function(){      
        $("li").each(function(){           
            document.writeln($(this).text() + “<br/>”);
        });         
});

一.创建节点

var $div5 = $("<div id='div5'>我是div5</div>");

二.插入节点
1.插入同级元素(兄弟元素)
after() 在每个匹配的元素之后插入内容 HTML代码:

<p>我想说:</p>
jQuery代码:
$("p").after("<b>你好</b>");
结果:
<p>我想说:</p><b>你好</b>

insertAfter 与after()相反 HTML代码:

    <p>我想说:</p>
                    jQuery代码:
                    $("<b>你好</b>").insertAfter("p");
                    结果:
                    <p>我想说:</p><b>你好</b>

before() 在每个匹配的元素之前插入内容 HTML代码:

    <p>我想说:</p>
                    jQuery代码:
                    $("p").before("<b>你好</b>");
                    结果:
                    <b>你好</b><p>我想说:</p>

insertBefore() 与before()相反 HTML代码:

<p>我想说:</p>
                    jQuery代码:
                    $("<b>你好</b>").insertBefore(“p");
                    结果:
                    <b>你好</b><p>我想说:</p>

2.插入子级元素
append() 向每个匹配的元素内部追加内容 HTML代码:

    <p>我想说:</p>
                    jQuery代码:
                    $("p").append("<b>你好</b>");
                    结果:
                    <p>我想说:<b>你好</b></p>

appendTo() 与append相反 HTML代码:

    <p>我想说:</p>
                    jQuery代码:
                    $("<b>你好 </b>").appendTo("p");
                    结果:
                    <p>我想说:<b>你好</b></p>

prepend() 向每个匹配的元素内部前置内容 HTML代码:

<p>我想说:</p>
                    jQuery代码:
                    $("p").prepend("<b>你好</b>");
                    结果:
                    <p><b>你好</b>我想说:</p>

prependTo() 与prepend相反 HTML代码:

    <p>我想说:</p>
                    jQuery代码:
                    $("<b>你好 </b>").prependTo("p");
                    结果:
                    <p><b>你好</b>我想说:</p>

三.移除节点
1.remove()删除
jquery对象.remove();//返回被移除的节点的jQuery对象
$(“#div1”).remove();

2.empty() 清空
$(“ul li:eq(3)”).empty();//清空元素中的内容
把remove()方法改成empty()演示

三.节点的替换(修改)
1.replaceWith()方法

$("#div4").replaceWith("<input type='text' name='pname' value='产品名称'><br/>");
body中的代码
<p>我是一个段落</p>               
<input type="button" name="" id="" value="替换节点" onclick="test();"/>

2.replaceAll()方法 (和replaceWith()相反)

$("&lt;input type='text' name='pname' value='产品名称'><br/>").replaceAll( \$("#div4"));

四.节点移动
$(“ul li:eq(2)”).insertAfter(“ul li:eq(0)”);
演示代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
* {
    margin: 0px;
}

a {
    border: 1px solid #e4393c;
    display: block;
    width: 150px;
    background: #e4393c;
    height: 26px;
    line-height: 26px;
    color: #fff;
    font-size: 15px;
    font-family: '微软雅黑';
    text-align:center;
    text-decoration:none;
    white-space:pre;
}

ul {
    list-style-type:none;
    padding:0px;
    margin:0px;
}
li a:hover {
    background-color:#F7F7F7;
    color:#e4393c;
    border-right:#F7F7F7;
}
</style>
<script src="../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
     $(function(){
            $("ul li:eq(2)").insertAfter("ul li:eq(0)");   
    });
</script>
  </head>
  <body>
    <ul>
        <li><a href="">手   机</a></li>
        <li><a href="">笔记本</a></li>
        <li><a href="">图书音像</a></li>
        <li><a href="">服装鞋帽</a></li>
    </ul>
  </body>
</html>

五.克隆节点
jQuery对象.clone();//返回克隆出来的对象，相当于 对象.clone(false);
jQuery对象.clone(true);//克隆出来的对象含有事件

单击任何一个li，复制出这个li,附着在ul后面

演示代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>演示克隆节点</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
* {
    margin: 0px;
}

li {
    width: 152px;
}

a {
    border: 1px solid #e4393c;
    display: block;
    width: 150px;
    background: #e4393c;
    height: 26px;
    line-height: 26px;
    color: #fff;
    font-size: 15px;
    font-family: '微软雅黑';
    text-align:center;
    text-decoration:none;

    white-space:pre;
}

ul {
    list-style-type:none;
    padding:0px;
    margin:0px; 
}
li a:hover {
    background-color:#F7F7F7;
    color:#e4393c;
    border-right:#F7F7F7;
}
</style>
<script type="text/javascript">
     $(function(){
             $("ul>li").click(function(){          
            var $obj = $(this).clone(true);   
            $("ul").append($obj);
         });      
    });
</script>
  </head>
  <body>
    <ul>
        <li><a href="#">手    机</a></li>
        <li><a href="#">笔记本</a></li>
        <li><a href="#">图书音像</a></li>
        <li><a href="#">服装鞋帽</a></li>
    </ul>
  </body>
</html>

六.节点的包裹

1.wrap()方法

<strong>你最喜欢的水果是?</strong><br/>
<strong>你最喜欢的水果是?</strong>
$("strong").wrap("<b></b>")

包裹后的结果

<b>
<strong>你最喜欢的水果是?</strong>
</b>
<br>
<b>
<strong>你最喜欢的水果是?</strong>
</b>

2.wrapAll()方法
$(“strong”).wrapAll(““)

<b>
<strong>你最喜欢的水果是?</strong>
<strong>你最喜欢的水果是?</strong>
</b>
<br>

2.wrapInner()方法 包裹里面的文本

$("strong").wrapInner("<b></b>")

包裹后的结果
<strong>
<b>你最喜欢的水果是?</b>
</strong>
<br>
<strong>
<b>你最喜欢的水果是?</b>
</strong>

七.遍历子元素和兄弟元素

1.遍历子元素

children() 获得所有孩子节点,不包括孙子节点
var v1 = $(“body”).children();//查找body的孩子结点,不包括孙子节点,返回集合元素

演示代码:

<script type="text/javascript">
    $(function(){
        //遍历body的子元素
        //先得到body
        var $body = $("body");
        var childArr = $body.children();
        console.info(childArr.length);//3
    });
</script>

<body>
    <div>
        <p>我是div中的p标签</p>
    </div>
    <p>我是p标签</p>
    <h1>我是h1</h1>
</body>

jQuery对象.find() 在jQuery对象下找 某个元素

var $div1 = $("#div1");
console.info($div1.find("p"));//在id为div1的元素下找p节点

2.遍历兄弟元素

访问下面的一个元素 对象.next();
访问上面的一个元素 对象.prev();
访问所有的兄弟元素 对象.siblings();

3.遍历父元素

原生JS方式: dom对象.parentNode

jQuery方式
对象$(“p”).parent();// 得到p元素的父亲节点

$(“p”).parents() ;//得到p元素的所有父亲节点

代码参见:jQuery手册中的 筛选–查找–parent和parents

Parent演示代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../../js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                var $parents = $("p").parent();
                console.dir($parents);

            });
        </script>
    </head>

    <body>

        <div>
            <p>Hello</p>
            <p>Hello</p>
        </div>

    </body>

</html>

一.属性操作
1.attr()获取与设置属性

<input id="test" type="text" name="username" value="111"/>

jQuery对象.attr("name");//获取name属性 ok
jQuery对象.attr("name","zzy");//设置name属性为zzy   ok

jQuery对象.attr("type");//获取属性 ok
jQuery对象.attr("type","password");//设置属性  报错  jQuery不允许改type属性

但原生js可以修改dom对象的type属性

2.attr()方法也可以接受JSON数据格式用来修改多个属性
$(“#test”).attr({“name”:”zzy”,”value”:”333”});

3.removeAttr() 移除属性
removeAttr(“属性名”);// 移除属性
注册页面,点击”接受协议”按钮才可以使用

演示代码:

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

                var $agree = $("#agree");
                var $btn1 = $("#btn1");

                $agree.click(function(){

                    if($agree.prop("checked")==true){//复选框被选用了
                        //按钮可用
                        $btn1.removeAttr("disabled");
                    }else{
                        //按钮不可用
                        $btn1.attr("disabled","disabled");
                    }
                });

            });
        </script>
    </head>
    <body>
        同意该协议<input id="agree" type="checkbox" name="agree"/>

        <input type="button" id="btn1" value="注册" disabled="disabled"/>


    </body>
</html>

二.样式操作
1.修改单一样式
css(“属性名”,”属性值”)

<a id="hello">click me</a>

DOM方式

document.getElementById("hello").style.color = "red";

jQuery方式

$("#hello").css("color","#ff0000");

同一个方法名字既表示读操作，又表示写操作

$("#hello").css("color","#ff0000");//写操作
$("#hello").css("color");//读操作

css()方法也可以接受JSON对象来同时修改多个属性
演示代码:

$("#div1").css({
        "backgroundColor":"yellowgreen",
        "color":"red"
});

2.修改整套样式
演示代码参见 锋利的jQuery 源代码 第三章例子–3-9样式操作 3-9-1.html
(1)通过attr()方法

DOM方式
document.getElementById(“hello”).className=”样式名”;

jQuery方式
$(“p”).attr(“class”,”high”);

(2)addClass()添加样式
给class属性增加一个样式,如果以前有样式比如
class=”hello”
调用$(“p”).addClass(“high”);后
样式修改为class=”hello high”

(3)removeClass()移除样式
removeClass(“样式名”);//移除一个样式
removeClass();//移除所有样式

(4)toggleClass()样式切换
$(“p”).toggleClass(“another”);//有就删除,没有就添加

(5)hasClass()或is()判断是否含有样式
1.$(“p”).hasClass(“another”)

2.$(“p”).is(“.another”)

补充: 对象.is(“:checked”) 判断复选框是否被选择中
对象.is(“:animated”) 判断当前元素是否正处在动画当中

三.html()、text()、val()区别
html() 相当于 innerHTML 内部的HTML代码
text() 相当于 innerText 内部的文本 不包括HTML代码
val() 相当于 value 值 得到dom对象的value值

演示代码:

<script type="text/javascript">
    $(function(){

        var str = $("#username").val();
        alert(str);

    });
</script>

<body>
    <div id="div1">
        <p>
            我是div111
        </p>
    </div>

    <input id="username" type="text" value="111" />
</body>

一.事件
1.jquery绑定事件
jQuery对象.bind(“事件名”,可选参数,事件处理函数)

注意:
1.第二个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象.
2.事件名不要加on
jquery对象.bind(“事件名”,function(){

})

点击 h5标题后,显示h5下的div
演示代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>演示事件</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            body {
                font-size: 13px;
                line-height: 130%;
                padding: 60px;
            }

            #panel {
                width: 300px;
                border: 1px solid #0050D0;
            }

            .head {
                padding: 5px;
                background: #96E555;
                cursor: pointer;
            }

            .content {
                padding: 10px;
                text-indent: 2em;
                border-top: 1px solid #0050D0;
                display: none;

            }
        </style>
        <script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                //需求: 点击标题后 显示 标题下面的div
                $("#panel h5.head").bind("click",function(){

                    //让标题下面的div显示
                    $(this).next().show();
                });
            });
        </script>
    </head>

    <body>

        <div id="panel">
            <h5 class="head">什么是jQuery?</h5>
            <div class="content">
                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
            </div>
        </div>
    </body>

</html>

2.取消绑定
1.取消click事件的所有事件处理函数

jQuery对象.unbind("click")

2.取消click事件的事件处理函数f2
jQuery对象.unbind(“click”,f2);

fn1=function(){} 这个也可以作为函数的参数,相当于
function(){},并且这个函数叫fn1

3.只执行一次事件
对象.one(“事件名”,事件处理函数);//只执行一次

4.触发某一个事件
对象.trigger(“click”); //相当于 对象.click();

5.div的显示和隐藏
div.show(“slow”);
div.show(“normal”);
div.show(“fast”);

可见就隐藏,不可见就显示

if(div对象.is(“:visible”)){
div对象.hide(3000);
}else{
div对象.show(3000);
}

6.改变绑定事件的类型
mouseover
mouseout

演示代码:

$(function() {
                //需求: 点击标题后 显示 标题下面的div
                $("#panel").bind("mouseover", function() {

                    $(this).find("div.content").show();

                });

                $("#panel").bind("mouseout", function() {

                    $(this).find("div.content").hide();

                });

            });

或者合成一句

$(function() {
                //需求: 点击标题后 显示 标题下面的div
                $("#panel").bind("mouseover", function() {
                    $(this).find("div.content").show();
                }).bind("mouseout", function() {
                    $(this).find("div.content").hide();
                });

});

或者

$(function() {
                //需求: 点击标题后 显示 标题下面的div
                $("#panel").mouseover(function() {
                    $(this).find("div.content").show();
                }).mouseout(function(){
                    $(this).find("div.content").hide();
                });

            });

选项卡的制作

演示代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <title>网页选项卡</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <script src="../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">

            * {
                margin: 0;
                padding: 0;
            }

            body {
                font: 12px/19px Arial, Helvetica, sans-serif;
                color: #666;
            }

            .tab {
                width: 240px;


            }

            .tab_menu {
                clear: both;
            }

            .tab_menu li {
                float: left;
                text-align: center;
                cursor: pointer;
                list-style: none;
                padding: 1px 6px;
                margin-right: 4px;
                background: #F1F1F1;
                border: 1px solid #898989;
                border-bottom: none;
            }

            .tab_menu li:hover {
                background: #DFDFDF;
            }

            .tab_menu li.selected {
                color: #FFF;
                background: #6D84B4;

            }

            .tab_box {
                clear: both;
                border: 1px solid #898989;
                height: 100px;
            }

            .hide {
                display: none
            }
        </style>
        <script src="../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">
            $(function() {
                    //给所有的li绑定单击事件 

                    var $menu_li = $("div.tab_menu li");
                    $menu_li.click(function(){
                         //1.将点击的li高亮   
                         $(this).addClass("selected");
                         //并去掉其他的高亮
                         $(this).siblings().removeClass("selected");

                         //2.让对应的div显示
                         //点击第1个li 显示第1个div  点击第2个li 显示第2个div 
                         //首先获得点击了第几个li

                         var clickedLiIndex = $menu_li.index($(this));

                         $("div.tab_box>div").eq(clickedLiIndex).show();

                         $("div.tab_box>div").eq(clickedLiIndex).siblings().hide();
                    });
            });
        </script>

    </head>

    <body>

        <div class="tab">
            <div class="tab_menu">
                <ul>
                    <li class="selected">时事</li>
                    <li>体育</li>
                    <li>娱乐</li>

                </ul>

            </div>

            <div class="tab_box">
                <div>时事</div>
                <div class="hide">体育</div>
                <div class="hide">娱乐</div>
            </div>

        </div>

    </body>

</html>

合成事件 2个
jQuery有两个合成事件—–hover()方法和toggle()方法.
1.hover(enter,leave);

hover = mouseover + mouseout ;

hover()方法用于模拟光标悬停事件.当光标移动到元素上时,执行第一个函数(enter),当光标移出这个元素时,会触发第二个函数(leave).

上面的例子可以改写成hover()方法

演示代码:

$("#panel").hover(function() {
        $(this).find("div.content").show();
},function(){
        $(this).find("div.content").hide();
});

2.toggle(事件处理函数1，事件处理函数2,….); //开关函数
jQuery1.9 以后取消了toggle事件

toogle(fn1,fn2,…fnN)
toogle()方法用于模拟鼠标连续单击事件。第1次单击元素,触发第一个函数(fn1),第二次单击同一个元素,触发fn2…如果有多个函数,依次触发,直到最后一个,随后的每次单击从头开始轮番调用这几个函数。

前面的单击标题例子中,使用了如下代码:

$(function() {
                $("#btn1").click(function() {

                    var $div1 = $("#div1");
                    if ($div1.is(":visible")) {
                        $div1.hide(3000);
                    } else {
                        $div1.show(3000);
                    }

                });
});

虽然能实现效果,但是这种方法不是最合适的.如果需要连续单击”标题”,来达到使”内容”显示和隐藏的目的,那么很适合使用toggle()方法

演示代码:

$(function() {
                //需求: 点击标题后 显示 标题下面的div


                $("#panel h5.head").toggle(function(){
                    //让层显示
                    $(this).next().show();
                },function(){
                    //让层隐藏
                    $(this).next().hide();
                });
});

toggle()方法还有另外一个作用:切换元素的可见状态.如果元素是可见的,单击切换后则隐藏；
如果元素是隐藏的,单击切换后则为可见的.

对于层来说 div对象.toggle();//显示的层变隐藏、隐藏的层变显示

加强效果

为了能有更好的用户体验,现在需要在用户单击”标题”后,不仅显示内容,而且高亮显示”标题”。

单击标题后,标题高亮显示

为了完成这一功能,首先在CSS中定义一个高亮的样式,CSS代码如下:
.highlight {
background-color:#ff3300;
}

演示代码:

$(function() {
                //需求: 点击标题后 显示 标题下面的div
                $("#panel").click(function() {

                    $(this).find("div.content").toggle();

                    $(this).find("h5").toggleClass("highlight");
                });

});

二.动画
(一)内置动画
1.show()和hide()
div.show(“slow”);//0.6秒
div.show(“normal”);//0.4秒
div.show(“fast”);//0.2秒
div.show(毫秒);

如果不加参数直接调用show() 是立即显示 没有动画效果
增加宽度(从左到右增大)、增加高度(从上到下增大),同时增加内容的不透明度

2.fadeIn()和fadeOut()淡入淡出效果

对象.fadeIn();//淡入 增加不透明度
对象.fadeOut();//淡出 减少不透明度 直到元素完全消失(display:none)
与show()方法不同,fadeIn()和fadeOut()方法只改变元素的不透明度.

3.slideUp()、slideDown()收缩、展开效果(用于层)
slideUp()、slideDown() 只会改变元素的高度

动画积累问题解决
当用户快速在某个元素上执行animate()动画时,就会出现动画积累.解决方法是判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,如果元素正处于动画状态不添加动画.

$(function() {
                //需求: 点击标题后 显示 标题下面的div
            $("#panel").toggle(function(){

                if(!$("#panel").find("div.content").is(":animated")){ //不处在动画状态中
                    $("#panel").find("div.content").slideDown("slow");
                }

            },function(){
                if(!$("#panel").find("div.content").is(":animated")){
                    $("#panel").find("div.content").slideUp("slow");
                }
            });

    });

(二)自定义动画 animate()
1.自定义简单动画
animate({left:”500px”},3000,function(){alert(3);});
参数1：让div向右移动500px
参数2：移动所需的时间(可以省略)
参数3: 移动完成调用回调函数(可以省略)

完整演示代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>演示事件</title>
        <style type="text/css">
            #panel {
                width:100px;
                height:100px;
                background-color:yellowgreen;
                position:relative;
                cursor:pointer;
            }
        </style>
        <script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                $("#panel").click(function(){
                    $(this).animate({left:"500px"},3000,function(){
                        $(this).fadeOut(2000);
                    });
                });
            });
        </script>
    </head>

    <body>

        <div id="panel">
            保存成功
        </div>
    </body>

</html>

2.多重动画

(1)同时执行多个动画

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>演示事件</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            #img1 {
                position:relative;
            }

        </style>
        <script src="../../../js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                $("#img1").click(function(){
                    $(this).animate({left:"500px",height:"200px"},3000);
                });
            });
        </script>
    </head>

    <body>

        <img id="img1" src="../../../image/smile.png"/>
    </body>

</html>

(2)按顺序执行多个动画

上例中是移动和调整宽度同时进行,如果想按顺序执行动画,例如先向右滑动,然后再放大它的高度,只需把代码拆开

$(function() {
                $("#img1").click(function(){
                    $(this).animate({left:"500px"},3000);
                    $(this).animate({width:"200px"},3000);
                });
});

因为animate都是对同一个jQuery对象操作的,也可以改为链式操作

$(function() {
                $("#img1").click(function(){
                    $(this).animate({left:"500px"},3000).
                             animate({width:"200px"},3000);

                });
});

像这样动画效果的执行具有先后顺序,称为”动画队列”.
3.综合动画

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>演示事件</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            #panel {
                width:100px;
                height:100px;
                background-color: burlywood;
                position:relative;
            }
        </style>
        <script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {

                $("#panel").css("opacity","0.5");//设置不透明度
                $("#panel").click(function(){
                    $("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
                        .animate({top:"200px",width:"200px"},3000)
                        .fadeOut("slow");
                });
            });
        </script>
    </head>

    <body>

        <div id="panel">

        </div>
    </body>

</html>

4.动画回调函数
如果想在最后一步切换元素的CSS样式,而不是隐藏元素.
需要把最后fadeOut(“slow”) 改为 .css(“border”,”5px solid blue”);
但是这样并不能得到预期效果,预期效果是在动画的最后一步改变元素的样式,而实际效果是刚开始执行的时候,css()方法就执行了.出现这个问题的原因是css()方法并不会加入到动画队列中,而是立即执行.可以使用回调函数(callback)对非动画方法实现排队.只要把css()方法写在最后一个动画的回调函数里即可.代码如下:

$(function() {

                $("#panel").css("opacity","0.5");//设置不透明度
                $("#panel").click(function(){
                    $("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
                        .animate({top:"200px",width:"200px"},3000,function(){
                            $("#panel").css("border","5px solid blue");
                        });

                });
});

5.停止动画

$("#btn1").click(function(){
                    $("#panel").stop();//只能停止一个动画
});

6.延迟动画

$(function() {

                $("#panel").css("opacity","0.5");//设置不透明度
                $("#panel").click(function(){
                    $("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
                        .delay(3000)
                        .animate({top:"200px",width:"200px"},3000,function(){
                            $("#panel").css("border","5px solid blue");
                        });

                });

                //停止动画
                $("#btn1").click(function(){
                    $("#panel").stop();
                });
            });

(三)其他动画方法

toggle()、slideToggle()、fadeTo()和fadeToToggle();
fadeTo() 把元素的不透明度调整到指定的值

$(function() {
                //需求: 点击标题后 显示 标题下面的div
                $("#panel h5.head").click(function(){
                    $(this).next().fadeTo(600,0.2);//600毫秒  不透明度调整到0.2
                });

})

在css中调整不透明度

.content {
                padding: 10px;
                text-indent: 2em;
                border-top: 1px solid #0050D0;
                background-color: rgba(255,0,0,0.5);//alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。 
}

一.表单验证插件—–Validation

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件
Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点:
1.内置验证规则: 拥有必填、数字、email、url和信用卡号码等19类内置验证规则.
2.自定义验证规则:可以很方便地自定义验证规则.
3.简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能.
4.实时验证:可以通过keyup或blur事件触发验证,而不仅仅在表单提交的时候验证.

下载地址: http://bassistance.de/jquery-plugins/jquery-plugin-validation

二.快速上手(第一个Validation插件程序)
html页面

<style type="text/css">
            * {
                font-family:verdana;
                font-size:96%;
            }

            label {
                width:10em;
                float:left;
            }   
            label.error {
                float:none;
                color:red;
                padding-left:5em;
                vertical-align:top;
            }

            p {
                clear:both;
            }

            em {
                font-weight: bold;
                padding-right:1em;
                vertical-align:top;
            }

            .submit {
                margin-left:12em;
            }

        </style>

body中的代码

<form id="commentForm" action="#" method="get">
            <fieldset>
                <legend>带验证的评论</legend>
                <p>
                    <label for="username">姓名</label><em>*</em>
                    <input type="text" name="username" id="username" size="25" />
                </p>

                <p>
                    <label for="email">电子邮件</label><em>*</em>
                    <input type="text" name="email" id="email" size="25" />
                </p>

                <p>
                    <label for="url">网址</label><em>&nbsp;&nbsp;</em>
                    <input type="text" name="url" id="url" size="25">
                </p>

                <p>
                    <label for="comment">你的评论</label><em>*</em>
                    <textarea id="comment" name="comment" cols="22" ></textarea>
                </p>

                <p>

                    <input class="submit" type="submit" value="提交"/>
                </p>
            </fieldset>
        </form>

(1)对”姓名”的必填和长度至少是两位的验证.
(2)对”电子邮件”的必填和是否为Email格式的验证.
(3)对”网址”是否为url的验证.
(4)对”你的评论”的必填验证

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>第一个validation插件程序</title>
        <style type="text/css">
            * {
                font-family: verdana;
                font-size: 96%;
            }

            label {
                width: 10em;
                float: left;
            }

            label.error {
                float: none;
                color: red;
                padding-left: 5em;
                vertical-align: top;
                background-color: burlywood;
            }

            p {
                clear: both;
            }

            em {
                font-weight: bold;
                padding-right: 1em;
                vertical-align: top;
            }

            .submit {
                margin-left: 12em;
            }
        </style>
<!--第一步 导入jQuery库和validation插件-->
<script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/jquery/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /*第二步 确定哪个表单需要被验证*/
            $(function() {
                $("#commentForm").validate();
            });
        </script>

    </head>

    <body>
        <form id="commentForm" action="#" method="get">
            <fieldset>
                <legend>带验证的评论</legend>
                <p>
                    <label for="username">姓名</label><em>*</em>
                    <input type="text" name="username" id="username" size="25" class="required" minlength="2" />
                </p>

                <p>
                    <label for="email">电子邮件</label><em>*</em>
                    <input type="text" name="email" id="email" size="25" class="required email" />
                </p>

                <p>
                    <label for="url">网址</label><em>&nbsp;&nbsp;</em>
                    <input type="text" name="url" id="url" size="25" class="url" />
                </p>

                <p>
                    <label for="comment">你的评论</label><em>*</em>
                    <textarea id="comment" name="comment" cols="22" class="required"></textarea>
                </p>

                <p>

                    <input class="submit" type="submit" value="提交" />
                </p>
            </fieldset>
        </form>
    </body>

</html>

三.两种不同的验证写法
(一)class=”required” 和 minlength=”2” 都写到class中

演示代码:

<form id="commentForm" action="#" method="get">
            <fieldset>
                <legend>带验证的评论</legend>
                <p>
                    <label for="username">姓名</label><em>*</em>
                    <input type="text" name="username" id="username" size="25"  class="{validate:{required:true, minlength:2}}"   />
                </p>

                <p>
                    <label for="email">电子邮件</label><em>*</em>
                    <input type="text" name="email" id="email" size="25" class="{validate:{required:true, email:true}}" />
                </p>

                <p>
                    <label for="url">网址</label><em>&nbsp;&nbsp;</em>
                    <input type="text" name="url" id="url" size="25" class="{validate:{url:true}}" />
                </p>

                <p>
                    <label for="comment">你的评论</label><em>*</em>
                    <textarea id="comment" name="comment" cols="22" class="{validate:{required:true}}"></textarea>
                </p>

                <p>

                    <input class="submit" type="submit" value="提交" />
                </p>
            </fieldset>
        </form>

(二)将验证规则和HTML结构分离

上面的两个例子都是通过修改HTML的属性来实现的,这样写虽然能实现功能,但内容和验证行为没有分离,下面介绍一种分离的方法,在js中通过name属性来关联表单域和验证规则.
首先,将表单域中的class属性移除.
然后加入如下jQuery代码:

$(function() {
                $("#commentForm").validate({
                    rules:{
                        username:{
                            required:true,
                            minlength:2
                        },
                        email:{
                            required:true,
                            email:true
                        },
                        url:"url",
                        comment:"required"
                    }
                });
    });

具体代码步骤:
1.在 表单对象.validate()方法中增加rules属性
2.通过每个字段的name属性值来匹配验证规则
3.定义验证规则
如果一个表单域上只有一个验证规则,则直接写这一个验证规则,例如url:”url”
如果一个表单域上有多个验证规则,那么验证规则也是一个json对象

四.验证信息
1.国际化
Validation插件的验证信息默认语言为英文,如果要改成中文,只需要引入Validation提供的中文验证信息库jquery.validate.messages_cn.js即可，引入代码如下:

引入语言库后,提示信息自动变成中文,效果如下:

2.自定义提示信息

<form id="commentForm" action="#" method="get">
            <fieldset>
                <legend>带验证的评论</legend>
                <p>
                    <label for="username">姓名</label><em>*</em>
                    <input type="text" name="username" id="username" size="25"  
                    class="{validate:{required:true, minlength:2,messages:{required:'请输入姓名',minlength:'请至少输入两个字符'}}}"   />
                </p>

                <p>
                    <label for="email">电子邮件</label><em>*</em>
                    <input type="text" name="email" id="email" size="25" 
                        class="{validate:{required:true, email:true,messages:{required:'请输入电子邮件',email:'请检查电子邮件的格式'}}}" />
                </p>

                <p>
                    <label for="url">网址</label><em>&nbsp;&nbsp;</em>
                    <input type="text" name="url" id="url" size="25" class="{validate:{url:true,messages:{url:'请检查网址的格式'}}}" />
                </p>

                <p>
                    <label for="comment">你的评论</label><em>*</em>
                    <textarea id="comment" name="comment" cols="22" class="{validate:{required:true,messages:{required:'请输入您的评论'}}}"></textarea>
                </p>

                <p>

                    <input class="submit" type="submit" value="提交" />
                </p>
            </fieldset>
        </form>

3.自定义提示信息并美化
为提示信息美化(加图片),这对于Validation插件来说，也是非常简单的.

jQuery代码:

$(function() {
                $("#commentForm").validate({
                    rules: {
                        username: {
                            required: true,
                            minlength: 2
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        url: "url",
                        comment: "required"
                    },
                    messages: {
                        username: {
                            required: '请输入姓名',
                            minlength: '请至少输入两个字符'
                        },
                        email: {
                            required: '请输入电子邮件',
                            email: '请检查电子邮件的格式'
                        },
                        url: '请检查网址的格式',
                        comment: '请输入您的评论'
                    },

                    errorElement: "label", //可以用其他标签，记住把样式也对应修改
                    success: function(label) {
                        //label指向上面那个错误提示信息标签em
                        label.text(" ") //清空错误提示消息
                            .addClass("success"); //加上自定义的success类
                    }
                });
            });

样式代码:

label.error {
                float: none;
                color: red;
                /*padding-left: 5em;*/
                vertical-align: top;
                background-color: yellowgreen;

                background: url("../../../img/unchecked.gif") no-repeat 2px 0px;
                padding-left: 18px;
    }

label.success {
                background: url("../../../img/checked.gif") no-repeat 2px 0px;
                padding-left: 18px;
}

4.自定义验证规则
需求: 验证码的验证,验证用户输入的验证码是否正确

<p>
        <label for="valCode">验证码</label><em>*</em>
        <input type="text" name="valCode" id="valCode" size="25" />=7+9
</p>

(1)自定义一个验证规则

jQuery代码:

$(function(){
//在一开始的地方 自定义一个验证方法
$.validator.addMethod(
"formula", //验证方法名称
function(value, element, param) {//验证规则
    return value == eval(param);
}, 
'请正确输入数学公式计算后的结果'//验证提示信息
);
});

(2)调用该验证规则

$("#commentForm").validate({
                    rules: {
                        username: {
                            required: true,
                            minlength: 2
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        url: "url",
                        comment: "required",
                        valCode: {
                            formula: "7+9"
                        }
                    }
});

管理Cookie的插件—-Cookie

Cookie是网站设计者放置在客户端的小文本文件. 实现 存储用户曾经浏览过的产品列表,记住用户喜欢浏览哪类新闻等.在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站时不必每次都键入这些信息.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>jQuery Cookie Plugin</title>
        <script src="../../../js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/jquery/jquery.cookie.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                var COOKIE_NAME = 'username';
                alert($.cookie(COOKIE_NAME));
                if( $.cookie(COOKIE_NAME) ){
                    $("#username").val($.cookie(COOKIE_NAME) );
                }
                $("#check").click(function(){

                    if(this.checked){
                        $.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10 });
                    }else{
                        $.cookie(COOKIE_NAME, null, { path: '/' });
                    }
                });
            });
        </script>
    </head>
    <body>
       用户名：<input type="text" name="username" id="username"/> <br/>
       <input type="checkbox" name="check" id="check"/>记住用户名
    </body>
</html>

1.初始化页面
2.关闭浏览器之前
3.重新打开浏览器

API
写入Cookie

$.cookie(‘cookie名’, ’cookie值’);

读取Cookie

$.cookie(‘cookie名’);

删除Cookie

$.cookie(‘cookie名’,null);

说明: 设置为null即删除此cookie，必须使用与之前设置时相同的路径(path)和域名(domain)，才可以正确的删除cookie

其他可选参数

$.cookie(‘cookie名’,’cookie值’,{
expires:7,
path:’/’,
domain:’Jquery.com’,
secure:true
})

说明: expires:(Number|Date) 有效期.可以设置一个整数作为有效期(单位:天),也可以直接设置一个日期对象作为Cookie的过期日期.如果指定日期为负数,例如已经过去的日子,那么此cookie将被删除;如果不设置或者设置为null,那么此cookie将被当做Session Cookie处理,并且在浏览器关闭后删除.

Path:(String) cookie的路径属性。默认是创建该Cookie的页面路径.
Domain:(String)cookie的域名属性。默认是创建该Cookie的页面域名.
Secure:(Boolean)如果设为true,那么此cookie的传输会要求一个安全协议,例如HTTPS.

自定义插件
编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率.

插件的种类
1.封装对象方法的插件
调用在jQuery对象上的 div对象.方法名();
95%以上的jQuery插件都是封装对象方法的插件

2.封装全局函数的插件
jQuery.noConflict()

3.选择器插件
color(red) 来选择所有红色字的元素
自定义Color()颜色插件

;(function($) {
    //这里写插件代码
})(jQuery);
jquery.color.js
;(function($) {
    //一. 直接调用在  div对象.color();
    $.fn.extend({

        "color": function(value) {

            if(value == undefined) {

                return this.css("color");
            } else {

                return this.css("color", value);
            }

        }
    });
})(jQuery);

如何使用:
1.引入jquery.color.js

<script src="../../../js/jquery/jquery.color.js" type="text/javascript" charset="utf-8"></script>

2.使用即可

$(function(){


                $("#btn1").click(function(){

                    $("#div1").color("blue");
                });

});

body中的代码

<div id="div1" class="divClass1">
        我是div111222
</div>

自定义表格隔行换色插件jquery.myTable.js
演示代码:

;(function($) {
        $.fn.extend({
            "隔行换色":function(options){
                //设置默认值
                options=$.extend({
                    odd:"odd",  /* 偶数行样式*/
                    even:"even", /* 奇数行样式*/
                    selected:"selected" /* 选中行样式*/ 
                },options);

                //$("选择器",上下文); //如果不传第二个参数 默认上下文是 document                从当前文档中 寻找
                //this 在当前对象下 寻找  table 
                $("tbody>tr:odd",this).addClass(options.odd);
                $("tbody>tr:even",this).addClass(options.even);
                $('tbody>tr',this).click(function() {
                    //判断当前是否选中
                    var hasSelected=$(this).hasClass(options.selected);


                    //如果选中，则移出selected类，否则就加上selected类
                    $(this)[hasSelected?"removeClass":"addClass"](options.selected)
                        //查找内部的checkbox,设置对应的属性。
                        .find(':checkbox').prop('checked',!hasSelected);//2.1.4 需改成prop方法
                });
                // 如果单选框默认情况下是选择的，则高色.
                $('tbody>tr:has(:checked)',this).addClass(options.selected);
                return this;  //返回this，使方法可链。
            }
        });
    })(jQuery);

测试代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../../../css/myTableStyle.css" />
        <script src="../../../js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/jquery/jquery.myTable.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $("table").alterBgColor()
                .find("th").css("color","red");//可以链式操作
            });
        </script>
    </head>

    <body>
        <table id="table1">
            <thead>
                <tr>
                    <th> </th>
                    <th>姓名1</th>
                    <th>性别</th>
                    <th>暂住地</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>张山</td>
                    <td>男</td>
                    <td>浙江宁波</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>李四</td>
                    <td>女</td>
                    <td>浙江杭州</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" checked='checked' /></td>
                    <td>王五</td>
                    <td>男</td>
                    <td>湖南长沙</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>找六</td>
                    <td>男</td>
                    <td>浙江温州</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>Rain</td>
                    <td>男</td>
                    <td>浙江杭州</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>MAXMAN</td>
                    <td>女</td>
                    <td>浙江杭州</td>
                </tr>
            </tbody>
        </table>


    </body>

</html>

Style.css

table       { border:0;border-collapse:collapse;}
td  { font:normal 12px/17px Arial;padding:2px;width:100px;}
th          { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even       { background:#FFF38F;}  /* 偶数行样式*/
.odd        { background:#FFFFEE;}  /* 奇数行样式*/
.selected       { background:#FF6500;color:#fff;}

实现元素居中的插件

;
(function($) {

    $.fn.extend({

        "居中": function() {

            return this.css("margin","0px auto");

        }
    });
})(jQuery);

附录: $.extend()方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../../js/jquery/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var obj = {
                odd: "odd",
                even: "even",

            };



            $.extend(obj,{
                odd: "111",

                selected: "selected"
            });

            console.info(obj);
        </script>
    </head>
    <body>
    </body>
</html>

Ajax=Asynchronous Javascript And XML 异步的JavaScript和XML
不是一门新技术,多种技术的综合

局部刷新
前后两次请求都请求同一个页面,两次请求的页面显示的数据只有少量差别的时候使用
Ajax,典型应用用户注册、级联显示下拉菜单

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

1.使用$.get()或$.post()提交

$.post("url",参数,function (data, textStatus){
        //回调函数,服务器响应完毕以后执行
},"json");

$.get("url",参数,function (data, textStatus){
        //回调函数,服务器响应完毕以后执行
},"json");

参数1: 请求的url
参数2: 给服务器传输的参数json对象,格式如下
{
“参数名1”:参数值1,
“参数名2”:参数值2
}
参数3: 回调函数,服务器响应完毕以后执行
data服务器传回的数据
textStatus 响应的状态码

参数4: 提示客户端服务器返回的数据的类型 如果是json客户端使用json对象解析
如果是text 客户端把它当成字符串解析

级联菜单应用:根据选中的一级种类动态产生二级种类
演示代码如下:

$(function(){
        //给category1下拉列表框绑定 onchange 事件
        //当内容改变时 发出ajax请求  去查询对应的 二级商品种类
        $("#category1").change(function(){

            var category1Select  = $("#category1")[0];
            var selectIdx = category1Select.selectedIndex;

            var categoryCid = category1Select.options[selectIdx].value;

            $.post("ProductServlet?action=getCategory2OfCategory1",{
                "categoryCid":categoryCid
            },function (data, textStatus){
                //创建一个新的select 替换掉以前那个二级商品种类的下拉列表框
                var select = "<select id='cid' name='cid'>";

                for(var i=0;i<data.length;i++){
                    select = select + "<option value='" + data[i].cid+ "'>" + data[i].cname + "</option>";
                }

                select = select + "</select>";

                //替换
                $("#cid").replaceWith(select);
            },"json");
        });
    });

或

$(function(){
        //给category1下拉列表框绑定 onchange 事件
        //当内容改变时 发出ajax请求  去查询对应的 二级商品种类
        $("#category1").change(function(){

            var category1Select  = $("#category1")[0];
            var selectIdx = category1Select.selectedIndex;

            var categoryCid = category1Select.options[selectIdx].value;

            $.post("ProductServlet?action=getCategory2OfCategory1",{
                "categoryCid":categoryCid
            },function (data, textStatus){
                alert(data);
                var str = "var data =" + data;
                eval(str);

                //创建一个新的select 替换掉以前那个二级商品种类的下拉列表框
                var select = "<select id='cid' name='cid'>";

                for(var i=0;i<data.length;i++){
                    select = select + "<option value='" + data[i].cid+ "'>" + data[i].cname + "</option>";
                }

                select = select + "</select>";

                //替换
                $("#cid").replaceWith(select);
            },"text");
        });
    });

2.使用$.ajax()提交

$.ajax({
            type: "POST",
            url: "MyServlet",
            data:{'param1':$("#param1").val(),'param2':$("#param2").val()},//用json对象保存提交的数据
            dateType: "html",//服务器输出的数据的类型,默认html           
            success:function(returnedData){
                $("#result").val(returnedData);
            }
  });

3.load()方法演示

附录: 原生JavaScript 发送异步请求

用户注册 演示代码如下:

1.index.js


var xhr = null;

//第二个重要的函数: 回调函数  作用:更新页面
function callback(){

    //这个函数执行了三次 状态位一改变就执行一次 XHR对象的 readyState属性改变了三次
    //readyState 5个值   0-4      0 表示xhr对象刚刚被创建  1 请求发送中  2.响应  3 解析中   
    //4.客户端对xhr解析完成 响应真正完成 客户端才能从这个对象里取出服务器响应的数据
    //  3次改变  1->2   2->3  3->4
    if(xhr.readyState==4){
        //status状态码   404 页面未找到  500 服务器内部错误  200 正常
        if(xhr.status==200){

            var msg = document.getElementById("msg");
            msg.innerHTML = xhr.responseText;
        }
    }
}

function createXHR(){
    var xhr = null;
    if(window.ActiveXObject){
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }else if(document.addEventListener){
        xhr = new XMLHttpRequest();
    }


    return xhr;
}


//第一个重要的函数:发送Ajax请求的事件处理函数   共四步
function checkUserIfExist(){
    var username = document.getElementById("username").value;
    //1.创建XMLHttpRequest类的对象
    xhr = createXHR();
    //2.调用该对象的open方法
    // 有三个参数  1.  请求类型  GET POST  2.请求的URL     3. boolean  true 表示异步请求  false 同步的
    xhr.open("POST","RegistServlet",true);

    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    //3.绑定回调函数
    xhr.onreadystatechange = callback;
    //4.发送请求
    xhr.send("username=" + username);
}

window.onload = function(){
    //给btn1绑定一个事件

    var btn1 = document.getElementById("btn1");

    btn1.onclick = checkUserIfExist;
}

2.RegistServlet.java

package com.servlet;

import java.io.*;

import javax.servlet.*;
import javax.servlet.http.*;

public class RegistServlet extends HttpServlet{

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        String msg = "";

        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        //1.填充数据
        System.out.println("123");
        String username = request.getParameter("username");
        System.out.println(username);
        //2.调用业务逻辑
        //去数据库查询 看看用户是否存在
        if("zzy".equals(username)){
            //数据库 存在了  用户注册失败 显示"用户名已存在,请更换用户名"
            msg = "<font color='red'>用户名已存在,请更换用户名</font>";
        }else{
            msg = "用户名可以使用";
        }

        //3.输出数据
        out.println(msg);
        out.flush();
        out.close();
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doGet(request, response);
    }
}

3.index.jsp

<%@ page language="java"  pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Ajax注册</title>
    <script type="text/javascript" src="js/index.js"></script>
  </head>

  <body>
   <h1>Ajax注册</h1>

   <form action="" method="post">
   请输入用户名3:<input type="text" id="username" name="username"/>
   <input type="button" id="btn1" value="检查用户名是否存在"/>
   <span id="msg"></span>
   <br/>
   用户密码:<input type="password" name="psd"/><br/>
  确认密码:<input type="password" name="repsd"/><br/>
  用户年龄:<input type="text" name="age"/><br/>

  <input type="submit" value="传统的JavaEE注册"/><br/>

  </form>
  </body>
</html>