`
wzl454823
  • 浏览: 39582 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

阅读更多
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();
    })
})
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics