jQuery笔记$("2")——jQuery事件和动画

最新推荐文章于 2022-09-16 14:43:31 发布

wzl454823

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量120

点赞数

分类专栏： jQuery 文章标签： jQuery HTML ViewUI

本文链接：https://blog.csdn.net/wzl454823/article/details/83738883

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

2.1事件编写


$(function(){
    //编写代码
    })

2.2事件绑定


$(function(){
    $("#a h1.head").bind("click",function(){
        $(this).next().show();
    })
})

2.3合成事件


2.3.1 hover()
$(function(){
    $("#a h1.head").hover(function(){
        $(this).next.show();
    },function(){
        $(this).next.hide();
    })
});
2.3.2 toggle()
$(function(){
    $("#a h1.head").toggle(function(){
        $(this).next().toggle(); 
    },function(){
        $(this).next().toggle();
    })
});

2.4阻止默认动作


$(function(){
   $("#sub").bind("click",function(event){
       var username = $("#username").val();  //获取元素的值
        if(username==""){     //判断值是否为空
	  $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
	     return false;
	}
   })
})

2.5移除事件


$(function(){
    $('#btn').bind("click", myFun1 = function(){
        $('#test').append("<p>我的绑定函数1</p>");
    }).bind("click", myFun2 = function(){
        $('#test').append("<p>我的绑定函数2</p>");
    }).bind("click", myFun3 = function(){
        $('#test').append("<p>我的绑定函数3</p>");
    });
        $('#delTwo').click(function(){
            $('#btn').unbind("click",myFun2);
    });
})

2.6 fadeIn()和fadeOut通过改变透明度


$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next("div.content").fadeOut();
    },function(){
        $(this).next("div.content").fadeIn();
    })
})

2.7 slideUp()和slideDown()通过改变高度


$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next("div.content").slideUp();
    },function(){
        $(this).next("div.content").slideDown();
    })
})