您的位置：首页 > Web前端 > JQuery

jquery的一点点认识

2015-07-07 11:11 585 查看

概述

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的一点点认识

相关文章推荐

新的分享

章节导航