Jquery

jQuery入指南教程
个指南是一个jQuery的明，要求者了解HTML(DOM)和CSS的一些常。它包括了一个的Hel
内容提要
安装
Hello jQuery
Find me:使用器和事件
Rate me:使用AJAX
Animate me(我生起来):使用FX
Sort me(将我有序化):使用tablesorter插件(表格排序)
Plug me:制作您自己的插件
Next steps(下一)
安装
一始,我需要一个jQuery的,最新的下可以到里找到。个指南提供一个基本包含例的包供下
下：jQuery Starterkit
(者Keel注:一定要下个包，光看文章不践肯定是不行的。)
下后解，然后用你最喜的文本器打starterkit.html和custom.js两个文件。(者Keel
在,我就已做好了一切准来行个著名的"Hello world"例子.
本章的相接:
Starterkit
jQuery Downloads
Hello jQuery
在做所有事情之前,我要jQuery取和理文档的DOM,必尽可能快地在DOM入后始行事件,所
$(document).ready(function() {
// do stuff when DOM is ready
});放一个的alert事件在需要等DOM完成入,所以我把任稍稍一点:在点任何一个接
$("a").click(function() {
alert("Hello world!");
});
});在你点面的一个接都会触个"Hello world"的提示。
(者Keel注:照此代修改custom.js并保存,然后用器打starterkit.html察效果。)
我看一下些修改是什含。$("a") 是一个jQuery器(selector),在里，它所有的a
里有一个行相似功能的代:
<a href="#" onclick="alert('Hello world')">Link</a>不同之很明,用jQuery不需要在个a
Find me:使用器和事件
jQuery提供两方式来html的elements，第一是用CSS和Xpath器合起来形成一个字符串来
了一下些器，我来着在我starterkit.html中并修改第一个ordered list.
一始，我需要个list本身，个list有一个ID叫“orderedlist”，通常的javascript写法是do
$("#orderedlist").addClass("red");
});里将starterkit中的一个CSS式red附加到了orderedlist上(者Keel注：参考包中的css目
在，我添加一些新的式到list的子点.
$("#orderedlist > li").addClass("blue");
});，所有orderedlist中的li都附加了式"blue"。
在我再做个一点的，当把鼠放在li象上面和移行式切，但只在list的最后一个e
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});有大量的似的CSS和XPath例子，更多的例子和列表可以在里找到。（者Keel注：入看此文
一个onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等价表示方法（者Keel注：j
你可以在Visual jQuery找到全部的事件列表，在Events目下.
用些器和事件你已可以做很多的事情了，但里有一个更的好！
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});find() 你在已的element中作条件找,因此 $("#orderedlist).find("li") 就像 $("#ord
另一个常碰到的任是在没有被jQuery覆盖的DOM元素上call一些方法，想像一个在你用AJAX方式成功
// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});
});（者Keel注：里作者将form的id也写成了form，源文件有<form id="form">，是非常不好的写
上面个代了所有的"form"元素，并在其中的第一个上call了一个reset()。如果你有一个以上的
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});（者Keel注：注意一定要自将些代写在custom.js中并在starterkit.html上效果才能
你在点Reset接后，就了文档中所有的form元素，并它都行了一次reset()。
有一个你可能要面的是不希望某些特定的元素被。jQuery 提供了filter() 和not() 方法来
$("li").not(":has(ul)").css("border", "1px solid black");//原文$("li").not("[ul
]").css("border", "1px solid black");
});个代了所有的li元素，然后去除了有ul子元素的li元素。刷新器后，所有的li元素都有
（者Keel注：注意体会方便之极的css()方法，并再次提醒必察效果，比方个CS
上面代中的[expression] 法是从XPath而来，可以在子元素和属性(elements and attributes)上用
$("a[name]").css("background-color","#eee"); //原文“$("a[@name]").background("#ee
e");”在jQuery1.2及以上版本中,@符号去除,background方法被css方法取代
});个代所有有name属性的接加了一个背景色。（者Keel注：个色太不明了，建写
更常的情况是以name来接，你可能需要一个有特点href属性的接，在不同的器下
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/
gallery
});
});到在止，器都用来子元素或者是元素。另外有一情况是上一个或者下一个
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});里我用了一些式表达法来减少代量，而且看上去更直更容易理解。像'#faq' 只了一次
在点事件中的，我用 $(this).next() 来找到dt下面接的一个dd元素，我可以快速地在
（者Keel注：个例子真是太酷了，FAQ中的答案可以收！从利用next()的思路到些效果都有
除了同的元素外，你也可以父的元素。可能你想在用鼠移到文章某段的某个接，
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});效果可以看到，移到文章某段的接，它所在的段全用上highlight式，移走之后又恢原
（者Keel注：highlight是core.css中定的式，你也可以改它，注意里有第二个function()
在我之前我先来看看一： jQuery会代得更短从而更容易理解和，下面是$(docu
$(function() {
// code to execute when the DOM is ready
});用到我的Hello world例子中，可以:
$(function() {
$("a").click(function() {
alert("Hello world!");
});
});在，我手上有了些基的知，我可以更一的探索其它方面的西，就从AJAX始！
本章的相接:
jQuery API documentation
Visual jQuery - A categorized browsable API documentation
jQuery Expressions: CSS
jQuery Expressions: XPath
jQuery Expressions: Custom
jQuery Special Events
jQuery DOM Traversing
Rate me:使用AJAX
在一部分我写了一个小小的AJAX用，它能rate一些西（Keel注：就是某些西投票），就
首先我需要一些服器端代，个例子中用到了一个PHP文件，取rating参数然后返回rating数
然些例子也可以不使用AJAX来，但示我不会那做，我用jQuery生成一个DIV容器，ID是
// generate markup
var ratingMarkup = ["Please 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"容器中，当其中一个接被点，接
如果你没有一个安装PHP的webserver，你可以看看个在的例子.
不使用javascript的例子可以 softonic.de 点 "Kurz bewerten!"
更多的AJAX方法可以从里找到，或者看看API文档下面的AJAX filed under AJAX.
（者Keel注：个在例从国内是比慢的，点后要等一会儿才能看到果，可以考它
一个在使用AJAX入内容常生的是：当入一个事件句柄到一个HTML文档，需要在入内
// lets use the shortcut
$(function() {
var addClickHandlers = function() {
$("a.clickMeToLoadContent").click(function() {
$("#target").load(this.href, addClickHandlers);
});
};
addClickHandlers();
});在，addClickHandlers只在DOM入完成后行一次，是在用次点具有clickMeToLoadCont
注意addClickHandlers函数是作一个局部量定的，而不是全局量(如：function addClickHan
另一个常的是于回(callback)的参数。你可以通一个外的参数指定回的方法，的
// 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后，我可
本章的相接:
jQuery AJAX Module
jQuery API: Contains description and examples for append and all other jQuery me
thods
ThickBox: A jQuery plugin that uses jQuery to enhance the famous lightbox
Animate me(我生起来):使用FX
一些的效果可以使用 show() 和 hide()来表:
$("a").toggle(function() {
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});
});你可以与 animate()合起来建一些效果,如一个的滑效果:
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
});很多不的效果可以interface plugin collection. 个站点提供了很多demos和文档
些效果插件是位于jQuery插件列表的前面的，当然也有很多其他的插件，比如我下一章到的表格排
本章的相接:
jQuery FX Module
Interface plugin
Sort me(将我有序化):使用tablesorter插件(表格排序)
个表格排序插件能我在客端按某一列行排序，引入jQuery和个插件的js文件，然后告插件
要个例子，先在starterkit.html中加上像下面一行的代：
<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>然后可以用不着
$("#large").tableSorter();
});在点表格的第一行head区域，你可以看到排序的效果，再次点会按倒来的序行排列。
个表格可以加一些突出示的效果，我可以做一个隔行背景色（斑）效果:
$("#large").tableSorter({
stripingRowClass: ['odd','even'], // Class names for strip
ing supplyed as a array.
stripRowsOnStartUp: true // Strip rows on tableSo
rter init.
});
});于个插件的更多例子和文档可以在 tablesorter首找到.
几乎所有的特件都是用的:先include插件的js文件,然后在某些元素上使用插件定的方法,当然也有
常更新的插件列表可以从jQuery官方站 on the jQuery site找到.
当你更常地使用jQuery,你会将你自己的代打包成插件是很有用的,它能方便地你的公司或
本章的相接:
Plugins for jQuery
Tablesorter Plugin
Plug me:制作自己的插件
写一个自己的jQuery插件是非常容易的,如果你按照下面的原来做,可以其他人也容易地合使用你的
你的插件取一个名字,在个例子里面我叫它"foobar".
建一个像的文件:jquery.[yourpluginname].js,比如我建一个jquery.foobar.js
建一个或更多的插件方法,使用承jQuery象的方式,如: jQuery.fn.foobar = function() {
// do something
};可的:建一个用于帮助明的函数,如: jQuery.fooBar = {
height: 5,
calculateBar = function() { ... },
checkDependencies = function() { ... }
};你在可以在你的插件中使用些帮助函数了:
jQuery.fn.foobar = function() {
// do something
jQuery.foobar.checkDependencies(value);
// do something else
};可的l:建一个默的初始参数配置,些配置也可以由用自行定,如: jQuery.fn.foobar = fu
var settings = {
value: 5,
name: "pete",
bar: 655
};
if(options) {
jQuery.extend(settings, options);
}
};在可以无需做任何配置地使用插件了,默的参数在此生效:
$("...").foobar();或者加入些参数定:
$("...").foobar({
value: 123,
bar: 9
});如果你release你的插件, 你提供一些例子和文档,大部分的插件都具些良好的参考文档.
在你有了写一个插件的基,我着用些知写一个自己的插件.
很多人着控制所有的radio或者checkbox是否被中,比如:
$("input[type='checkbox']").each(function() {
this.checked = true;
// or, to uncheck
this.checked = false;
// or, to toggle
this.checked = !this.checked;
});注：在jQuery1.2及以上版本中，所有checkbox使用 input:checkbox , 因此以上代第一行
$('input:checkbox').each(function() {
无何候，当你的代出each，你重写上面的代来构造一个插件,很直接地:
$.fn.check = function() {
return this.each(function() {
});
};个插件在可以用:
$('input:checkbox').check();
注：在jQuery1.2及以上版本中，所有checkbox使用 input:checkbox 原文：$("input[type=
在你可以写出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':
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};里我置了默的参数,所以将"on"参数省略也是可以的,当然也可以加上"on","off", 或 "toggl
$("input[type='checkbox']").check();
$("input[type='checkbox']").check('on');
$("input[type='checkbox']").check('off');
$("input[type='checkbox']").check('toggle');如果有多于一个的参数置会稍稍有点,在使用
从上一章的tablesorter插件用法我可以看到,既可以省略所有参数来使用或者通一个 key/value
作一个,你可以着将第四章的功能重写一个插件.个插件的骨架是像的:
$.fn.rateMe = function(options) {
var container = this; // instead of selecting a static container with $(
"#rating"), we now use the jQuery context
var settings = {
url: "rate.php"
// put more defaults here
// remember to put a comma (",") after each pair, but not after
the last one!
};
if(options) { // check if options are present before extending the setti
ngs
$.extend(settings, options);
}
// ...
// rest of the code
// ...
return this; // if possible, return "this" to not break the chain
});Next steps(下一)
如果你想做更好的javascript,建你使用一个叫 FireBug的firefox插件. 它提供了断点(比al
如果你有未解决的，或者新的想法与建，你可以使用jQuery的件列表 jQuery mailing list.
于个指南的任何事情，你可以写mail作者或者表在他的日志：blog.
于个指南的翻任何事情，你可以写mail我.或者在 BLOG中留言.

Jquery

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jquery

Uploaded by

Copyright:

Available Formats

jQuery入指南教程

You might also like