/*
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);
});
});