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是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2....
  • HR1187362408
  • HR1187362408
  • 2015年07月07日 09:47
  • 531

认识jQuery

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Oper...
  • slandove
  • slandove
  • 2016年02月20日 20:00
  • 548

索引器的一点点认识

概述 索引器为c#程序语言中类的一种成员,它使得对象可以像数组一样被索引,使程序看起来更直观,更容易编写。 理解 索引器允许类或者结构的实例按照与数组相同的方式进行索引取值,索引器与属性类似,不...
  • HR1187362408
  • HR1187362408
  • 2015年07月01日 13:39
  • 397

using的一点点认识

概述 定义一个范围,将在此范围之外释放一个或多个对象 当做别名(命名空间) 当做try-finally处理 三种方式...
  • HR1187362408
  • HR1187362408
  • 2015年07月01日 14:34
  • 416

工作总结 每天进步一点点。

用关键字记录一些工作中的学习收获和心得。 2012年8月28日 1.我可以认为delete表后,那个啥高水位不变。原因是:delete并没有真正删除,只是把块标记一下? 发现只有delete...
  • tulinying
  • tulinying
  • 2012年06月04日 17:31
  • 1656

属性的一点点认识

概述 属性就是对于一个对象的抽象刻画[1] . 一个具体事物,总是有许许多多的性质与关系,我们把一个事物的性质与关系,都叫做事物的属性。 事物与属性是不可分的,事物都是有属性...
  • HR1187362408
  • HR1187362408
  • 2015年07月01日 13:52
  • 371

构造函数的一点点认识

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

Java 每天学习一点点之数据类型

特别声明:如下内容均来自于不同网络课程视频或书籍,整理合并完成。 如果有整理错误,忘及时指出,共同进步,不胜感激。Java 入门之数据类型Java 数据类型分为两种1. 基本数据类型 数值型(两种类型...
  • ProgramStudent
  • ProgramStudent
  • 2017年02月06日 05:09
  • 177

别再说“差一点点就…",那只证明了你永远不会成功

坐在桌前翻开五年日记本,那天给出的问题是:最近有什么差一点点的经历?   我想了一会,写的是:2017年,晴,某门考试差一点点就及格了。   合上本子,忍不住叹气好久。   ...
  • h330531987
  • h330531987
  • 2017年06月08日 14:12
  • 176

一点点基础面试总结

1,java中的循环语句有哪些,判断语句有哪些; 答:while循环,do-while循环,for循环 2,this关键字和super关键字的区别 答:this是一个指向自身的指针;super是一个指...
  • xue_never_say_never
  • xue_never_say_never
  • 2014年10月27日 19:15
  • 531
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery的一点点认识
举报原因:
原因补充:

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