首页 > 代码库 > jquery事件总结

jquery事件总结

2024-07-13 13:07:49   223人阅读

转：http://www.cnblogs.com/Jolinson/p/3479079.html#a1.3

JQuery攻略（四）事件

jQuery事件处理，鼠标的单击，双击，悬停，键盘按键，文本动画.....

此章节有

1.1被点击的按钮查找

1.2事件的自动触发

1.3点击之后禁用按钮

1.4鼠标事件 

1.5焦点事件

1.6CSS的操作

1.7元素创建

1.8动画隐藏和展示

1.9效果

1.10键盘输入控制

1.11防止事件冒泡

小结

1.1被点击的按钮查找

 一个页面上有很多按钮，对应不同的功能，一个按钮对应一个事件，说到底就是给每个按钮绑定一个事件。

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>jQuery</title>    <link href="http://www.mamicode.com/css/css.css" rel="stylesheet" type="text/css" />    <script src="http://www.mamicode.com/script/jquery-1.4.1.js" type="text/javascript"></script>    <script src="http://www.mamicode.com/script/js.js" type="text/javascript"></script></head><body>    <span class="buttons bold">Bold</span>     <span class="buttons italic">Italic</span></body></html>

 

 使用bind()方法为按钮添加单击事件

$(document).ready(function () {    //bold click事件    $(".bold").bind("click", function () {        alert("You clicked the bold button!");    });    //bold click事件    $(".italic").bind("click", function () {        alert("You clicked the italic button!");    });});

 

 

 现在要把单击事件添加到button，并不是单独为每一个按钮绑定添加点击事件

$(document).ready(function () {    $(".buttons").bind("click", function () {        alert("You clicked the " + $(this).text() + " button");    });});

 

 不使用bind()方法也可以直接为指定的任何元素添加事件

$(document).ready(function () {    //bold click事件    $(".bold").click(function () {        alert("You clicked the bold button!");    });    //bold click事件    $(".italic").click(function () {        alert("You clicked the italic button!");    });});

 

 利用事件对象的目标属性

 事件对象包含事件细节，JavaScript把事件对象自动发送到事件处理函数。事件对象的其中一个属性称为(target)目标，利用这个属性我们可以知道在哪个元素上发生了事件。

$(document).ready(function () {    $(".buttons").click(function (event) { //event 事件对象        var target = $(event.target); //event.target ==> span.buttons（classname）        if (target.is(".bold")) { //是否有bold的class            alert("You clicked the bold button.");        }        if (target.is(".italic")) {            alert("You clicked the italic button.");        }    });});

 

注：如果一个元素上有多个classname的话，event.target只取第一个

双击事件的绑定，和也上面一样，只是把click关键字换成dblclick

$(document).ready(function () {    //bold dblclick事件    $(".bold").bind("dblclick", function () {        alert("You clicked the bold button!");    });    //bold dblclick事件    $(".italic").bind("dblclick", function () {        alert("You clicked the italic button!");    });});

 

在这一段，主要用到了

事件的绑定方法bind(eventType ， data ，hanlder) 将事件附加到指定的元素上

单击事件的绑定click(handler)

双击事件的绑定dblclick(handler)

 

1.2事件的自动触发

有的时候，事件的触发，需要自动式的，而不是手动点击或者其他操作触发，这个时候就要用到trigger()方法了。

$(document).ready(function () {    $(".buttons").bind("click", function () {        alert("You clicked the " + $(this).text() + " button");    });    $(".bold").trigger("click"); //触发});

触发事件的方法trigger(eventType) eventType为字符串类型

 

1.3点击之后禁用按钮

有的时候，我们希望事件只触发一次，比如提交按钮被点击一次之后，我们想要禁用该按钮。

$(document).ready(function () {    $(".buttons").bind("click", function () {        alert("You clicked the " + $(this).text() + " button");        $(this).unbind("click"); //删除click单击事件    });});

 

unbind()从指定的元素中删除先前绑定的事件处理函数

unbind()

unbind(eventType)

unbind(eventType,handler)

如果不传入任何参数，所有的事件将被删除

 

1.4鼠标事件

鼠标除了单击双击事件，还有悬浮

mouseup() 鼠标抬起时候触发，不分鼠标左右键，和click不同的是，click只能是左键点击触发

$(document).ready(function () {    $(".buttons").bind("mouseup", function () {        alert("You clicked the " + $(this).text() + " button");    });});

 

mousedown() 鼠标按下时候触发，不分鼠标左右键，和click不同的是，click只能是左键点击触发

$(document).ready(function () {    $(".buttons").bind("mousedown", function () {        alert("You clicked the " + $(this).text() + " button");    });});

 

mouseover() 鼠标指针进入特定区域，触发

$(document).ready(function () {    $(".buttons").bind("mouseover", function () {        alert("You get in the " + $(this).text() + " button  area.");    });});

 

mouseout() 鼠标指针离开特定区域，触发

$(document).ready(function () {    $(".buttons").bind("mouseout", function () {        alert("You get out the " + $(this).text() + " button  area.");    });});

 

 

判断左右鼠标键的点击

假如，一个页面上有一个按钮，鼠标左键右键分别做不同的事，如果判断鼠标的左右键呢。利用事件对象属性。

$(document).ready(function () {    $(".buttons").mousedown(function (event) {        var theKey = event.button;        if (theKey == 0) {            alert("左键")        } else if (theKey == 1) {            alert("滚轮点击");        }        else {            alert("右键");        }    });});

 

 

显示鼠标指针的屏幕坐标

$(document).ready(function () {    $(".div").mousedown(function (event) {        var xpoint = event.screenX; //横坐标        var ypoint = event.screenY; //纵坐标        $("p").html("X坐标：" + xpoint + "<br/>Y坐标：" + ypoint);    });});

 

 

文字显示动态突出

当鼠标在一行中的某个，某几个字体上滑过的时候，突出字突然加大，移走时候回复原来大小。

$(document).ready(function () {    $("span").mouseover(function () { //到达匹配元素的上方，改变css样式        $(this).css({            ‘font-weight‘: ‘bold‘,            ‘font-size‘: ‘large‘        });    });    $("span").mouseout(function () { //鼠标离开，css样式还原        $(this).css({            ‘font-weight‘: ‘normal‘,            ‘font-size‘: ‘inherit‘        });    });});

主要方法是css() , 用于将css属性直接应用到HTML元素

css(property,value)

还有一个经常应用到图片上的效果，当鼠标放在图片上，图片加大，移出后还原

$(document).ready(function () {    $(".img").mouseover(function () {        $(this).css("height", function () { return $(this).height() + 50 });        $(this).css("width", function () { return $(this).width() + 50 });    });    $(".img").mouseout(function () {        $(this).css("height", function () { return $(this).height() - 50 });        $(this).css("width", function () { return $(this).width() - 50 });    });});

或者可以换一个写法，使用hover、addClass、removeClass

hover(handler1,handler2) 把两个事件附加到指定元素，一个处理鼠标指针进入，一个处理鼠标指针离开元素时触发

$(document).ready(function () {    $(".img").hover(mouseover, mouseout);    function mouseover() {        $(this).css("height", function () { return $(this).height() + 50 });        $(this).css("width", function () { return $(this).width() + 50 });    }    function mouseout() {        $(this).css("height", function () { return $(this).height() - 50 });        $(this).css("width", function () { return $(this).width() - 50 });    }});

 

 or

$(document).ready(function () {    $(".img").hover(mouseover, mouseout);    function mouseover() {        $(this).addClass("imgAdd");    }    function mouseout() {        $(this).removeClass("imgAdd");    }});

 

 

 图片设置透明度

$(document).ready(function () {    $(".img").css("opacity", 0.2); //设置透明度    $(".img").mouseover(function () { //放大        $(".img").css("opacity", 1.0); //清晰        $(this).css("height", function () { return $(this).height() + 50 });        $(this).css("width", function () { return $(this).width() + 50 });    });    $(".img").mouseout(function () { //还原        $(".img").css("opacity", 0.2);        $(this).css("height", function () { return $(this).height() - 50 });        $(this).css("width", function () { return $(this).width() - 50 });    });});

 

1.5焦点事件

 元素得到失去焦点的时候触发

$(document).ready(function () {    $(".input").focus(function () { //得到焦点        $("p").html("请填写。");    });    $(".input").blur(function () { //失去焦点        $("p").html("");    });});

 

 

1.6CSS的操作

之前的 css(property,value)、addClass("className")、removeClass("className")都是对css的操作

还有一个toggleClass()方法，利用toggleClass()方法删除或应用一个css类，如果指定元素已经应用了这个css类，使用toggleClass()方法将会把它删除，如果没有应用，那么将为指定的元素应用css类

js

$(document).ready(function () {    $("#click").click(function () {        $("#set").toggleClass("red");    });});

html

<span id="click" class="buttons">Click</span> <span id="set" class="buttons">Set</span>

 

css

.buttons{    width: 100px;    float: left;    text-align: center;    margin: 5px;    border: 2px solid;}.red{    background-color: Red;}

 与之差不多的一个方法是toggle()此方法为指定的元素附加两个事件处理函数。第一个事件在事件偶数次发生时执行，而第二个 事件处理函数在事件在奇数数次发生执行，从0开始计数。

toggle(handler1,handler2)

如此，上面切换样式的方法可改成

$(document).ready(function () {    $("#set").toggle(function () {        $("#set").addClass("red");    },    function () {        $("#set").removeClass("red");    });});

样式的切换

    <span id="bold" class="buttons">bold</span>     <span id="italic" class="buttons">italic</span>    <br /><br />    <div> This is a test！    </div>
$(document).ready(function () {    //鼠标悬浮    $(".buttons").hover(function () {        $(this).addClass("sethover");    }, function () {        $(this).removeClass("sethover");    });    //bold    $("#bold").click(function () {        $("div").addClass("bold");        $("div").removeClass("italic");    });    //italic    $("#italic").click(function () {        $("div").addClass("italic");        $("div").removeClass("bold");    });});

 样式切换，气泡对话框

css

.buttons{    width: 100px;    float: left;    text-align: center;    margin: 5px;    border: 2px solid;}.hover1{    width:200px;    height:100px;    color: Red;    background-image: url(../image/3.png);    background-repeat: no-repeat;    background-position: bottom;}

 

html

<body>    <span id="bold" class="buttons">bold</span>     <span id="italic" class="buttons">italic</span>    <span class="hover1"></span></body>

 

js

$(document).ready(function () {    //鼠标悬浮    $(".buttons").hover(function (event) {        $(this).addClass("hover1");        var txt = $(this).text();        $("<span class=‘showtip‘><br/><br/>This is " + txt + " menu<span>").appendTo($(this));    }, function () {        $(this).removeClass("hover1");        $(".showtip").remove();    });});

 

 

1.7元素创建

在一个元素前，或后插入另外的元素，可以用到after、before、append、appendTo、prepend、prependTo(更多方法与区别)，移除可以用remove()方法.

after、before 同等级插入，无嵌套关系after例子：$("p").after("<p> Hello world!</p> ");<p>标杆</p><p> Hello world!</p>before例子<p> Hello world!</p><p>标杆</p>append、appendTo 有嵌套 后面开始$("p").append("<b>Hello world!</b>");向匹配p元素集合中的每个元素结尾插入由参数指定的内容,会嵌套在内部<p><b>Hello world!</b></p>$("<b>Hello world!</b>").appendTo("p");向目标结尾插入匹配元素集合中的每个元素。会嵌套在内部,与append只是语法不一样。prepend、prependTo 有嵌套 前面开始$("p").prepend(‘<h2>插入元素h2</h2>‘);向匹配元素集合中的每个元素开头插入由参数指定的内容。插入的元素为<p>的下级$(‘<h2>插入元素h2</h2>‘).prependTo("p");向目标开头插入匹配元素集合中的每个元素。插入的元素为<p>的下级

 

$(document).ready(function () {    $("#add").click(function () {        $("div").prepend("<p>this is a test p .</p>");    });    $("#remove").click(function () {        $("p").remove();    });});

 

 创建“返回顶部”连接

 如果一篇文章很长，想回到顶部，总是要滑动鼠标滚轴，或按home键盘，太麻烦，我们需要页面上有一个图片或文字直接点击到头部。

html

 View Code

 

js

$(document).ready(function () {    $("<a href=http://www.mamicode.com/‘#topofpage‘>Return to top").insertAfter(‘p‘);    $("<a name=‘topofpage‘></a>").prependTo(‘body‘);});

在这里主要是应用到了insertAfter()方法，把匹配的元素插入到另一个指定的元素集合的后面。与insertBefore()函数对应。同等级不包含

 

1.8动画隐藏和展示

“更多”连接的显示与隐藏

css

.sethover{    /**/        cursor: pointer;}

 

html

 View Code

 

js

$(document).ready(function () {    //悬浮    $(".readMore").hover(    function () {        $(this).addClass("sethover");    },    function () {        $(this).removeClass("sethover");    }    );    //隐藏和显示    $(".readMore").toggle(function () {        $(".divShow").show("show");    }, function () {        $(".divShow").hide("show");    });    });

这里主要是用到了show()和hide()方法,

show()使指定的隐藏元素可见 show(speed,callback),speed 以毫秒为单位，也可以使用指定的字符串 ‘slow‘=600ms , ‘normal‘ =400ms ,‘fast‘ =200ms,如果省略，默认的就是normal

callback 回调，当动画完成时调用的函数

hide(speed,callback)作用功能和show()相反.

还有两个渐显，渐隐的方法是 fadeIn(speed,callback) 和fadeOut(speed,callback),它们是改变字体透明度而实现的。

 

 1.9效果

文本滑动效果

 html

<body>   <p id="message1">jQuery is an pen source project</p>   <p id="message2">jQuery is an pen source project</p></body>

js

$(document).ready(function () {    $("p#message1").css({ "border": "2px solid", "text-align": "center", "font-weight": "bold" }).hide().click(function () {        $(this).slideUp("slow"); //消失        $("p#message2").slideDown("slow"); //滑动显示    });    $("p#message2").css({ "backgroundColor": "#f00", "color": "#fff", "text-align": "center", "font-weight": "bold" }).click(function () {        $(this).slideUp("slow"); //消失        $("p#message1").slideDown("slow"); //滑动显示    });});

首先利用css()方法，给message1、message2添加了不同的样式，然后将其中一个隐藏，再为每个p标签添加点击事件，利用slideUp()、和slideDown()。

slideDown(speed，callback) 以滑动效果来逐渐显示选定元素。
speed 指定动画的持续时间，可以指定字符串fast、normal、slow或者毫秒，毫秒越大，动画持续越长。
callback是动画完成后调用的函数。

slideUp(speed，callback) 以活动效果逐渐使选定元素消失不可见。

图像滚动效果
首先，将img的position设置为relative

img{    position: relative;}

然后利用animate()方法使它移动，移动到距左边距600px的地方

$(document).ready(function () {    //点击图片，图片想右边移动600px距离    $("img").click(function () {        $(this).animate({ left: 600 }, "slow");    });});

 

animate() 根据指定的css属性和使用缓和参数来控制自定义动画

animate(properties,speed,easing,callback)

properties css 属性 {left:300}

speed 动画持续时间 slow、normal、fast 、xxms

easing （缓和）是一个函数（可选），控制动画随着时间如何进行。它需要一个插件。有两个缓和函数：linear（线性），swing（摆动）。默认swing。

callback 回调

 

点击横移，再回去

自动

$(document).ready(function () {    //点击图片    $("img").click(function () {        $(this).animate({ left: 600 }, "slow", function () {            $(this).animate({ left: 0 }, "slow");        }); //图片向右边移动600px距离,之后回到原来位置          });});

 

点击

$(document).ready(function () {    //点击图片，图片向右边移动600px距离，再点击回到原位    $("img").toggle(function () {        $(this).animate({ left: 600 }, "fast");    }, function () {        $(this).animate({ left: 0 }, "slow");    });});

 

移动后隐藏

$(document).ready(function () {    //点击图片，图片向右边移动600px距离    $("img").click(function () {        $(this).animate({ left: 600 }, "slow");        $(this).slideUp("slow"); //移动后隐藏    });});

移动后淡出

$(document).ready(function () {    //点击图片    $("img").click(function () {        $(this).animate({ left: 600 }, "slow"); //图片向右边移动600px距离        $(this).fadeTo("slow", 0.2); //移动后降低透明度        //$(this).fadeOut("slow"); //移动后谈出 等于 $(this).fadeTo("slow", 0);    });});

fadeTo() 和 fadeOut() 作用都是一样的 ，都是控制图片的谈出，不过fadeTo()比fadeOut的好处是，前者可以控制透明度，而后者直接将透明度设置了0

fadeTo(speed,opacity,callback) 调整选定元素的不透明度

speed 持续时间，时间越大持续越久
opacity 透明度 数值介于 0 -1

 

使图像一边滚一边变大

$(document).ready(function () {    //点击图片    $("img").toggle(    function () {        $(this).animate({ left: 1100, height: $(this).height() * 2, width: $(this).width() * 2 }, "slow");    },    function () {        $(this).animate({ left: 0, height: 100, width: 100 }, "slow");    });});

 

 

使图像滚动到右侧在向左滚动

$(document).ready(function () {    //点击图片    $("img").click(    function () {        $(this).animate({ left: 1200 }, "slow", function () { //向右边慢慢滑动1200px            $(this).fadeTo("slow", 0); //淡出            $(this).fadeTo("slow", 1); //淡入            $(this).animate({ left: 0 }, "slow"); //回到起始位置        });    });});

 

 

 1.10 键盘输入控制

 监控键盘事件 keypress()、keydown()、keyup()

html

<body>    <input type="text" class="infobox" />    <p></p></body>

js

$(document).ready(function () {    $(".infobox").keypress(function (event) { //键盘按下事件        $("p").text(String.fromCharCode(event.keyCode)); //字符 FF没反应...        //$("p").text(event.charCode); //ASCII     });});

 

keypress()和keydown()的区别：

如果用户反复按任意键，按下然后保持按下状态，keydown()事件只执行一次，而keypress()事件则是每插入一个字符就执行一次（keydown()的持续时间更长一些）

此外，修改Shift键、Ctrl键等为keydown()所识别，而这些修改键不会触发keypress()事件。

 

1.11防止事件冒泡

 什么是事件冒泡？看代码。

html

<body>    <div>        Div Element        <p>            Paragraph Element <span>Span Element</span>        </p>    </div></body>

 

js

$(document).ready(function () {    $("div").click(function () {        alert("You click the div element");    });    $("p").click(function () {        alert("You click the paragraph element");    });    $("span").click(function () {        alert("You click the span element");    });});

三个元素嵌套 <div<p<span ,三个元素都附加了点击事件，

当点击span时，首先弹出警告框的是 “You click the span element ”、再“You click the paragraph element”然后“You click the div element”

当点击p标签元素时候，弹框的是“You click the paragraph element”然后“You click the div element”

当点击div元素时候，弹框的是“You click the div element”

当任何元素上发生事件时，事件处理机制首先检查该元素是否附加了事件方法（以及事件处理函数）。如果是，就执行（附加的事件方法的）事件处理函数的语句。在此之后，事件处理机制继续检查该元素的亲节点，看是否附加了事件方法，如果是，也会执行其事件处理函数，直到DOM根节点。

利用事件属性，稍作修改

$(document).ready(function () {    $("div").click(function (event) {        var target = $(event.target);        if (target.is("div")) {            alert("You click the div element");        }        else if (target.is("p")) {            alert("You click the paragraph element");        }        else if (target.is("span")) {            alert("You click the span element");        }    });});

 

 

小结

此篇记录了各种不同鼠标事件和键盘事件（单击、双击、按键keypress等），几种文字图片效果（淡入，淡出，上滑、下滑等）最后总结一下所以用到的事件和方法。

1.bind() 绑定事件 --click、dblclick...

$(".bold").bind("click", function () {        alert("You clicked the bold button!");    });

2.event 事件对象 function (event){...}

3.trigger(eventType)方法 触发事件

$(".bold").trigger("click"); //触发


4.unbind()方法 从指定的元素中删除先前绑定的事件处理函数

$(this).unbind("click"); //删除click单击事件


CSS处理方法
5.css(property,value)方法 将css属性直接应用到HTML元素

 $(this).css({            ‘font-weight‘: ‘normal‘,            ‘font-size‘: ‘inherit‘        });$(".img").css("opacity", 0.2); //设置透明度


6.addClass("className")

7.removeClass("className")

8.toggleClass()方法 删除或应用一个css类

9.toggle()方法 为指定的元素附加两个事件处理函数。

10.元素创建:after、before、append、appendTo、prepend、prependTo...

动画效果
show()和hide()显示与隐藏
fadeIn(speed,callback) 和fadeOut(speed,callback)渐隐和渐显
fadeTo(speed,opacity,callback) 调整选定元素的不透明度
slideDown(speed，callback) 以滑动效果来逐渐显示选定元素
slideUp(speed，callback) 以活动效果逐渐使选定元素消失不可见。
animate(properties,speed,easing,callback)根据指定的css属性和使用缓和参数来控制自定义动画


鼠标事件
mousedown() 鼠标按下时候触发，不分鼠标左右键，和click不同的是，click只能是左键点击触发
mouseover() 鼠标指针进入特定区域，触发
mouseout() 鼠标指针离开特定区域，触发
hover(handler1,handler2) 把两个事件附加到指定元素，一个处理鼠标指针进入，一个处理鼠标指针离开元素时触发

键盘事件
keypress()、keydown()、keyup()

焦点事件
focus()得到焦点事件
blur()失去焦点事件

事件冒泡

 

jQuery系列链接汇总

JQuery攻略（一） 基础知识——选择器 与 DOM

JQuery攻略（二） Jquery手册

JQuery攻略（三）数组与字符串


联系
我们