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动态创建DOM、表单元素的实现代码
Aug 09 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
JavaScript Array对象详解
Mar 01 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 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 xml常用函数的集合(比较详细)
2013/06/06 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
javascript 闭包疑问
2010/12/30 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
vue2.0 datepicker使用方法
2018/02/04 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
外贸业务员的岗位职责
2013/11/23 职场文书
超市重阳节活动方案
2014/02/10 职场文书
2014年宣传工作总结
2014/11/18 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
厉行节约工作总结
2015/08/12 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js