Bookmarklet实现启动jQuery(模仿 云输入法)


Posted in Javascript onSeptember 15, 2010

书签本来是用来收藏 网址(http://momo.site.com/), 但实际上书签还可以收藏 javascript代码
只要把书签中的地址url, 换成javascript代码就可以了。

javascript:your_javascript_expression

上面的 javascript : 可以认为是javascript协议, 就像http: 是http协议一样。
下面是 启动jQuery 书签的地址:
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'))

为了在网页上可以让用户收藏,你需要把它放入一个<a>链接中。
比如:
<a href="javascript:your_js_code" title="启动jQuery"><span>启动jQuery</span></a>

全部的代码是:
<a class="how-to-install" id="bookmarklet" title="启动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>启动jQuery</span> </a>

结果如下:
启动jQuery
你可以收藏上面的书签了 (右键,点击 "将此链接加为书签");
FireBug---》 Console ,试试 jQuery的魅力吧.
jQuery('a');
$('a') 可能会失效,因为可能一开始就有 window.$对象(包含了别的js库,或网站自己定义了$对象)
cnblogs 的网站就使用jQuery库。
Javascript 相关文章推荐
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
深入理解js generator数据类型
Aug 16 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 #Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 #Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 #Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 #Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 #Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 #Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 #Javascript
You might like
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python简单实现操作Mysql数据库
2018/01/29 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Python3最长回文子串算法示例
2019/03/04 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
上海中网科技笔试题
2012/02/19 面试题
优秀员工个人的自我评价
2013/11/29 职场文书
触电现场处置方案
2014/05/14 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
大学生党性分析材料
2014/12/19 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
Python中字符串对象语法分享
2022/02/24 Python