jQuery 第三章

事件-扣动扳机

 

希望语句在用户单击按钮时执行。我们需要引入.bind()方法，通过这个方法，可以指定任何JavaScript事件，并为该事件添加一种行为。此时，事件是click

例：

HTML标记：

<div id="switcher">

    <h3>Style Switcher</h3>

    <div class="button selected" id="switcher-normal">Normal</div>

    <div class="button">           id="switcher-narrow">Narror Column</div>

    <div class="button">           id="switcher-large">Large Print</div>

</div>

-------------------------------------------------

第一种应用

CSS样式：

body .large .chapter{

    font-size:1.5em;

}

$(document).ready(function(){

         $('#switcher-large').bind('click',function(){

             $('body').addClass('large');

     });

});

-------------------------------------------------------

第二种应用

body .narror .chapter{

   width:400px;

}

$(document).ready(function(){

   $('#switcher-normal').bind('click',funtion(){

       $('body').removeClass('narrow');

       $('body').removeClass('large');

   });

   $('#switcher-narrow').bind('click',funtion(){

});

--------------------

.selected{

  font-weight:bold;

}

--------------------

通过在事件处理程序中使用$(this)，可以为相应的元素创建一个jQuery对象，然后就如同使用CSS选择符找到该元素一样对它进行操作。

$(this).addClass('selected');

把这行代码放到那3个事件处理程序中，就可以在按钮被单击时为按钮添加selected类。要从其他按钮中移除这个类，可以利用jQuery的隐式迭代特性，并编写如下代码。

$('#switcher .button').removeClass('selected');这行代码会移除样式转换器中每个按钮的selected类。因此，按照正确的次序放置他们，就可以得到如下代码：

$（document）.ready(function(){

    $('#switcher-normal').bind('click',function(){

       $('body').removeClass('narrow');

       $('body').removeClass('large');

       $('#switcher .button').removeClass('selected');

       $(this).addClass('selected');

    });   

});

简化代码：

$(document).ready(function(){

   $('#switcher-normal').bind('click',function(){

       $('body').removeClass('narrow').removeClass('large');

   });

   $('#switcher-narrow').bind('click',function(){

       $('body').addClass('narrow').removeClass('large');

   });

   $('#switcher-large').bind('click',function(){

       $('body').removeClass('narrow').addClass('large');

   });

   $('#switcher  .button').bind('click',function(){

        $('#switcher .button').removeClass('selected');

        $(this).addClass('selected');

   });

});

进一步简化：  .removeClass()方法的参数是可选的，即当省略参数时，该方法会移除元素中所有的类。

$(document).ready(function(){

   $('#switcher-normal').bind('click',function(){

      $('body').removeClass();

   });  

});

 

环境关键字this引用的是DOM元素，而不是jQuery对象，所以可以使用原生的DOM属性来确定被单击元素的ID.因而，就可以对所有按钮都绑定相同的处理程序，然后在这个处理程序内部针对按钮执行不同的操作：

$(document).ready(function(){

    $('#switcher .button').bind('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');

    });

});

简写事件：不使用.bind()而使用.click()可以将前面的样式转换器程序重写为如下所示：

$(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');

     });

});

-----------------------------------------------------------------------

显示和隐藏高级特性

.hidden{

   display:none;

}

为实现这个功能，可以把当前的按钮状态保存在一个变量中，每当标签被单击时，通过检查这个变量的值就能够知道该向这些按钮中添加，还是要从这些按钮中移除.hidden类。此外，也可以直接检查这个类在一个按钮上是否存在，然后再决定做什么。jQuery定义了两个.toggle（）方法。

我们这里所说的.toggle（）方法接受两个参数，而且这两个参数都是函数。第一次在元素上单击会调用第1个函数，第2次单击会触发第2个函数。

实现我们的可折叠的样式转换器就非常简单了：

$(document).ready(function(){

   $('#switcher h3').toggle(function(){

      $('#switcher .button').addClass('hidden');

       },funcition(){

       $('#switcher .button').removeClass('hidden');

       });

   });

在为元素应用或从元素移除类之前，可以使用.toggleClass()方法自动检查该类是否存在：

$(document).ready(function(){

   $('#switcher h3').click(function(){

      $('#switcher .button').toggleClass('hidden');

    });

});

 

   $('#switcher-narrow').bind('click',function(){

      $('body').removeClass().addClass('narrow');

   });

   $('#switcher-large').bind('click',function(){

      $('body').removeClass().addClass('large');

   });

   $('#switcher .button').bind('click',function(){

       $('#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').removeClass('narrow');

       $('body').addClass('large');

       $('#switcher .button').removeClass('selected');

       $(this).addClass('selected');

    });

 

我们可以为按钮添加一种翻转状态，以便清楚地表明它们能与鼠标进行某种方式

#switcher  .hover{

   cursor:pointer;

   background-color:#afa;

}

$(document).ready(function(){

    $('#switcher .button').hover(funciton(){

        $(this).addClass('hover');

        },function(){

         $(this).removeClass('hover');

        });

}); 

转载于:https://www.cnblogs.com/jw123/archive/2011/01/19/1939471.html