官方网站:http://jquery.com
jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!
下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip)
jQuery Downloads (http://jquery.com/src/)
下载完成后先加载到文档中,然后我们来看个简单的例子!
上边的效果是点击文档中所有a标签时将弹出对话框,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$(document)的方法,表示当document全部下载完毕时执行函数。
在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"(<span id="p"></span>)的元素.
我将从以下几个内容来讲解jQuery的使用:
1:核心部分
2:DOM操作
3:css操作
4:javascript处理
5:动态效果
6:event事件
7:ajax支持
8:插件程序
一:核心部分
$(expr)
说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础
参数:expr:字符串,一个查询表达式或一段html字符串
例子:
未执行jQuery前:
最终效果是当鼠标点击id为a的层上时图层增加一个red样式,
jQuery提供的函数
用于browers事件
error(fn) load(fn) unload(fn) resize(fn) scroll(fn)
用于form事件
change(fn) select(fn) submit(fn)
用于keyboard事件
keydown(fn) keypress(fn) keyup(fn)
用于mouse事件
click(fn) dblclick(fn) mousedown(fn) mousemove(fn)
mouseout(fn) mouseover(fn) mouseup(fn)
用于UI事件
blur(fn) focus(fn)
以上事件的扩展再扩展为5类
举例,click(fn) 扩展 click() unclick() oneclick(fn) unclick(fn)
click(fn):增加一个点击时触发某函数的事件
click():可以在其他事件中执行匹配对象的click事件。
unclick ():不执行匹配对象的click事件。
oneclick(fn):只增加可以执行一次的click事件。
unclick (fn):增加一个点击时不触发某函数的事件。
上面列举的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法扩展。
七:Ajax支持
通用方式:
$.ajax(prop) 通过一个ajax请求,回去远程数据,prop是一个hash表,它可以传递的key/value有以下几种。
(String)type:数据传递方式(get或post)。
((String)url:数据请求页面的url
((String)data:传递数据的参数字符串,只适合post方式
((String)dataType:期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")
((Boolean)ifModified: 当最后一次请求的相应有变化是才成功返回,默认值是false
((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout
((Boolean)global:是否为当前请求触发ajax全局事件,默认为true
((Function)error:当请求失败时触发的函数。
((Function)success:当请求成功时触发函数
((Function)complete:当请求完成后出发函数
jQuery代码及说明
用get方式向ajax.aspx页面传参数,并将返回内容负给id为a的对象。
$.ajaxTimeout(time) 设置请求结束时间
$.ajaxTimeout( 5000 )
其它简化方式:
$.get(url, params, callback) 用get方式向远程页面传递参数,请求完成后处理函数,除了url外,其它参数任意选择!