jquery 学习笔记 （2）--write less,do more

$(window).load(function(){      })           window.onload=function(){ }

toggle()方法

toggle()方法的语法结构：

toggle(fn1,fn2,...,fnN);

作用1.toggle()方法用于模拟鼠标连续单击事件

控制元素的隐藏与显示

$(function(){

  $("#panel h5.head").toggle(function(){

              $(this).next().show();

           },function(){

　　　　  $(this).next().hide();

        })

});

作用2.切换元素的可见状态

$("#panel h5.head").toggle(function(){

              $(this).next().toggle();

           },function(){

　　　　  $(this).next().toggle();

        })

});

 阻止默认行为

网页中的元素有自己默认的行为，如

1.单击超链接后会跳转

2.单击“提交”按钮后表单会提交

对表单提交前验证

$(function(){
   $("#sub").bind("click",function(event){
        var username = $("#username").val();
        if(username == ""){
              $("#msg").html("<p>文本框的值不能为空.</p>");
              event.preventDefault();
        }
   });
})

<form action="">
     username:<input type="text" id="username" />
     <input type="submit" value="提交" id="sub" />
</form>
<div id="msg"></div>

　如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false

event.preventDefault();    //阻止默认行为

event.stopPropagation();   //停止事件冒泡　

jQuery不支持事件捕获

event.target   获取到触发事件的元素

event.target.nodeName   元素名称  P  H3  SPAN等等

trigger()方法

trigger()方法触发事件后，会执行浏览器默认操作，例如：

$("input").trigger("focus");

不仅会触发为<input>元素绑定的focus事件，也会使<input>元素本身得到焦点（浏览器的默认操作）

解决办法：triggerHandler()方法

$("input").triggerHandler("focus");

会触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作。即文本框只触发绑定的focus事件，不会得到焦点。

绑定多个事件类型

$(function(){

    $("div").bind("mouseover mouseout",function(){

         $(this).toggleClass("over");

    });

});

当光标滑入<div>元素时，该元素的class切换为"over"；当光标滑出<div>元素时，class切换为先前的值。这段代码等同于：

$(function(){

    $("div").bind("mouseover",function(){

       $(this).toggleClass("over");

    }).bind("mouseout",function(){

       $(this).toggleClass("over");

    });

});