一个小时学会jQuery

前一段时间录了一套关于jQuery的视频分享给大家，可以在下载区下载到，本来想配合文字一起的，后面发现视频+帮助文档也是非常好的学习方法。

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

1.1、jQuery简介

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

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

 1.2、jQuery特点

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

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

1.3、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。

更多版本请查看：

https://github.com/jquery/jquery/releases

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

1.4、获得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.5、第一个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版本）

运行结果：

二、jQuery对象和DOM对象

2.1、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.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.3、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.4、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.5、DOM对象与jQuery对象区别

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

三、常用选择器

通过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.1、通过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.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.3、通过标签名获取元素

在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>  

四、350行jQuery常用脚本

4.1、常用选择器

$('#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.2、基本筛选器

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

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

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

4.3、内容选择器

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

4.4、表单选择器

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

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

4.5、筛选与查找

$("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.6、属性操作

$("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.7、样式操作

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

4.8、内容操作

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

$('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.11、尺寸

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

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

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

4.12、DOM内部插入

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

4.13、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.14、DOM替换

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

4.15、DOM删除

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

4.16、DOM复制

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

4.17、DOM加载完成事件

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

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

4.18、绑定事件

//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.19、事件对象

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

$("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.22、工具方法

$("#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.23、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 });

五、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.1、回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

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

5.2、数据类型

$.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.3、发送数据到服务器

默认情况下，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.4、高级选项

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.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.6、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
 });

六、视频与资料下载

本来想一点一点写完的，不过后面录了比较全的视频，大家可以边看视频边参考示例练习：

下载较新版的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

 

posted @ 2017-03-17 09:25  张果  阅读(10814)  评论(13)  编辑  收藏  举报
AmazingCounters.com