1. 加载DOM

jQuery用$(document).ready()方法来代替传统JavaScrpt的window.onload方法。但它们执行时机有所不同,window.onload在网页所有元素装载完毕之后触发;而$(document).ready()则是在DOM载入就绪时触发。并且window.onload只能执行一次;而$(document).ready()则可以被多次调用。

    // 下面三种写法都可以
$(document).ready(function(){
// your code
}) $().ready(function(){
// your code
}) $(function(){
// your code
})

2. 事件绑定

bind()方法的调用格式为:

bind(type [,data], fn);

type -  事件类型,包括:blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseout,mouseenter,mouseleave,change,

select,submit,keydown,keypress,keyup和error等,也可以是自定义的名称。
data - 可选参数,作为event.data属性值传递给事件对象的额外对象。

fn - 用来绑定的处理函数。

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

3. 事件合成

hover()方法,用于模拟光标悬停事件,hover()相当于替代bind("mouseenter"),bind("mouseleave")。语法为:

hover(enter, leave);

上面事件绑定中的代码可以简写为如下代码:

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

toggle()方法,用于模拟鼠标连续单击事件。第1次单击触发函数fn1,第2次单击触发函数fn2,...第n次单击触发函数fnN;然后循环轮番调用。语法为:

toggle(fn1,fn2,...fnN);

上面事件绑定中的代码可以简写为如下代码:

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

另外,toggle()方法在jQuery中还有另外一个作用:切换元素的可见状态。上面的代码还可以更改为:

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

4. 事件冒泡

4.1 什么是冒泡?

<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
});
// 为div元素绑定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})

如上代码在单击span、div、body时,会触发不同的事件。单击span会触发三个事件,单击div触发二个事事件,单击body触发一个事件。这就是事件的冒泡。

4.2 如何停止冒泡事件?

使用stopPropagation()方法来停止冒泡事件。

       // 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});

4.3 如何阻止默认行为?

网页中的元素有自己的默认的行为,比如:单击超链接后会跳转,单击“提交”按钮表单会提交,有时需要阻止元素的默认行为。这就用到了preventDefault()方法。

$(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); //获取元素的值
if(username==""){ //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
event.preventDefault(); //阻止默认行为 ( 表单提交 )
}
})
})

如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPropagation()方法和preventDefault()方法的一种简写方式。

$(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); //获取元素的值
if(username==""){ //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
return false;
}
})
})

5. 事件对象的属性

event.type,获取到事件的类型;

event.target,获取触发事件的元素;

event.pageX,event.pageY,获取到光标相对于页面的x坐标和y坐标;

event.which,获取鼠标单击事件中的左、中、右键;1=左键、2=中键、3=右键;

通过上述代码可以查看event各属性。另外还有两个方法已经介绍了:stopPropagation()与preventDefault()。

更多信息参考:http://learn.jquery.com/events/event-basics/

<a id="mya">test1</a><a id="myb">test2</a><a id="myc">test3</a><a href='http://google.com'>click me .</a><input />
$(function(){
$("input").keyup(function(e){
alert(e.which);
$(this).blur();
})
$("#mya").click(function(event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标
return false;//阻止链接跳转
});
$("#myb").mousedown(function(e){
alert(e.which) // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键
return false;//阻止链接跳转
})
$("#myc").click(function(event) {
alert(event.type);//获取事件类型
return false;//阻止链接跳转
});
$("a[href='http://google.com']").click(function(event) {
var tg = event.target; //获取事件对象
alert( tg.href ) ;
return false;//阻止链接跳转
});
})

6. 移除事件

方式一,全部移除:

    $(function(){
$('#btn').bind("click", function(){
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", function(){
$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", function(){
$('#test').append("<p>我的绑定函数3</p>");
});
$('#delAll').click(function(){
$('#btn').unbind("click");
});
})

方式二,只移除指定函数:

    $(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);
});
})

7. 模拟操作

常用模拟:

       $('#btn').trigger("click");

