第十五章 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脚本目录即可。

JQuery 核心

Onload 使用

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

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

第二：window.onload = someFunction;

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

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

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

当上述字面内容被浏览器下载完成时，我们可以说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: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

ExtJS教程- Hibernate教程-Struts2 教程-Lucene教程

发表于 2008-11-01 10:19 淘声依旧阅读(260) 评论(0) 编辑收藏所属分类: 100.Struts2

公告

随笔分类(153)

实用连接

积分与排名

最新评论

杂家学习复习
\| 首页 \| 发新随笔 \| 发新文章 \| 联系 \| 聚合 \| 管理