讨论这个问题基于如下场景：点击页面上某个按钮之后，触发click事件，事件处理函数内部发送一个AJAX请求，AJAX回调函数更新页面的某一个部分具体到这个例子，我们希望button1和button2点击之后，用AJAX的方式取example.html的内容，然后动态更新页面的id=callbackdemo3的div HTML如下： <div id="callbackdemo1"> <button id="button1">ajax load1</button><br/> </div> <div id="callbackdemo2"> <button id="button2">ajax load2</button><br/> </div> <div id="callbackdemo3" class="log"></div> <button onclick="$(‘.log’).html(”);">clear</button> 第一种做法：适用于最简单的情况，也是比较直观的做法，就是在ajax回调函数中，使用jQuery的id选择器$(“#callbackdemo3″)得到id为callbackdemo3的div后更新其HTML内容 $("#callbackdemo1>#button1").click( function load(){ $.get("example.html",{ ‘param[]‘: ["var1", "var2"] }, function f1(data, textStatus, XMLHttpRequest) { $("#callbackdemo3").html(data); } ); } ); 第二种做法：定义好一个接受额外参数的回调函数，然后在默认回调函数的内容调用这个预先定义好的回调函数这样就能达到传递额外参数的目的了，较之第一种方法，此方法能比较方便的利用各个回调函数的上下文。 function callback_with_extraParam(data,param) { param.html(data); } $("#callbackdemo2>#button2").click( function load(){ var extraParam = 更多 >

Cool demo with jQuery plugin FancyBox

大约3月前 - 没有评论

$(document).ready(function() { $(“#login”).fancybox({ ‘padding’ : 0, ‘autoScale’ : false, ‘transitionIn’ : ‘none’, ‘transitionOut’ : ‘none’ }); $(“#flash”).fancybox({ ‘padding’ : 0, ‘autoScale’ : false, ‘transitionIn’ : ‘none’, ‘transitionOut’ : ‘none’ }); }); 猛击我查看效果 A Flash Demo 代码如下： <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://www.haojii.com/webdev/fancyboxdemo/fancybox/jquery.mousewheel-3.0.2.pack.js"></script> <script type="text/javascript" src="http://www.haojii.com/webdev/fancyboxdemo/fancybox/jquery.fancybox-1.3.1.js"></script> <link rel="stylesheet" type="text/css" href="http://www.haojii.com/webdev/fancyboxdemo/fancybox/jquery.fancybox-1.3.1.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { 更多 >

你应该使用的20个有用的jQuery方法

大约4月前 - 没有评论

原文地址：20 Helpful jQuery Methods you Should be Using 原文作者：Andrew Burgess 这篇文章介绍了jQuery中有用的20个方法，1-20编号如下，本文没有对照原文逐句翻译，这个20个方法名称，我其实就是用下面第14个map()的方式取出来的，亮点如下，firebug真是个离不开的好工具。说到工具，那就顺便再提一下一个简洁的jQuery代码调试工具：jQueryPad 支持代码高亮，不支持代码辅助，小问题是这个工具带的jQuery.js的版本旧了，需要自己更新一份到它的目录。（当然，我还是最喜欢firebug，特别是网页复杂的时候） 1 after() / before() 这个无需多说了，上面的图就是个例子，就是在当前对象的前面或者后面插入内容，被插入的内容是当然对象的兄弟节点 2 change() 和click()或者hover()一样，它也是个事件处理器，这个change事件作用于 textarea, text input, select, 当目标元素的值改变的时候触发该事件。它不同于对象失去焦点时触发的事件foucusOut()和blur()。 change()事件对于客户端验证的任务最适合不过了，因为你不需要在输入字段值没有变化的时候重新验证字段。 $(document).ready( function() { $(‘input[type=text]‘).change(function () { switch (this.id) { /* some validation code here */ case "name": alert(this.value+"…."); break; default: alert(this.id); break; } }); }); // HTML 更多 >

jQuery1.4发布: 你必须知道的15个新特性

大约7月前 - 没有评论

原文地址：jQuery 1.4 Released: The 15 New Features you Must Know 原文作者：James Padolsey 译文地址：jQuery1.4发布: 你必须知道的15个新特性译文作者：Ji Hao 1. 传递属性给jQuery(…)构造器早在1.4版本之前，jQuery就支持通过有用的”attr“方法为元素集合添加属性，参数可以传递属性的名-值对或者是一个指定了多个属性的对象。jQuery1.4则支持元素创建的时候传递一个属性对象作为jQuery构造器的第二个参数。举例来说，如果你要用jQuery1.4创建一个有多个属性的超链接对象，用如下简单的代码即可实现： jQuery(‘<a/>’, { id: ‘foo’, href: ‘http://google.com’, title: ‘Become a Googler’, rel: ‘external’, text: ‘Go to Google!’ }); 你可能已经注意到了”text”属性——可能你正怀疑它在这里出现是干啥的，毕竟超链接这玩意没有”text”属性！好吧，jQuery1.4其实统一了它自身的一些方法接受某些属性的行为。上面指定的”text”属性将会引起jQuery调用”.text()”方法，传递”Go to Google!”作为它的参数。一个现实中更好点的例子： jQuery(‘<div/>’, { id: ‘foo’, css: { fontWeight: 700, color: 更多 >

Working with Events, Part 3: More Event Delegation with jQuery

大约7月前 - 3个评论

// 原文地址：http://www.learningjquery.com/2009/09/working-with-events-part-3-more-event-delegation-with-jquery 原文作者: Louis-Rémi Babé 正如本系列的第一篇文章中描述的那样，事件代理是利用事件冒泡机制来避免多次绑定事件监听器的一种办法。jQuery1.3和即将到来的jQuery1.4有很多新的特性可以使你的网页中使用事件代理更容易。这篇指南的目标就是帮助你理解这些新特性是如何工作的。从传统的事件监听到事件代理既然一个DOM元素上发生的事件会被传递到它所有的祖先元素（或者说是DOM节点）上，那么一个事件监听器就能被绑定在众多DOM元素的单一的那个祖先节点上，而不用为所有的DOM元素每个都单独绑定事件监听器。看下面的列表先，再考虑下面的问题： <ul class="myList"> <li class="red">The first item.</li> <li class="green">The second item.</li> <li class="yellow">The third item.</li> <li class="blue">The fourth item.</li> </ul> <p>Class of the last clicked item: <span id="display"> </span> </p> 如果我们想知道被点击的列表元素的class,使用传统事件监听器的jQuery代码应该是这样写的： $("li").click( function( event ) { $("#display").text(event.target.className); }); 传递给事件处理器的参数event对象有一个target属性，对应于被点击的元素。使用事件代理的等价的代码是这样写的： $("ul").click( function( event ) { $("#display").text(event.target.className); }); 更多 >

Working with Events, part 2

大约7月前 - 没有评论

// 原文地址：http://www.learningjquery.com/2008/05/working-with-events-part-2 原文作者: Karl Swedberg 在我的上一篇文章中，描述了一个常见的问题，即事件对新加入HTML文档的元素表面上不工作的情况，不管这个元素是通过ajax方式还是修改DOM的方式加入进来的。我们也检查了一个解决此问题办法：事件代理。使用这种办法，我们将事件绑定到一直在DOM中的容器元素上然后再检查事件发生的目标元素。 Cloning Nodes 这一次，我们将一起看看解决此问题的另一个方法：重新绑定事件处理器。但是这么做之前，我应该要提一下，在jQuery1.2中事件处理器能够随着元素一起被克隆。看这个无序列表: <ul id="list3" class="eventlist"> <li>plain</li> <li class="special">special <button>I am special</button></li> <li>plain</li> </ul> 我们可以拷贝一个<li class=”special”>然后插入到被拷贝的元素后面，同时取得任何绑定在原来元素上的事件处理器。jQuery提供的这个.clone()方法不会为我们把这任务都干了，它只会做元素的拷贝 $(document).ready(function() { $(‘#list3 li.special button’).click(function() { var $parent = $(this).parent(); $parent.clone().insertAfter($parent); }); }); 试试看： plain specialI am special plain 正如你所看到的，原按钮能够继续创建新的列表元素，但是“动态生成”的列表元素内的按钮不能创建新的按钮。为了使得事件处理器也能被拷贝到新的元素上，我们只需要传递true给clone方法： $(document).ready(function() { $(‘#list4 li.special button’).click(function() { var $parent 更多 >

为wordpress博客文章设置单独的CSS

大约8月前 - 没有评论

因为想要在文章中插入一些动态的内容来做一些前端的demo，自然用到了JavaScript和CSS，目前我用的wordpress2.9对插入JavaScript的功能已经支持得蛮好，即使使用富文本编辑器和HTML视图切换的时候JavaScript不会被过滤掉，但是用link标签还是会被过滤。网上有个per post css的wordpress插件，利用的是自定义meta域的方法，在页面渲染的时候插入css的link,虽然我没搞过WP的插件开发，但是代码倒也挺容易看懂，基本上不用解释了。下面这个插件，性能不好，如果文章和css比较多的，每次查看的时候都要做很多次无效的循环（比如单独查看每个页面的时候），所以我没有选择这个插件。我换了个思路解决不能插入link标签的问题。 <?php /* Plugin Name: Per-Post CSS Version: 1.1 Plugin URI: <a href="http://trevorcreech.com/geekery/wordpress/per-post-css/">http://trevorcreech.com/geekery/wordpress/per-post-css/</a> Description: This plugin allows you to specify a chunk of CSS, which will be included in the header only when viewing that post, or a page where that post appears. Put the custom CSS in a Custom Field 更多 >

Working with Events, part 1

大约8月前 - 2个评论

google.load(“jquery”, “1.3.2″); 原文地址：http://www.learningjquery.com/2008/03/working-with-events-part-1 原文作者: Karl Swedberg CSS和JavaScript有很多的不同，其中大多数区别都很明显不用说出来。然而，他俩的一处区别值得一提，因为这个区别常常引起困惑和吃惊，尤其是对那些从CSS专家转职为jQuery新手的人。事实上，这是早在2006年我向jQuery邮件列表提出的第一个问题。从那之后，我至少每周能看到类似的问题，有时候甚至每天都有，尽管jQuery已经提供了FAQ page and 这三个插件在解决这个问题。 CSS和JavaScript如何不同？最重要的区别是什么？在CSS中，样式规则总是自动应用于所有匹配样式选择器的Element上的，不管这些Element是什么时候加入到DOM中的。在JavaScript中，为Element注册的事件处理器只会被应用于事件附加的那个时候DOM中存在的那些Element之上。如果我们在后向DOM中添加同一类型的Element（不管是DOM操作还是AJAX方式），CSS总是能够对这些Element显示相同的样式，但是JavaScript的事件处理器就不会自动应用到新加入的Element。 For example, let’s say we have “<button>Alert!</button>” in our document, and we want to attach a click handler to it that generates an alert message. In jQuery, we might do so with the following code: 举个例子，假如我们html文档中有”<button>Alert!</button>“，我们想要为它加上点击事件处理，让它在被点击的时候产生一个alert消息。在jQuery中用如下的代码实现：更多 >