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 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 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作的文本留言本的例子(一)
2006/10/09 PHP
聊天室php&amp;mysql(四)
2006/10/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
Python中的上下文管理器和with语句的使用
2018/04/17 Python
django使用LDAP验证的方法示例
2018/12/10 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
行政人事岗位职责
2014/03/17 职场文书
蓝颜请假条
2014/04/11 职场文书
学校教学工作总结2015
2015/05/19 职场文书
Nginx快速入门教程
2021/03/31 Servers