jquery学习

最新推荐文章于 2022-03-22 20:45:35 发布

max_yuyu

最新推荐文章于 2022-03-22 20:45:35 发布

阅读量105

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_40087726/article/details/113466256

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jquery事件
1.鼠标移入和移出事件
mouseover/mouseout和mouseenter/mouseleave两个都是移入/移出事件区别：
1）.mouseover/mouseout:鼠标经过（移入和移出事件）别元素选中会触发（但是如果选元素有子元素，在子元素上移入和移出，仍然会触发事件）
2）.mouseenter/mouseleave：鼠标经过（移入和移出）被选元素会触发（即使存在子元素，在子元素上移入和移出，也不会再次触发此事件）
2.hover事件（鼠标移入显示，移出隐藏）

$(".on").hover(function () {
	$(".topDown").show();
	 },function () {
	$(".topDown").hide();
 })

当使用 toggle自带切换功能，如果没有参数

$(".on").hover(function () {
	$(".topDown").toggle();
 })

3.绑定事件bind
1）绑定单个事件：bind（事件名称，事件处理）

 $(".on").bind("mouseover",function () {
		 $(".topDown").show();
})

$(".on").bind({
			mouseover:function () {
                $(".topDown").show();
            },
			mouseout:function () {
                $(".topDown").hide();
       }
})

移除绑定事件–》dayTashClick 带参数的移除

// 实现tab切换，绑定事件
        $("#nav li:first").bind("click",dayTashClick = function () {
            $(".taskContent").css("backgroundColor","#26a6e3");
            $("#dayTask").show();
            $("#growTask").hide();
        })

$("#del").click(function () {
            // 所有事件移除(不带参数)
            $("#nav li:first").unbind();
            // 移除单个事件（带参数）
            $("#nav li:first").unbind("click",dayTashClick)
        })

使用on添加click事件（）

$(".nav dt").on("click",function(){
            $(this).siblings().toggle("slow");
        });

4.显示和隐藏的效果

        // 显示和隐藏方法：可以指定参数，执行速度，单位毫秒，还可以固定值：slow，normal，fast
        // 设置成0，立刻消失或者显示，没有动画效果
        $("#show").click(function () {
            $("img:eq(0)").show(0)
            // $("img:eq(0)").show("normal")
        })
        $("#hide").click(function () {
            $("img:eq(0)").hide(1000)
        })

        //淡入 淡出效果 整体效果（改变原始的透明度，）
        $("#din").click(function () {
            $("img:eq(1)").fadeIn(2000)
        })
        $("#dout").click(function () {
            $("img:eq(1)").fadeOut(2000)
        })

        // 收缩展开效果  上下的压缩和展开效果，参数和上面一致
        $("#sdown").click(function () {
            $("img:eq(2)").slideDown(2000)
        })
        $("#sup").click(function () {
            $("img:eq(2)").slideUp(2000)
        })
    })