PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> Javascript >> 

JQuery 常用方法基础教程

JQuery 常用方法基础教程

来源:互联网  作者:  发布时间:2009-09-03
对于学习使用jquery 的朋友,能用的到,简单的了解下jquery的一

元素事件列表说明

注:不带参数的函数,其参数为可选的 fn。jQuery不支持form元素的reset事件。

事件 描述 支持元素或对象

blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area

change( ) 用户改变域的内容 input, textarea, select

click( ) 鼠标点击某个对象 几乎所有元素

dblclick( ) 鼠标双击某个对象 几乎所有元素

error( ) 当加载文档或图像时发生某个错误 window, img

focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area

keydown( ) 某个键盘的键被按下 几乎所有元素

keypress( ) 某个键盘的键被按下或按住 几乎所有元素

keyup( ) 某个键盘的键被松开 几乎所有元素

load( fn ) 某个页面或图像被完成加载 window, img

mousedown( fn ) 某个鼠标按键被按下 几乎所有元素

mousemove( fn ) 鼠标被移动 几乎所有元素

mouseout( fn ) 鼠标从某元素移开 几乎所有元素

mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素

mouseup( fn ) 某个鼠标按键被松开 几乎所有元素

resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame

scroll( fn ) 滚动文档的可视部分时 window

select( ) 文本被选定 document, input, textarea

submit( ) 提交按钮被点击 form

unload( fn ) 用户退出页面 window

JQuery Ajax 方法说明:

load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。

$(”#feeds”).load(”feeds.html”); 将feeds.html文件载入到id为feeds的div中

$(”#feeds”).load(”feeds.php”, {limit: 25}, function(){

alert(”The last 25 entries in the feed have been loaded”);

});

jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。

$.get(”test.cgi”, { name: “John”, time: “2pm” }, function(data){

alert(”Data Loaded: ” + data);

});

jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。

$.getJSON(”test.js”, { name: “John”, time: “2pm” }, function(json){

alert(”JSON Data: ” + json.users[3].name);

});

jQuery.getScript( url, [callback] ) 使用GET请求javascript文件并执行。

$.getScript(”test.js”, function(){

alert(”Script loaded and executed.”);

});

jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。

ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件

$(”#msg”).ajaxComplete(function(request, settings){

$(this).append(”

Request Complete.”);
});

ajaxError( callback ) 当一个AJAX请求失败后,执行一个函数。这是一个Ajax事件

$(”#msg”).ajaxError(function(request, settings){

$(this).append(”

Error requesting page ” + settings.url + “”);
});

ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数。这是一个Ajax事件

$(”#msg”).ajaxSend(function(evt, request, settings){

$(this).append(”

< p>
+ “<”);< p>

});

ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时,执行一个函数。这是一个Ajax事件

当AJAX请求开始(并还没有激活时)显示loading信息

$(”#loading”).ajaxStart(function(){

$(this).show();

});

ajaxStop( callback ) 当所有的AJAX都停止时,执行一个函数。这是一个Ajax事件

当所有AJAX请求都停止时,隐藏loading信息。

$(”#loading”).ajaxStop(function(){

$(this).hide();

});

ajaxSuccess( callback ) 当一个AJAX请求成功完成后,执行一个函数。这是一个Ajax事件

当AJAX请求成功完成时,显示信息。

$(”#msg”).ajaxSuccess(function(evt, request, settings){

$(this).append(”

Successful Request!”);
});

jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。

设置默认的全局AJAX请求选项。

$.ajaxSetup({

url: “/xmlhttp/”,

global: false,

type: “POST”

});

$.ajax({ data: myData });

serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列

function showValues() {

var str = $(”form”).serialize();

$(”#results”).text(str);

}

$(”:checkbox, :radio”).click(showValues);

$(”select”).change(showValues);

showValues();

serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法),但是返回一个JSON数据格式。

从form中取得一组值,显示出来

function showValues() {

var fields = $(”:input”).serializeArray();

alert(fields);

$(”#results”).empty();

jQuery.each(fields, function(i, field){

$(”#results”).append(field.value + ” “);

});

}

$(”:checkbox, :radio”).click(showValues);

$(”select”).change(showValues);

showValues();

JQuery Effects 方法说明

show( ) 显示隐藏的匹配元素。

show( speed, [callback] ) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。

hide( ) 隐藏所有的匹配元素。

hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数

toggle( ) 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,

切换为可见的。

slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选

地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以

“滑动”的方式显示出来。

slideUp( speed, [callback] ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地

触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”

的方式隐藏起来。

slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回

调函数。 这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”的方式隐

藏或显示。

fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触

发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的

高度和宽度不会发生变化。

fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触

发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的

高度和宽度不会发生变化。

fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成

后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所

有匹配的元素的高度和宽度不会发生变化。

stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。

queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)

queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数

queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列

dequeue( ) 执行并移除动画序列前端的动画

animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。

animate( params, options ) 创建自定义动画的另一个方法。作用同上。

JQuery Traversing 方法说明

eq( index ) 从匹配的元素集合中取得一个指定位置的元素,index从0开始

filter( expr ) 返回与指定表达式匹配的元素集合,可以使用”,”号分割多个expr,用于实现多个条件筛选

filter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。

is( expr ) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的

表达式就返回true。

map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。

not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。

slice( start, [end] ) 从匹配元素集合中取得一个子集,和内建的数组的slice方法相同。

add( expr ) 把与表达式匹配的元素添加到jQuery对象中。

children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器

将使这个方法只匹配符合的元素(只包括元素节点,不包括文本节点)。

contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点,不

包括文本节点),如果元素为iframe,则取得其中的文档元素

find( expr ) 搜索所有与指定表达式匹配的元素。

next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合

parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。

parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。

prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。

siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。

andSelf( ) 将前一个匹配的元素集合添加到当前的集合中

取得所有div元素和其中的p元素,添加border类属性。取得所有div元素中的p元素,

添加background类属性

$(”div”).find(”p”).andSelf().addClass(”border”);

$(”div”).find(”p”).addClass(”background”);

end( ) 结束当前的操作,回到当前操作的前一个操作

找到所有p元素其中的span元素集合,然后返回p元素集合,添加css属性

$(”p”).find(”span”).end().css(”border”, “2px red solid”);

JQuery Selectors 方法说明


延伸阅读:
什么是jquery
jQuery简单应用
jQuery压缩版
jQuery原版(未压缩版)
12个web开发必须知道的JQuery 技巧

Tags: 教程   方法   jQuery   教程   基础   方法   function  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号