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