jQuery中的时间和动画

时间 2020-01-05

标签 jquery 时间动画栏目 JQuery 繁體版

原文原文链接

一、加载DOM：以浏览器加载文档为例，在页面加载完成后，浏览器会经过JavaScript为DOM事件添加事件，在jQuery红使用$(document).ready()方法；javascript

二、执行时机：jQuery中的$(document).ready()方法注册的事件处理程序在DOM彻底就绪时就能够被调用；html

三、jQuery中的$(document).ready()方法注册的事件，只要DOM彻底就绪时就会被调用；java

四、避免方法：为onload事件绑定一个处理函数浏览器

$(window).load(function() {
    //编写代码
}

五、屡次使用：app

function one() {
    alert("one");
}
function two() {
    alert("two");
}

$(document).ready(function() {
    one();
})
$(document).ready(function() {
    two();
}

六、简写方式：$(doxument)能够简写成$()。由于当$()没有参数时，默认参数就是“document”；ide

七、事件绑定：在文档加载完成后，若是打算为元素绑定事件来完成某些操做，可使用bind()方法来对匹配元素来进行特定事件的绑定；函数

八、bind()有3个参数：（1）事件类型，可使自定义名称；（2）可选参数，做为event.data属性值传递给事件对象的额外数据对象；（3）用来绑定的处理函数；this

九、基本效果：spa

HTML代码：
<div id="panel">
    <h5 class="head">什么是jQuery？</h5>
    <div class="content">
      jQuery是一个优秀的JavaScript库。
    </div>
</div>


javascript代码：
$(function() {
    $("#panel h5.head").bind("click", function() {
         $(this).next().show();
    })
})

十、增强效果：code

$(function() {
   $("#panel h5.head").bind("click", function() {
       var $content = $(this).next();
       if($content.is(":visible")) {
           $content.hide();
       } else {
            $content.show();
       }
   })
})

十一、改变绑定事件的类型：

$(function() {
    $("#panel h5.head").bind("mouseover", function() {
        $(this).next().show();
    }).bind("mouseover", function() {
        $(this).next().hide();
    })
})

十二、简写绑定时间：

$(function() {
    $("#panel h5.head").mouseover(function() {
        $(this).next().show();
    }).mouseover(function() {
        $(this).next().hide();
    })
})

1三、合成事件：有两个，hover()方法和toggle()方法；

1四、hover()方法：

$(function() {
    $("#panel h5.head").hover(function() {
        $(this).next().show();
    }.function() {
        $(this).next().hide();
    })
})

1五、toogle方法：

$(function() {
    $("#panel h5.head").toggle(function() {
       $(this).next().show();
    }.function() {
       $(this).next().hide();
    })
});

1六、再次增强事件：

$(function() {
$("#panel h5.head").toggle(function() {
$(this).addClass("highligt");
$(this).next().show();
}.function() {
$(this).removeClass("highhligt");
$(this).next().hide();
});
});

1七、事件冒泡：在页面上能够有多个事件，也能够多个元素响应通一个事件：

HTML代码：
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>




JavaScript代码：
$(function() {
	$('span').bind("click", function() {
		var txt = $('#msg').html() + "<p>内层span元素被单击.</p>";
		$('#msg').html(txt);
	})
    $('#content').bind("click", function() {
		var txt = $('#msg').html() + "<p>外层div元素被单击.</p>";
		$('#msg').html(txt);
	})
	$("body").bind("click", function() {
		var txt = $('#msg').html() + "<p>body元素被单击</p>.";
		$('#msg').html(txt);
	});
})

1八、事件冒泡引起的问题：原本只想触发最内层元素的click事件，而后这个元素外层的元素也会被触发；

1九、触发自定义事件：

为元素绑定一个“myClick”事件：
$('#btn').bind("myClick", function() {
$(‘#test’).append("<p>个人自定义事件.</p>");
})


想要触发：
$('#btn').trigger("myClick")

20、hide()方法：为一个元素调用hide()方法，会将该元素的display样式改成"none"；

2一、当调用show()方法时，就会根据hide()方法记住display属性值来显示元素；