Submitted by aming on 2008, March 12, 12:46 PM
在这一部分我们写了一个小小的AJAX应用,它能够rate一些东西(译Keel注:就是对某些东西投票),就像在youtube.com上面看到的一样。
首先我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数。看一下rate.php代码.
虽然这些例子也可以不使用AJAX来实现,但显示我们不会那么做,我们用jQuery生成一个DIV容器,ID是"rating".
$(document).ready(function() {
// generate markup
var ratingMarkup = ["lease rate: "];
for(var i=1; i <= 5; i++) {
ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
}
// add markup to container and applier click handlers to anchors
$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
e.preventDefault();
// send requests
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// format result
var result = [
"Thanks for rating, current average: ",
$("average", xml).text(),
", number of votes: ",
$("count", xml).text()
];
// output result
$("#rating").html(result.join(''));
} );
});
});
这段代码生成了5个链接,并将它们追加到id为"rating"容器中,当其中一个链接被点击时,该链接标明的分数就会以rating参数形式发送到rate.php,然后,结果将以XML形式会从服务器端传回来,添加到容器中,替代这些链接。
如果你没有一个安装过PHP的webserver,你可以看看这个在线的例子.
不使用javascript实现的例子可以访问 softonic.de 点击 "Kurz bewerten!"
更多的AJAX方法可以从这里 找到,或者看看API文档 下面的AJAX filed under AJAX.
(译者注:这个在线实例从国内访问还是比较慢的,点击后要等一会儿才能看到结果,可以考虑对它进行修改,比如加上loading,投票后加上再投票的返回链接等。此外,这个例子中还是有很多需要进一步消化的地方,看不懂的地方请参考API文档。)
一个在使用AJAX载入内容时经常发生的问题是:当载入一个事件句柄到一个HTML文档时,还需要在载入内容上应用这些事件,你不得不在内容加载完成后应用这些事件句柄,为了防止代码重复执行,你可能用到如下一个function:
$(function() {
var addClickHandlers = function() {
$("a.clickMeToLoadContent").click(function() {
$("#target").load(this.href, addClickHandlers);
});
};
addClickHandlers();
});
现在,addClickHandlers只在DOM载入完成后执行一次,这是在用户每次点击具有clickMeToLoadContent 这个样式的链接并且内容加载完成后.
请注意addClickHandlers函数是作为一个局部变量定义的,而不是全局变量(如:function addClickHandlers() {...}),这样做是为了防止与其他的全局变量或者函数相冲突.
另一个常见的问题是关于回调(callback)的参数。你可以通过一个额外的参数指定回调的方法,简单的办法是将这个回调方法包含在一个其它的function中:
// get some data
var foobar = ...;
// specify handler, it needs data as a paramter
var handler = function(data) {
...
};
// add click handler and pass foobar!
$('a').click( function(event) { handler(foobar); } );
// if you need the context of the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); } );
用到简单的AJAX后,我们可以认为已经非常之“web2.0”了,但是到现在为止,我们还缺少一些酷炫的效果。下一节将会谈到这些效果.
Tags: ajax, javascript, php, jquery
JQUERY | 评论:0
| Trackbacks:0
| 阅读:212
Submitted by aming on 2008, March 12, 12:45 PM
jQuery起点教程之Animate是个好东西,一个非常好的效果你可以用jquery自带的函数,比如show(),hide(),Animate()等函数。更确切的说这些函数才是jquery吸引人的地方。
一些动态的效果可以使用 show() 和 hide()来表现:
$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});
});
你可以与 animate()联合起来创建一些效果,如一个带渐显的滑动效果:
$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
});
很多不错的效果可以访问interface plugin collection. 这个站点提供了很多demos和文档
这些效果插件是位于jQuery插件列表的前面的,当然也有很多其他的插件,比如我们下一章讲到的表格排序插件。
Tags: ajax, javascript, php, jquery
JQUERY | 评论:0
| Trackbacks:0
| 阅读:328
Submitted by aming on 2008, March 12, 12:44 PM
jQuery起点教程之有序化插件实例是一篇使用jquery的tablesorter插件来实现一些功能效果的教程,大家可以认真学习一下。Sort me将我有序化:使用tablesorter插件进行表格排序。
这个表格排序插件能让我们在客户端按某一列进行排序,引入jQuery和这个插件的js文件,然后告诉插件你想要哪个表格拥有排序功能。
要测试这个例子,先在starterkit.html中加上像下面这一行的代码:
<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>
然后可以这样调用不着:
$(document).ready(function() {
$("#large").tableSorter();
});
现在点击表格的第一行head区域,你可以看到排序的效果,再次点击会按倒过来的顺序进行排列。
这个表格还可以加一些突出显示的效果,我们可以做这样一个隔行背景色(斑马线)效果:
$(document).ready(function() {
$("#large").tableSorter({
stripingRowClass: ['odd','even'], // Class names for striping supplyed as a array.
stripRowsOnStartUp: true // Strip rows on tableSorter init.
});
});
关于这个插件的更多例子和文档可以在 tablesorter首页找到.
几乎所有的特件都是这样用的:先include插件的js文件,然后在某些元素上使用插件定义的方法,当然也有一些参数选项是可以配置的
经常更新的插件列表可以从jQuery官方站 on the jQuery site找到.
当你更经常地使用jQuery时,你会发现将你自己的代码打包成插件是很有用处的,它能方便地让你的公司或者其他人进行重用.下一章我们将谈到如何构建一个自己的插件.
Tags: ajax, javascript, php, jquery
JQUERY | 评论:0
| Trackbacks:0
| 阅读:251
Submitted by aming on 2008, March 12, 11:51 AM
Jquery是一个优秀的Javascript框架,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的。从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库。jQuery改变javascript编码方式!
那么它是如何实现它的声明的呢?这里,用以下的一段简短的使用流程:
1)查找(创建)jQuery对象:$("selector");
2)调用jQuery对象的方法完成我们需要完成的工作:$("selector").doOurWork();
jQuery就是以这种可以说是最简单的编码逻辑来改变javascript编码方式的.这两个步骤是jQuery的编码逻辑核心!
要实现这种简洁编码方式,创建jQuery对象这一环节至关重要.因此,jQuery的dom元素查找能力相当强悍.此外,jQuery对象的方法肯定是有限的,有限的方法满足不了日益增长各有所需的要求,所以,必须提供jQuery对象方法的扩展能力.
强悍的dom元素查找能力,以及随心所欲的方法扩展,这两点正是jQuery的核心所在!
来一个简单的示例,来说明jQuery是如何工作的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body id="bd">
<a href="http://www.baidu.com">baidu</a>
</body>
</html>
<script type="text/javascript" src="../Script/jquery.js"></script>
<script type="text/javascript" >
$(function(){
$("a").click(function(e){//1)查找$("a");2)jQuery对象事件click;3)jQuery对象方法hide
$(this).hide("slow");
return false;
});
});
</script>
jQuery中有一个"配置"的思想,这一点使得对象的属性/事件等设置变得容易理解且十分简便,如下一个拖拽组件的初始化:
$(document).ready(
function()
{
$('#drag1').Draggable({
handle: "ax", //属性设置
onStart: function(el,x,y){ //事件监听器设置
}
});
}
);
可以看到,$("#drag1")是查找并创建一个jquery对象,然后调用Draggable方法进行拖拽初始化,在此方法调用时,传递一个"配置"对象,进行拖拽操作的初始化配置.这一"配置"的思想,极大简化了一些编码步骤,并相当直观和易懂.
三个问答:
- 1)问:为什么$(selector)之后,返回的是jQuery对象?
答:从jQuery的源代码中,我们可以知道:var $ = jQuery.因此当我们$(selector)操作时,其实就是jQuery(selector),创建的是一个jQuery对象.当然正确的写法应该是这样的:var jq = new $(selector);而jQuery使用了一个小技巧在外部避免了new,在jquery方法内部:if ( window == this ) return new jQuery(selector);
- 2)问:为什么创建一个jQuery对象之后,我们可以这样写$(selector).each(function(index){...});进行遍历操作呢?
答:其实jQuery(selector)方法调用时,在jQuery(selector)方法内部,最后返回的是一个数组:return this.setArray(a);而each方法体内部是一个for循环,在循环体内是这样调用的:method.call(this[ i],i).
- 3)问:为什么jQuery能做到jQuery对象属性/方法/事件的插件式扩展?
答:如果您有一些javasciprt的面向对象方面的知识,就会知道,jQuery.prototype原型对象上的扩展属性/方法和事件,将会给jQuery的对象"扩展".基于这一点,jQuery是这样写的:jQuery.fn = jQuery.prototype.
所以,当我们扩展一个插件功能时,如下:
jQuery.fn.check = function() {
return this.each(function() {
this.checked = true;
});
};
其实就是:
jQuery.prototype.check = function() {
return this.each(function() {
this.checked = true;
});
};
综上所述,jQuery给我们带来了一个简洁方便的编码模型(创建jQuery对象;直接使用jQuery对象的属性/方法/事件),一个强悍的dom元素查找器($),插件式编程接口(jQuery.fn),以及插件初始化的"配置"对象思想.
实现自己的jQuery
XML/HTML代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Untitled Page</title>
- </head>
- <body>
- <div id="d">divvv</div>
- <div id="fsd">fdsf</div>
- </body>
- </html>
- <script type="text/javascript">
- //实现自己的MyQuery框架
- var MyQuery = function(selector){
- if ( window == this ) return new MyQuery(selector);
- //这里只实现dom类型的简单查找,嘿嘿
- var doms = document.getElementsByTagName(selector);
- var arr = [];
- for(var i=0; i<doms.length; i++){
- arr.push(doms.item(i));
- }
- return this.setArray(arr);
- }
- MyQuery.prototype.setArray = function( arr ) {
- this.length = 0;
- [].push.apply( this, arr );
- return this;
- }
- MyQueryMyQuery.fn = MyQuery.prototype;
- var $ = MyQuery;
-
- //插件扩展1)each
- MyQuery.fn.each = function(method){
- for(var i=0,l=this.length; i<l; i++){
- method.call(this[i],i);
- }
- }
- //插件扩展2)show
- MyQuery.fn.show = function(){
- this.each(function(i){
- alert(i+":"+this.id+":"+this.innerHTML);
- });
- }
- //debugger
- $("div").show();
- </script>
Tags: ajax, javascript, php, jquery
JQUERY | 评论:0
| Trackbacks:0
| 阅读:220
Submitted by aming on 2008, March 12, 11:48 AM
1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。
2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3、如何获取jQuery集合的某一项
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性
4、同一函数实现set和get
Jquery中的很多方法都是如此,主要包括如下几个:
$("#msg").html(); //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
$("#msg").text(); //返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>");
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>
$("#msg").height(); //返回id为msg的元素的高度
$("#msg").height("300"); //将id为msg的元素的高度设为300
$("#msg").width(); //返回id为msg的元素的宽度
$("#msg").width("300"); //将id为msg的元素的宽度设为300
$("input").val("); //返回表单输入框的value值
$("input").val("test"); //将表单输入框的value值设为test
$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法
5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式:
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果
$("p").click(function(){alert($(this).html())})
//为每个p元素增加了click事件,单击某个p元素则弹出其内容
6、扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法(通过“$.方法名”调用):
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});
8、操作元素的样式
主要包括以下几种方式:
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class
9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
如:
$("#msg").click(function(){alert("good")}) //为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件:
(1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over,离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});
(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert("Load Success")})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为selected的class。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如:
$("p").trigger("click"); //触发所有p元素的click事件
(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中(添加)删除绑定的事件。
例如:
$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件
10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
11、几个有用的jQuery方法
$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。
如
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于:
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
alert("Item #"+i+": "+tempArr[ i ]);
}
也可以处理json数据,如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
结果为:
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
如:
$.extend(settings, options);
//合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数(合并多项并返回)
$.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
如:
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为:[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为:[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如:$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str):删除字符串两端的空白字符。
如:$.trim(" hello, how are you? "); //返回"hello,how are you? "
12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$("#msg")改为jQuery("#msg")。
如:
jQuery.noConflict();
// 开始使用jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';
Tags: ajax, javascript, php, jquery
JQUERY | 评论:0
| Trackbacks:0
| 阅读:168
Submitted by aming on 2008, March 12, 12:35 AM
翻译整理:Young.J
官方网站: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/)
» 阅读全文
Tags: ajax, jquery
JQUERY | 评论:0
| Trackbacks:0
| 阅读:301
Submitted by aming on 2008, March 12, 12:24 AM
Tags: ajax, jquery
JQUERY | 评论:0
| Trackbacks:0
| 阅读:298
Submitted by aming on 2008, March 11, 10:53 PM
JQuery中的事件(转帖) bind(type,data,fn) 为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。 多数情况下,可以把事件处理器函数定义为匿名函数(见示例一)。在不可能定义匿名函数的情况下,可以传递一个可选的数据对象作为第二个参数(而事件处理器函数则作为第三个参数),见示例二。 返回值:jQuery 参数: type(String)一个事件类型 data(Object)(可选)作为event.data传递给事件处理器函数的额外数据 fn(Function)绑定到事件上的函数 例子: $("p").bind("click", function(){ alert( $(this).text() ); }); 之前:
Hello
结果: alert("Hello") 例子:为事件对象传递一些额外的数据 function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler) 结果: alert("bar") 例子:通过返回false来取消默认的行为并阻止事件起泡 $("form").bind("submit", function() { return false; }) 例子:通过使用preventDefault方法来仅仅取消默认的动作 $("form").bind("submit", function() { return false; }) 例子:通过使用 stopPropagation 方法只阻止事件起泡 $("form").bind("submit", function(event){ event.stopPropagation(); }); blur() 触发每一个匹配元素的blur事件。这个函数会调用执行绑定到blur事件的所有函数。 注意:这个函数不会调用相应元素的blur方法!如果需要通过代码来使一个元素获得焦点,必须使用DOM方法,例如:$("#myinput")[0].blur(); 返回值:jQuery 例子: $("p").blur(); 之前:
Hello
结果: alert('Hello'); blur(fn) 在每一个匹配元素的blur事件中绑定一个处理函数返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的blur事件的一个方法例子: $("p").blur( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
change(fn) 在每一个匹配元素的change事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的change事件的一个方法 例子: $("p").change( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
click() 触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数 返回值:jQuery 例子: $("p").click(); 之前:
Hello
结果: alert('Hello'); click( fn ) 在每一个匹配元素的click事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的click事件的一个方法 例子: $("p").click( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
dblclick( fn ) 在每一个匹配元素的dblclick事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的dblclick事件的一个方法 例子: $("p").dblclick( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
error( fn ) 在每一个匹配元素的error事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的error事件的一个方法 例子: $("p").error( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
focus() 触发每一个匹配元素的focus事件。这个函数会调用执行绑定到focus事件的所有函数。 注意:这个函数不会调用相应元素的focus方法!如果需要通过代码来使一个元素获得焦点,必须使用DOM方法,例如:$("#myinput")[0].focus(); 返回值:jQuery 例子: $("p").focus(); 之前:
Hello
结果: alert('Hello'); focus( fn ) 在每一个匹配元素的focus事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的focus事件的一个方法 例子: $("p").focus( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
hover( over, out ) 一个模仿悬停事件(鼠标移动到一个对象上面,及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬念”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。 返回值:jQuery 参数: over(Function)鼠标移动元素上触发的函数 out(Function)鼠标移出元素出发的函数 例子: $("p").hover(function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }); keydown( fn ) 在每一个匹配元素的keydown事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)在每一个匹配元素的keydown事件中绑定的处理函数 例子: $("p").keydown( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
keypress( fn ) 在每一个匹配元素的keypress事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)在每一个匹配元素的keypress事件中绑定的处理函数 例子: $("p").keypress( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
keyup( fn ) 在每一个匹配元素的keyup事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)在每一个匹配元素的keyup事件中绑定的处理函数 例子: $("p").keyup( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
load( fn ) 在每一个匹配元素的load事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的load事件的一个方法 例子: $("p").load( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
mousedown( fn ) 在每一个匹配元素的mousedown事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的mousedown事件的一个方法 例子: $("p").mousedown( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
mousemove( fn ) 在每一个匹配元素的mousemove事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的mousemove事件的一个方法 例子: $("p").mousemove( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
mouseout( fn ) 在每一个匹配元素的mouseout事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的mouseout事件的一个方法 例子: $("p").mouseout( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
mouseover( fn ) 在每一个匹配元素的mouseover事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的mouseover事件的一个方法 例子: $("p").mouseover( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
mouseup( fn ) 在每一个匹配元素的mouseup事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的mouseup事件的一个方法 例子: $("p").mouseup( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
one( type, data, fn ) 为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回 false。 多数情况下,可以把事件处理器函数定义为匿名函数(见示例一)。在不可能定义匿名函数的情况下,可以传递一个可选的数据对象作为第二个参数(而事件处理器函数则作为第三个参数),见示例二。 返回值:jQuery 参数: type(String)一个事件类型 data(Object)(可选)作为event.data传递给事件处理器函数的额外数据 fn(Function)绑定到事件上的函数 例子: $("p").one("click", function(){ alert( $(this).text() ); }); 之前:
Hello
结果: alert("Hello") ready(fn) 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。 简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。 请确保在元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。 可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。 返回值:jQuery 参数: fn(Function)当DOM准备好的时候执行的方法 例子: $(document).ready(function(){ Your code here... }); 例子: Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias. jQuery(function($) { // Your code using failsafe $ alias here... }); resize( fn ) 在每一个匹配元素的resize事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的resize事件的一个方法 例子: $("p").resize( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
scroll( fn ) 在每一个匹配元素的scroll事件中绑定一个处理函数 返回值:jQuery 参数: fn(Function)绑定到每一个匹配元素的scroll事件的一个方法 例子: $("p").scroll( function() { alert("Hello"); } ); 之前:
Hello
结果:
Hello
select() 触发每一个匹配元素的select事件。这个函数会调用执行绑定到select事件的所有函数,并且在匹配元素上调用浏览器的默认动作。这个默认的动作可以通过从绑定到select事件的方法中返回false避免。 返回值:jQuery 例子: $("p").select(); 之前:
Hello
结果: alert('Hello');
Tags: ajax, jquery
JQUERY | 评论:0
| Trackbacks:0
| 阅读:197