jQuery入门

我们走在JAVA的光明大道上 — Sun, 09 Sep 2007 01:52:00 GMT

jQuery入门�W�一�?/span>

指南�Q?�Q�用jquery开始吧

�q�个指南是对jquery库的一个�ȝ��介绍�Q�当然你也被要求具备javascript和DOM�Q�文档对象模型）的相关知识。该指南试图解释一些必��ȝ��l�节。它�늛�了一个简单的”hello world”实例�Q�选择器和事�g基础�Q�AJAX�Q�FX以及官方插�g�?br />
�q�个指南�q�没�?#8221;click me”�Q�而是依靠”copy me”�Q�复�?�_�脓代码�Q�来��试例子�Q�拷贝一个例子，看它是怎么做的�Q�然后根据你自己的想法修改它�?br />
目录�Q?br /> 1�Q?nbsp; 安装
2�Q?nbsp; Hello jQuery (look like hello world)
3�Q?nbsp; 用选择�?selector)和事�?events)
4�Q?nbsp; 用ajax
5�Q?nbsp; 用FX(各种效果)
6�Q?nbsp; 用tablesorter 插�g
7�Q?nbsp; 书写你自��q��插�g
8�Q?nbsp; 下一步（展望�Q?br />

1.安装
开始之前，我们需要一个jquery库的拯��(js文�g)。最新的版本你能�?a target="_blank">�q�里下蝲。这个指南也提供了一个基本的“开始工具包”�Q�你可以在下面地址下蝲到�?br />
Jquery starterkit

下蝲该文件�ƈ且解压羃。用你喜�Ƣ的�~�辑器（比如�Q�记事本�Q�打开starterkit.htm和custom.js�Q��ƈ在浏览器�Q�IE�Q�firefox, netscape�Q�打开starterkit.htm
现在我们可以开始类��g��“hello world”的例子了�?br />
2.Hello ,jQuery
作�ؓ我们要做的每一件事情，需要确定只要用��C��dom,那么你就应该为当前文档注册一个ready 事�g
(关于ready和onload的区别，大家可以参考＜��蛀��译�?jQuery��单指�?部分�Q�，在这里就不解释了)

$(document).ready(function() {
  // do stuff when DOM is ready
});

在函数块里边放一个alert�q�没多少意义�Q�因��Z��个alert�q�不需要DOM被加载。所以你可以做一些更复杂的事情来用到dom�Q�比如下面当你click一�?lt;a>的时候显�C�Z��个alert
$(document).ready(function() {
$("a").click(function() {
      alert("Hello world!");
});
});

所以只要你�?lt;a>标签�Q�alert��׃��昄��出来�?br /> 让我们看一看都做了些什么吧�?(“a”)是一个jquery的选择器（selector�Q?它能选择所有的元素�Q�dom对象�Q��?是一个jquery里对于类的别名，因此$()构造了一个新的jquery对象。Click()函数是对象里的有个方法。它�l�定了对所有元素的click事�g�q�且当事件发生时执行提供的函数�?br /> �c�M��于下面的代码�Q?br /> Link
�q�个区别是显而易见的�Q�我们不需要�ؓ单一的对象写click事�g了。我们把html(�l�构)和js�Q�行为）分开了就象用CSS分开一栗��?br /> 现在�Q�我们已�l�对选择器和事�g有了一定的认识了�?br />
3.选择�?selector)和事�?events)
Jquery提供�?个方法来选择DOM元素。第一个方法是用CSS和XPATH�Q�比如：$(“div > ul a”)�Q�。第二种�Ҏ��是用jQuery对象的各�U�方法。当然两�U�方法也可以�l�合�?br /> 我们在starterkit里选择和修改第一个order list来测试这些选择器�?br /> 开始之前，我们需要选择列表本��n。这个列表有一个ID=” orderedlist”�Q�在�l�典javascript里，你必��这��L��Q�document.getElementById("orderedlist"),但是在jQuery里，我们只需要做�q�些�Q?br /> $(document).ready(function() {
$("#orderedlist").addClass("red");
});

�q�个starterkit提供了一个如何加CSS样式  class.red。因此，当你��h��starterkit.htm的时候，你会发现�W�一个list背景变成�U�色�Q�而第二个list没有被改变�?br /> 现在让我们加更多的classes到list的子元素�Q?br /> $(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});

上面的例子选择了id为orderedlist的所有子标签li,�q�且在他们上面加了一个class.blue的样式�?br /> 现在来点更复杂的。当鼠标�U�d��li元素的时候，增加和删除一个Class样式�Q?br /> $(document).ready(function() {
$("#orderedlist li:last").hover(function() {
      $(this).addClass("green");
}, function() {
      $(this).removeClass("green");
});

你在�q�里可以扑ֈ�很多CSS和XPATH的语法�?br /> 更多的例子和表达式你也可以在�q�里扑ֈ��?br /> 对于每个onxxx事�g�Q�象onclick,onchange,onsubmit�{�，都有一个和jquery同意义的对应的事�Ӟ��而其他事�Ӟ��象ready,hover�{�，都是为某个方法提供�?br /> 你能在visual jquery里发��C��个完整的事�g列表�?br />
�q�有�U�写法是jquery�Ҏ��的（chain�Q�，��是把一个选择器的所有的事�g�q�排列出来，中间�?#8221;.”隔开�Q?br /> $(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
      $(this).html( $(this).html() + " BAM! " + i );
});
});

