jQuery学习总结（一）——jQuery基础与学习资源

时间 2019-11-17

原文原文链接

前一段时间录了一套关于jQuery的视频分享给你们，能够在下载区下载到，原本想配合文字一块儿的，后面发现视频+帮助文档也是很是好的学习方法。javascript

1、jQuery简介与第一个jQuery程序

1.一、jQuery简介

jQuery是继Prototype以后又一个优秀的JavaScript库，是一个由John Resig建立于2006年1月的开源项目。如今的jQuery团队主要包括核心库、UI和插件等开发人员以及推广和网站设计维护人员。php

jQuery凭借简介的语法和跨浏览器的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操做DOM、处理事件、执行动画和开发AJAX的操做。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之，不管是网页设计师、后台开发者、仍是项目管理者，也不管是JavaScript初学者仍是JavaScript高手，都有足够多的理由去学习jQuery。css

1.二、jQuery特色

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可使开发更加便捷，例如操做文档对象、选择DOM元素、制做动画效果、事件处理、使用Ajax以及其余功能。除此之外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者能够很轻松的开发出功能强大的静态或动态网页。jQuery的特色：html

功能强大，强调的理念是写的少，作得多（write less，do more）
封装了大量经常使用的DOM操做
灵活的事件处理机制
拥有完善的AJAX功能
扩展性强、插件丰富
易学易用
多浏览器支持（支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+，在2.0.0中取消了对Internet Explorer6,7,8的支持）、兼容性好

1.三、jQuery版本

jQuery 1.0
（2006年8月）：该库的第一个稳定版本，已经具备了对CSS选择符、事件处理和AJAX交互的稳健支持。
jQuery 1.1
（2007年1月）：这一版大幅简化了API。许多较少使用的方法被合并，减小了须要掌握和解释的方法数量。
jQuery 1.1.3
（2007年7月）：此次小版本变化包含了对jQuery选择符引擎执行速度的显著提高。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及
Dojo等同类JavaScript库的水平。
jQuery 1.2
（2007年9月）：这一版去掉了对XPath选择符的支持，缘由是相对于CSS语法它已经变得多余了。这一版可以支持对效果的更灵活定制，并且借助新增
的命名空间事件，也使插件开发变得更容易。
jQuery UI（2007年9月）：这个新的插件套件是做为曾经流行但已过期的Interface插件的替代项目而发布的。jQuery UI中包含大量预约义好的部件（
widget），以及一组用于构建高级元素（例如可拖放的界面元素）的工具。
jQuery 1.2.6
（2008年5月）：这一版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中。
jQuery 1.3
（2009年1月）：这一版使用了全新的选择符引擎Sizzle，库的性能也所以有了极大提高。这一版正式支持事件委托特性。
jQuery 1.3.2
（2009年2月）：此次小版本升级进一步提高了库的性能，例如改进了：visible/:hidden选择符、.height()/.width()方法的底层处理机制。另外，也支
持查询的元素按文档顺序返回。
jQuery 1.4
（2010年1月14号）：对代码库进行了内部重写组织，开始创建一些风格规范。老的core.js文件被分为
attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js；CSS和attribute的逻辑分离。
jQuery 1.5
（2011年1月31日）：该版本修复了83个bug，解决了460个问题。重大改进有：重写了Ajax模块；新增延缓对象（Deferred Objects）；jQuery替身
——jQuery.sub()；加强了遍历相邻节点的性能；jQuery开发团队构建系统的改进。
jQuery1.7
（2011年11月04号）：新版本包含了不少新的特征，特别提高了事件委派时的性能尤为是在IE7下。
jQuery 1.7.2
（2012年03月24号）：jQuery 1.7.2正式版发布。
该版本在1.7.1的基础上修复了大量的bug，并改进了部分功能。而相比于1.7.2 RC1，只修复了一个bug。值得注意的是：若是你正在使用jQuery
Mobile，请使用最新的jQuery 1.7.2和jQuery Mobile 1.1这两个版本，由于以前的jQuery Mobile版本还基于jQuery core 1.7.1或更早的版本。
jQuery 1.8.3
2012年11月14日 jQuery 1.8.3 发布，修复 bug 和性能衰退问题、IE8中的HTML相关Bug、jQuery 1.8.2在IE9中调用ajax失败的问题
jQuery 2.0
2013年4月18日 jQuery 2.0正式版发布
再也不支持IE 6/7/8：若是在IE9/10版本中使用“兼容性视图”模式也将会受到影响。而jQuery3修复了大量的bug，增长了新的方法，同时移除了一些接口，并修改了少许接口的行为，不1和2是不一样的API。
更轻更快：2.0版本文件与1.9.1相比小了12%。能够构建一个更小、更轻量的版本、表现更好。
jQuery 2.0 API彻底兼容jQuery 1.9 API。java

说明：无论是jQuery1.x仍是2.x使用的API都是同样的，只是内部实现的方式有区别，2.x不支持IE6/7/8而1.x则支持，2.x更小，效率更高，但功能是同样。jquery

1.四、得到jQuery库

jQuery不须要安装，把下载的jQuery库放到网站的一个公共位置，想要在某个页面上使用jQuery时，只须要在相关的HTML文档中引入该库文件便可。得到jQuery相关资源的网站地址以下：git

官网： http://jquery.com/ 程序员

源码： https://github.com/jquery/jquery

文档： http://api.jquery.com/

中文帮助： http://www.jquery123.com/

CDN： http://cdn.code.baidu.com/

jQuery1.12.1在线中文版： http://hemin.cn/jq/

下载较新版的jQuery:下载jQuery1.11.3帮助与库

下载最新版的jQuery:下载jQuery1.12.4库

学习jQuery的权威资料就是帮助文档：

1.4.一、开发工具

http://www.dcloud.io/

1.五、第一个jQuery程序

jQuery的开发不依赖特定的开发工具，使用经常使用Web开发工具都行，如：Eclipse、Visual Studio、Dreamweaver、intelliJ IDEA、HBuilder、webstorm、sublime、notepad++等。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello jQuery</title>
    </head>
    <body>
        <script src="js/jQuery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                alert("Hello jQuery!");
            });
        </script>
    </body>
</html>

这里使用HBuilder，这是一个国人开发的基于Eclipse的免费IDE，感受还不错。

HBuilder下载地址： http://www.dcloud.io/（有Mac版与Windows版本）

运行结果：

2、jQuery对象和DOM对象

2.一、DOM对象

使用JavaScript中的DOM API操做得到的元素对象叫DOM对象。文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

得到DOM对象的示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM元素</title>
    </head>
    <body>
        <h2>DOM元素</h2>
        <p id="foo">Foo</p>
        <p id="bar">Bar</p>
        <script type="text/javascript">
           //得到文档中id为foo的元素
           var foo=document.getElementById("foo");
           //将元素的HTML内容修改成Foo DOM
           foo.innerHTML="Foo DOM";
           
           //得到文档中标签名称为p的全部元素
           var items=document.getElementsByTagName("p");
           //向控制台输出元素数组的个数
           console.log(items.length);
           //遍历数组中的元素
           for (var i=0;i<items.length;i++) {
                   //将每一个元素的HTML内容增长DOM字符
                   items[i].innerHTML+=" DOM";
           }
        </script>
    </body>
</html>

示例中的foo是一个DOM对象，items是一DOM数组，innerHTML是DOM元素的一个属性。

运行结果：

调试：

在Chrome浏览器按Ctrl+Shift+I启动开发者工具，调试上面的代码，添加监视foo对象，在右侧展开监视的foo对象，能够看到该DOM对象的全部属性、方法与事件信息。

2.二、jQuery对象

jQuery对象就是经过jQuery包装DOM对象后产生的对象叫jQuery对象。 jQuery对象是对DOM元素封装事后的数组，也称为包装集。不管选择器匹配了多个或者零个元素，jQuery对象都再也不是null。意味着你只可以用jQuery对象的.length属性来判断选择器是否选中了元素。

得到jQuery对象的示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery对象</title>
    </head>
    <body>
        <h2>jQuery对象</h2>
        <p id="foo">Foo</p>
        <p id="bar">Bar</p>
        <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script>
        <script type="text/javascript">
        //从文档中得到id为foo的jQuery对象
        var $foo=$("#foo");
        //修改$foo元素的HTML内容为Foo jQuery
        $foo.html("Foo jQuery");
        
        //得到页面中全部的p标签元素
        var $items=$("p");
        //从控制台输出元素个数
        console.log($items.size());
        //遍历并修改元素的HTML内容
        $items.html($items.html()+" jQuery");
        </script>
    </body>
</html>

代码中的$foo是一个jQuery对象,$items也是一个jQuery对象。

运行结果：

调试：

从上面的调试信息中能够看到$foo是一个长度为1的集合，集合中下标为0的元素就是1个DOM元素（0：p#foo），上DOM示例中的foo对象彻底同样；能够看出$foo是对DOM元素foo的封装，使用功能更增强大，从隐式原型__proto__中的内容就能够看到，中间提供了大量的方法，事件与属性，简化操做。

2.三、DOM转换成jQuery对象

要使用jQuery中的方法与属性就须要把一个JavaScript中的DOM对象转换成jQuery对象。

转换方法一：

使用工厂方法jQuery(DOM对象)，如jQuery(document.getElementById("foo"))，$是jQuery方法的简写形式，也能够写成$(document.getElementById("foo"))

转换方法二：

简化形式jQuery(选择器)，如jQuery("#foo")，也能够写成$("#foo")

示例以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM转换成jQuery对象</title>
    </head>
    <body>
        <h2>DOM转换成jQuery对象</h2>
        <p id="foo">Foo</p>
        <p id="bar">Bar</p>
        <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script>
        <script type="text/javascript">
        //方法一
        //在文档中得到id为foo的DOM对象
        var foo=document.getElementById("foo");
        //将DOM对象转换成jQuery对象
        var $foo1=jQuery(foo);
        var $foo2=$(foo);
        //调用jQuery对象中的方法
        $foo1.html("Foo jQuery");
        $foo2.css("color","red");
        
        //方法二
        //得到文档中id为bar的DOM对象，将DOM包装成一个jQuery对象，调用jQuery方法html修改元素HTML
        jQuery("#bar").html("Bar jQuery");
        //为id为bar的元素设置样式，将前景色修改成蓝色
        $("#bar").css("color","blue");
        </script>
    </body>
</html>

运行结果：

2.四、jQuery对象转换成DOM对象

DOM对象是jQuery对象的组成部分，jQuery对象是对DOM对象的包装升级，每个jQuery对象都是一个集合，是一个包装集，每一个包装集中能够包含0到N个DOM元素。将jQuery对象转换成DOM对象方法以下

方法一：

jQuery对象[下标]

方法二：

jQuery对象.get(下标)

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery对象转换成DOM对象</title>
    </head>
    <body>
        <h2>jQuery对象转换成DOM对象</h2>
        <p id="foo">Foo</p>
        <p id="bar">Bar</p>
        <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script>
        <script type="text/javascript">
        //方法一
        var $foo=$("#foo");
        //从jQuery对象中得到下标为0的DOM元素，并调用DOM属性
        $foo[0].innerHTML="foo DOM";
        
        //方法二
        var $p=$("p");
        //从jQuery对象中得到下标为1的DOM元素，并调用DOM属性
        $p.get(1).innerHTML="bar DOM";
        </script>
    </body>
</html>

运行结果：

2.五、DOM对象与jQuery对象区别

