jQuery中的事件、动画、表单的应用方式

//事件绑定
$("#btn1").bind("click",function(){
   alert("点我触发bind函数");
})

点我触发bind函数

alert($("button").parent().is("body"));
 /*
  * $("#b1").is(":visible") 判断id为d1的元素是否可见
  * 可见返回true，不可见就返回false
  * 
  * next($("#b1").is(":visible"));
  */
alert("#btn2").is(":visible");
$("#btn2").click(function(){
    if($("#b1").is(":visible")){
        //$(this).next().css();
         $(this).next().hide();
    }else{
        $(this).next().show();
    }
})

web前端开发学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
$(function(){           
    /*
     * 合成事件hover()方法的语法结构:
     *  hover(enter,leave);
     * 
     * */
     $("#btn2").hover(function(){
         $(this).next().show();
     },function(){
        $(this).next().hide();
     })
})

点我触发bind函数
隐藏或者显示

    

$(function(){       
    /*
     * 合成事件toggle()方法的语法结构:
     *  toggle(f1,f2,f3,f4....);
     * 
     * 有俩个功能:
     *    1：模拟连续点击(自动点击，不是你手动点击);
     *      2.如果元素本身可见，则会自动隐藏，如果本身是隐藏的，则会自动显示
     * */
    /* $("#btn1").toggle(function(){
        alert("触发toggle函数");
     });*/
     //带俩个参数的toggle方法
     $("#btn1").toggle(function(){
          $("#btn1").css("color","turquoise");
         //alert("触发toggle函数");
     },function(){
        //alert("触发toggle2函数")
        $("#btn1").css("background-color","deepskyblue");
     })
})

            #body1{
                background-color: deepskyblue;
            }
            #div1{
                background-color: white;
            }
            #span1{
                background-color: yellow;
            }
        
        
        
            $(function(){
                 /*
                  *演示事件冒泡
                  *    当一个元素的本身和父类都绑定了相同事件时，它本身触发该事件，则父类也会触发该事件
                  * 解决方法：停止冒泡
                  *      方法1:本身return false；
                  *     方法2:stopPropagation(); [event是事件对象]
                  */
                 $("#body1").click(function(){
                     alert("body的click方法");
                 })
                  $("#div1").click(function(){
                     alert("div的click方法");
                 })
                   $("#span1").click(function(){
                     alert("span的click方法");
                    // return false;
                    event.stopPropagation();
                 })

            })
        
    
    
         body
         
            div
            
                span
            
         

阻止默认行为

网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击提交按钮后表单会提交，有时需要阻止元素的默认行为。

在 jQuery 中，提供了 preventDefault () 方法来阻止元素的默认行为。

实例:

    
        
        
        
        
            $(function(){
                 //阻止点击之后跳转
                 $("#a1").click(function(){
                     alert("你正在阻止a标签的默认行为");
                     //return false;        //方法一
                     event.preventDefault(); //方法二
                 })
                 /*
                  * 写一个登录表单，设置如果用户名不满足正则表达式的要求，阻止请求服务
                  * 正则判断是否满足符合规则
                  * 
                  */ 
                  $(":submit").click(function(){
                    var na=$("#na").val();
                     var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; 
                       if(!uPattern.test(na)){
                            alert("你正在阻止a标签的默认行为");
                            return false;
                       }

                  })

            })
        
    
    
        跳转百度
        
            用户名

            密码

              登录

        
    

事件对象的属性

事件对象: 当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数

event.type : 获取事件的类型

    
        
        
        
        
            $(function(){
                 /*
                  * 事件对象：对事件对象的常用属性进行封装
                  * 1.event.type获取事件的类型(也就是事件名称)
                  * 2\. event.preventDefault();  阻止默认的事件行为 (在IE中无效)
                  * 3\. event.stopPropagation() 阻止事件冒泡
                  *  4.event.target  获取触发事件的元素（获取触发的目标）
                  * 5.event.pageX / event.pageY 获取事件光标的X和Y的坐标
                  * 6.event.which  获取鼠标的按键(左键返回1，中键返回2，右键返回3)
                  */
                 $("#a1").click(function(){
                      //alert(event.pageX+","+event.pageY);
                       alert(event.which);
                      return false;
                 })

            })
        
    
    
        查看事件对象的属性

    

移除事件:

在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。

    
        
        
        
        
            $(function() {
                $("#btn1").one("click", function() {
                    $("#test").append("
我的绑定函数1
");
                }).one("click", function() {
                    $("#test").append("
我的绑定函数2
");
                }).one("click", function() {
                    $("#test").append("
我的绑定函数3
");

                })
            })
        
    

    
        绑定函数