Bookmarklet實(shí)現(xiàn)啟動(dòng)jQuery(模仿云輸入法)

更新時(shí)間：2010年09月15日 12:24:05 作者：

最近流行的 sogo云輸入法， QQ云輸入法，都用到了bookmarklet技術(shù)。

書簽本來(lái)是用來(lái)收藏網(wǎng)址(http://momo.site.com/), 但實(shí)際上書簽還可以收藏 javascript代碼
只要把書簽中的地址url，換成javascript代碼就可以了。

復(fù)制代碼代碼如下:

javascript:your_javascript_expression

上面的 javascript : 可以認(rèn)為是javascript協(xié)議, 就像http: 是http協(xié)議一樣。
下面是啟動(dòng)jQuery 書簽的地址：

復(fù)制代碼代碼如下:

 
javascript:( 
function(jquery_node){ 
var disable = function(src_node) { 
src_node.parentNode.removeChild(src_node); 
jQuery.noConflict(1); 
}; 
var enable = function(d,j){ 
j=d.createElement('script'); 
j.id='jquery_src_code'; 
j.src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'; 
d.getElementsByTagName('head')[0].appendChild(j); 
}; 
!!jquery_node ? disable(jquery_node) 
: enable(document); 
})(document.getElementById('jquery_src_code')) 

為了在網(wǎng)頁(yè)上可以讓用戶收藏，你需要把它放入一個(gè)<a>鏈接中。
比如:

復(fù)制代碼代碼如下:

 
<a href="javascript:your_js_code" title="啟動(dòng)jQuery"><span>啟動(dòng)jQuery</span></a> 

全部的代碼是：

復(fù)制代碼代碼如下:

 
<a class="how-to-install" id="bookmarklet" title="啟動(dòng)jQuery" 
href=" 
javascript:( 
function(jquery_node){ 
var disable = function(src_node) { 
src_node.parentNode.removeChild(src_node); 
jQuery.noConflict(1); 
}; 
var enable = function(d,j){ 
j=d.createElement('script'); 
j.id='jquery_src_code'; 
j.src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'; 
d.getElementsByTagName('head')[0].appendChild(j); 
}; 
!!jquery_node ? disable(jquery_node) 
: enable(document); 
})(document.getElementById('jquery_src_code'))"> 
<span>啟動(dòng)jQuery</span> </a> 

結(jié)果如下：
啟動(dòng)jQuery
你可以收藏上面的書簽了 (右鍵，點(diǎn)擊 "將此鏈接加為書簽");
FireBug---》 Console ，試試 jQuery的魅力吧.
jQuery('a');
$('a') 可能會(huì)失效，因?yàn)榭赡芤婚_始就有 window.$對(duì)象(包含了別的js庫(kù)，或網(wǎng)站自己定義了$對(duì)象)
cnblogs 的網(wǎng)站就使用jQuery庫(kù)。

您可能感興趣的文章: