- 浏览: 796807 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
aliang032:
文章很赞,有几个缺点:1、是你的服务端是单进程的,如果进程挂了 ...
php socket编程实例详解 -
最佳蜗牛:
最佳蜗牛 写道是不是缺少了一个toolbar.Realize( ...
wxPython写的简易编辑器(原创) -
最佳蜗牛:
是不是缺少了一个toolbar.Realize()?
wxPython写的简易编辑器(原创) -
最佳蜗牛:
2.7.3版本里不能显示工具栏的图标
wxPython写的简易编辑器(原创) -
sogo6:
我怎么安装的也不行? 裸奔啊。。。。。
让TextMate支持中文显示
初步接触jQuery,其实是在06年9月份,可当时没有太在意jQuery的简洁和强大(其实是自己懒惰,没有工作压力,不愿认真学习...),所以,现在还是了解的一塌糊涂,可是,没办法啊,新工作中需要使用jQuery来实现ajax的效果,只得认真study了...
这个指南是对jquery库的一个总的介绍,当然你也被要求具备javascript和DOM(文档对象模型)的相关知识。该指南试图解释一些必须的细节。它涵盖了一个简单的”hello world”实例,选择器和事件基础,AJAX,FX以及官方插件。
这个指南并没有”click me”,而是依靠”copy me”(复制/粘贴代码)来测试例子,拷贝一个例子,看它是怎么做的,然后根据你自己的想法修改它。
目录:
1. 安装
2. Hello jQuery (look like hello world)
3. 用选择器(selector)和事件(events)
4. 用ajax
5. 用FX(各种效果)
6. 用tablesorter 插件
7. 书写你自己的插件
8. 下一步(展望)
1.安装
开始之前,我们需要一个jquery库的拷贝(js文件)。最新的版本你能在这里下载。这个指南也提供了一个基本的“开始工具包”,你可以在下面地址下载到。
Jquery starterkit
下载该文件并且解压缩。用你喜欢的编辑器(比如:记事本)打开starterkit.htm和custom.js,并在浏览器(IE,firefox, netscape)打开starterkit.htm
现在我们可以开始类似于“hello world”的例子了。
2.Hello ,jQuery
作为我们要做的每一件事情,需要确定只要用到了dom,那么你就应该为当前文档注册一个ready 事件
(关于ready和onload的区别,大家可以参考<小蛀翻译的"jQuery简单指南"部分>,在这里就不解释了)
$(document).ready(function() {
// do stuff when DOM is ready
});
在函数块里边放一个alert并没多少意义,因为一个alert并不需要DOM被加载。所以你可以做一些更复杂的事情来用到dom,比如下面当你click一个的时候显示一个alert
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
所以只要你点标签,alert就会显示出来。
让我们看一看都做了些什么吧。$(“a”)是一个jquery的选择器(selector),它能选择所有的元素(dom对象)。$是一个jquery里 对于类的别名,因此$()构造了一个新的jquery对象。Click()函数是对象里的有个方法。它绑定了对所有元素的click事件并且当事件发生时 执行提供的函数。
类似于下面的代码:
Link
这个区别是显而易见的:我们不需要为单一的对象写click事件了。我们把html(结构)和js(行为)分开了就象用CSS分开一样。
现在,我们已经对选择器和事件有了一定的认识了。
3.选择器(selector)和事件(events)
Jquery提供了2个方法来选择DOM元素。第一个方法是用CSS和XPATH(比如:$(“div > ul a”))。第二种方法是用jQuery对象的各种方法。当然两种方法也可以结合。
我们在starterkit里选择和修改第一个order list来测试这些选择器。
开始之前,我们需要选择列表本身。这个列表有一个ID=” orderedlist”,在经典javascript里,你必须这样用:document.getElementById("orderedlist"),但是在jQuery里,我们只需要做这些:
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
这个starterkit提供了一个如何加CSS样式 class.red。因此,当你刷新starterkit.htm的时候,你会发现第一个list背景变成红色,而第二个list没有被改变。
现在让我们加更多的classes到list的子元素:
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
上面的例子选择了id为orderedlist的所有子标签li,并且在他们上面加了一个class.blue的样式。
现在来点更复杂的。当鼠标移到li元素的时候,增加和删除一个Class样式:
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
你在这里可以找到很多CSS和XPATH的语法。
更多的例子和表达式你也可以在这里找到。
对于每个onxxx事件,象onclick,onchange,onsubmit等,都有一个和jquery同意义的对应的事件,而其他事件,象ready,hover等,都是为某个方法提供。
你能在visual jquery里发现一个完整的事件列表。
还有种写法是jquery特有的(chain),就是把一个选择器的所有的事件并排列出来,中间用”.”隔开:
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
一个你经常面对的任务是在事件里边执行函数。比如这样
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});
这个代码只是ID为form的表单执行reset()方法。但是万一你有很多个表单需要执行呢?那么你可以这样写:
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
另外一个你必须面对的问题是选择某个或某几个元素。Jquery提供了filter()和not()方法。当filter()是过滤一些适合filter ()表达式元素,而not()是删除和not()表达式相反的元素。当你想选择所有的li元素,并且不包含ul子元素呢?你可以这样写:
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});
结果是除了包含ul子元素的li,其他所有的li都得到了一个border.可能你也想选择有name属性的anchor():
$(document).ready(function() {
$("a[@name]").background("#eee");
});
要匹配属性的值(value),我们可以用”*=”来代替”=”
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
直到现在,我们已经学到了很多选择器的使用。这里还有种情况你需要选择前一个或后一个元素。想一想starterkit.htm里的FAQ,当你click问题的时候,它是怎么实现隐藏和显示的呢?代码是这样的:
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
因为上面只有唯一一个选择器(#faq),我们用chain来减少代码的长度和提高代码的易读性和表现性.这里要说明一下,如果按原文翻译过来我想很多人都看不懂,感觉他自己也没怎么说明白。我说说我自己的理解:
‘dd’和‘dt’都是#faq的子元素,find()的作用就是找到它的子元素。End()应该和next()搭配的,end()实质上是把 ‘dd’过滤了,也就是next()的时候实质上是参考的’dt’。这样每个’dt’的next就是‘dd’,挺容易实现的。要是还不明白你可以边参考边 照着做一遍。
除了同属元素外,我们也可以选择父元素:
$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});
很容易看懂,p就是a的父元素。
让我们回顾一下前面所学的,jquery有很多地方能使代码更简洁因此容易读和保持。下面的就是对$(document).ready(callback)符号的一个简单描述
$(function() {
// code to execute when the DOM is ready
});
好吧,让我们来写个hello , world ,来结束第一天的课程,相信你一定会写了吧
$(function() {
$("a").click(function() {
alert("Hello world!");
});
});
现在,基础已经掌握了,下次我们将探索一下Jquery的其他方面(ajax)
4.Rateing:使用AJAX
在这部分我们写了一个简单的ajax应用,它的目的是允许用户rate(评估)一些事情,就象youtube.com一样.
我们需要写一些代码.例子中用到了一个php文件来读取"rating"的参数和返回rating个数(count)和平均rating(array_sum/count).你可以看一看starterkit里边的rate.php代码.
我们需要这个例子工作在ajax上,因此我们用jquery写一个必要的标签并且把它追加到一个ID名为”rating”的div容器里边.代码如下:
$(document).ready(function() {
// generate markup
var ratingMarkup = ["Please rate: "];
for(var i=1; i <= 5; i++) {
ratingMarkup[ratingMarkup.length] = "" + i + " ";
}
// 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”的div容器里.第一次加载页面后,所有的 元素都包含在div容器里,然后再加上个click事件。当被click的时候,一个post请求被发送到rate.php文件里,并 且通过rating: $(this).html()传递参数,经过处理PHP文件处理后把结果作为xml写进div容器
如果你电脑上没装php的运行环境。你可以在这里看到这个例子的效果。
对与一个不用javascript也能工作的rating例子,你可以访问softonic.de
你也能在这里或者在visual jquery里边发现更多的关于ajax的帮助文档。
当靠AJAX加载内容的时候,一个非常普遍的问题是:当加载事件句柄到你文档的时候也需要将该事件应用与你加载的内容里,所以你不得不在内容加载之后提供这些事件句柄。为了防止代码重复,你应该委派一个函数。例如:
// lets use the shortcut
$(function() {
var addClickHandlers = function() {
$("a.clickMeToLoadContent").click(function() {
$("#target").load(this.href, addClickHandlers);
});
};
addClickHandlers();
});
上面当DOM准备好后addClickHandlers只应用了一次,并且每次用户点一个样式为class. clickMeToLoadContent的时候内容已经完成加载了。
请主义函数addClickHandlers被定义成了一个局部变量,而非全局函数(function addClickHandlers() {...}).。请坚持这种写法,因为它可以避免全局变量定义过多引起的冲突。
另外一个非常普遍的AJAX回调问题是参数。假设你需要传递一个额外的参数,那么把回调封装到一个函数里能够实现,如下:
// 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]); });
5.各种动态效果的实现:用FX
Jquery能实现简单的动态效果,比如显示(show)和隐藏(hide)
// $(document).ready(function() {
$("a").toggle(function() {
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});
});
发挥你的想像,你能用aninate()创建任意的组合:
// $(document).ready(function() {
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
});
在interface 插件收集里,你能发现很多奇特的效果。这个站点也提供一些演示。
6.分类:用表格分类插件
该插件是运行在客户端的,所以你只要在你文件里包含jquery和插件的文件并且写出你想如何分类。试试下面的例子。在starterkit.htm里添加下面一行代码:
<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>
把插件包含进去后,你还需要在custom.js里写
$(document).ready(function() {
$("#large").tableSorter();
});
点击表格的头部看看它是怎么工作的。
这个表格也能够用高亮隔行显示来实现斑马线效果。代码如下:
$(document).ready(function() {
$("#large").tableSorter({
stripingRowClass: ['odd','even'], // Class names for striping supplyed as a array.
stripRowsOnStartUp: true // Strip rows on tableSorter init.
});
});
这里有更多的例子和演示在tablesorter homepage
当你用jquery久了之后会发现把你的代码(功能模块)作为插件封装在一个包是多么有用,不仅你自己或你的公司能重用这些代码(功能模块),也能在一些社区里共享。下面我们将来看看如何构造一个插件!
7.插件:写你自己的jquery插件
其实为jquery写插件是很简单的。如果你按照下面的规则,整合你的插件将非常容易。
1.给你的插件命名。让我们叫它”foobar”
2.创建一个文件名为:jquery.[你的插件名].js 比如:jquery.foobar.js
3.扩展jquery的内部对象,创建一个或多个插件的方法,比如:
jQuery.fn.foobar = function() {
// do something
});
4.用帮助函数创建一个对象(可选)
jQuery.fooBar = {
height: 5,
calculateBar = function() { ... },
checkDependencies = function() { ... }
};
然后你能在你的插件里边调用这些帮助函数
jQuery.fn.foobar = function() {
// do something
jQuery.foobar.checkDependencies(value);
// do something else
};
5.创建一个用户能修改的默认的设置(可选)
jQuery.fn.foobar = function(options) {
var settings = {
value: 5,
name: "pete",
bar: 655
};
if(options) {
jQuery.extend(settings, options);
}
};
然后你能用下面的默认调用该插件(有选项)
$("...").foobar({
value: 123,
bar: 9
});
如果你要发布你的插件,你应该提供一些例子和演示。
现在你有一个基本的认识了吧,让我们运用自己的知识和创造力来写我们自己的插件
有很多朋友操作表单这样来结束代码:
$("input[@type='checkbox']").each(function() {
this.checked = true;
// or, to uncheck
this.checked = false;
// or, to toggle
this.checked = !this.checked;
});
请注意,无论什么时候,当你的代码出现each时,你应该重写上面的代码来构造一个插件如下:
$.fn.check = function() {
return this.each(function() {
this.checked = true;
});
};
于是插件可以这样用:
$("input[@type='checkbox']").check();
现在你也能写一些插件为uncheck()和togglecheck().但是我们可以扩展插件来接收一些选项.
$.fn.check = function(mode) {
var mode = mode || 'on'; // if mode is undefined, use 'on' as default
return this.each(function() {
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};
然后用户能够这么使用:
$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');
8.下一步(展望)
如果你计划学习更多的javascript,你应该考虑用firefox的firebug插件来调试你的代码.它为javascript的调试提供了一个控制台,一个调试器和其他有用的东西.
如果你有任何问题不能解决,请给我们发邮件jQuery mailing list.
本文转载于Jquery中国小组
- jquery_api.rar (104.7 KB)
- 描述: jquery api中英文对照手册
- 下载次数: 58
发表评论
-
ld: symbol(s) not found for architecture x86_64
2013-03-08 10:58 3795GraphicsMagic 有一个Nodejs的客户端: ... -
使用JavaScript写的操作系统和输入法程序,太强了!
2008-03-22 18:09 5673JavaScript是一门客户端的脚本语言,但是你千万 ... -
一行代码加速IE的JavaScript的方法
2007-12-30 14:07 3356将下列代码加在JavaScript的最前面 /*@cc_on ... -
jQuery1.2的选择器汉化
2007-12-12 13:41 1483基本选择器 #myid 返回: ... -
css样式控制布局的定位机制
2007-07-28 14:04 2232在网页设计时,控 ... -
javascript中setTimeout 和setInterval的区别
2007-07-26 20:04 10165window对象有两个主要的定时方法,分别是setT ... -
javascript继承机制的实现(三)
2007-07-25 01:18 2711使用“原型链”来 ... -
javascript继承机制的实现(二)
2007-07-25 00:52 2291接上篇继续. 由于对象冒充方式实现继承机制容 ... -
javascript继承机制的实现(一)
2007-07-24 23:58 3791真正的面向对象语言必须支持继承机制,即一个类能够重用( ... -
javascript的闭包(closure)概念
2007-07-23 11:44 2494javascript闭包,听起来,感觉很陌生或迷惑,但 ... -
javascript定义类或对象之动态原型方法
2007-07-23 00:14 3296在javascrip定义类和对象有很多种方法,但是,对 ... -
javascript定义类或对象之混合的构造函数与原型方式
2007-07-22 23:45 3109在javascript中使用预定义对象的能力只是面向对 ... -
javascript字符串连接性能的问题
2007-07-22 22:31 6304今天看了javascript高级程序设计,其中注意到字 ... -
jQuery中操作元素节点appendTo()与prependTo()的区别
2007-07-19 10:32 7404刚看了jquery.api手册.发现了两个容易迷惑的方 ... -
CSS:IE与Firefox的CSS兼容大全(转)
2007-07-18 17:36 1775来源:http://hi.baidu.com/%DA%F7%B ... -
IE与firefox在Javascript上的区别(转)
2007-07-18 14:41 1183以下以 ie 代替 internet explorer,以 ... -
jQuery中ajax发送服务器的data问题
2007-07-15 23:17 19765前天在使用jQuery作 ... -
JS 自定义函数时,如何定义参数默认值
2007-05-25 16:27 17706今天与同事一起看了一个javscript定义函数问题,如何在定 ...
相关推荐
jQuery用户界面库学习指南
关于JQuery学习的提纲指导,带有小例子,好理解。
让您学习有目标,有方向,常用的 以及最快的掌握jQuery,一周基本掌握jQuery,之后多用自然就越精通,为啥0积分就是因为考虑到好多人没注册csdn没积分
Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记...本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点,为读者提供了一个系统的Jquery学习指南。
jQuery用户界面库学习指南_韦尔曼著
**jQuery 学习指南** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和Ajax交互。通过 jQuery,开发者能够更高效地编写跨浏览器的 JavaScript 代码,使得网页交互更加生动有趣。 ...
**jQuery学习资料大全** 在IT领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码,使得网页交互和DOM操作变得更加便捷。这份“jQuery学习资料大全”提供了丰富的资源,无论你是初学者还是有...
本压缩包包含的“精选jQuery学习资料”是针对这一强大的库进行深入学习的重要资源。 首先,我们来看看`jquery-1.2.6.js`,这是jQuery库的1.2.6版本的源代码文件。这个版本的历史悠久,但依然具有学习价值,因为它...
资源中的 "[大家网]jQuery基础教程[www.TopSage.com].pdf" 是一本详细的jQuery学习指南,通常涵盖了以下关键知识点: 1. **jQuery简介**:介绍jQuery的基本理念和它如何简化JavaScript编程。 2. **jQuery选择器**:...
**jQuery学习指南** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。自2006年发布以来,jQuery已经成为了前端开发的标准工具之一,尤其对于初学者来说,它提供了...
《jQuery用户界面库学习指南》是一本专注于帮助开发者掌握jQuery UI库的实用书籍。jQuery UI是基于jQuery JavaScript库的一个扩展,提供了丰富的用户交互组件和视觉效果,极大地提升了Web应用程序的用户体验。这本书...
**jQuery学习指南** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。在“jQuery学习-15day”这个主题中,我们将深入探讨如何在15天内掌握jQuery的核心概念和技术。 ...
**jQuery学习指南** jQuery是一款广泛应用于网页开发的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理、动画制作以及Ajax交互变得更加容易。这个“jQuery study”资料包包含了从基础到...
总的来说,《jQuery权威指南(第2版)》是开发者深入学习jQuery技术,特别是jQuery Mobile的宝贵资源,通过本书,读者不仅能掌握核心技术和新特性,还能了解实际项目开发中的各种策略和技巧,从而成为jQuery开发的专家...
《JQuery权威指南源代码》是一本深入解析jQuery库的参考书籍,其源代码提供了丰富的实例和示例,帮助读者更好地理解和应用jQuery。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...
书名:jQuery权威指南(系统介绍jQuery方方面面,囊括118个实例和2个综合案例,实战性强) 作者:陶国荣 著 书号:978-7-111-32543-7 定价:59.00元 出版社:机械工业出版社华章公司 出版时间:2011年1月 编辑推荐:...