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 相关文章推荐
javascript smipleChart 简单图标类
Jan 12 Javascript
js正则表达式的使用详解
Jul 09 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
深入理解js generator数据类型
Aug 16 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 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连接Access数据库错误及解决方法
2013/06/20 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
详解使用vuex进行菜单管理
2017/12/21 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
对numpy中shape的深入理解
2018/06/15 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
Python socket处理client连接过程解析
2020/03/18 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
详解Python中第三方库Faker
2020/09/25 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
美丽的现代设计家具:2Modern
2018/07/26 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
UNIX文件系统分类
2014/11/11 面试题
质量工程师岗位职责
2013/11/16 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
民族学专业求职信
2014/07/28 职场文书
5.12护士节活动总结
2015/02/10 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
OpenCV实现反阈值二值化
2021/11/17 Java/Android
基于Python编写一个监控CPU的应用系统
2022/06/25 Python