jQuery基础教程-绑定简单的事件

• 实现一个简单的样式转换器，部分代码如下，实现功能为，当点击Default时所有文字都会清空当前样式并转换为原来的样式，当点击Narrow按钮是，字体会变小，当点击Large所有字体会变大，实现思路为，点击按钮则为当前的文本添加一个CSS类。另外一个是，当按钮被点击时字体会变粗。

      

        
Style Switcher
        
          Default
        
        
          Narrow Column
        
        
          Large Print
           
      

body.large .chapter {
  font-size: 1.5em;
}

body.narrow .chapter {
  width: 250px;
}

.selected {
  font-weight: bold;
}

• 第一种方法如下，将当前HTML文本的ID和JS结合在一起

$(document).ready(function() {
    $('#switcher-default').addClass('selected');
    $('#switcher button').on('click', function() {
        $('body').removeClass();
        $('#switcher button').removeClass('selected');
        $(this).addClass('selected');
    });
    $('#switcher-narrow').on('click', function() {
         $('body').addClass('narrow');
    });
    $('#switcher-large').on('click', function() {
         $('body').addClass('large');
    });
});

• 第二种方法如下，通过上下文以及CSS类名的统一性，使得JS代码得到简化，同时提高了其可维护性和扩展性

$(document).ready(function() {
    $('#switcher-default').addClass('selected');
    $('#switcher button').on('click', function() {
        var bodyClass = this.id.split('-')[1];
        $('body').removeClass().addClass(bodyClass);
        $('#switcher button').removeClass();
        $(this).addClass('selected');
    });
});