功能简介:
(1)可以访问并修改页面元素的相关属性(css,内容,事件等)
(2)与服务器异步交互。jQuery 也提供了一整套Ajax 相关的操作,大大方便了异步交互的开发和使用。
(3)为页面添加动画。通常在页面中添加动画都需要开发大量的JavaScript 代码,而jQuery大大简化了这个过程。jQuery 的库提
供了大量可自定义参数的动画效果。
(4)简化常用的JavaScript 操作。jQuery 还提供了很多附加的功能来简化常用的JavaScript操作,例如数组的操作、迭代运算等。
JQuery优点
▪ 体积小(v1.2.3 15kb)
▪ 丰富的DOM选择器(CSS1-3 + XPath)
▪ 跨浏览器(IE6,FF,Safari,Opera)
▪ 链式代码
▪ 强大的事件、样式支持
▪ 强大的AJAX功能
▪ 易于扩展,插件丰富
代码风格:
$(document).ready(function() {
//为页面上的每一个链接添加一个点击事件
$("a").click(function() {
alert("Hello world!");
});
//为ID为orderedlist的元素添加red样式
$("#orderedlist").addClass("red");
});
1.关于DOM元素的获取
$("#p"): ID为p的一个元素,相当于JavaScript里的document.getElementById("p")
$(".p"): 所有样式名为p的元素,返回的是一个元素集
$("p"): 所有HTML标签为p的元素,返回的是一个元素集
jQuery的选择符支持id,tagName,css1-3 expressions,XPath;
除此之外,还可以根据DOM元素的父子关系,内容,属性,位置等相关信息进行筛选,
也可以在获得的元素集上进一步筛选,具体功能参见API文档(中文,英文)
2.修改设置元素的属性、样式及DOM处理
html(),html(val) text(),text(val) val(),val(val)
height(),height(val) width(),width(val)
相信从字面上就能知道他们的意思了
此外jQuery还提供了强大的方法来方便我们操作DOM对象,详细说明请见API文档
3.事件
对于JavaScript里的onXXX事件(如onclick,onchange,onsubmit等),在jQuery里都有对应的表示方法,只是
jQuery不喜欢onXXX,所以都改成了XXX,去掉了on。其他的一些事件,如ready和hover,也提供了相应的方法。
//JavaScript:
obj.onclick=function(){alert('hello!');}
//jQuery:
$("#id").click(function(){alert('hello!');});
4.Ajax
(1)通用方式:
$.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:当请求完成后出发函数
相关代码
$.ajax({url: "ajax.htm",
success:function(msg){
$("#a").html(msg);
}
}); //将ajax.htm返回的内容作为id为a的div内容
$.ajax({ url: "ajax.aspx",
type:"get",
dataType:"html",
data: "name=John&location=Boston",
success:function(msg){
$("#a").html(msg);
}
}); //用get方式向ajax.aspx页面传参数,并将返回内容负给id为a的对象。
(2)简化方式:
$.get(url, params, callback) 用get方式向远程页面传递参数,请求完成后处理函数,除了url外,其它参数任意选择!
$.post(url, params, callback) 用post方式向远程页面传递参数,请求完成后处理函数callback
$.get( "ajax.htm" , function(data){ $("#a").html(data) });
$.post( "ajax.asp",
{ name: "young", age: "25" },
function(data){ alert("Data Loaded: " + data); }
);
5.动画
hide(), show() 显示/隐藏对象; toggle() 切换元素的可见状态。
slideDown, slideUp, slideToggle 通过高度变化显示/隐藏对象,切换元素的可见状态,即垂直方向上的滑动效果。
fadeIn, fadeOut, fadeTo 淡入淡出效果
animate 自定义动画效果
详细使用说明请参考API文档
jQuery官方API文档:
中文:http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html
英文:http://docs.jquery.com/Main_Page
其他一些参考文档:
http://www.k99k.com/jQuery_getting_started.html
http://thinhunan.cnblogs.com/archive/2008/03/05/1091816.html
http://wiki.jquery.org.cn/doku.php
http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html