一个你�l�常面对的�Q务是在事仉��Ҏ��行函数。比如这�?br /> $(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
      $("#form")[0].reset();
});
});

�q�个代码只是ID为form的表单执行reset()�Ҏ��。但是万一你有很多个表单需要执行呢�Q�那么你可以�q�样写：
$(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元素�Q��ƈ且不包含ul子元素呢�Q�你可以�q�样写：
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});

�l�果是除了包含ul子元素的li�Q�其他所有的li都得��C��一个border.可能你也想选择有name属性的anchor()�Q?br /> $(document).ready(function() {
$("a[@name]").background("#eee");
});

要匹配属性的��|��value�Q�，我们可以�?#8221;*=”来代�?#8221;=”
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
      // do something with all links that point somewhere to /content/gallery
});
});

直到现在�Q�我们已�l�学��C��很多选择器的使用。这里还有种情况你需要选择前一个或后一个元素。想一想starterkit.htm里的FAQ�Q�当你click问题的时候，它是怎么实现隐藏和显�C�的呢？代码是这��L��Q?br /> $(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�Q?我们用chain来减��代码的长度和提高代码的易读性和表现�?�q�里要说明一下，如果按原文翻译过来我惛_��多�h都看不懂�Q�感觉他自己也没怎么说明白。我说说我自��q��理解�Q?br /> ‘dd’�?#8216;dt’都是#faq的子元素�Q�find()的作用就是找到它的子元素。End()应该和next()搭配的，end()实质上是�?‘dd’�q��o了，也就是next()的时候实质上是参考的’dt’。这��h��?#8217;dt’的next��是‘dd’�Q�挺�Ҏ��实现的。要是还不明白你可以边参考边照着做一遍�?br />
除了同属元素外，我们也可以选择父元素：
$(document).ready(function() {
$("a").hover(function() {
      $(this).parents("p").addClass("highlight");
}, function() {
      $(this).parents("p").removeClass("highlight");
});
});

很容易看懂，p��是a的父元素�?br />
让我们回��一下前面所学的�Q�jquery有很多地方能使代码更��z�因此容易读和保持。下面的��是�?(document).ready(callback)�W�号的一个简单描�q?br /> $(function() {
// code to execute when the DOM is ready
});

好吧�Q�让我们来写个hello , world ,来结束第一天的评��Q�相信你一定会写了�?br /> $(function() {
$("a").click(function() {
      alert("Hello world!");
});
});

现在�Q�基��已经掌握了，下次我们��探索一下Jquery的其他方�?ajax)

4.Rateing:使用AJAX
在这部分我们写了一个简单的ajax应用�Q�它的目的是允许用户rate�Q�评伎ͼ�一些事情，��p��youtube.com一��P��
我们需要写一些代码．例子中用��C��一个php文�g来读取＂rating�Q�的参数和返回rating个数�Q�count�Q�和�q�_��rating(array_sum/count)�Q�你可以看一看starterkit里边的rate.php代码�Q?br /> 我们需要这个例子工作在ajax上，因此我们用jquery写一个必要的标签�q�且把它�q�加��C��个ﾃ�Q�名�?#8221;rating”的div容器里边�Q�代码如下：
$(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(''));
      } );
});
});

上面的代码片断��生了�Q�个元素�q�且把它们追加到了id�?#8221;rating”的div容器里．�W�一�ơ加载页面后�Q�所有的元素都包含在div容器里，然后再加上个click事�g。当被click的时候，一个post��h��被发送到rate.php文�g里，�q�且通过rating: $(this).html()传递参敎ͼ��l�过处理�Q�Ϳ��Q�文件处理后把结果作为xml写进div容器

如果你电脑上没装php的运行环境。你可以�?a target="_blank">�q�里看到�q�个例子的效果�?br />
对与一个不用javascript也能工作的rating例子�Q�你可以讉K��softonic.de

你也能在�q�里或者在visual jquery里边发现更多的关于ajax的帮助文��?br />
当靠�Q�Ｊ�Q��加蝲内容的时候，一个非常普遍的问题是：当加载事件句柄到你文��的时候也需要将该事件应用与你加载的内容里，所以你不得不在内容加蝲之后提供�q�些事�g句柄。�ؓ了防止代码重复，你应该委�z�一个函数。例如：
// lets use the shortcut
$(function() {
var addClickHandlers = function() {
      $("a.clickMeToLoadContent").click(function() {
         $("#target").load(this.href, addClickHandlers);
      });
};
addClickHandlers();
});

上面当Ｄ�Q��݋准备好后addClickHandlers只应用了一�ơ，�q�且每次用户点一个样式�ؓclass. clickMeToLoadContent的时候内容已�l�完成加载了�?br /> 请主义函数addClickHandlers被定义成了一个局部变量，而非全局函数�Q�function addClickHandlers() {...}).。请坚持�q�种写法�Q�因为它可以避免全局变量定义�q�多引�v的冲�H��?br />
另外一个非常普遍的�Q�Ｊ�Q��回调问题是参数。假设你需要传递一个额外的参数�Q�那么把回调��装��C��个函数里能够实现�Q�如下：
// 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]); });