DOM对象只能调用DOM方法、属性与事件；
jQuery对象只能调用jQuery方法、属性与事件；
能够将DOM转换成jQuery对象，也能够将jQuery转换成DOM对象；
$只是jQuery的别名形式；
每个jQuery对象都是一个DOM对象的集合

3、经常使用选择器

经过jQuery中的选择器实际上取得的是HTML中的DOM元素。在jQuery中使用CSS匹配(CSS like)来进行元素指定，比其余JavaScript库都简单，这也正是jQuery在网页设计人员中大受欢迎的理由了。

在其核心，jQuery重点放在从HTML页面里获取元素并对其进行操做。若是你熟悉CSS，就会很清楚选择器的威力，经过元素的特性或元素在文档中的位置去描述元素组。有了jQuery，就可以利用现有知识去发挥选择器的威力，在很大程度上简化JavaScript代码。CSS中可使用的选择器基本均可以用到jQuery中，反之否则。

3.1. 选择器和包装集

为了使设计和内容分离而把CSS引入Web技术的时候，须要以某种方式从外部样式表中引用页面元素组。开发出来的方法就是经过使用选择器—基于元素的属性或元素在HTML文档中的位置，简明地表现元素。

例如，选择器：p a

引用全部嵌套于<p>元素以内的超连接(<a>元素)组。jQuery利用一样的选择器，不只支持目前CSS中使用的常见选择器，还支持还没有被大多数浏览器彻底实现的更强大的选择器。收集一组元素，可使用以下简单的语法：

$(selector) 或者 jQuery(selector)

也许刚开始你会以为$()符号有点奇怪，但大部分jQuery用户很快就喜欢上它的简洁。例如，为了获取嵌套在<p>元素内的一组超连接，咱们使用以下语句：

$("p a")

$( )函数返回特别的JavaScript对象，它包含着与选择器相匹配的DOM元素的数组。该对象拥有大量预约义的有用方法，可以做用于该组元素。

用编程的话来讲，这种构造称为包装器(wrapper)，由于它用扩展功能来对匹配的元素进行包装。咱们使用术语jQuery包装器或者包装集(wrapped set)，来指可以在其上用jQuery定义的方法去操做的、匹配元素的集合。

假定咱们想选择带有CSS类notLongForThisWorld的全部<div>元素。jQuery语句以下所示：

$("notLongForThisWorld");

3.2. 基本选择器

基本选择器是jQuery中最经常使用的选择器，也是最简单的选择器，它经过元素id、class和标签名等来查找DOM元素。在网页中，每一个id名称只能使用一次，class容许重复使用。

选择器	描述	返回	示例
#id	根据给定的id匹配一个元素	单个元素	$("#test")选取id为test的元素
.class	根据给定的类名匹配元素	集合元素	$(".test")选取全部class为test的元素
element	根据给定的元素名称匹配元素	集合元素	$("p")选取全部的<p>元素
selector1, selector2, selector3...	将每个选择器匹配到的元素合并后一块儿返回	集合元素	$("div,span,p.cls")选取全部<div>，<span>和拥有class为cls的<p>标签的一组元素
*	匹配全部元素	集合元素	$("*")选取全部的元素

可使用这些基本选择器来完成绝大多数的工做，下面咱们对这些选择器一一进行讲解。

3.2.一、经过id获取元素

在CSS中常用id来控制元素，在jQuery中获取元素时，也使用一样方法。与CSS同样，在id前面加上#号。

语法：$("#id")

能够控制指定id的HTML元素，在HTML中有id不可重复的规定，所以能够控制文档内部唯一的元素。若是定义了多个同名的id元素，则只有最初出现的同名id有效。在JavaScript中使用document对象的getElemnetById(id)方法来获取元素，在jQuery中则更为简化。同时经过jQuery得到id对应的元素后能够调用jQuery中的相应方法对该元素进行操做，具体代码以下所示：

<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
<script>
     $("#myDiv").css("border","3px solid red");
</script>

3.2.二、经过类名获取元素

在网页当中，使用class属性引用样式表中的类样式，由于类样式的可重用，因此多个元素能够引用同一个样式。在jQuery中，能够获取同一类名的多个HTML元素，编写方式同CSS，即在类名的前面加上点号。

语法：$(".className")

本例经过类名来获取元素，由于使用同一个类样式的元素可能有多个，因此经过类名来获取元素返回的将是一个数组对象，即jQuery中的包装集，而后对此包装集中的元素进行相关操做。示例代码以下所示：

  <div class="myclass">div class="notMe"</div>
  <div class="myclass otherclass">div class="myClass"</div>
  <span class="myclass otherclass">span class="myClass"</span>
  <script>
     $(".myclass.otherclass").css("border","13px solid red");
  </script>

3.2.三、经过标签名获取元素

在CSS中咱们一般使用标签名来为这一类标签订义样式，在jQuery中也能够用一样方法来获取标签元素。

若是使用普通JavaScript，则必须用document对象的getElementsByTagName(tagName)方法来进行元素的抓取。而jQuery方法与CSS相同，指定须要操做的标签名便可操控全部的标签。

语法：$("tagName")

示例代码以下所示：

  <div>DIV1</div>
  <div>DIV2</div>
  <span>SPAN</span>
  <script>
     $("div").css("border","9px solid red");
  </script>

4、350行jQuery经常使用脚本

4.一、经常使用选择器

$('#div1')   //id为div1的节点，如<div id='div1'></div> 

$('span')   //全部的span结点，一个包装集
$('p span')   //p标签下的全部span节点，后代节点
$('p>span')   //p标签下的全部span子节点，子代节点

$('.red')  //使用样式red的节点，如<span class="red"></span>

$('*')  //全部节点

$("div,span,p.cls")  //选取全部<div>，<span>和拥有class为cls的<p>标签的一组元素

4.二、基本筛选器

$('span:first')    //第一个节点
$('span:last')     //最后一个节点

$("td:even")     //索引为偶数的节点，从 0 开始
$("td:odd")      //索引为奇数的节点，从 0 开始
 
$("td:eq(1)")    //给定索引值的节点
$("td:gt(0)")    //大于给定索引值的节点
$("td:lt(2)")    //小于给定索引值的节点

$(":focus")      //当前获取焦点的节点
$(":animated")   //正在执行动画效果的节点

4.三、内容选择器

$("div:contains('hello')")    //包含hello文本的节点
$("td:empty")    //不包含子节点或者文本的空节点
$("div:has(p)")  //含有选择器所匹配的节点
$("td:parent")   //含有子节点或者文本的节点

4.四、表单选择器

$("input:checked") //全部选中的节点
$("select option:selected") //select中全部选中的option节点

$(":input") //匹配全部 input, textarea, select 和 button 节点
$(":text") //全部的单行文本框
$(":password") //全部密码框
$(":radio") //全部单选按钮
$(":checkbox") //全部复选框
$(":submit") //全部提交按钮
$(":reset") //全部重置按钮
$(":button") //全部button按钮
$(":file") //全部文件域

4.五、筛选与查找

$("p").eq(0) //当前操做中第N个jQuery对象,相似索引
$('li').first() //第一个节点
$('li').last() //最后一个节点
$(this).hasClass("node") //节点是否含有某个特定的类,返回布尔值
$('li').has('ul') //包含特定后代的节点

$("div").children() //div中的每一个子节点,第一层
$("div").find("span") //查找div下的全部span节点

$("p").next() 　　　//紧邻p节点后的一个同辈节点
$("p").nextAll() //p节点以后全部的同辈节点
$("#node").nextUntil("#node2") //id为"#node"节点以后到id为'#node2'之间全部的同辈节点,掐头去尾

$("p").prev() //紧邻p节点前的一个同辈节点
$("p").prevAll() //p节点以前全部的同辈节点
$("#node").prevUntil("#node2") //id为"#node"节点以前到id为'#node2'之间全部的同辈节点,掐头去尾

$("p").parent() //每一个p节点的父节点
$("p").parents() //每一个p节点的全部祖先节点,body,html
$("#node").parentsUntil("#node2") //id为"#node"节点到id为'#node2'之间全部的父级节点,掐头去尾

$("div").siblings() //全部的同辈节点,不包括本身

4.六、属性操做

$("img").attr("src"); 　　　　　　 //返回文档中全部图像的src属性值
$("img").attr("src","node.jpg"); //设置全部图像的src属性
$("img").removeAttr("src"); 　　　//将文档中图像的src属性删除

$("input[type='checkbox']").prop("checked", true); //选中复选框
$("input[type='checkbox']").prop("checked", false); //不选中复选框
$("img").removeProp("src"); 　　 //删除img的src属性

4.七、样式操做

$("p").addClass("selected"); 　　//为p节点加上 'selected' 类
$("p").removeClass("selected"); //从p节点中删除 'selected' 类
$("p").toggleClass("selected"); //若是存在就删除,不然就添加HTML代码/文本/值

4.八、内容操做

$('p').html(); 　　　　　　　　　　 //返回p节点的html内容
$("p").html("Hello <b>hello</b>!"); //设置p节点的html内容
$('p').text(); 　　　　　　　　　　 //返回p节点的文本内容
$("p").text("hello"); 　　　　　　　//设置p节点的文本内容
$("input").val(); 　　　　　　　　 //获取文本框中的值
$("input").val("hello"); 　　　　 //设置文本框中的内容

4.九、CSS操做

$("p").css("color"); //访问查看p节点的color属性
$("p").css("color","red"); //设置p节点的color属性为red
$("p").css({ "color": "red", "background": "yellow" }); //设置p节点的color为red，background属性为yellow（设置多个属性要用{}字典形式）

4.十、定位与偏移

$('p').offset() //节点在当前视口的相对偏移,对象 {top: 5, left: 9}
$('p').offset().top
$('p').offset().left
$("p").position() //节点相对父节点的偏移,对可见节点有效，Object {top: 5, left: 8}

$(window).scrollTop() //获取滚轮滑的高度
$(window).scrollLeft() //获取滚轮滑的宽度
$(window).scrollTop('25') //设置滚轮滑的高度为25

4.十一、尺寸

$("p").height(); //获取p节点的高度
$("p").width(); //获取p节点的宽度

$("p:first").innerHeight() //获取第一个匹配节点内部区域高度(包括补白、不包括边框)
$("p:first").innerWidth() //获取第一个匹配节点内部区域宽度(包括补白、不包括边框)

$("p:first").outerHeight() //匹配节点外部高度(默认包括补白和边框)
$("p:first").outerWidth() //匹配节点外部宽度(默认包括补白和边框)
$("p:first").outerHeight(true) //为true时包括边距

4.十二、DOM内部插入

$("p").append("<b>hello</b>"); //每一个p节点内后面追加内容
$("p").appendTo("div"); 　　　 //p节点追加到div内后
$("p").prepend("<b>Hello</b>"); //每一个p节点内前面追加内容
$("p").prependTo("div"); 　 //p节点追加到div内前

4.1三、DOM外部插入

$("p").after("<b>hello</b>"); //每一个p节点同级以后插入内容
$("p").before("<b>hello</b>"); //在每一个p节点同级以前插入内容
$("p").insertAfter("#node"); //全部p节点插入到id为node节点的后面
$("p").insertBefore("#node"); //全部p节点插入到id为node节点的前面

4.1四、DOM替换

$("p").replaceWith("<b>Paragraph. </b>"); //将全部匹配的节点替换成指定的HTML或DOM节点
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的节点替换掉全部 selector匹配到的节点

4.1五、DOM删除

$("p").empty(); //删除匹配的节点集合中全部的子节点，不包括自己
$("p").remove(); //删除全部匹配的节点,包括自己
$("p").detach(); //删除全部匹配的节点(和remove()不一样的是:全部绑定的事件、附加的数据会保留下来)