触发自定义事件:

    $(function(){
$('#btn').bind("myClick", function(event, message1, message2){
$('#test').append( "<p>"+message1 + message2 +"</p>");
});
$('#btn').click(function(){
$(this).trigger("myClick",["我的自定义","事件"]);
}).trigger("myClick",["我的自定义","事件"]);
})

8. 其他方法

8.1 绑定多个事件类型

  $(function(){
$("div").bind("mouseover mouseout", function(){
$(this).toggleClass("over");
});
})

8.2 添加事件命名空间,便于管理

  $(function(){
$("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
});
$("div").bind("mouseover.plugin", function(){
$("body").append("<p>mouseover事件</p>");
});
$("div").bind("dblclick", function(){
$("body").append("<p>dblclick事件</p>");
});
$("button").click(function() {
$("div").unbind(".plugin");
})
})

8.3 相同事件名称,不同命名空间执行方法

<div >test.</div>
<button >根据命名空间,触发事件</button>
  $(function(){
$("div").bind("click",function(){
$("body").append("<p>click事件</p>");
});
$("div").bind("click.plugin", function(){
$("body").append("<p>click.plugin事件</p>");
});
$("button").click(function() {
$("div").trigger("click!"); // 注意click后面的感叹号
});
})

单击div触发两个事件,单击button则仅触发click事件。

注意:trigger("click!")后面的感叹号的作用是匹配所有不包含在命名空间中的click方法;如果去掉感叹号,则两个事件都触发。

jQuery学习笔记(事件)的更多相关文章

  1. jquery学习笔记-----事件和动画

    一.ready机制 $(document).ready( function(){} ) $().ready( function(){} ) $( function(){} )  jquery的read ...

  2. jQuery学习笔记——事件

    何为事件 就是你的鼠标,键盘等对网页元素进行的操作. 常见事件 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown c ...

  3. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  4. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  5. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  6. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  7. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  8. jQuery学习笔记之插件开发(4)

    jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...

  9. jQuery学习笔记之概念(1)

    jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...

  10. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

随机推荐

  1. Jenkins 关闭和重启

    关闭jenkins服务:http://localhost:8080/exit 将上面的exit改为restart后就可以重新启动jenkins服务器.http://localhost:8080/res ...

  2. BIEE11G配置Oracle 12c数据源

    方法一:直接在连接池中输入连接信息 将tnsname.ora里配置的连接信息等号后面的字符串去掉空格和换行符即可) (DESCRIPTION =(ADDRESS = (PROTOCOL = TCP)( ...

  3. django之创建第6-2个项目-过滤器列表

    转载:http://www.lidongkui.com/django-template-filter-table 一.转化为小写 {{ name | lower }} 二.串联:先转义文本到HTML, ...

  4. Qt5.9静态库编译VS2015-x64

    不多说. 编译配置参数如下 configure.bat -static -no-openssl -release 不支持OpenSSL,也没有安装各个数据库的Driver,所以数据库方面也只支持了SQ ...

  5. 解决打开bootstrap模态框抖动问题

    //打开模态框 function modalOpen(){ $('body').css("overflow", "hidden"); } //关闭模态框 fun ...

  6. (原)torch中threads的addjob函数使用方法

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6549452.html 参考网址: https://github.com/torch/threads#e ...

  7. TCP KeepAlive的几个附加选项

    TCP_KEEPALIVE选项只是一个开关,Linux中默认的Keepalive的选项如下: $sudo sysctl -a | grep keepalive net.ipv4.tcp_keepali ...

  8. node下使用jquery

    node使用jquery的两种方式 在node下,使用jquery有两种方法: 使用jsdom模拟一个window对象 使用cheerio,cheerio只实现了jquery的dom部分功能,相当于j ...

  9. 禁止logback输出状态信息

    一.问题描述 22:18:07,299 |-INFO in ch.qos.logback.classic.LoggerContext[default] - Could NOT find resourc ...

  10. apache2.2 虚拟主机配置(转)

    转自:http://blog.csdn.net/zm2714/article/details/8351342 一.改动httpd.conf 打开appserv的安装文件夹,找到httpd.conf文件 ...