第十五章 AJAX JQuery

第十五章 AJAX JQuery

JQuery是另外一个非常流行的JavaScript框架，相对于Dojo来说JQuery更加的轻便，JQuery代码文件的大小为20kb，但是丝毫没有影响到JQuery的强大功能，也许在了解JQuery之后你会有更深刻的体会。并且JQuery使用了插件的体系结构，开发人员可以在JQuery的基础上利用插件的机制扩展JQuery的功能。

 

和JQuery详细的JavaScript框架有Prototype，虽然Prototype和script.aculo.us也可以制作出强大的功能的页面。但是我更喜欢JQuery的简介方式和强大的插件群。

 

JQuery官方网站: http://www.jquery.com

Prototype官方网站: http://www.prototypejs.org

script.aculo.us官方网站: http://script.aculo.us

 

JQuery核心只有一个文件jquery-x.x.x.x.js，其中x.x.x.x表示了文件的版本，现在最新的版本为1.1.3.1。并且为了提高jquery的下载效率，官方网站提供了一个压缩版本的文件，这个文件只有20kb。

 

安装jqueyr只需要将jquery-x.x.x.x.js拷贝到对应web项目的javascript脚本目录即可。

<script type="text/javascript" src="path/to/jquery.js"></script>

 

JQuery 核心

Onload 使用

我们有些时候需要在页面初始化完成的时候调用一些JavaScript预处理操作，例如设置某些Button不可用等，这个时候我们通常有两种选择。

第一：<body onload=”someFunction();”>

第二：window.onload = someFunction;

上述代码意义相同，都会在页面初始化完成之后执行someFunction这个预先定义的JavaScript函数。但是，页面初始化完成到底是什么含义呢？页面初始化完成意味着页面全部被浏览器显示，也就是说所有的image都加载完成。有些时候这个过程非常的常，有些时候我们可以看到有些网站的button先是可用，后来等所有页面显示之后又不可用了就是这个原因。

 

那么我们到底在什么时候执行someFunction是比较合适的呢？我们倾向于页面的全部document内容被加载，而不是所有内容正确显示之后别调用。

 

以img为例说明上述的区别，例如

<img src=”http://hostname:port/webapp/xxx.jpg” />

当上述字面内容被浏览器下载完成时，我们可以说img被加载了，当http://hostname:port/webapp/xxx.jpg指向的内容被下载并且被正确显示之后，可以说img被正确显示了。

 

如何使用JQuery来达到页面内容别加载就执行someFunction？

$(document).ready(someFunction);

 

$()是什么？

$()是JQuery的核心方法，$()方法有几种不同的调用方式，但是这几种方式都有一个共通的特点，就是通过$()方法，可以将一个普通的HTML DOM对象（p, div, body, doucment等）封装成为一个特殊的，增强了JQuery功能的JQuery对象。

说道这里大家可能会知道了JQuery其实相当于一个对象，一个封装了不同HTMLDOM对象的对象。

 

$(string)

         凭空创建一个JQuery包装起来的HTML DOM对象，例如：

         $("<div><p>Hello</p></div>").appendTo("body")

上述代码建立了一个Hello段，Hello段在一个div内部，之后将这个div追加到了doby内部。

 

$( elems )

         讲一个已经存在的HTML DOM对象包装为JQuery对象，例如：

         $(document.body).css( "background", "black" );

         上述代码把body的background设置为black

         $( myForm.elements ).hide()

         隐藏myForm中所有的对象

 

$( function)

$(document).ready(function)的简写，总共有三种方法让一个function在dom初始化完成之后被调用：

         $(document).ready(function)

         $( function)

         JQuery(function)

 

$( expr, context )

在上下文（）中查找表达式（）所只是的对象，context不存在的情况下在document上下文中查找，例如：

DOM对象：   <p>one</p> <div><p>two</p></div> <p>three</p>

调用：              $("div > p")

结果：              <p>two</p>

 

$("input:radio", document.forms[0])

查找第一个form中的所有redio类型的输入框。

$("div", xml.responseXML)

查找xml.responseXML指示的XML文件内容中所有的div项。

 

扩展JQuery的功能

