一个小时学会jQuery

时间  2019-11-22
标签 一个 小时 学会 jquery 栏目 JQuery 繁體版
原文   原文链接

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

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

1.一、jQuery简介

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

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

 1.二、jQuery特色

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

  • 功能强大，强调的理念是写的少，作得多（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。node

更多版本请查看：python

https://github.com/jquery/jquery/releasesjquery

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

1.四、得到jQuery库

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

官网： 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.五、第一个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是一个长度为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对象区别

  1. DOM对象只能调用DOM方法、属性与事件；
  2. jQuery对象只能调用jQuery方法、属性与事件；
  3. 能够将DOM转换成jQuery对象，也能够将jQuery转换成DOM对象；
  4. $只是jQuery的别名形式；
  5. 每个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经常使用脚本

复制代码 
0、经常使用选择器
$('#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>标签的一组元素


1、基本筛选器
$('span:first')    //第一个节点
$('span:last')     //最后一个节点

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

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


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


3、表单选择器
$("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()      //全部的同辈节点,不包括本身


5、属性操做
$("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属性


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


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

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


9、定位与偏移
$('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


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

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

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


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


12、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节点的前面


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


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


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

16、DOM加载完成事件
$(document).ready(function(){
  您的代码...
});

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


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()     //用户离开页面时


18、事件对象
$("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()  //中止事件向上层节点冒泡


19、动态事件绑定
 $("p").on("click",'span',function(){
alert( $(this).text() );
});
//当p中增长span时仍然有效


20、动画效果
$("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
 

21、工具方法
$("#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()       //判断浏览器是否支持某个特性

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类型，那么当从服务器接收到数据时，其实是用了&lt;script&gt;标签而不是XMLHttpRequest对象。这种状况下，$.ajax()再也不返回一个XMLHttpRequest对象，而且也不会传递事件处理函数，好比beforeSend。

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

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

data选项既能够包含一个查询字符串，好比 key1=value1&amp;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容许给&lt;script&gt;标签的请求设定一个特定的字符集，用于script或者jsonp相似的数据。当脚本和页面字符集不一样时，这特别好用。

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

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

5.五、参数详细

$.ajax(url,[settings])

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

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

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的跨域请求。

示例

描述:

加载并执行一个 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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程