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