jquery 之事件 多库共存(noConflict)
/*
jquery 之 简单事件
jquery 与其它库共存,提供了 .noConflict() 方法,用法如下
<script src="jquery 库"><script>
<script>jQuery.noConflict(); </script>
<script src="other.js"></script>
首先,包含 jQuery 库,取得对 $ 的使用权。接着,调用 .noConflict() 方法让出 $ , 以便将控制权交还给最后包含的库,再包含 jQuery 之外的库(其它库),这样就可以在自定义脚本中使用两个库了,但是,在需要使用 jQuery 方法时,得用 jQuery 而不是 $ 来调用,如果要在 jQuery 中使用 $ ,则可以这样
jQuery(document).ready(function($){ // 这里可正常用 $});
*/
// bind('事件名', function(){}); 并且环境中的 this 引用的是 DOM 对象,而不是 Jquery 对象
/*
$(document).ready(function(){
$('#switcher-default').bind('click', function(){
$('body').removeClass('narrow');
$('body').removeClass('large');
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-narrow').bind('click', function(){
$('body').addClass('narrow');
$('body').removeClass('large');
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-large').bind('click', function(){
$('body').addClass('large');
$('body').removeClass('narrow');
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
});
*/
// 利用连缀法
/*
$(document).ready(function(){
$('#switcher-default').bind('click', function(){
$('body').removeClass('narrow').removeClass('large');
});
$('#switcher-narrow').bind('click', function(){
$('body').removeClass('large').addClass('narrow');
});
$('#switcher-large').bind('click', function(){
$('body').removeClass('narrow').addClass('large');
});
$('#switcher .button').bind('click', function(){
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
});
*/
// 充分利用 环境中的 this 指的是 DOM ,而不是 Jquery 对象, 如 this.id 指的是所在环境中 DOM 的元素 id,而 $(this) 是把相关的DOM元素转换成 jquery 对象,此时就可以用 jquery 对象的方式来处理
/*
$(document).ready(function(){
$('#switcher .button').bind('click', function(){
$('body').removeClass();
if(this.id == 'switcher-large')
{
$('body').addClass('large');
}else if(this.id == 'switcher-narrow')
{
$('body').addClass('narrow');
}
$('#swithcher .button').removeClass('selected');
$(this).addClass('selected');
});
});
*/
// jquery 之简写事件
/*
$(document).ready(function(){
$('#switcher .button').click(function(){
$('body').removeClass();
if(this.id == 'switcher-narrow')
{
$('body').addClass('narrow');
}else if(this.id == 'switcher-large')
{
$('body').addClass('large');
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
});
*/
// 相应的简写事件还有
// blur, change, click, dblclick, error, focus, keydown, keypress, keyup, load, mousedown, mousemove, mouseout, mouseover, mouseup, resize, scroll, select, submit, unload
// jquery 复合事件
// toggle(function(){}, function(){}, ....) 第一次单击触发第一次函数,第二次触发第二次,触发完成了,再重新开始触发, toggleClass()只是适合于两种情况交替使用
/*
$(document).ready(function(){
$('#switcher h3').toggle(function(){
$('#switcher .button').addClass('hidden');
}, function(){
$('#switcher .button').removeClass('hidden');
});
});
*/
/*
$(document).ready(function(){
$('#switcher h3').click(function(){
$('#switcher .button').toggleClass('hidden');
});
});
*/
// .hover(function1, function2); 只接近两个函数参数,可以避免 javascript 的事件传播,第一个函数是在鼠标进入时发生,第二个函数是在鼠标离开时发生
$(document).ready(function(){
$('#switcher .button').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
});
// 由于事件冒泡和事件捕获的问题 指定时间的 target可以防止冒泡事件发生
/*
$(document).ready(function(){
$('#switcher').click(function(event){
if(event.target == this) {
$('#switcher .button').toggleClass('hidden');
}
});
});
*/
// 也可以使用 .stopPropagation() 方法停止事件传播,防止事件冒泡
/*
$(document).ready(function(){
$('#switcher').click(function(event){
$('#switcher .button').toggleClass('hidden');
});
});
$(document).ready(function(){
$('#switcher .button').click(function(event){
$('body').removeClass();
if(this.id == 'switcher-narrow')
{
$('body').addClass('narrow');
}else if(this.id == 'switcher-large')
{
$('body').addClass('large');
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
event.stopPropagation();
});
});
*/
// 默认操作,如表单中的提交,会发生默认的提交事件,此时的 stopPropagation() 也不起作用,但是可以用 .preventDefault()在发生默认操作前终止事件,也可以在事件处理程序中 return false; 这是对 同时调用 .stopPropagation() 和 .preventDefault() 的一种简写
// .is() 与 .hasClass() 类似,如检测指定的对象是否包含有相关的类(.button): $('#myId').is('.button') 与 $('#myId').hasClass('button');
// 移除事件处理程序,以下的操作如果 #switcher-narrow,或者 #switcher-large 发生了点击事件,则会移除 #switcher 事件,无法恢复,除非刷新页面
/*
$(document).ready(function(){
$('#switcher').click(function(event){
if(!$(event.target).is('.button'))
{
$('#switcher .button').toggleClass('hidden');
}
});
$('#switcher-narrow, #switcher-large').click(function(){
$('#switcher').unbind('click');
});
});
*/
// 为了解决以上的完全移除问题,可以改用以下的事件命名法(引用另外的函数)
/*
$(document).ready(function(){
var toggleStyleSwitcher = function(event){
if(!$(event.target).is('.button'))
{
$('#switcher .button').toggleClass('hidden');
}
};
$('#switcher').bind('click', toggleStyleSwitcher);
});
*/
//如果为了指定其中的一个对象事件才恢复完全移除的问题,是可用以下方法
$(document).ready(function(){
var toggleStyleSwitcher = function(event){
if(!$(event.target).is('.button'))
{
$('#switcher .button').toggleClass('hidden');
}
};
$('#switcher').bind('click', toggleStyleSwitcher);
$('#switcher-narrow, #switcher-large').click(function(){
$('#switcher').unbind('click');
});
$('#switcher-default').click(function(){
$('#switcher').bind('click', toggleStyleSwitcher);
});
});
jquery 之事件 多库共存(noConflict)的更多相关文章
- jQuery与其他JS库共存
* 事件 * jQuery与其他JS库共存 * 调用jQuery.noConflict()方法 * 表示jQuery将"$"符号的使用权交出 * 通过两种方式将"$&qu ...
- 怎样让jQuery和其它js库共存
怎样让jQuery和其它js库共存 有时候需要同时使用jQuery和其它javascript,比如在joomla中默认的是motools,但很多人还是希 望能够使用jQuery,如果直接调用的话,由于 ...
- jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr/val/text()、jq.height/width、offset()./position()./scrol Left/Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存
each 方法 $ ( selector).each(function( index,element) { } ); 参数一表示当前元素在所有匹配元素中的索引号 参数二表示当前元素(DOM对象) ...
- jQuery多库共存处理$.noConflict()
如果我们需要同时使用jQuery和其他JavaScript库,我们可以使用 $.noConflict()把$的控制权交给其他库.旧引用的$ 被保存在jQuery的初始化; noConflict() 简 ...
- jQuery多库共存处理
jQuery多库共存处理(来自慕课网) 多库共存换句话说可以叫无冲突处理. 总的来说会有2种情况会遇到: 1.$太火热,jQuery采用$作为命名空间,不免会与别的库框架或者插件相冲突. 2.jQue ...
- 从零开始学 Web 之 jQuery(八)each,多库共存,包装集,插件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- jQuery多库共存问题解决方法
一.问题概述: 1.随着jQuery的流行,采用jQuery和$符为命名空间的js库越来越多,当然jQuery的$符也是参照的Prototype库的,所以当多个库同时以$符或者jQuery为命名空间时 ...
- jQuery——多库共存
多库共存:jQuery占用了$ 和jQuery这两个变量.当在同一个页面中引用了jQuery这个js库,并且引用的其他库(或者其他版本的jQuery库)中也用到了$或者jQuery这两个变量,那么,要 ...
- jQuery 多库共存
多库共存 问题概述 jQuery使用$作为标识符,随着jQuery的流行,其他js的库也会用$作为标识符,这样就会引起冲突 需要一个解决方案 让jQuery和其他的JS ...
随机推荐
- 展开/收缩 ul
了一个展开收缩的东东,留着以后万一用到 后台递归生成的函数(这里是一个反射参数展示,支持多层级展开显示,后台反射如何多层级解析的方法有时间再补上吧) /// <summary> /// 递 ...
- JavaScript高级程序设计—阅读笔记(第一部分)
第一章 JavaScript简介1.JavaScript组成(核心(ECMAScript),文档对象模型(DOM),浏览器对象模型(BOM))2.文档对象模型(DOM),提供访问和操作网页内容的方法和 ...
- kali linux 之 DNS信息收集
[dig]命令的使用: dig是linux中的域名解析工具,功能比nslookup强很多,使用也很方便. windows系统下使用dig须下载安装一下. 使用方法: root@kali:~# dig ...
- 【转】C++中继承中的同名成员问题
C++中,子类若有与父类同名的成员变量和成员函数,则同名的成员变量相互独立,但同名的子类成员函数重载父类的同名成员函数.举例如下: #include <iostream> using na ...
- Installing the PHP/MongoDB extension on Mac OSX 10.8
Installing PHP/MongoDB extension is a two steps task on OSX: Install the autoconf tool required for ...
- 六款值得推荐的android(安卓)开源框架简介【转】
http://my.oschina.net/u/1244156/blog/380647 1.volley 项目地址 https://github.com/smanikandan14/Volley-de ...
- [HTTP] Origins, CROS, Preflight
Origins made up of three parts the data scheme, the hostname and the prot. It is important to know t ...
- linux 配置 Apache mysql php最新版
第一部分:安装mysql 官方下载 mysql5.6.19 64位的rpm格式文件 0.rpm 四个mysql5.6.19 卸载默认的mysql yum -y remove mysql-libs-* ...
- 从Kali 2.0 转至 Kali Rolling
1. 修改官方软件库列表 编辑/etc/apt/sources.list,注释掉原有内容,然后添加下述内容. # kali rolling deb http://http.kali.org/kali ...
- mysql2csv 和 csv2mysql 工具
mysql2csv 和 csv2mysql 工具 在这里提供了两个使用 .csv 格式 的简单的 MySQL 数据库的导数据工具.csv 格式可以很容易地生成和解析,而且,也可以很容易地使用办公软件把 ...