可以使用$.fn.extend( prop )来扩展JQuery提供的功能，例如，JQuery并没有提供check和uncheck方法，但是我们可以通过如下的代码扩展JQquery，使JQuery增加check和uncheck功能：

jQuery.fn.extend({

   check: function() {

     return this.each(function() { this.checked = true; });

   },

   uncheck: function() {

     return this.each(function() { this.checked = false; });

   }

 });

 

之后我们可以选择一个对象来使用扩展的check和uncheck方法，例如：

 

 $("input[@type=checkbox]").check();

 $("input[@type=radio]").uncheck();

 

解决和其他框架的冲突

$在JQuery中有着特殊的含义，但是有些时候我们的项目已经集成了其他的框架）（例如Prototype），在其他框架中$已经被使用了，那么我们怎么消除JQuery对$指定的特殊含义呢？

我们可以使用jQuery.noConflict()方法，在调用这个方法之后，$已经不在具有我们前面说的JQuery赋予的功能，所以所有的后续代码必须使用JQuery调用，例如：

 

jQuery.noConflict();

        // 调用JQuery的方法

        jQuery("div p").hide();

        // 调用其他框架的$()方法

        $("content").style.display = 'none';

 

我们也可以指定自己喜欢的名字来替换$，例如：

var j = jQuery.noConflict();

// 调用jQuery的方法

j("div p").hide();

// 调用其他框架的 $( ) 方法

$("content").style.display = 'none';

 

其他常用方法

each( fn )

         这对数组中的每一个对象调用fn方法。例如：

         HTML DOM代码：<img/><img/>

         调用方法：              $("img").each(function(i){

                                                     this.src = "test" + i + ".jpg";

});

         结果：                       <img src="test0.jpg"/><img src="test1.jpg"/>

 

eq( pos )

         定位具体的HTML DOM对象

         HTML DOM代码：<p>This is just a test.</p><p>So is this</p>

         调用方法：              $("p").eq(1)

         结果：                        <p>So is this</p>

 

get( pos )

         定位具体的HTML DOM对象（脱掉了JQuery的包装，原始的DOM对象）

         HTML DOM代码：<img src="test1.jpg"/> <img src="test2.jpg"/>

         调用方法：              $("img").get( num )

         结果：                        <img src="test1.jpg"/>

 

get()

         针对所有的对象，脱掉了JQuery的包装，获取原始的DOM对象

         HTML DOM代码：<img src="test1.jpg"/> <img src="test2.jpg"/>

         调用方法：              $("img").get()

         结果：                        <img src="test1.jpg"/><img src="test2.jpg"/>

 

gt( pos )

         取出pos之后的所有对象

         HTML DOM代码：<img src="test1.jpg"/> <img src="test2.jpg"/>

         调用方法：              $("img").gt(0)

         结果：                        <img src="test1.jpg"/>

 

index( subject )

         找到subject在数组中对应的index，不存在时返回-1

         HTML DOM代码：<div id="foobar"><b></b><span id="foo"></span></div>

         调用方法：              $("*").index( $('#foobar')[0] )

         结果：                        0

 

Length

         返回对象数组的长度。

         HTML DOM代码：<img src="test1.jpg"/> <img src="test2.jpg"/>

         调用方法：              $("img").length

         结果：                        2

 

lt( pos )

         与gt相反

         HTML DOM代码：<p>This is just a test.</p><p>So is this</p>

         调用方法：              $("p").lt(1)

         结果：                        <p>This is just a test.</p>

 

size()

         与length相同

 

 

JQuery HTML DOM遍历和选择器

JQuery的功能很强大，可以包装任何一个HTML DOM元素添加强大的功能，那么如何找到需要的元素呢？这就需要JQuery Selector来帮慢，原理上讲，JQuery Selector可以超找到HTML DOM里的任何元素

 

JQuery Selector主要包含三个方面的实现：CSS方式，XPath方式，和JQuery自定义的方式。

为了逐个讲解这些Selector，首先给大家一些基本的例子：

 

隐藏所有包含链接（a）的段（p）：

$("p[a]").hide();

 

显示一个页面的第一个段（p）：

$("p:eq(0)").show();

 

将所有显示（visible=true）的div隐藏：