�Q?各种动态效果的实现�Q�用FX
Jquery能实现简单的动态效果，比如昄��Q�show�Q�和隐藏(hide)
// $(document).ready(function() {
$("a").toggle(function() {
      $(".stuff").hide('slow');
}, function() {
      $(".stuff").show('fast');
});
});

发挥你的惛_��Q�你能用aninate()创徏��L��的组合：
// $(document).ready(function() {
$("a").toggle(function() {
      $(".stuff").animate({
         height: 'hide',
         opacity: 'hide'
      }, 'slow');
}, function() {
      $(".stuff").animate({
         height: 'show',
         opacity: 'show'
      }, 'slow');
});
});

�?a target="_blank">interface 插�g攉��里，你能发现很多奇特的效果。这个站点也提供一些演�C��?br />
6.分类�Q�用表格分类插�g
该插件是�q�行在客��L��的，所以你只要在你文�g里包含jquery和插件的文�g�q�且写出你想如何分类。试试下面的例子。在starterkit.htm里添加下面一行代码：

把插件包含进��d��Q�你�q�需要在custom.js里写
$(document).ready(function() {
$("#large").tableSorter();
});

点击表格的头部看看它是怎么工作的�?br /> �q�个表格也能够用高亮隔行昄��来实现斑马线效果。代码如下：
$(document).ready(function() {
$("#large").tableSorter({
      stripingRowClass: ['odd','even'], // Class names for striping supplyed as a array.
      stripRowsOnStartUp: true       // Strip rows on tableSorter init.
});
});

�q�里有更多的例子和演�C�在tablesorter homepage
当你用jquery久了之后会发现把你的代码�Q�功能模块）作�ؓ插�g��装在一个包是多么有用，不仅你自己或你的公司能重用这些代码（功能模块�Q�，也能在一些社区里�׃�n。下面我们将来看看如何构造一个插�Ӟ��

7.插�g�Q�写你自��q��jquery插�g
其实为jquery写插件是很简单的。如果你按照下面的规则，整合你的插�g��非常容易�?br /> �Q�．�l�你的插件命名。让我们叫它”foobar”
�Q�．创徏一个文件名为：jquery.[你的插�g名].js 比如�Q�jquery.foobar.js
�Q�．扩展jquery的内部对象，创徏一个或多个插�g的方法，比如�Q?br /> jQuery.fn.foobar = function() {
// do something
});

�Q�．用帮助函数创��Z��个对象（可选）
jQuery.fooBar = {
height: 5,
calculateBar = function() { ... },
checkDependencies = function() { ... }
};

然后你能在你的插仉��边调用这些帮助函�?br /> jQuery.fn.foobar = function() {
// do something
jQuery.foobar.checkDependencies(value);
// do something else
};

�Q�．创徏一个用戯��修改的默认的讄��Q�可选）
jQuery.fn.foobar = function(options) {
var settings = {
value: 5,
name: "pete",
bar: 655
};
if(options) {
jQuery.extend(settings, options);
}
};

然后你能用下面的默认调用该插�Ӟ��有选项�Q?br /> $("...").foobar({
value: 123,
bar: 9
});

如果你要发布你的插�g�Q�你应该提供一些例子和演示�?br /> 现在你有一个基本的认识了吧�Q�让我们�q�用自己的知识和创造力来写我们自己的插�?br /> 有很多朋友操作表单这��h��l�束代码�Q?br /> $("input[@type='checkbox']").each(function() {
this.checked = true;
// or, to uncheck
this.checked = false;
// or, to toggle
this.checked = !this.checked;
});

��h��意，无论什么时候，当你的代码出现each�Ӟ��你应该重写上面的代码来构造一个插件如下：
$.fn.check = function() {
return this.each(function() {
      this.checked = true;
});
};

于是插�g可以�q�样用：
$("input[@type='checkbox']").check();

现在你也能写一些插件�ؓuncheck()和togglecheck()�Q�但是我们可以扩展插件来接收一些选项�Q?br /> $.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;
      }
});
};

然后用户能够�q�么使用�Q?br /> $("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');

8.下一步（展望�Q?/font>
如果你计划学习更多的javascript�Q�你应该考虑用firefox�?a target="_blank">firebug插�g来调试你的代码．它�ؓjavascript的调试提供了一个控制台�Q�一个调试器和其他有用的东西�Q?br /> 如果你有��M��问题不能解决�Q�请�l�我们发邮�gjQuery mailing list.

声明�Q�本站作品均由Jquery中国��组��译�Q�制作．无�Q何商业用途（不允许拿本站内容做�Q务商业行为，�q�者追�I�法律责任）�Q�允许�{载，但须说明出处�Q?/font>

我们走在JAVA的光明大道上 2007-09-09 09:52 发表评论

久久丁香综合五月国产三级网站,久久福利影视,视频一区二区在线观看

jQuery入门