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 发表评论

亚洲国产精品线在线观看,亚洲AV无码一区二区三区鸳鸯影院,2022年亚洲午夜一区二区福利

jQuery入门