$("div:visible").hide();

 

所有无须列表（ul）的项目（li）：

$("ul/li")

或者 $("ul > li") */

获得所有class类型为foo，并且包含链接（a）的段：

$("p.foo[a]");

 

获得所有字符内容包含Register的项目（li）

$("li[a:contains('Register')]");

 

得到name=bar的输入项目的值：

$("input[@name=bar]").val();

 

获得所有被选中的button：

$("input[@type=radio][@checked]")

 

CSS方式

JQuery的CSS方式的Selector支持CSS1-CSS3标准。

 

与CSS中的实现完全一致的：

*

         任何的元素

E

         任何类型为E的元素

E:nth-child(n)

         E元素的第n个子元素

E:first-child

         E的第一个子元素

E:last-child

         E的最后一个元素

E:only-child

         E的唯一的子元素

E:empty

         E没有子元素，也不能包含text内容

E:enabled

         E类型的UI元素，并且不是disabled的

E:disabled

         E类型的UI元素，并且是disabled的

E:checked

         E类型的UI元素（radio或者checkbox），并且是checked的

E:selected

         E类型的UI元素（option），并且是选中的（虽然CSS中没有支持，JQuery支持）

E.warning

         Class = warning的元素（dot（.） 表示class）

E#myid

         Id=myid的元素，最多有一个元素被选中。

E:not(s)

         E类型的元素，但是与简单selector  s 不匹配

E F

         E类型的F类型的后代元素

E > F

         E类型的F类型的子元素（F在E之内）

E + F

         F类型紧跟着E类型（F在E之后，并且紧挨着）

E ~ F

         F类型前面连着E类型（F在E之后，不一定紧挨着）

E,F,G

         E，F，G所有类型的元素

 

与CSS中实现稍有不同的：

E[@foo]

         包含属性foo的E类型的元素

E[@foo=bar]

         包含属性foo，并且属性foo的值为bar的E类型的元素

E[@foo^=bar]

         包含属性foo，并且foo的值以bar开始的E类型的元素

E[@foo$=bar]

         包含属性foo，并且foo的值以bar结尾的E类型的元素

E[@foo*=bar]

         包含属性foo，并且foo的值包含bar的E类型的元素

E[@foo=bar][@baz=bop]

         属性foo值为bar，属性baz值为bop的E类型的元素。

 

XPath方式

 

位置路径

    在HTML DOM中查找：

                 $("/html/body//p")

                 $("body//p")

                 $("p/../div")

         在当前上下文中查找：

 $("p/*", this)

                 $("/p//a", this)

 

坐标位置

         子孙节点有一个子孙节点：

 $("//div//p")

         子孙节点有一个子节点：

 $("//div/p")

 

        $("//div ~ form")

$("//div/../p")

 

预言

$("//input[@checked]")

$("//a[@ref='nofollow']")

$("//div[p]")

        $("//div[p/a]")

 

[last()] or [position()=last()] becomes :last

 

        $("p:last")

 

    [0] or [position()=0] becomes :eq(0) or :first

 

$("p:first")

$("p:eq(0)")

 

    [position() < 5] becomes :lt(5)

$("p:lt(5)")

[position() > 2] becomes :gt(2)

$("p:gt(2)")

 

JQuery自定义的Selector

:even

         偶数节点选择

:odd

         奇数节点选择

:eq(n) and :nth(n)

         第n个元素

:gt(N)

         排序比N大的元素

:lt(N)

         排序比N小的元素

:first

与:eq(0)相同

:last

         最后一个元素

:parent

         包含子元素（文本内容也算）的节点

:contains('test')

         包含test文本内容的节点

:visible

         所有显示的元素

:hidden

         所有隐藏的内容

 

例如：

$("p:first").css("fontWeight","bold");

$("div:hidden").show();

$("/div:contains('test')", this).hide();

        

JQueyy 操作HTML属性和CSS

        

JQUery 事件

JQuery 动画效果

JQuery Ajax

JQuery 插件

         JQuery Thickbox plugin

         JQuery Form Plugin

         JQuery Tab Plugin

         JQuery Context Menu Plugin

         JQuery Short Key Plugin

         JQuery Inplace Plugin