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 相关文章推荐
Json序列化和反序列化方法解析
Dec 19 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
基于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 __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
django输出html内容的实例
2018/05/27 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
python如何将图片转换素描画
2020/09/08 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
夜大毕业自我鉴定
2013/10/11 职场文书
建议书怎么写
2014/03/12 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL