Seven Yu @ 04/09/2009 (5:58 pm)

用 jQuery 获取 iframe 父页面元素

Tags: , , , ::

也是群里的问题(我发现没事在群里鬼混一下还真能开放思路学到东西啊)

不说废话, 代码如下:

PLAIN TEXT >> JAVASCRIPT:
  1. $('#objId', parent.document);
  2. // 搞定...
  3. /*
  4. 以前一直不理解这第二个参数应该在什么情况下用,
  5. 今天终于知道了, 撒花, 庆祝...
  6. */

Seven Yu @ 04/08/2009 (4:35 pm)

<p> 里的 <div>

Tags: , , ::

今天 jQuery 群里提出一个有趣的话题: children 和 find 函数, 能否取到 <p> 里的 <div> 元素.

这问题初看起来答案似乎是肯定的, 容器标签互相可以嵌套, 没道理取不到啊.

但经过试验, 结果很令人不解, 因为确实取不到 <p> 里的 <div> 元素.

参考代码如下:

PLAIN TEXT >> HTML:
  2.     <div></div>
  3. </p>

一段非常普通, 看似没什么问题的代码, 用 jQuery 取 div 元素:

PLAIN TEXT >> JAVASCRIPT:
  1. alert($('p').children('div').size());
  2. // return 0
  3. alert($('p').find('div').size());
  4. // return 0

