Posts tagged jQuery

New Year, New Slash-to-Search

0
1 month ago
by khotyn in

大家新年好，赶在2012来临之前，对之前写的一个Chrome小插件Slash-to-Search做了一些小的改进，新年新气象，如果你还在用这个插件，那么来看看吧：

image

What’s New?

  • 选项页面有了新UI，如上图。
  • 规则的添加和显示集成到了一起。
  • 去除了规则到处功能，让插件更小巧。

下载：Slash-to-Search

Slash to Search—-更快速地搜索

0
11 months ago
by khotyn in

春节期间做了一个Chrome插件，这几天晚上又捣鼓了几下，拿出来和大家分享一下：

一、Slash to Search是什么？

Slash to Search是一个Chrome插件，使你在添加了一定的规则以后就可以通过敲击“/”来将页面焦点定位在搜索框上（事实上支持所有的输入框）。

二、如何使用Slash to Search？

  • 首先从https://github.com/downloads/khotyn/Slash-to-Search/Slash-to-Search-0.2.crx下在Slash to Search并安装到你的Chrome中
  • 打开一个页面（比如http://www.khotyn.com），右击搜索框并点击“Add to Slash-to-Search”
  • 在弹出的配置页中选择Type（regex表示在匹配URL时采用正则表达式匹配，normal表示在匹配URL时采用精确匹配）点击Add就可以将可以添加可以规则
  • 回到你打开的那个页面，按下“/”，看看是不是光标已经定位到搜索框中了？

三、后续计划

  • 修复Bug
  • 支持在线规则导入（已经在最新的版本中支持）

四、反馈

如果你对这个插件有任何意见，欢迎发邮件告诉我：hting1(a)gmail.com，或者在Twitter(@khotyn)上给我留言。这个插件的源代码在:https://github.com/khotyn/Slash-to-Search

关于jQuery中append的一些思考

2
1 year ago
by khotyn in

昨天在看《jQuery in Action》一书，发现关于append函数的解释有点问题，原文是这样描述append函数的（只摘了关键部分）：

In the case where there are multiple targets, the original element remains in place and copies of it are appended to each of the targets—a copy operation.

意思是：

当append的target是多个的时候，原来的元素保持不变，append到target上的都是它的copy，也就是一个copy的操作。

然而，我测试了下一段代码：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="lib/jquery/jquery-1.4.2.js"></script>
        <script type="text/javascript">
        	$(function(){
				$('#jqueryApply').click(function(){
					$('div').append($('#testP'));
				});
			});
        </script>
        <title>New Web Project</title>
    </head>
    <body>
        <p id='testP'>
            Test P
        </p>
        <div id='divOne'>
            One
        </div>
        <div id="divTwo">
            Two
        </div>
        <form action="">
            <input type="button" id="apply" value="Apply" onclick='app()'/>
	    <input type="button" id="jqueryApply" value="jQuery Apply"/>
        </form>
    </body>
</html>

发现结果是‘testP’元素消失了，而两个div内分别都添加了一个‘testP’元素，这与书本上的描述并不一样，于是查看jQuery官方网站上的api（api地址），发现关于append函数的一段描述是这样的：

If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.

意思是说：

如果append的target超过一个的话，对于第一个之后的target的，插入的是一个插入元素的copy

而对于第一个target，应该是move操作，所以按照这个说法，上面的示例代码中‘testP’元素是应该消失了。
而后为了更清楚的了解其机制，我查看了jQuery的源代码，在jQuery的内部实现中，append是通过domManip函数实现的，而domManip函数在调用buildFragment，然后buildFragment调用appendChild方法将插入元素append到了fragment中，具体的代码如下：

if ( fragment ) {
    for ( var i = 0; ret[i]; i++ ) {
        if ( scripts &amp;&amp; jQuery.nodeName( ret[i], "script" ) &amp;&amp; (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
            scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
        } else {
            if ( ret[i].nodeType === 1 ) {
                ret.splice.apply( ret, [i + 1, 0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script"))) );
            }
            fragment.appendChild( ret[i] );
        }
    }
}

所以，《jQuery in Action》中关于append的描述应该是错误的，插入元素无论如何都会被移动到另外的地方去了。

Go to Top