4.1六、DOM复制

$("p").clone() 　　//克隆节点并选中克隆的副本
$("p").clone(true) //布尔值指事件处理函数是否会被复制

4.1七、DOM加载完成事件

$(document).ready(function(){
    您的代码...
});

//缩写
$(function($) {
   您的代码...
});

4.1八、绑定事件

//bind 为每一个匹配节点绑定事件处理函数，绑定多个用{}。
$("p").bind("click", function(){
    alert( $(this).text() );
});
$('#div1').bind({
    "mouseover":function () {
         $('#div1').parent().removeClass("hide");
    },"mouseout":function () {
         $('#div1').parent().addClass("hide");
    }
});

$("p").one( "click", function(){}) //事件绑定后只会执行一次
$("p").unbind( "click" ) //反绑一个事件

//与bind 不一样的是当时间发生时才去临时绑定。
$("p").delegate("click",function(){
   您的代码
});

$("p").undelegate(); 　　　//p节点删除由 delegate() 方法添加的全部事件
$("p").undelegate("click") //从p节点删除由 delegate() 方法添加的全部click事件

$("p").click(); 　　//单击事件
$("p").dblclick(); //双击事件
$("input[type=text]").focus() //节点得到焦点时,触发 focus 事件
$("input[type=text]").blur() //节点失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup() //节点上放松鼠标按钮时触发事件
$("p").mousemove() //当鼠标指针在指定的节点中移动时触发事件
$("p").mouseover() //当鼠标指针位于节点上方时触发事件
$("p").mouseout() 　//当鼠标指针从节点上移开时触发事件
$(window).keydown() //当键盘或按钮被按下时触发事件
$(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup() //当按钮被松开时触发事件
$(window).scroll() //当用户滚动时触发事件
$(window).resize() //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change() //当节点的值发生改变时触发事件
$("input").select() //当input 节点中的文本被选择时触发事件
$("form").submit() //当提交表单时触发事件
$(window).unload() //用户离开页面时

4.1九、事件对象

$("p").click(function(event){ 
     alert(event.type); //"click" 
});

(evnet object) 属性方法：
event.pageX 　 //事件发生时，鼠标距离网页左上角的水平距离
event.pageY 　 //事件发生时，鼠标距离网页左上角的垂直距离
event.type 　　//事件的类型
event.which 　 //按下了哪个键
event.data 　　//在事件对象上绑定数据，而后传入事件处理函数
event.target 　//事件针对的网页节点
event.preventDefault() 　//阻止事件的默认行为(好比点击连接，会自动打开新页面)
event.stopPropagation() //中止事件向上层节点冒泡

4.20、动态事件绑定

//当p中增长span时仍然有效
$("p").on("click",'span',function(){
     alert( $(this).text() );
});

4.2一、动画效果

$("p").show() 　　　　//显示隐藏的匹配节点
$("p").show("slow"); //参数表示速度,("slow","normal","fast"),也可为600毫秒
$("p").hide() 　　　　//隐藏显示的节点
$("p").toggle(); 　　 //切换 显示/隐藏

$("p").slideDown("600"); //用600毫秒时间将段落滑下
$("p").slideUp("600"); 　//用600毫秒时间将段落滑上
$("p").slideToggle("600"); //用600毫秒时间将段落滑上，滑下淡入淡出

$("p").fadeIn("600"); 　　 //用600毫秒时间将段落淡入
$("p").fadeOut("600"); 　　 //用600毫秒时间将段落淡出
$("p").fadeToggle("600"); 　//用600毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6); //用600毫秒时间将段落的透明度调整到0.6

4.2二、工具方法

$("#form1").serialize() //序列表表格内容为字符串。
$("select, :radio").serializeArray(); //序列化表单元素为数组返回 JSON 数据结构数据
$.trim() 　　//去除字符串两端的空格
$.each() 　　//遍历一个数组或对象，for循环
$.inArray() //返回一个值在数组中的索引位置，不存在返回-1 
$.grep() 　 //返回数组中符合某种标准的节点
$.extend({a:1,b:2},{b:3,c:4},{c:5:d:6}) //将多个对象，合并到第一个对象{a:1,b:3,c:5,d:6}
$.makeArray() //将对象转化为数组
$.type() //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
$.isArray() //判断某个参数是否为数组
$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)
$.isFunction() //判断某个参数是否为函数
$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"创建的对象
$.support() //判断浏览器是否支持某个特性

4.2三、AJAX

//保存数据到服务器，成功时显示信息
$.ajax({
     type: "POST",
     url: "some.php",
     data: "name=John&location=Boston",
     success: function(msg){
          alert( "Data Saved: " + msg );
     }
});

//加载 feeds.html 文件内容。
$("#feeds").load("feeds.html");

//请求 test.php 网页，传送2个参数，忽略返回值。
$.get("test.php", { name: "John", time: "2pm" } );

//从 Flickr JSONP API 载入 4 张最新的关于猫的图片。
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format
=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
         $("<img/>").attr("src", item.media.m).appendTo("#images");
         if ( i == 3 ) return false;
   });
});

//加载并执行 test.js ，成功后显示信息
$.getScript("test.js", function(){
     alert("Script loaded and executed.");
});

//向页面 test.php 发送数据，并输出结果（HTML 或 XML，取决于所返回的内容）：
$.post("test.php", { name: "John", time: "2pm" },
function(data){
     alert("Data Loaded: " + data);
});

//AJAX 请求完成时执行函数。
$("#msg").ajaxComplete(function(event,request, settings){
     $(this).append("<li>请求完成.</li>");
});

//AJAX 请求失败时显示信息。
$("#msg").ajaxError(function(event,request, settings){
     $(this).append("<li>出错页面:" + settings.url + "</li>");
});

//AJAX 请求发送前显示信息。
$("#msg").ajaxSend(function(evt, request, settings){
     $(this).append("<li>开始请求: " + settings.url + "</li>");
});

//AJAX 请求开始时显示信息。
$("#loading").ajaxStart(function(){
     $(this).show();
});

//AJAX 请求结束后隐藏信息。
$("#loading").ajaxStop(function(){
     $(this).hide();
});

//当 AJAX 请求成功后显示消息。
$("#msg").ajaxSuccess(function(evt, request, settings){
     $(this).append("<li>请求成功!</li>");
});

//请求前过滤
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) { 
     // Modify options, control originalOptions, store jqXHR, etc 
});

//设置全局 AJAX 默认选项，设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求再也不设置任何选项参数。
$.ajaxSetup({
     url: "/xmlhttp/",
     global: false,
     type: "POST"
});
$.ajax({ data: myData });

5、AJAX详解

AJAX全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML），是指一种建立交互式网页应用的开发技术。其使用基于Web2.0标准的XHTML+CSS表示方式，使用DOM（Document Object Model）进行动态显示及交互，使用XML和XSLT进行数据交换及其相关操做，使用XMLHttpRequest进行异步数据查询、检索，使用JavaScript将全部的东西绑定在一块儿。

AJAX应用能够仅向服务器发送并取回必需的数据，它使用SOAP或其余一些基于XML的Web Service接口，并在客户端采用JavaScript处理来自服务器的响应。由于在服务器和浏览器之间交换的数据大量减小，结果咱们就能看到响应速度更快的应用。同时不少的处理工做能够在发出请求的客户端机器上完成，Web服务的处理时间也就减小了。

jQuery为AJAX带来方便，语法格式以下：

jQuery.ajax(url,[settings])

经过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其建立的 XMLHttpRequest 对象。大多数状况下你无需直接操做该函数，除非你须要操做不经常使用的选项，以得到更多的灵活性。

最简单的状况下，$.ajax()能够不带任何参数直接使用。

注意，全部的选项均可以经过$.ajaxSetup()函数来全局设置。

5.一、回调函数

若是要处理$.ajax()获得的数据，则须要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求以前调用，而且传入一个XMLHttpRequest做为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（若是有的话）
dataFilter 在请求成功以后调用。传入返回的数据以及"dataType"参数的值。而且必须返回新的数据（多是处理过的）传递给success回调函数。
success 当请求以后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成以后调用这个函数，不管成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

5.二、数据类型

$.ajax()函数依赖服务器提供的信息来处理返回的数据。若是服务器报告说返回的数据是XML，那么返回的结果就能够用普通的XML方法或者jQuery的选择器来遍历。若是见获得其余类型，好比HTML，则数据就以文本形式来对待。

经过dataType选项还能够指定其余不一样数据处理方式。除了单纯的XML，还能够指定 html、json、jsonp、script或者text。

其中，text和xml类型返回的数据不会通过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数，

'''注意'''，咱们必须确保网页服务器报告的MIME类型与咱们选择的dataType所匹配。好比说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来得到一致的结果。

若是指定为html类型，任何内嵌的JavaScript都会在HTML做为一个字符串返回以前执行。相似的，指定script类型的话，也会先执行服务器端生成JavaScript，而后再把脚本做为一个文本数据返回。

若是指定为json类型，则会把获取到的数据做为一个JavaScript对象来解析，而且把构建好的对象做为结果返回。为了实现这个目的，他首先尝试使用JSON.parse()。若是浏览器不支持，则使用一个函数来构建。JSON数据是一种能很方便经过JavaScript解析的结构化数据。若是获取的数据文件存放在远程服务器上（域名不一样，也就是跨域获取数据），则须要使用jsonp类型。使用这种类型的话，会建立一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。若是要指定回调函数的参数名来取代默认的callback，能够经过设置$.ajax()的jsonp参数。

注意，JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。

若是指定了script或者jsonp类型，那么当从服务器接收到数据时，其实是用了<script>标签而不是XMLHttpRequest对象。这种状况下，$.ajax()再也不返回一个XMLHttpRequest对象，而且也不会传递事件处理函数，好比beforeSend。

5.三、发送数据到服务器

默认状况下，Ajax请求使用GET方法。若是要使用POST方法，能够设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。

data选项既能够包含一个查询字符串，好比 key1=value1&key2=value2 ，也能够是一个映射，好比 {key1: 'value1', key2: 'value2'} 。若是使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也能够经过设置processData选项为false来回避。若是咱们但愿发送一个XML对象给服务器时，这种处理可能并不合适。而且在这种状况下，咱们也应当改变contentType选项的值，用其余合适的MIME类型来取代默认的 application/x-www-form-urlencoded 。

5.四、高级选项

global选项用于阻止响应注册的回调函数，好比.ajaxSend，或者ajaxError，以及相似的方法。这在有些时候颇有用，好比发送的请求很是频繁且简短的时候，就能够在ajaxSend里禁用这个。更多关于这些方法的详细信息，请参阅下面的内容。

若是服务器须要HTTP认证，可使用用户名和密码能够经过username和password选项来设置。

Ajax请求是限时的，因此错误警告被捕获并处理后，能够用来提高用户体验。请求超时这个参数一般就保留其默认值，要不就经过jQuery.ajaxSetup来全局设定，不多为特定的请求从新设置timeout选项。

默认状况下，请求总会被发出去，但浏览器有可能从他的缓存中调取数据。要禁止使用缓存的结果，能够设置cache参数为false。若是但愿判断数据自从上次请求后没有更改过就报告出错的话，能够设置ifModified为true。

scriptCharset容许给<script>标签的请求设定一个特定的字符集，用于script或者jsonp相似的数据。当脚本和页面字符集不一样时，这特别好用。

