JQuery基础教程 学习笔记(二)

1，$(document).ready(function() {}); 可简写为 $().ready(function() {}); 可简写为 $(function() {});

2,  $('#switcher-large').bind('click',function(){
        $('body').addClass('large');
    });
});

.bind的方法绑定JavaScript事件和行为

3,　.removeClass方法与.addClass方法相反

4， $()里除了this之外其他都要加引号

5,　$().bind('click',function(){}; 可简写为 $().click(function(){})；

6， $()开头必以分号(;)结尾

7,   折叠的两种方法

　　　$(document).ready(function() {
    　　$('#switcher h3').click(function(){
   　　 $('#switcher .button').toggleClass('hidden');
   　　 });
　　});//只能执行同一种操作　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　$(document).ready(function() {
    　　$('#switcher h3').toggle(function(){
   　　 $('#switcher .button').addClass('hidden');
    　　}, function()
    　　{
       　　 $('#switcher .button').removeClass('hidden');
    　　});
　　});//可执行两种才做

8， 鼠标经过离开

　　$(document).ready(function() {
  　　$('#switcher .button').hover(function(){
   　　 $(this).addClass('hover');
 　　 },function(){
　　  $(this).removeClass('hover');});
　　});

9, 停止祖先的事件向后代传播

　　event.stopPropagation();

10,模拟用户操作

　　$('#switcher').trigger('click'); 可简写为 $('#switcher').click();

11.以var toggleStyleSwitcher = function() {
        $('#switcher .button').toggleClass('hidden');
    };定义的函数变量只能在同一函数下使用

 

书上的总结

$(document).ready(function() {
  $('#switcher .button').hover(function(){
    $(this).addClass('hover');
  },function(){
  $(this).removeClass('hover');});
});

$(document).ready(function() {
    $('#switcher .button').click(function(event){
    $('body').removeClass();
    $('#switcher .button').removeClass('selected');
    $(this).addClass('selected');
    
    if(this.id=='switcher-large')
        $('body').addClass('large');

    if('switcher-narrow'==this.id)
        $('body').addClass('narrow');
    event.stopPropagation();
    });
    
});

$(document).ready(function() {
    var toggleStyleSwitcher = function() {
        $('#switcher .button').toggleClass('hidden');
    };
    $('#switcher').click(toggleStyleSwitcher);
    $('#switcher-normal').click(function(){
        $('#switcher').bind('click',toggleStyleSwitcher);
    });
    $('#switcher-narrow , #switcher-large').click(function(){
        $('#switcher').unbind('click',toggleStyleSwitcher);
    });
});

$(document).ready(function() {
    $('#switcher').click();
});