在jQuery中,我们需要学习9种事件操作:
(1)页面载入事件;
(2)鼠标事件;
(3)键盘事件;
(4)表单事件;
(5)滚动事件;
(6)绑定事件;
(7)解绑事件;
(8)合成事件;
(9)一次事件;
(一)页面载入事件
javascript:window.onload
jquery:$(document).ready()
区分:
window.onload:在页面所有DOM元素(包括图片等外部文件)加载完成之后才执行,此时我们才可以操作DOM。即,如果你想动态操作页面,必须得等所有的全部都加载完毕后才能够操作DOM
$(document).ready():在页面所有DOM元素(不包括图片等外部文件)加载完成就可以执行,此时我们就可以操作DOM。较之window.onload提高了非常大的效率
/******************************/
jQuery中页面载入函数的四种写法:
写法一、
$(document).ready(functin(){
//代码部分
})
写法二、
jQuery(document).ready(function(){
//代码部分
})
//在jQuery中,$就是指jQuery。因此我们可以使用$来代替jQuery,两者是等价的。
写法三、(最最重要,超级常用)
$(function(){
//代码部分
})
写法四、
jQuery(function(){
//代码部分
})
每一个页面,只能有一个页面载入函数。相当于C语言里面的main()函数
(二)鼠标事件
click 鼠标单击事件
dbclick 双击事件
mouseover 移入事件
mouseout 移出事件
mousemove 移动事件
mousedown 按下事件
mouseup 松开事件
/********************************/
单击事件
{
$("#id").click(function () {
//代码
});
*注意*任何元素我们都可以为它添加单击事件!
}
鼠标移入和移出事件(一)
{
$().mouseover(function(){
//代码
})//鼠标移入事件
$().mouseout(function(){
//代码
})//鼠标移出事件
//使用鼠标移入和移出事件可以模仿CSS中hover
}
鼠标移入和移出事件(二)
{
$(".class").mouseenter(function () {
//代码
});//鼠标移入事件
$(".class").mouseleave(function () {
//代码
});//鼠标移出事件
}
//区分两个鼠标移入和移出事件
{
mouseover()事件在鼠标移入“所选元素及其后代子元素”时都会触发;
//并且移入所选元素算一次事件,移入其子元素又算一次事件。事件会都会触发,如果从最外面移入最内部,那么所选元素有多少子元素,就会触发多少次事件
mouseenter()事件只有鼠标移入“所选元素”才会触发,如果鼠标仅仅移入“所选元素的后代子元素”的时候,并不会触发。
//只有移入所选元素所包括(笼罩)范围内才算一次事件,在元素内部无论怎么移入子元素都不算一次事件
mouseout()与mouseleave()同理;
}
鼠标按下和松开事件
{
$("#id").mousedown(function () {
//代码
});//鼠标按下事件
$("#id").mouseup(function () {
//代码
});//鼠标松开事件
}
//jQuery链式调用
在jQuery中,如果“同一个”jQuery对象有N个操作,我们就可以使用像“链式操作”的方式。
例如:鼠标移入移出事件
$().mouseover().mouseout()
//这样可以顺序写下去,并且是无顺序要求的,即:要执行mouseout()事件,但是没有执行mouseover()事件,执行mouseout()事件并不受影响
//当事件的操作对象是一个的时候,或者说对于一个对象有多种操作的时候,可以采用链式调用的方法
//实现二级菜单,当鼠标移入时显示菜单,移出时菜单消失
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
#wrapper
{
text-align:left;
display:inline-block;
width:300px;
border:1px solid silver;
}
h3
{
text-align:center;
padding:10px;
background-color:#F1F1F1;
border-bottom:1px solid gray;
}
ul
{
padding:8px;
list-style-type: none;
display:none;
}
li{
text-align: center;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#wrapper").hover(function () {
$("ul").slideToggle();
},function(){
$("ul").slideToggle();
})
})
</script>
</head>
<body>
<div id="wrapper">
<h3>河北工业大学</h3>
<ul>
<li>链接一</li>
<li>链接二</li>
<li>链接三</li>
</ul>
</div>
</body>
</html>
(三)键盘事件
在jQuery中,常用的键盘事件有3种:
(1)keydown事件;
(2)keypress事件;
(3)keyup事件;
//对于这3个事件,有一定的先后顺序:keydown→keypress→keyup。
(1)keydown()
{
//键盘的按键被按下时触发
$("#input").keydown(function () {
//代码
})
//例:
$(window).keydown(function (event) {
//代码
});
涉及到键盘输入的标签或者window都可以用keydown(),来捕获事件
//其中input标签最常用,上面的例子
}
(2)keypress()
{
keypress事件是在键盘上的某个键被按下到松开“整个过程”中触发的事件。
$(window).keypress(function (event) {
//代码
});
涉及到键盘输入的标签或者window都可以用keydown(),来捕获事件
//其中input标签最常用
}
(3)keyup()
{
keyup事件是在键盘的某个键被按下之后松开的一瞬间触发的事件。
$("#txt").keyup(function () {
var str = $(this).val().toString();
$("#num").text(str.length);
})
//实时获得输入的长度
涉及到键盘输入的标签或者window都可以用keyup(),来捕获事件
//其中input标签最常用
}
区分:keydown()与keypress()与keyup()
(1)keypress事件只在按下键盘的任一“字符键”(如A~Z、数字键)时触发,单独按下“功能键”(如F1~F12、Ctrl键、Shift键、Alt键等)不会触发;而keydown无论是按下“字符键”还是“功能键”都会触发;
(2)按下“字符键”会同时触发keydown和keypress这2个事件,但是这2个事件有一定顺序:keydown>keypress;
(3)keyup事件是在按键抬起一瞬间触发的事件,无论之前是按下“字符键”还是“功能键”都会触发;
//综上:
keydown 按下键事件(包括数字键、功能键)
keypress 按下键事件(只包含数字键)
keyup 放开键事件(包括数字键、功能键)
(四)表单事件
常用的表单事件有4种:
(1)focus()事件;
(2)blur()事件;
(3)change()事件;
(4)select()事件;
/*************************************/
(1)focus()和blur()
{
focus()和blur()往往是配合使用的
focus()表示获取焦点触发的事件
blur()表示失去焦点触发的事件
//注意:
具有获得焦点和失去焦点事件的元素有3个(一定要记住啊):
(1)单行文本框text;
(2)多行文本框textarea;
(3)下拉列表select;
//对于下拉列表来说,绑定的是select,而不是option
}
(2)change()
{
当用户在单行文本框text和多行文本框textarea输入文本时,由于文本框内字符串的改变将会触发onchange事件。此外,在下拉列表select中一个选项的状态改变后也会触发onchange事件。
具有获得onchange事件的元素有3个:
(1)单行文本框text;
(2)多行文本框textarea;
(3)下拉列表select;
//
$("#txt").change(function () {
//这里的$(this)指的是$("#txt")
var len = $(this).val().length;
$("#num").text(len);
})
//这里的change()事件,并不是实时的,即:只有当文本框失去焦点后,才会发现内容发生了改变
//change事件对于下拉列表来说,绑定的是select而不是option
}
(3)select()
{
//当用户选中单行文本框text或多行文本框textarea的文本时(select()事件对于select标签不适用),会触发select事件。select事件的具体过程是从鼠标按键被按下,到鼠标开始移动并选中内容的过程。这个过程并不包括鼠标键的放开。
$("#txt1").select(function () {
alert("你选中了单行文本框中的内容");
});
}
// placeholder的jQuery形式:
$(function () {
//获取文本框默认值
//此时的input标签属性里面是没有设置placeholder的,用的是input的默认值,即:生硬的在html中设置value
var txt = $("#search").val();
//focus()获取焦点事件
$("#search").focus(function () {
if ($(this).val() == txt) {
$(this).val("");
}
});
//blur()失去焦点事件
$("#search").blur(function () {
if ($(this).val() == "") {
$(this).val(txt);
}
});
})
//与placeholder进行区分:
上面的方法是在文本框获取焦点的时候内容就清空了,
而placeholder是只要你不输入内容,placeholder的内容始终是存在的
(五)滚动事件
滚动事件,指的是当滚动条位置发生改变时触发的事件。不妨理解为,在某一个元素上的滚动条发生滚动就会触发滚动事件
//详情请参照:“jQuery函数操作汇总~元素(标签)角度”中scrollTop()与scrollLeft()函数部分
$().scroll(function(){
//代码
})
//例:滚动事件与scrollTop()和scrollLeft()的结合使用
$("#id").scroll(function () {
if ($(this).scrollTop() > index) {
//代码
}
});
或
$(window).scroll(function(){
//代码
});
(六)绑定事件
在文档加载完成后,如果我们想要为元素绑定某个事件来完成某些操作,可以使用on()方法来实现。在jQuery中,我们可以使用on()方法为某些元素绑定一个事件或者多个事件。
$().on(type , function(){
//代码
})
//type必选参数,type是一个字符串
//fn为必选参数,表示事件的处理函数。
两种用法:
1>为已经存在的标签绑定事件
{
$("#btn").on("click", function () {
alert("CSDN");
})
以上方法等价于
$("#btn").click(function(){
//代码
})
}
2>为“未来即将创建”的元素绑定事件
{
所谓的“未来创建的元素”指的是使用jQuery创建的元素。
即:应用jQuery节点函数操作加入的节点
//例:
var $btn = $('<input id="btn" type="button" value="按钮"/>');
$($btn).appendTo("body");
$("#btn").on("click", function () {
//代码
});
以上例子等价于:
var $btn = $('<input id="btn" type="button" value="按钮"/>');
$($btn).appendTo("body");
$("#btn").click(function () {
//代码
});
//即on()方法中的click等价于click()方法
}
//对于使用on()方法绑定多个事件,或者绑定多个选择器,请参考以下链接
–>点这里<–
//从jQuery1.7开始(我们现在用的是jQuery1.12.0),对于绑定事件,jQuery官方都建议使用on()方法来统一取代以前的bind()、live()和delegate();对于解绑事件,jQuery官方也建议使用off()方法来统一取代以前的unbind()、die()和undelegate()。
(七)解绑事件
通过off()方法解除绑定的某一指定的事件或者所有事件。
$().off(type)
//type为必选参数,表示事件类型,是一个字符串
//例:
$("#btn").off("click");
//off()方法不仅可以解绑“使用绑定事件所添加的事件”,还可以解绑“使用基本事件所添加的事件”。
//对于使用off()方法绑定多个事件,或者绑定多个选择器,请参考以下链接
–>点这里<–
(八)合成事件
使用hover()方法一次性地定义鼠标移入和移出两个个事件,这就是所谓的合成事件。
$().hover(fn1,fn2)
//fn为function的缩写
//参数fn1表示“鼠标移入”时触发的事件处理函数,参数fn2表示“鼠标移出”时触发的事件处理函数。
//例:
$("h3").hover(function () {
$("#content").css("display","block");
}, function () {
$("#content").css("display", "none");
});
//hover()方法,准确来说是替代jQuery中的mouseenter()和mouseleave(),而不是替代mouseover()和mouseout()。
(九)一次事件one()
使用one()方法为所选元素绑定一个“只触发一次”的处理函数。
$().one(type , fn)
//type表示事件类型,是一个字符串
//例:
$("#btn").one("click", function () {
alert("只能弹出一次!");
});
//使用one()方法绑定的事件,只能触发一次,以后事件失效
(十)其他事件
load()、unload()、trigger()、error()等