Ajax的第一个字母是asynchronous的开头字母，这意味着全部的操做都是并行的，完成的顺序没有先后关系。$.ajax()的async参数老是设置成true，这标志着在请求开始后，其余代码依然可以执行。强烈不建议把这个选项设置成false，这意味着全部的请求都再也不是异步的了，这也会致使浏览器被锁死。

$.ajax函数返回他建立的XMLHttpRequest对象。一般jQuery只在内部处理并建立这个对象，但用户也能够经过xhr选项来传递一个本身建立的xhr对象。返回的对象一般已经被丢弃了，但依然提供一个底层接口来观察和操控请求。好比说，调用对象上的.abort()能够在请求完成前挂起请求。

5.五、参数大全

$.ajax(url,[settings])

url:一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。全部选项都是可选的。

settings是ajax参数对象，如:

//ajax通常形式，路径也可使用setting中的url属性
$.ajax(""some.php"",
  {
   type: "POST",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

settings全部能够选择的参数以下：

accepts Map

默认：取决于数据类型。

内容类型发送请求头，告诉服务器什么样的响应会接受返回。若是accepts设置须要修改，推荐在$.ajaxSetup()方法中作一次。

async Boolean

(默认: true) 默认设置下，全部请求均为异步请求。若是须要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操做必须等待请求完成才能够执行。

beforeSend(XHR) Function

发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是惟一的参数。这是一个 Ajax 事件。若是返回false能够取消本次ajax请求。

function (XMLHttpRequest) {
    this; // 调用本次AJAX请求时传递的options参数
}

cache Boolean

(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2 新功能，设置为 false 将不缓存此页面。

complete(XHR, TS) Function

请求完成后回调函数 (请求成功或失败以后均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串。 Ajax 事件。

function (XMLHttpRequest, textStatus) {
    this; // 调用本次AJAX请求时传递的options参数
}

contents Map

一个以"{字符串:正则表达式}"配对的对象，用来肯定jQuery将如何解析响应，给定其内容类型。

contentType String

(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数状况。若是你明确地传递了一个content-type给 $.ajax() 那么他一定会发送给服务器（即便没有数据要发送）

context Object

这个对象用于设置Ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（若是不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。好比指定一个DOM元素做为context参数，这样就设置了success回调函数的上下文为这个DOM元素。就像这样：

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

converters map

默认： {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}

一个数据类型对数据类型转换器的对象。每一个转换器的值是一个函数，返回响应的转化值

crossDomain map

默认：同域请求为false

跨域请求为true若是你想强制跨域请求（如JSONP形式）同一域，设置crossDomain为true。这使得例如，服务器端重定向到另外一个域

data Object,String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。若是为数组，jQuery 将自动为不一样值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。

data Filter Function

给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

function (data, type) {
    // 对Ajax返回的原始数据进行预处理
    return data  // 返回处理后的数据
}

dataType String

预期服务器返回的数据类型。若是不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，好比XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，全部POST请求都将转为GET请求。(由于将使用DOM的script标签来加载)

"json": 返回 JSON 数据。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

"text": 返回纯文本字符串

error Function

(默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。有如下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。若是发生了错误，错误信息（第二个参数）除了获得null以外，还多是"timeout", "error", "notmodified" 和 "parsererror"。 Ajax 事件。

function (XMLHttpRequest, textStatus, errorThrown) {
    // 一般 textStatus 和 errorThrown 之中
    // 只有一个会包含信息
    this; // 调用本次AJAX请求时传递的options参数
}

global Boolean

(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不一样的 Ajax 事件。

headers map

Default: {}

一个额外的"{键:值}"对映射到请求一块儿发送。此设置被设置以前beforeSend函数被调用;所以，消息头中的值设置能够在覆盖beforeSend函数范围内的任何设置。

ifModified Boolean

(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。在jQuery 1.4中，他也会检查服务器指定的'etag'来肯定数据没有被修改过。

isLocal map

默认: 取决于当前的位置协议

容许当前环境被认定为“本地”，（如文件系统），即便jQuery默认状况下不会认可它。如下协议目前公认为本地：file, *-extension, and widget。若是isLocal设置须要修改，建议在$.ajaxSetup()方法中这样作一次。

jsonp String

在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，好比{jsonp:'onJsonPLoad'}会致使将"onJsonPLoad=?"传给服务器。

jsonpCallback String

为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也能够在想让浏览器缓存GET请求的时候，指定这个回调函数名。

mimeType String

一个mime类型用来覆盖XHR的 MIME类型。

password String

用于响应HTTP访问认证请求的密码

processData Boolean

(默认: true) 默认状况下，经过data选项传递进来的数据，若是是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。若是要发送 DOM 树信息或其它不但愿转换的信息，请设置为 false。

scriptCharset String

只有当请求时dataType为"jsonp"或"script"，而且type是"GET"才会用于强制修改charset。一般只在本地和远程的内容编码不一样时使用。

statusCode map

默认: {}

一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。例如，若是响应状态是404，将触发如下警报：

$.ajax({
  statusCode: {404: function() {
    alert('page not found');
  }
});

success(data, textStatus, jqXHR) Function,Array

请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。还有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest）对象。在jQuery 1.5，成功设置能够接受一个函数数组。每一个函数将被依次调用。

function (data, textStatus) {
    // data 多是 xmlDoc, jsonObj, html, text, 等等...
    this; // 调用本次AJAX请求时传递的options参数
}

traditional Boolean

若是你想要用传统的方式来序列化数据，那么就设置为true。请参考工具分类下面的jQuery.param 方法。

timeout Number

设置请求超时时间（毫秒）。此设置将覆盖全局设置。

type String

(默认: "GET") 请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可使用，但仅部分浏览器支持。

url String

(默认: 当前页地址) 发送请求的地址。

username String

用于响应HTTP访问认证请求的用户名

xhr Function

须要返回一个XMLHttpRequest 对象。默认在IE下是ActiveXObject 而其余状况下是XMLHttpRequest 。用于重写或者提供一个加强的XMLHttpRequest 对象。这个参数在jQuery 1.3之前不可用。

xhrFields map

一对“文件名-文件值”在本机设置XHR对象。例如，若是须要的话，你能够用它来设置withCredentials为true的跨域请求。

5.六、AJAX示例

描述:

加载并执行一个 JS 文件。

jQuery 代码:

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

描述:

保存数据到服务器，成功时显示信息。

jQuery 代码:

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

描述:

装入一个 HTML 网页最新版本。

jQuery 代码:

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

描述:

同步加载数据。发送请求时锁住浏览器。须要锁定用户交互操做时使用同步方式。

jQuery 代码:

 var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

描述:

发送 XML 数据至服务器。设置 processData 选项为 false，防止自动转换数据格式。

jQuery 代码:

 var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });

6、视频与资料下载

原本想一点一点写完的，不事后面录了比较全的视频，你们能够边看视频边参考示例练习：

下载较新版的jQuery:下载 jQuery1.11.3帮助与库

下载最新版的jQuery: 下载jQuery1.12.4库

示例下载： jQuery视频配套示例

视频下载： https://pan.baidu.com/s/1hsJtb0K 密码: m7bt

IDE HBuilder下载地址： http://www.dcloud.io/

B站直接观看：http://www.bilibili.com/video/av9205766/?from=search&seid=5595908124286890857

7、做业

7.一、DOM大做业

7.二、AJAX大做业

7.三、jQuery UI大做业

自学一个基于bootstrap的UI框架，如layui

将7.2的AJAX大做业整合到UI中，UI框架类型不限

http://www.layui.com/

http://www.javashuo.com/article/p-ahaeicdf-cq.html

8、上课示例与本章视频

8.一、示例源代码

https://git.coding.net/zhangguo5/jQuery143.git

8.二、视频

https://www.bilibili.com/video/av24045348/

9、其它

9.一、javascript对象与each

代码：

        <script type="text/javascript">
            var app={
                data:[
                    {id:1,name:"张学友",city:"中国香港"},
                    {id:2,name:"张国立",city:"中国北京"},
                    {id:5,name:"张惠妹",city:"中国上海"}
                ],
                start:function(){
                    $.each(app.data,function(index,obj){
                        console.log(obj.id+","+obj.name);
                        console.log(obj)
                    });
                }
            };
            app.start();
        </script>

结果：

9.二、新增用户

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
    </head>

    <body>
        <h2>DOM-用户管理</h2>
        <table border="1" id="tabUsers" width="100%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>城市</th>
                <th>操做</th>
            </tr>

        </table>

        <fieldset>
            <legend>用户信息</legend>
            <p>
                <label for="name">姓名：</label>
                <input type="text" name="name" id="name" placeholder="请输入姓名" />
            </p>
            <p>
                <label for="city">城市：</label>
                <input type="text" name="city" id="city" placeholder="请输入城市" />
            </p>
            <p>
                <button type="button" id="btnSave">保存</button>
                <button type="button" id="btnUpdate">更新</button>
            </p>
        </fieldset>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            var app = {
                data: [{
                        id: 1,
                        name: "张学友",
                        city: "中国香港"
                    },
                    {
                        id: 2,
                        name: "张国立",
                        city: "中国北京"
                    },
                    {
                        id: 5,
                        name: "张惠妹",
                        city: "中国上海"
                    }
                ],
                bind: function() { //将数组中的数据渲染到页面中
                    //将表格中第一行之外的数组清空
                    $("#tabUsers tr:gt(0)").remove();
                    $.each(app.data, function(i, obj) {
                        var tr = $("<tr/>");
                        $("<td/>").html(obj.id).appendTo(tr);
                        $("<td/>").html(obj.name).appendTo(tr);
                        $("<td/>").html(obj.city).appendTo(tr);
                        $("<td/>").html("<a>删除</a>").appendTo(tr);
                        //在#tabUsers元素中追加子元素tr
                        $("#tabUsers").append(tr);
                    });
                },
                save:function(){  //新增
                    var user={
                        id:1,
                        name:$("#name").val(),
                        city:$("#city").val()
                    };
                    if(app.data.length>0){ //若是数组中有数据
                        user.id=app.data[app.data.length-1].id+1;
                    };
                    app.data.push(user);  //将user对象添加到数组的末尾
                    //从新渲染
                    app.bind();
                },
                start: function() {
                    //绑定事件
                    $("#btnSave").click(app.save);
                    
                    app.bind();
                }
            };

            app.start();
        </script>
    </body>

</html>

结果：

9.三、删除与多删除

代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
    </head>

    <body>
        <h2>DOM-用户管理</h2>
        <table border="1" id="tabUsers" width="100%">
            <tr>
                <th>
                    <input type="checkbox" id="chbAll" />
                </th>
                <th>编号</th>
                <th>姓名</th>
                <th>城市</th>
                <th>操做</th>
            </tr>

        </table>
        <p>
            <button type="button" id="btnDelSelected">删除选择项</button>
        </p>
        <fieldset>
            <legend>用户信息</legend>
            <p>
                <label for="name">姓名：</label>
                <input type="text" name="name" id="name" placeholder="请输入姓名" />
            </p>
            <p>
                <label for="city">城市：</label>
                <input type="text" name="city" id="city" placeholder="请输入城市" />
            </p>
            <p>
                <button type="button" id="btnSave">保存</button>
                <button type="button" id="btnUpdate">更新</button>
            </p>
        </fieldset>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            var app = {
                data: [{
                        id: 1,
                        name: "张学友",
                        city: "中国香港"
                    },
                    {
                        id: 2,
                        name: "张国立",
                        city: "中国北京"
                    },
                    {
                        id: 5,
                        name: "张惠妹",
                        city: "中国上海"
                    }
                ],
                bind: function() { //将数组中的数据渲染到页面中
                    //将表格中第一行之外的数组清空
                    $("#tabUsers tr:gt(0)").remove();
                    $.each(app.data, function(i, obj) {
                        var tr = $("<tr/>");

                        var chbItem = $("<input type='checkbox' name='chbItem'/>").data("index", i);
                        $("<td/>").append(chbItem).appendTo(tr);
                        $("<td/>").html(obj.id).appendTo(tr);
                        $("<td/>").html(obj.name).appendTo(tr);
                        $("<td/>").html(obj.city).appendTo(tr);

                        //建立一个删除元素，在元素中隐藏数据index，对应了数组中的索引
                        var aDel = $("<a href='#' class='del'>删除</a>").data("index", i);

                        $("<td/>").append(aDel).appendTo(tr);
                        //在#tabUsers元素中追加子元素tr
                        $("#tabUsers").append(tr);
                    });
                },
                save: function() { //新增
                    var user = {
                        id: 1,
                        name: $("#name").val(),
                        city: $("#city").val()
                    };
                    if(app.data.length > 0) { //若是数组中有数据
                        user.id = app.data[app.data.length - 1].id + 1;
                    };
                    app.data.push(user); //将user对象添加到数组的末尾
                    //从新渲染
                    app.bind();
                },
                deleteOne:function(obj){  //根据一个元素删除当前行
                    var index = $(obj).data("index");
                    //index表示删除的起始位置，1表示删除几个
                    app.data.splice(index, 1);
                    //更新页面
                    //app.bind();
                    $(obj).closest("tr").remove(); //移除最近的tr父节点
                },
                deleteSelected:function(){  //多删除
                     var items=$("input[name=chbItem]:checked");
                     for(var i=items.size();i>=0;i--){
                         app.deleteOne(items[i]);
                     }
                },
                start: function() {
                    //绑定事件
                    $("#btnSave").click(app.save);
                    $("#tabUsers").on("click", ".del", function() {
                        if(confirm('您肯定要删除吗？')) {
                            app.deleteOne(this);
                        }
                    });
                    $("#chbAll").click(function() {
                        $("input[name=chbItem]").prop("checked", $(this).prop("checked"));
                    });
                    //多删除
                    $("#btnDelSelected").click(app.deleteSelected);
                    app.bind();
                }
            };

            app.start();
        </script>
    </body>

</html>

结果：

9.四、更新与验证

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
        <style type="text/css">
            .red{
                color:red;
            }
        </style>
    </head>

    <body>
        <h2>DOM-用户管理</h2>
        <table border="1" id="tabUsers" width="100%">
            <tr>
                <th>
                    <input type="checkbox" id="chbAll" />
                </th>
                <th>编号</th>
                <th>姓名</th>
                <th>城市</th>
                <th>操做</th>
            </tr>

        </table>
        <p>
            <button type="button" id="btnDelSelected">删除选择项</button>
        </p>
        <fieldset>
            <legend>用户信息</legend>
            <p>
                <label for="name">姓名：</label>
                <input type="text" name="name" id="name" placeholder="请输入姓名" />
                <span id="nameMsg" class="red"></span>
            </p>
            <p>
                <label for="city">城市：</label>
                <input type="text" name="city" id="city" placeholder="请输入城市" />
                <span id="cityMsg" class="red"></span>
            </p>
            <p>
                <button type="button" id="btnSave">保存</button>
                <button type="button" id="btnUpdate">更新</button>
            </p>
        </fieldset>

        <script src="../js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = {
                    data: [{
                            id: 1,
                            name: "张学友",
                            city: "中国香港"
                        },
                        {
                            id: 2,
                            name: "张国立",
                            city: "中国北京"
                        },
                        {
                            id: 5,
                            name: "张惠妹",
                            city: "中国上海"
                        }
                    ],
                    index: -1,
                    bind: function() { //将数组中的数据渲染到页面中
                        //将表格中第一行之外的数组清空
                        $("#tabUsers tr:gt(0)").remove();
                        $.each(app.data, function(i, obj) {
                            var tr = $("<tr/>");

                            var chbItem = $("<input type='checkbox' name='chbItem'/>").data("index", i);
                            $("<td/>").append(chbItem).appendTo(tr);
                            $("<td/>").html(obj.id).appendTo(tr);
                            $("<td/>").html(obj.name).appendTo(tr);
                            $("<td/>").html(obj.city).appendTo(tr);

                            //建立一个删除元素，在元素中隐藏数据index，对应了数组中的索引
                            var aDel = $("<a href='#' class='del'>删除</a>").data("index", i);
                            var aEdit = $("<a href='#' class='edit'> | 编辑</a>").data("index", i).data("user", obj);

                            $("<td/>").append(aDel).append(aEdit).appendTo(tr);
                            //在#tabUsers元素中追加子元素tr
                            $("#tabUsers").append(tr);
                        });
                    },
                    save: function() { //新增
                        var user = {
                            id: 1,
                            name: $("#name").val(),
                            city: $("#city").val()
                        };

                        if(app.verify(user)) {
                            if(app.data.length > 0) { //若是数组中有数据
                                user.id = app.data[app.data.length - 1].id + 1;
                            };
                            app.data.push(user); //将user对象添加到数组的末尾
                            //从新渲染
                            app.bind();
                        }
                    },
                    deleteOne: function(obj) { //根据一个元素删除当前行
                        var index = $(obj).data("index");
                        //index表示删除的起始位置，1表示删除几个
                        app.data.splice(index, 1);
                        //更新页面
                        //app.bind();
                        $(obj).closest("tr").remove(); //移除最近的tr父节点
                    },
                    deleteSelected: function() { //多删除
                        var items = $("input[name=chbItem]:checked");
                        for(var i = items.size(); i >= 0; i--) {
                            app.deleteOne(items[i]);
                        }
                    },
                    verify: function(user) {
                            if(!(user.name && /^[\u4e00-\u9fa5]{2,4}$/.test(user.name))) {
                                    $("#nameMsg").html("姓名格式错误");
                                    return false;
                                } else {
                                    $("#nameMsg").html("");
                                }

                                if(!(user.city && /^.{2,10}$/.test(user.city))){
                                        $("#cityMsg").html("城市格式错误");
                                        return false;
                                    } else {
                                        $("#cityMsg").html("");
                                    }

                                    return true;
                                },
                                start: function() {
                                    //绑定事件
                                    $("#btnSave").click(app.save);
                                    $("#tabUsers").on("click", ".del", function() {
                                        if(confirm('您肯定要删除吗？')) {
                                            app.deleteOne(this);
                                        }
                                    });
                                    $("#chbAll").click(function() {
                                        $("input[name=chbItem]").prop("checked", $(this).prop("checked"));
                                    });
                                    //多删除
                                    $("#btnDelSelected").click(app.deleteSelected);
                                    //编辑
                                    $("#tabUsers").on("click", ".edit", function() {
                                        //索引
                                        var index = $(this).data("index");
                                        //对象
                                        var obj = $(this).data("user");
                                        $("#name").val(obj.name);
                                        $("#city").val(obj.city);
                                        app.index = index;
                                    });
                                    //更新
                                    $("#btnUpdate").click(function() {
                                        //得到要更新的对象
                                        var user = app.data[app.index];
                                        user.name = $("#name").val();
                                        user.city = $("#city").val();
                                        app.bind();
                                        app.index = -1;
                                    });
                                    app.bind();
                                }

                            };

                            app.start();
        </script>
    </body>

</html>

结果：

9.五、打字游戏

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var code = "";
        var W, H, L, T;
        var time = 10000;
        var N = 10;  //每次掉下几个
        var CNT = 0;  //共掉下几个
        var DONE = 0; //打完几个
        $(function () {
            W = $("#div1").width();
            H = $("#div1").height();
            L = $("#div1").offset().left;
            if (L == 0) {
                document.location.reload();
            }
            T = $("#div1").offset().top;
            //alert(W + "," + H + "," + L + "," + T);
        });

        function GetLetter() {
            CNT++;
            ShoMsg();
            var chars = "A B C D E F G H I J K L M N O P Q R S T U V W X Y Z".split(" ");
            var i = Random(0, 25);
            $("<div/>")
            .html(chars[i])
            .css({ "font-size": 16 + i * 2, "left": L + Random(0, W - 60), "top": Random((T + 60) * -1, T + 60) * 3 })
            .addClass("item")
            .appendTo("#div1")
            .animate({ top: (T + H) }, time, "linear", function () {
                $(this).remove();
                GetLetter();
            });
            code += chars[i];
            return chars[i];
        }

        function Random(start, end) {
            return parseInt(Math.random() * (end + 1)) + start;
        }

        function ShoMsg() {
            $("#spanDONE").html(DONE);
            $("#spanCNT").html(CNT);
            $("#spanScore").html(parseInt(DONE*100/CNT*100)/100);
        }

        $(function () {
            $("body").keydown(function (event) {
                var code = String.fromCharCode(event.keyCode);
                $("#div1 div").each(function () {
                    if ($(this).text() == code) {
                        DONE++;
                        $(this).stop().css({"color":"red","width":130,"height":130}).animate({ "font-size": "+=50" }, 100).hide(500, function () { $(this).remove(); GetLetter(); });
                    }
                });
            });
        });

        $(function () {
            $("#btnStart").click(function () {
                N = parseInt($("#txtSpeed").val());
                time = parseInt($("#txtTime").val()) * 1000;
                CNT = 0;
                DONE = 0;
                for (var i = 0; i < N; i++) {
                    GetLetter();
                }
            });

            $("#btnStop").click(function () {
                $("#div1 *").remove().stop();
            });
        });
    </script>
    <style type="text/css">
        *
        {
            margin:0;
            padding:0;
        }
        #div1
        {
            width: 600px;
            height: 300px;
            background: #000;
            overflow: hidden;
        }
        .item
        {
            color: #fff;
            position: absolute;
            width: 60px;
            height: 60px;
        }
        #msg
        {
            line-height:30px;
            font-size:20px;
            color:#6f6;
            font-family:黑体;
            background:#000;
            width:580px;
            padding:0 10px;
        }
        #container
        {
            width:610px;
            margin:0 auto;
        }
        h2
        {
             line-height:40px;
             height:40px;
             text-align:center;
        }
        p
        {
            margin:10px 0;
        }
    </style>
</head>
<body>
    <div id="container">
    <h2>打字小游戏</h2>
    <p>
       个数：<input id="txtSpeed" type="text" value="10" />个 
       速度：<input id="txtTime" type="text" value="10" />秒 
        <input id="btnStart" type="button" value="开始"  /> 
        <input id="btnStop" type="button" value="中止" />
    </p>
    <div id="div1">
    </div>
    <p id="msg">
        产生：<span id="spanCNT">0</span>个 
        完成：<span id="spanDONE">0</span>个 
        得分：<span id="spanScore">0</span>分 
    </p>
    </div>
</body>
</html>

结果：

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>jQuery DOM</title>
        <style>
            #div1 {
                position: relative;
                width: 900px;
                height: 500px;
                border: 2px solid red;
                margin: 0 auto;
            }
            
            .letter {
                position: absolute;
                font-size: 50px;
            }
        </style>
    </head>

    <body>
        <h2>jQuery DOM</h2>

        <div id="div1">

        </div>

        <script src="../js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function game() {
                $("<div/>")
                    .html("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split('')[R(0,25)])
                    .addClass("letter")
                    .css({
                        left: R(0, 900) + "px",
                        top: R(-50, 0) + "px"
                    })
                    .appendTo("#div1")
                    .animate({
                        top: '500px'
                    }, R(100, 8000), "linear", function() {
                        $(this).remove();
                        game();
                    });
            }

            function R(start, end) {
                return parseInt(Math.random() * (end + 1)) + start;
            }

            game();
            game();
            game();
            game();
            game();
            game();
        </script>
    </body>

</html>

结果：

9.六、AJAX基础

工程：

User

package com.zhangguo.entity;

/***
 * 用户实体 Bean
 *
 */
public class User {
    private int id;
    private String name;
    private String city;

    public User() {
    }

    public User(int id, String name, String city) {
        super();
        this.id = id;
        this.name = name;
        this.city = city;
    }

    @Override
    public String toString() {
        return "User [id=" + id + ", name=" + name + ", city=" + city + "]";
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

}

UserDao:

package com.zhangguo.dao;

import java.util.ArrayList;
import java.util.List;

import com.zhangguo.entity.User;

/**
 * 用户数据访问
 * */
public class UserDao {
    private static List<User> users=new ArrayList<>();
    
    static{
        users.add(new User(1,"张国立", "中国北京"));
        users.add(new User(2,"张学友", "中国香港"));
        users.add(new User(6,"张慧妹", "中国珠海"));
    }
    
    /**得到全部用户*/
    public List<User> getAllUsers(){
        return users;
    }
    
    /**添加用户*/
    public void addUser(User user){
        users.add(user);
    }
    
}

UserController:

package com.zhangguo.action;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zhangguo.dao.UserDao;
import com.zhangguo.entity.User;

/**
 * 用户控制器
 */
@WebServlet("/UserController")
public class UserController extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    private UserDao userDao=new UserDao();

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        
        String result="[";
        for (User user : userDao.getAllUsers()) {
            result+="{\"id\":"+user.getId()+",\"name\":\""+user.getName()+"\",\"city\":\""+user.getCity()+"\"},";
        }
         if(result.substring(result.length()-1,result.length()).equals(","))
         {
             result=result.substring(0,result.length()-1);
         }
        result+="]";
        
        
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        
        response.getWriter().print(result);
    }

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

}

index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>jQuery AJAX</title>
</head>

<body>
    <h2>jQuery AJAX</h2>
    <table border="1" id="tabUsers" width="100%">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>城市</th>
        </tr>
    </table>
    <h3 id="msg"></h3>
    <script src="js/jquery-1.12.3.min.js" type="text/javascript"
        charset="utf-8"></script>
    <script type="text/javascript">
        $.ajax({
               type: "get",  //请求类型
               url: "UserController",  //路径
               beforeSend:function(){  //请求前的事件
                   $("#msg").html("努力加载中...");
               },
               success: function(data){  //请求成功后的事件

                   $.each(data, function(i, obj) {
                        var tr = $("<tr/>");
                        $("<td/>").html(obj.id).appendTo(tr);
                        $("<td/>").html(obj.name).appendTo(tr);
                        $("<td/>").html(obj.city).appendTo(tr);
                        $("#tabUsers").append(tr);
                    });
                     
               },
               complete:function(){  //请求完成时的事件，不论成功或失败
                   $("#msg").html("");
                },
               error:function (xhr, textStatus, errorThrown) {  //错误时
                    alert(xhr+textStatus+errorThrown);
                }
            });
        </script>
</body>

</html>

运行结果：

9.七、AJAX添加用户

UserController

package com.zhangguo.action;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zhangguo.dao.UserDao;
import com.zhangguo.entity.User;

/**
 * 用户控制器
 */
@WebServlet("/UserController")
public class UserController extends HttpServlet {
    private static final long serialVersionUID = 1L;

    private UserDao userDao = new UserDao();

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

        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");
        request.setCharacterEncoding("utf-8");

        String action = request.getParameter("action");

        if (action.equals("list")) {
            list(response);  //得到全部用户
        }else if (action.equals("add")) {
            add(request, response);  //添加新用户
        }
    }

    /**添加新用户*/
    public void add(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String name = request.getParameter("name");
        String city = request.getParameter("city");
        userDao.addUser(new User(name, city));
        
        delay();
        response.getWriter().print("{\"msg\":\"添加成功\"}");
    }

    /**得到全部用户*/
    public void list(HttpServletResponse response) throws IOException {
        String result = "[";
        for (User user : userDao.getAllUsers()) {
            result += "{\"id\":" + user.getId() + ",\"name\":\"" + user.getName() + "\",\"city\":\""
                    + user.getCity() + "\"},";
        }
        if (result.substring(result.length() - 1, result.length()).equals(",")) {
            result = result.substring(0, result.length() - 1);
        }
        result += "]";
        
        delay();
        response.getWriter().print(result);
    }
    
    public void delay(){
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

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

}

index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>jQuery AJAX</title>
        <style type="text/css">
            #loading{
                display: none;
            }
        </style>
    </head>

    <body>
        <h2>jQuery AJAX</h2>
        <table border="1" id="tabUsers" width="100%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>城市</th>
            </tr>
        </table>
        <p></p>
        <fieldset>
            <legend>用户信息</legend>
            <p>
                <label for="name">姓名：</label> <input type="text" name="name" id="name" placeholder="请输入姓名" /> <span id="nameMsg" class="red"></span>
            </p>
            <p>
                <label for="city">城市：</label> <input type="text" name="city" id="city" placeholder="请输入城市" /> <span id="cityMsg" class="red"></span>
            </p>
            <p>
                <button type="button" id="btnSave">保存</button>
                <button type="button" id="btnUpdate">更新</button>
            </p>
        </fieldset>
        <div id="loading">
            <img src="img/loading.gif" height="100"/>
        </div>
        <script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var list = function() {
                $.ajax({
                    type: "get", //请求类型
                    url: "UserController?action=list", //路径
                    beforeSend: function() { //请求前的事件
                        $("#loading").show(500);
                    },
                    success: function(data) { //请求成功后的事件
                        $("#tabUsers tr:gt(0)").remove();  //移除表格中除第一行之外的数据
                        $.each(data, function(i, obj) {
                            var tr = $("<tr/>");
                            $("<td/>").html(obj.id).appendTo(tr);
                            $("<td/>").html(obj.name).appendTo(tr);
                            $("<td/>").html(obj.city).appendTo(tr);
                            $("#tabUsers").append(tr);
                        });

                    },
                    complete: function() { //请求完成时的事件，不论成功或失败
                        $("#loading").hide(500);
                    },
                    error: function(xhr, textStatus, errorThrown) { //错误时
                        alert(xhr + textStatus + errorThrown);
                    }
                });
            }

            list();
            
            //添加
            $("#btnSave").click(function(){
                $.ajax({
                    url:"UserController?action=add",  //请求地址
                    data:{name:$("#name").val(),city:$("#city").val()},  //发送给后台的数据
                    type:"post",  //请求类型
                    beforeSend:function(){  //请求前
                        $("#loading").show(500);
                        $("#btnSave").prop("disabled",true).html("请求中...");
                    },
                    success:function(data){  //请求成功事件
                        alert(data.msg);  
                        list();  //从新绑定
                    },
                    complete:function(){  //请求完成，不论成功或失败
                        $("#loading").hide(500);
                        $("#btnSave").prop("disabled",false).html("保存");
                    }
                });
                
            });
            
        </script>
    </body>

</html>

效果：

9.八、序列化与反序列化

示例下载：https://files.cnblogs.com/files/best/Ajax14301.zip

在解析JSON方面，无疑JACKSON是作的最好的，下面从几个方面简单复习下。

FASTJSON 
JACKSON

1 JAVA 对象转为JSON 
 
import java.io.File;  
import java.io.IOException;  
import org.codehaus.jackson.JsonGenerationException;  
import org.codehaus.jackson.map.JsonMappingException;  
import org.codehaus.jackson.map.ObjectMapper;  
   
public class JacksonExample {  
    public static void main(String[] args) {  
   
    User user = new User();  
    ObjectMapper mapper = new ObjectMapper();  
   
    try {  
   
        // convert user object to json string, and save to a file  
        mapper.writeValue(new File("c:\\user.json"), user);  
   
        // display to console  
        System.out.println(mapper.writeValueAsString(user));  
   
    } catch (JsonGenerationException e) {  
   
        e.printStackTrace();  
   
    } catch (JsonMappingException e) {  
   
        e.printStackTrace();  
   
    } catch (IOException e) {  
   
        e.printStackTrace();  
   
    }  
   
  }  
   


输出为： 
{"age":29,"messages":["msg 1","msg 2","msg 3"],"name":"mkyong"} 


2 JSON反序列化为JAVA对象 
  
import java.io.File;  
import java.io.IOException;  
import org.codehaus.jackson.JsonGenerationException;  
import org.codehaus.jackson.map.JsonMappingException;  
import org.codehaus.jackson.map.ObjectMapper;  
   
public class JacksonExample {  
    public static void main(String[] args) {  
   
    ObjectMapper mapper = new ObjectMapper();  
   
    try {  
   
        // read from file, convert it to user class  
        User user = mapper.readValue(new File("c:\\user.json"), User.class);  
   
        // display to console  
        System.out.println(user);  
   
    } catch (JsonGenerationException e) {  
   
        e.printStackTrace();  
   
    } catch (JsonMappingException e) {  
   
        e.printStackTrace();  
   
    } catch (IOException e) {  
   
        e.printStackTrace();  
   
    }  
   
  }  
   

输出：User [age=29, name=mkyong, messages=[msg 1, msg 2, msg 3]] 

3 在上面的例子中，若是要输出的JSON好看点，仍是有办法的，就是使用 
defaultPrettyPrintingWriter()方法，例子为： 

User user = new User();  
  ObjectMapper mapper = new ObjectMapper();  
  System.out.println(mapper.defaultPrettyPrintingWriter().writeValueAsString(user));  


则输出整齐： 
{ 
  "age" : 29, 
  "messages" : [ "msg 1", "msg 2", "msg 3" ], 
  "name" : "mkyong" 
} 


Jackson 格式化日期问题
Jackson 默认是转成timestamps形式的，如何使用本身须要的类型，

解决办法： 1、在实体字段上使用@JsonFormat注解格式化日期

@JsonFormat(locale="zh", timezone="GMT+8", pattern="yyyy-MM-dd HH:mm:ss")
2、经过下面方式能够取消timestamps形式

objectMapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
自定义输出格式

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
objectMapper.setDateFormat(sdf)

jsonutil

package com.zhangguo.test;

import java.text.SimpleDateFormat;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class JsonUtils {
    /**
     * 序列化成json
     * */
    public static String toJson(Object obj) {
        // 对象映射器
        ObjectMapper mapper = new ObjectMapper();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd HH:mm:ss");
        mapper.setDateFormat(sdf);
        
        String result = null;
        // 序列化user对象为json字符串
        try {
            result = mapper.writeValueAsString(obj);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return result;
    }
    
    /**
     * 反序列化成对象
     * */
    public static <T> T toObject(String json,Class<T> valueType) {
        //对象映射器
        ObjectMapper mapper=new ObjectMapper();
        T result=null;
        try {
            result=mapper.readValue(json,valueType);

        }catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }
}

9.九、原生AJAX

api帮助： https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

参考示例：http://www.javashuo.com/article/p-mdkqrtyw-k.html

简单示例：

var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}

XMLHttpRequest 最初由微软设计，随后被 Mozilla、Apple 和 Google采纳。现在，该对象已经被 W3C组织标准化。经过它，你能够很容易的取回一个 URL 上的资源数据。尽管名字里有 XML，但 XMLHttpRequest 能够取回全部类型的数据资源，并不局限于 XML。并且除了 HTTP ，它还支持 file 和 ftp 协议。

XHR构造函数

XMLHttpRequest(): 构造函数初始化一个 XMLHttpRequest 对象。必须在全部其余方法被调用前调用构造函数。

XHR属性

此接口继承了 XMLHttpRequestEventTarget 和 EventTarget 的属性。

属性类型描述

onreadystatechange

Function?

一个JavaScript函数对象，当readyState属性改变时会调用它。回调函数会在user interface线程中调用。

警告: 不能在本地代码中使用. 也不该该在同步模式的请求中使用.

readyState

unsigned short

请求的五种状态

值	状态	描述
`0`	`UNSENT` (未打开)	`open()`方法还未被调用.
`1`	`OPENED` (未发送)	`open()`方法已经被调用.
`2`	`HEADERS_RECEIVED (已获取响应头)`	`send()`方法已经被调用, 响应头和响应状态已经返回.
`3`	`LOADING (正在下载响应体)`	响应体下载中; `responseText`中已经获取了部分数据.
`4`	`DONE (请求完成)`	整个请求过程已经完毕.

response

varies

响应实体的类型由 responseType 来指定， 能够是 ArrayBuffer， Blob， Document， JavaScript 对象 (即 "json")，或者是字符串。若是请求未完成或失败，则该值为 null。

responseText DOMString 这次请求的响应为文本，或是当请求未成功或还未发送时为 null。只读。

responseType

XMLHttpRequestResponseType

设置该值可以改变响应类型。就是告诉服务器你指望的响应格式。

Value	Data type of `response` property
`""` (空字符串)	字符串(默认值)
`"arraybuffer"`	`ArrayBuffer`
`"blob"`	`Blob`
`"document"`	`Document`
`"json"`	JavaScript 对象，解析自服务器传递回来的JSON 字符串。
`"text"`	字符串

responseXML

Document?

本次请求的响应是一个 Document 对象，若是是如下状况则值为 null：请求未成功，请求未发送，或响应没法被解析成 XML 或 HTML。当响应为text/xml 流时会被解析。当 responseType 设置为"document"，而且请求为异步的，则响应会被当作 text/html 流来解析。只读.

注意: 若是服务器不支持 text/xml Content-Type 头，你可使用 overrideMimeType() 强制 XMLHttpRequest 将响应解析为 XML。

status unsigned short 该请求的响应状态码 (例如, 状态码200 表示一个成功的请求).只读.

statusText DOMString 该请求的响应状态信息,包含一个状态码和缘由短语 (例如 "200 OK"). 只读.

upload XMLHttpRequestUpload 能够在 upload 上添加一个事件监听来跟踪上传过程。

withCredentials

boolean

代表在进行跨站(cross-site)的访问控制(Access-Control)请求时，是否使用认证信息(例如cookie或受权的header)。默认为 false。

注意: 这不会影响同站(same-site)请求.

XHR非标准属性

Attribute	Type	Description
`channel`	`nsIChannel`	The channel used by the object when performing the request. This is `null` if the channel hasn't been created yet. In the case of a multi-part request, this is the initial channel, not the different parts in the multi-part request. Requires elevated privileges to access; 只读.
`mozBackgroundRequest`	`boolean`	Indicates whether or not the object represents a background service request. If `true`, no load group is associated with the request, and security dialogs are prevented from being shown to the user. Requires elevated privileges to access. In cases in which a security dialog (such as authentication or a bad certificate notification) would normally be shown, the request simply fails instead.
`mozResponseArrayBuffer`已废弃 Gecko 6	`ArrayBuffer`	The response to the request, as a JavaScript typed array. This is NULL if the request was not successful, or if it hasn't been sent yet. 只读
`multipart`	`boolean`	Indicates whether or not the response is expected to be a stream of possibly multiple XML documents. If set to `true`, the content type of the initial response must be `multipart/x-mixed-replace` or an error will occur. All requests must be asynchronous. This enables support for server push; for each XML document that's written to this request, a new XML DOM document is created and the `onload` handler is called between documents. 注意: 当这个属性被开启，XMLdocument被初次加载后onload事件处理器以及其它事件处理器不会被重置，而且onload事件处理器会在每一次响应接收的时候被调用。

XHR方法

abort()

若是请求已经被发送,则马上停止请求.

getAllResponseHeaders()

DOMString getAllResponseHeaders();

返回全部响应头信息(响应头名和值), 若是响应头还没接受,则返回null. 注意: For multipart requests, this returns the headers from the current part of the request, not from the original channel.

getResponseHeader()

DOMString? getResponseHeader(DOMString header);

返回指定的响应头的值, 若是响应头还没被接受,或该响应头不存在,则返回null.

open()

初始化一个请求. 该方法用于JavaScript代码中;若是是本地代码, 使用 openRequest()方法代替.

注意: 在一个已经激活的request下（已经调用open()或者openRequest()方法的request）再次调用这个方法至关于调用了abort（）方法。

void open(
   DOMString method,
   DOMString url,
   optional boolean async,
   optional DOMString user,
   optional DOMString password
);

参数

method: 请求所使用的HTTP方法; 例如 "GET", "POST", "PUT", "DELETE"等. 若是下个参数是非HTTP(S)的URL,则忽略该参数.
url: 该请求所要访问的URL
async: 一个可选的布尔值参数，默认为true,意味着是否执行异步操做，若是值为false,则send()方法不会返回任何东西，直到接受到了服务器的返回数据。若是为值为true，一个对开发者透明的通知会发送到相关的事件监听者。这个值必须是true,若是multipart 属性是true，不然将会出现一个意外。
user: 用户名,可选参数,为受权使用;默认参数为空string.
password: 密码,可选参数,为受权使用;默认参数为空string.

overrideMimeType()

重写由服务器返回的MIME type。这个可用于, 例如，强制把一个响应流看成“text/xml”来处理和解析,即便服务器没有指明数据是这个类型。注意，这个方法必须在send()以前被调用。

void overrideMimeType(DOMString mimetype);

send()

发送请求. 若是该请求是异步模式(默认),该方法会马上返回. 相反,若是请求是同步模式,则直到请求的响应彻底接受之后,该方法才会返回.

注意: 全部相关的事件绑定必须在调用 send()方法以前进行.

void send();
void send(ArrayBuffer data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);

注意

若是发送的数据是个文档，它会在发送以前进行序列化。当发送一个文档，Firefox高于3的版本会对发送的请求使用UTF-8编码；Firefox 3 也能够支持发送文档的时候经过使用body.xmlEncoding指定编码方式，若是不指定则默认使用UTF-8编码。

If it's an nsIInputStream, it must be compatible with nsIUploadChannel's setUploadStream()method. In that case, a Content-Length header is added to the request, with its value obtained using nsIInputStream's available()method. Any headers included at the top of the stream are treated as part of the message body. The stream's MIMEtype should be specified by setting the Content-Type header using the setRequestHeader()method prior to calling send().

setRequestHeader()

给指定的HTTP请求头赋值.在这以前,你必须确认已经调用 open() 方法打开了一个url.

void setRequestHeader(
   DOMString header,
   DOMString value
);

参数

header: 将要被赋值的请求头名称.
value: 给指定的请求头赋的值.

非标准方法

init()

在 C++代码中初始化一个XHR对象.

警告: 该方法不能在 JavaScript 代码中使用.

[noscript] void init(
   in nsIPrincipal principal,
   in nsIScriptContext scriptContext,
   in nsPIDOMWindow ownerWindow
);

参数

principal: 主要用于请求;不能够为null.
scriptContext: 请求上下文;不能够为null.
ownerWindow: 和窗口相关请求; 可能为null.

openRequest()

初始化一个请求. 这个方法用于本地代码; 若是用JavaScript 代码来初始化请求, 使用 open()代替. 看文档open().

sendAsBinary()

发送二进制数据的send()方法变种.

void sendAsBinary(
   in DOMString body
);

参数

body: 请求体的DOMstring。这个数据已由一系列单字节字符截取（移除每一个字符的高位字节）转换成了字符串。

9.十、原生AJAX示例

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>原生ajax</title>
    </head>
    <body>
        <h2>原生ajax</h2>
        
        <h3 id="time"></h3>
        
        <button type="button" onclick="getTime_click()">得到服务器时间</button>
        
        <script>
            
            function getXHR(){
                //判断是否拥有xhr对象
                if(window.XMLHttpRequest){
                    return new XMLHttpRequest();
                }else if(window.ActiveXObject){
                    //ie6,ie5下的xhr对象得到办法
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
                return null;
            }
            
            
            function getTime_click(){
                var xhr=getXHR();
                //当状态变化时的事件
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4){  //请求成功
                        if(xhr.status==200){  //服务器响应状态成功
                            //将从服务器得到的数据显示在页面上
                            document.getElementById("time").innerHTML= xhr.responseText;
                        }  
                    }
                }
                //打开请求
                xhr.open("GET","GetTime",true);  //请求类型,路径,是否为异步请求
                //发送请求
                xhr.send(null);  //参数
            }
            
            
        </script>
    </body>
</html>

Servlet:

package com.zhangguo.action;

import java.io.IOException;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/GetTime")
public class GetTime extends HttpServlet {
    private static final long serialVersionUID = 1L;
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().write(new Date().toString());
    }

}

结果：

jQuery ajax请求

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>原生ajax</title>
    </head>
    <body>
        <h2>原生ajax</h2>
        
        <h3 id="time"></h3>
        
        <button type="button" onclick="getTime_click()">得到服务器时间</button>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
            
            
            function getTime_click(){
                $.get("GetTime",function(data){$("#time").html(data); });
            }
            
            
        </script>
    </body>
</html>

9.十一、AJAX用户示例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>jQuery AJAX</title>
        <style type="text/css">
            #loading{
                display: none;
            }
        </style>
    </head>

    <body>
        <h2>jQuery AJAX</h2>
        <table border="1" id="tabUsers" width="100%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>城市</th>
                <th>操做</th>
            </tr>
        </table>
        <p></p>
        <fieldset>
            <legend>用户信息</legend>
            <p>
                <label for="name">姓名：</label> <input type="text" name="name" id="name" placeholder="请输入姓名" /> <span id="nameMsg" class="red"></span>
            </p>
            <p>
                <label for="city">城市：</label> <input type="text" name="city" id="city" placeholder="请输入城市" /> <span id="cityMsg" class="red"></span>
            </p>
            <p>
                <button type="button" id="btnSave">保存</button>
                <button type="button" id="btnUpdate">更新</button>
            </p>
        </fieldset>
        <div id="loading">
            <img src="img/loading.gif" height="100"/>
        </div>
        <script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            var list = function() {
                $.ajax({
                    type: "get", //请求类型
                    url: "UserController?action=list", //路径
                    beforeSend: function() { //请求前的事件
                        $("#loading").show(500);
                    },
                    success: function(data) { //请求成功后的事件
                        $("#tabUsers tr:gt(0)").remove();  //移除表格中除第一行之外的数据
                        $.each(data, function(i, obj) {
                            var tr = $("<tr/>");
                            $("<td/>").html(obj.id).appendTo(tr);
                            $("<td/>").html(obj.name).appendTo(tr);
                            $("<td/>").html(obj.city).appendTo(tr);
                            
                            var del=$("<a href='#' class='del'>删除 | </a>").data("id",obj.id);
                            var edit=$("<a href='#' class='edit'>编辑</a>").data("user",obj);
                            $("<td/>").append(del).append(edit).appendTo(tr);
                            $("#tabUsers").append(tr);
                        });

                    },
                    complete: function() { //请求完成时的事件，不论成功或失败
                        $("#loading").hide(500);
                    },
                    error: function(xhr, textStatus, errorThrown) { //错误时
                        alert(xhr + textStatus + errorThrown);
                    }
                });
            }

            list();
            
            //添加
            $("#btnSave").click(function(){
                $.ajax({
                    url:"UserController?action=add",  //请求地址
                    data:{name:$("#name").val(),city:$("#city").val()},  //发送给后台的数据
                    type:"post",  //请求类型
                    beforeSend:function(){  //请求前
                        $("#loading").show(500);
                        $("#btnSave").prop("disabled",true).html("请求中...");
                    },
                    success:function(data){  //请求成功事件
                        alert(data.msg);  
                        list();  //从新绑定
                    },
                    complete:function(){  //请求完成，不论成功或失败
                        $("#loading").hide(500);
                        $("#btnSave").prop("disabled",false).html("保存");
                    }
                });
                
            });
            
            $("#tabUsers").on("click",".del",function(){
                var id=$(this).data("id");
                //发送ajax get请求
                $.get("UserController?action=del",{"id":id},function(data){
                    alert(data.msg);
                    list();
                });
            });
            
            var user=null;
            $("#tabUsers").on("click",".edit",function(){
                user=$(this).data("user");
                $("#name").val(user.name);
                $("#city").val(user.city);
            });
            
            //更新事件
            $("#btnUpdate").click(function(){
                
                user.name=$("#name").val();
                user.city=$("#city").val();
                
                //向服务器发送post请求
                $.post("UserController?action=update",user,function(data){
                    alert(data.msg);
                    list();
                });
                
            });
            
        </script>
    </body>

</html>

9.十二、artDialog弹出层

帮助：http://aui.github.io/artDialog/doc/index.html

应用：http://www.javashuo.com/article/p-mdkqrtyw-k.html

上课示例：https://files.cnblogs.com/files/best/Ajax14301_2.zip

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>artDialog</title>
        <link rel="stylesheet" type="text/css" href="js/artDialog7/css/dialog.css"/>
        <style type="text/css">
            #formUser{
                display: none;
            }
        </style>
    </head>
    <body>
        <h2>artDialog</h2>
        
        <button type="button" onclick="click1()">提示</button>
        <button type="button" onclick="click2()">添加用户</button>
        <button type="button" onclick="click3()">加载中</button>
        <fieldset id="formUser">
            <legend>用户信息</legend>
            <p>
                <label for="name">姓名：</label> <input type="text" name="name" id="name" placeholder="请输入姓名" /> <span id="nameMsg" class="red"></span>
            </p>
            <p>
                <label for="city">城市：</label> <input type="text" name="city" id="city" placeholder="请输入城市" /> <span id="cityMsg" class="red"></span>
            </p>
            <p>
                <button type="button" id="btnSave">保存</button>
                <button type="button" id="btnUpdate">更新</button>
            </p>
        </fieldset>
        
        <script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/artDialog7/dist/dialog.js" type="text/javascript" charset="utf-8"></script>
        
        <script>
            function click1(){
                var d=dialog({
                    title:"提示",
                    content:"恭喜您，删除成功!",
                     okValue: '肯定',
                    ok:function(){
                        
                        setTimeout(function(){
                            d.close().remove();
                        },2000);
                        
                        return false;
                    },
                    cancel:function(){
                        
                    }
                });
                d.show();
            }
            
            function click2(){
                var d=dialog({
                    title:"添加用户",
                    modal:true,
                    backdropOpacity:0.2,
                    width:'600px',
                    height:'300px',
                    content:$("#formUser")
                });
                d.show();
            }
            
            var box
            function click3(){
                var box=dialog({
                    modal:true
                });
                box.show();
            };
            
        </script>
    </body>
</html>

结果：

9.1三、Bootstrap基础

http://www.layui.com/
http://www.h-ui.net/H-ui.admin.shtml

移动端
http://www.dcloud.io/mui.html
http://m.sui.taobao.org/components/#forms

http://www.bootCSS.com

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>BootStrap Demo</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    </head>

    <body>

        <div class="container-fluid">
            <div class="row">
                <div class="jumbotron">
                    <h1>Hello, Bootstrap!</h1>
                    <p>这是个人第一个bootstrap页面！</p>
                    <p>
                        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-8">.col-md-8

                    <!-- Standard button -->
                    <button type="button" class="btn btn-default">（默认样式）Default</button>

                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                    <button type="button" class="btn btn-primary">（首选项）Primary</button>

                    <!-- Indicates a successful or positive action -->
                    <button type="button" class="btn btn-success">（成功）Success</button>

                    <!-- Contextual button for informational alert messages -->
                    <button type="button" class="btn btn-info">（通常信息）Info</button>

                    <!-- Indicates caution should be taken with this action -->
                    <button type="button" class="btn btn-warning">（警告）Warning</button>

                    <!-- Indicates a dangerous or potentially negative action -->
                    <button type="button" class="btn btn-danger">（危险）Danger</button>

                    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                    <button type="button" class="btn btn-link">（连接）Link</button>

                </div>
                <div class="col-md-4">.col-md-4</div>
            </div>
        </div>
        <script src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    </body>

</html>

效果

9.1四、在线可视化布局系统

http://www.ibootstrap.cn/
http://www.bootcss.com/p/layoutit/

示例：

代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>BootStrap Demo</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    </head>

    <body>

        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
                            <a class="navbar-brand" href="#">Brand</a>
                        </div>

                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="active">
                                    <a href="#">Link</a>
                                </li>
                                <li>
                                    <a href="#">Link</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Action</a>
                                        </li>
                                        <li>
                                            <a href="#">Another action</a>
                                        </li>
                                        <li>
                                            <a href="#">Something else here</a>
                                        </li>
                                        <li class="divider">
                                        </li>
                                        <li>
                                            <a href="#">Separated link</a>
                                        </li>
                                        <li class="divider">
                                        </li>
                                        <li>
                                            <a href="#">One more separated link</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <form class="navbar-form navbar-left" role="search">
                                <div class="form-group">
                                    <input type="text" class="form-control" />
                                </div> <button type="submit" class="btn btn-default">Submit</button>
                            </form>
                            <ul class="nav navbar-nav navbar-right">
                                <li>
                                    <a href="#">Link</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Action</a>
                                        </li>
                                        <li>
                                            <a href="#">Another action</a>
                                        </li>
                                        <li>
                                            <a href="#">Something else here</a>
                                        </li>
                                        <li class="divider">
                                        </li>
                                        <li>
                                            <a href="#">Separated link</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                    </nav>
                    <div class="jumbotron">
                        <h1>
                    Hello, world!
                </h1>
                        <p>
                            This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
                        </p>
                        <p>
                            <a class="btn btn-primary btn-large" href="#">Learn more</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="carousel slide" id="carousel-941720">
                        <ol class="carousel-indicators">
                            <li class="active" data-slide-to="0" data-target="#carousel-941720">
                            </li>
                            <li data-slide-to="1" data-target="#carousel-941720">
                            </li>
                            <li data-slide-to="2" data-target="#carousel-941720">
                            </li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/1/default.jpg" />
                                <div class="carousel-caption">
                                    <h4>
                                First Thumbnail label
                            </h4>
                                    <p>
                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                    </p>
                                </div>
                            </div>
                            <div class="item">
                                <img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/2/default.jpg" />
                                <div class="carousel-caption">
                                    <h4>
                                Second Thumbnail label
                            </h4>
                                    <p>
                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                    </p>
                                </div>
                            </div>
                            <div class="item">
                                <img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/3/default.jpg" />
                                <div class="carousel-caption">
                                    <h4>
                                Third Thumbnail label
                            </h4>
                                    <p>
                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#carousel-941720" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                        <a class="right carousel-control" href="#carousel-941720" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-4 column">
                    <h2>
                Heading
            </h2>
                    <p>
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                    </p>
                    <p>
                        <a class="btn" href="#">View details »</a>
                    </p>
                </div>
                <div class="col-md-4 column">
                    <h2>
                Heading
            </h2>
                    <p>
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                    </p>
                    <p>
                        <a class="btn" href="#">View details »</a>
                    </p>
                </div>
                <div class="col-md-4 column">
                    <h2>
                Heading
            </h2>
                    <p>
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                    </p>
                    <p>
                        <a class="btn" href="#">View details »</a>
                    </p>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="thumbnail">
                                <img alt="300x200" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/600/200/people/default.jpg" />
                                <div class="caption">
                                    <h3>
                                Thumbnail label
                            </h3>
                                    <p>
                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                    </p>
                                    <p>
                                        <a class="btn btn-primary" href="#">Action</a>
                                        <a class="btn" href="#">Action</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="thumbnail">
                                <img alt="300x200" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/600/200/city/default.jpg" />
                                <div class="caption">
                                    <h3>
                                Thumbnail label
                            </h3>
                                    <p>
                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                    </p>
                                    <p>
                                        <a class="btn btn-primary" href="#">Action</a>
                                        <a class="btn" href="#">Action</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="thumbnail">
                                <img alt="300x200" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/600/200/sports/default.jpg" />
                                <div class="caption">
                                    <h3>
                                Thumbnail label
                            </h3>
                                    <p>
                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                    </p>
                                    <p>
                                        <a class="btn btn-primary" href="#">Action</a>
                                        <a class="btn" href="#">Action</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-8 column">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>
                                    编号
                                </th>
                                <th>
                                    产品
                                </th>
                                <th>
                                    交付时间
                                </th>
                                <th>
                                    状态
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    1
                                </td>
                                <td>
                                    TB - Monthly
                                </td>
                                <td>
                                    01/04/2012
                                </td>
                                <td>
                                    Default
                                </td>
                            </tr>
                            <tr class="success">
                                <td>
                                    1
                                </td>
                                <td>
                                    TB - Monthly
                                </td>
                                <td>
                                    01/04/2012
                                </td>
                                <td>
                                    Approved
                                </td>
                            </tr>
                            <tr class="error">
                                <td>
                                    2
                                </td>
                                <td>
                                    TB - Monthly
                                </td>
                                <td>
                                    02/04/2012
                                </td>
                                <td>
                                    Declined
                                </td>
                            </tr>
                            <tr class="warning">
                                <td>
                                    3
                                </td>
                                <td>
                                    TB - Monthly
                                </td>
                                <td>
                                    03/04/2012
                                </td>
                                <td>
                                    Pending
                                </td>
                            </tr>
                            <tr class="info">
                                <td>
                                    4
                                </td>
                                <td>
                                    TB - Monthly
                                </td>
                                <td>
                                    04/04/2012
                                </td>
                                <td>
                                    Call in to confirm
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-md-4 column">
                    <h2>
                Heading
            </h2>
                    <p>
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                    </p>
                    <p>
                        <a class="btn" href="#">View details »</a>
                    </p>
                </div>
            </div>
        </div>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    </body>

</html>

结果：

1. jquery一周学习总结
2. jquery的学习总结（一）
3. jQuery学习总结
4. jquery学习总结
5. JQuery--学习总结
6. jQuery基础学习
7. jQuery EasyUI学习资源汇总
8. 知识学习——jQuery基础学习
9. jquery学习全面总结
10. jquery mobile 学习总结
更多相关文章...
• Docker 资源汇总 - Docker教程
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• Kotlin学习（一）基本语法
• Kotlin学习（二）基本类型