为什么呢? 怀疑 jQuery 框架? selector? RP? ... no! 都不是. 答案是 w3c 标准. (//todo, 找参考资料)

<p> 标签在遇到 <div> 标签后会自动关闭, 各浏览器引擎解析上面的 html 代码会得到下面的结果.

IE

PLAIN TEXT >> HTML:
  2. <DIV></DIV>
  3. <P></P>

Firefox

PLAIN TEXT >> HTML:
  2.     </p><div></div>

Chrome

PLAIN TEXT >> HTML:
  2.     </p><div></div>
  3. <p></p>

看, 小问题引发大麻烦... 上面的代码实际上也是不符合 html 标签的语义的. 所以在构建看似简单的 html 时也得注意, 除了了解各标签的语义外, 还要了解标准是怎样的, 掌握规则才不会被灵异事件纠缠...

Seven Yu @ 04/08/2009 (1:55 am)

自定义 jQuery filter (过滤器)

Tags: , , , ::

jQuery 的选择器中已经定义了丰富的过滤器, 例如 :first, :last, :checkbox 等... 但有时难以适应应用的复杂需求, 这时候我们可以通过自定义过滤器来满足一些特殊需求, 看下面的代码:

演示: http://labs.phpz.org/jquery_test/myfilter.html

html 代码:

PLAIN TEXT >> HTML:
  2.     <li>10</li>
  3.     <li>200</li>
  4.     <li>3000</li>
  5.     <li>150</li>
  6.     <li>470</li>
  7.     <li>390</li>
  8. </ul>

javascript 代码:

PLAIN TEXT >> JAVASCRIPT:
  1. $.extend($.expr[':'], {
  2.     'myfilter' : function(e,i,m,a){return parseInt($(e).html())>= 300;}
  3. });
  4. $(function()
  5. {
  6.     $('li:myfilter').css('background-color','#eee');
  7. });

回调函数有4个参数, 并返回一个布尔值, 以确定当前元素是否符合过滤器要求, 4个参数分别代表:

  • e: 当前元素
  • i: 当前索引值
  • m: 过滤器正则匹配结果
  • a: 保存全部元素是数组

Seven Yu @ 04/07/2009 (9:38 pm)

[实验] checkTree

Tags: , , ::

偶的简单实现:

http://labs.phpz.org/jquery_test/checkbox_tree.html

PLAIN TEXT >> JAVASCRIPT:
  1. $(function()
  2. {
  3.     $(':checkbox').click(function()
  4.     {
  5.         // children
  6.         $(this).parent('li').find(':checkbox').attr('checked', this.checked);
  7.         // parent
  8.         checkParent(this);
  9.     });
  10. });
  11.  
  12. function checkParent(obj)
  13. {
  14.     if(obj == null)
  15.         return;
  16.     if(obj.checked)
  17.     {
  18.         if($(obj).closest('ul').find('>li>input:checkbox').size() == $(obj).closest('ul').find('>li>input:checkbox:checked').size())
  19.             checkParent($(obj).closest('ul').prev().attr('checked', true)[0]);
  20.     }
  21.     else
  22.     {
  23.         checkParent($(obj).closest('ul').prev().attr('checked', false)[0]);
  24.     }
  25. }

一个 jQuery 插件:

http://static.geewax.org/checktree/index.html

update:
今天(2009/4/9)受群里高人指点, 代码又节约了一点(最近脑子不好使了, 难道真的老了??):

PLAIN TEXT >> JAVASCRIPT:
  1. // if($(obj).closest('ul').find('>li>input:checkbox').size() == $(obj).closest('ul').find('>li>input:checkbox:checked').size())
  2. // 改为
  3. if($(obj).closest('ul').find('>li>input:checkbox:not(:checked)').size() == 0)

Seven Yu @ 03/28/2009 (12:57 am)

用牛逼的 jQuery 隐藏表格列(关于 :nth-child 选择器)

Tags: , , , , ::

上午在一 jQuery 群里有朋友问到如何隐藏表格列, 我想都没想就说需要循环. 晚上没事又想了一下发现我错了.

"用循环" 这回答不仅是对提问者的不负责任, 简直是对 jQuery 的侮辱, 实际上很简单的一句话就可以实现对任意(一或多)表格列的隐藏. 这也是 jQuery 所崇尚的 write less, do more 精神的具体体现.

最初我研究的代码是:

PLAIN TEXT >> JAVASCRIPT:
  1. // 隐藏表格第四列
  2. $('table tr').find('td:eq(3)').hide();

后来群里一位叫 "[京]金山" 的朋友指出, 可以用下面的代码实现同样的功能:

PLAIN TEXT >> JAVASCRIPT:
  1. // 隐藏表格第四列
  2. $('table tr td:nth-child(4)').hide();

而且这样的写法更直观, 效率也比上面的稍高. 非常感谢金山同学, 偶又学到一个用法, 对 jQuery 又有进一步了解.

后来测试, 去掉 table 效率还会有所提高, 但还不是很确定, 只是从多次测试的数据观察来的. 有时间游一下代码看看.

另外 :nth-child 还支持 :nth-child(2n+1) 这种写法, 返回奇数项, 2n 返回偶数项, 或者用 odd 和 even 代替公式. 当然, 类似 3n+5, 4n 这样的写法也是可以的. nth-child 的翻译应该就是 "第n个孩子" ... 囧...

值得注意的是 :nth-child(odd) 和 :odd 是有区别的: :odd 是所有返回项整体排序后其中的奇数项, 并且索引从0开始; 而 :nth-child(odd) 则是针对修饰项的子元素进行过滤和运算的(:nth-child 被称为 Child Filter), 并且索引是从1开始的.

更详细的内容参考 jQuery 文档 Selectors 部分, 看来没事读读文档还是相当有必要的, 马上去通读一下吧.

----- 补充分割线 -----
还忘记说一点, jQuery 这个选择器效率还是挺高的, 我对一个 900 行 5 列的表格做了测试, 隐藏某1列的话(也就是隐藏900个单元格), IE 8 是 350ms 左右, firefox 330ms 左右, opera 90ms 左右, chrome 50ms 左右.

还是 chrome 牛逼啊, 对 firefox 很失望...

Seven Yu @ 03/26/2009 (2:27 pm)

jQuery.Event 对象的一些属性和方法

Tags: , , ::

官方有提供一个文档: http://docs.jquery.com/Events/jQuery.Event 但关于 event.which 和 event.ctrlKey 之类的都未提及。于是偶做了以下测试：

PLAIN TEXT >> JAVASCRIPT:
  1. $(function()
  2. {
  3.     $('#text').click(function(e)
  4.     {
  5.         var s = '';
  6.         for(var k in e)
  7.         {
  8.             s += k + '\n--------------------\n' + e[k] + '\n=============================\n';
  9.         }
  10.         $(this).val(s);
  11.     });
  12. });

整理出一些比较有用的属性：

  • ctrlKey: 类型: Boolean, 说明: Ctrl 键是否按下
  • shiftKey: 类型: Boolean, 说明: Shift键是否按下
  • altKey: 类型: Boolean, 说明: Alt 键是否按下
  • charCode: 类型: Number, 说明: 最后响应键盘按键的 charCode 值
  • keyCode: 类型: Number, 说明: 最后响应键盘按键的 keyCode 值
  • button: 类型: Number, 说明: 按下的鼠标键, 左键:1, 右键:2, 中键:4
  • which: 类型: Number, 说明: 最后响应的是哪个按键, 如果是键盘按键则等于 charCode || keyCode; 如果是鼠标按键, 左键:1, 右键:3, 中键2

jQuery.Event 支持的属性在源码中可以看到(第 2710 行), 他们是:

PLAIN TEXT >> JAVASCRIPT:
  1. props: "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),

btw: 如果谁有更详细的关于 jQuery.Event 的说明请回复本日志或 Mail 给我, 感激不尽.

Seven Yu @ 02/26/2009 (9:16 pm)

最近写的两个 twitter GM 脚本

Tags: , , , ::

Emoji!!!

脚本安装地址: http://userscripts.org/scripts/show/42569

Display/Insert iPhone's Emoji icon on webpages. 显示/插入 iPhone 的 emoji 表情。

Twitter friends name helper

脚本安装地址: http://userscripts.org/scripts/show/43117

Tip:The helper is available when the input background color turns into light blue as the image.

输入 @ 或 用户名 可以自动完成

或者点击好友列表头像上的图标直接 reply 或 send direct message.

Next Page »