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 @ 04/03/2009 (10:20 am)

两个 twitter GM 脚本和一个 picasaweb GM 脚本升级了

Tags: , , , ::

以下三个脚本已更新, 请安装最新版本:

  1. Get Picasaweb Image URL
    • 由于 picasaweb 更新了一些页面元素的 class 和 id, 导致脚本失效, 现已更新.
    • 同时修复了之前被忽略的一些细节, 脚本可靠性得到增强.
  2. Twitter friends name helper
    • 由于 twitter 表单 id 的改变, 导致 Ctrl+Enter 快捷键失效, 现已更新.
  3. Twitter timeline updater
    • 新版本中增加了 retweet 功能.
    • 多重 RT 采用 RT @最终RT者: > @中间RT者: > @中间RT者: > @源作者: 内容 的形式

Seven Yu @ 04/01/2009 (3:37 pm)

在线版 Tour de Flex

Tags: , , , ::

http://www.adobe.com/devnet/flex/tourdeflex/web/