jquery的一点点认识

原创 2015年07月07日 11:11:00

概述

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
jQuery,顾名思议,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。


事件

ready(fn)

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。

有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。

请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发+$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。

在DOM加载完成时运行的代码,可以这样写:

jquery代码:

$(document).ready(function(){
  // 在这里写你的代码...
});

使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。

jquery代码:

$(function($) {
  // 你可以在这里继续使用$作为别名...
});

blur([[data],fn])

触发每一个匹配元素的blur事件。

这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的

描述:

触发所有段落的blur事件

jquery代码:

$("p").blur();

任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。

jquery代码:

$("p").blur( function () { alert("Hello World!"); } );

bind(type,[data],fn)

为每个匹配元素的特定事件绑定事件处理函数。

type,[data],function(eventObject)

type: 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

fn:绑定到每个匹配元素的事件上面的处理函数

当每个段落被点击的时候,弹出其文本。

jquery代码:

$("p").bind("click", function(){
  alert( $(this).text() );
});

同时绑定多个事件类型

jquery代码:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

同时绑定多个事件类型/处理程序

jquery代码:

$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},  
  mouseout:function(){$("body").css("background-color","#FFFFFF");}  
});

你可以在事件处理之前传递一些附加的数据。

jquery代码:

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

通过返回false来取消默认的行为并阻止事件起泡。

jquery代码:

$("form").bind("submit", function() { return false; })

通过使用 preventDefault() 方法只取消默认的行为。

jquery代码:

$("form").bind("submit", function(event){
  event.preventDefault();
});

通过使用 stopPropagation() 方法只阻止一个事件起泡。

jquery代码:

$("form").bind("submit", function(event){
  event.stopPropagation();
});

keydown([[data],fn])

触发每一个匹配元素的keydown事件

这个函数会调用执行绑定到keydown事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keydown事件会在键盘按下时触发。

在每一个匹配元素的keydown事件中绑定的处理函数。

data:keydown([Data], fn) 可传入data供函数fn处理。

fn:在每一个匹配元素的keydown事件中绑定的处理函数。

在页面内对键盘按键做出回应,可以使用如下代码:

jquery代码:

$(window).keydown({foo: "bar"}, function(event){
            alert(event.data.foo);//弹出附加数据信息
});

keyup([[data],fn])

触发每一个匹配元素的keyup事件

这个函数会调用执行绑定到keyup事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keyup事件会在按键释放时触发。

在每一个匹配元素的keyup事件中绑定的处理函数。

data:keydown([Data], fn) 可传入data供函数fn处理。

fn:在每一个匹配元素的keydown事件中绑定的处理函数。

在页面内对键盘按键做出回应,可以使用如下代码:

jquery代码:

$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

总结

这篇主要讲解了,对jquery事件的一点点认识。





版权声明:本文为博主原创文章,未经博主允许不得转载。

对jQuery插件的一点点认识

jQuery插件可以让我们的项目变得更加栩栩如生,做更少的工作去完成更多的事情,例如:jQuery UI,jQuery fullpage,返回顶部等js插件效果...

jquery的一点点认识

概述 JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2....

jquery的一点点认识

概述 JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2....

using的一点点认识

概述 定义一个范围,将在此范围之外释放一个或多个对象 当做别名(命名空间) 当做try-finally处理 三种方式...

属性的一点点认识

概述 属性就是对于一个对象的抽象刻画[1] . 一个具体事物,总是有许许多多的性质与关系,我们把一个事物的性质与关系,都叫做事物的属性。 事物与属性是不可分的,事物都是有属性...

关于中断的一点点认识

前一段时间,有幸和都江堰操作的作者面对面的聊了一把。对于前辈的技术和才能,晚辈深深地佩服。DJY_OS在应用方面的事件机制以及处理中断的方法都让人眼前一亮。在谈到中断时,前辈说,很多人都没有真正的理解...

构造函数的一点点认识

概述 构造函数 ,是一种特殊的方法。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。特别的一个类可以有多个构造函数 ,可根据其参数个数...

对Bootstrap的一点点认识

我在学习大前端: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。[...

每天进步一点点——重新认识Linux中的进程号

理解Linux内核是如何为进程分配进程号,以及在分布式集群中如何真确的区分唯一的进程号...
  • cywosp
  • cywosp
  • 2014年09月01日 00:42
  • 9112

对acm一点点改变性的认识

相信很多人都是对编程感兴趣进而才会进入acm这个坑的吧。但是实际上,要在acm这个坑里学出点能力来,我想大概就是两个:自学能力和逻辑思维能力。先说说自学能力吧。从C语言会一些简单的编程开始,到具有比较...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery的一点点认识
举报原因:
原因补充:

(最多只允许输入30个字)