3.1:在页面加载完成后执行任务
3.1.1代码执行的时机选择
$(document).ready()是jQuery中响应javaScript内置的onload事件,并执行任务的一种典型方式。虽然$(document).ready()和onload具有类似的效果,但是在出发操作的时间上存在着微妙的差异的。
当一个文档完全下载到浏览器中时,会触发window.onload事件。这就意味着页面上的全部元素对javaScript而言都是可以操作的,这种情况对编写功能代码非常有利。
通过$(document).ready()注册的事件处理程序,则会在DOM完全就绪并可以使用时调用。虽然这意味着所有元素对脚本而言都是可以访问的,但是却并不意味着所有关键的文件已经下载完毕。当HTML下载完成并解析为DOM树之后,代码就可以运行。
为了保证JavaScript代码执行以前已经应用了样式,最好是在<head>元素中把<link>放在<script>前面
3.1.2基于一个页面执行多个脚本
通过javaScript(而不是在HTML中添加处理程序属性)注册时间处理程序的传统机制是,把一个函数指定给DOM元素的对应属性。
function doStuff(){
执行某任务;
}
我们可以在html中指定这个函数
<body οnlοad=”doStuff();”>
也可以在javaScript页面中进行处理;
window.onload = doStuff;
但是如果我们定义了另外一个方法,去执行另外的任务,
function doOtherStuff(){
//执行另外一种任务
}
window.onload = doOtherStuff
那么这个函数就会取代刚刚指定的第一个函数。因为.onload属性一次只能保存对一个函数的引用,所以不能在现有的行为基础上在增加行为。
在这种情况下,$(document).ready()机制能够很好的指定第一个函数。每次调用这个方法都会向内部的行为队列中添加一个新函数,在页面加载完成后,所有函数都将得到执行。而且是按照注册他们的
(注:window.onload虽然也可以注册多个函数,但不能保证按顺序执行);
3.1.3:代码简写方式
(1).
$(document).ready(function(){
//代码
}
);
(2).
$().ready(function(){
//代码
});
(3)
$(function(){
//代码
});
3.1.4:与其他库共存
在同一个页面中使用多个javaScript库。由于多个库都使用$标识符,因此就需要一种方式来避免冲突。
<scripttype="text/javascript"src="/JQueryTest/js/jquery-1.6.2.js"></script>
<scripttype="text/javascript"src="exporting.js"></script>
<scripttype="text/javascript">
jQuery.noConflict();
</script>
这里调用noConflict()方法让出$,这样就可以引用2个库了,但是在需要使用jQuery方法时,必须记住要用jQuery而不是$来调用。
在ready()方法中使用$的技巧。我们传递给它的回调函数中可以接受一个参数,就是jQuery本身。利用这个参数,我们可以重命名jQuery为$,而不必担心造成冲突:
jQuery(document).ready(function($){
//在这里,可以正常使用$!
}
);
jQuery(function($){
//正常使用$
});
3.2:简单的事件
除了页面加载之外,我们也想在其他很多时候完成某个任务。
3.2.1简单隐藏效果
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>Insert titlehere</title>
<scripttype="text/javascript"src="../js/jquery-1.6.2.js"></script>
<scripttype="text/javascript"src="../js/jquery.url.js"></script>
<scripttype="text/javascript">
$(document).ready
(
function()
{
$("button").click
(
function()
{
$("p").hide();
}
);
}
);
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is aparagraph.</p>
<p>This is anotherparagraph.</p>
<button>Click me</button>
</body>
</html>
由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:
- 把所有 jQuery 代码置于事件处理函数中
- 把所有事件处理函数置于文档就绪事件处理器中
- 把 jQuery 代码置于单独的 .js 文件中
- 如果存在名称冲突,则重命名 jQuery 库
3.2.2.jQuery事件
下面是 jQuery 中事件方法的一些例子:
Event 函数 | 绑定函数至 |
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
3.2.3.常用的jQuery事件方法
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
触发实例:
$("button#demo").click()
上面的例子将触发 id="demo" 的 button 元素的 click 事件。
绑定实例:
$("button#demo").click(function(){$("img").hide()})
上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。
方法 | 描述 |
bind()(被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数) | 向匹配元素附加一个或更多事件处理器 |
blur()(当元素失去焦点时发生 blur 事件) | 触发、或将函数绑定到指定元素的 blur 事件 |
change()(当元素的值发生改变时,会发生 change 事件) | 触发、或将函数绑定到指定元素的 change 事件 |
click()(单击元素事,会发生dblclock事件) | 触发、或将函数绑定到指定元素的 click 事件 |
dblclick()(当双击元素时,会发生 dblclick 事件) | 触发、或将函数绑定到指定元素的 double click 事件 |
向匹配元素的当前或未来的子元素附加一个或多个事件处理器 | |
移除所有通过 live() 函数添加的事件处理程序。 | |
触发、或将函数绑定到指定元素的 error 事件 | |
返回 event 对象上是否调用了 event.preventDefault()。 | |
相对于文档左边缘的鼠标位置。 | |
相对于文档上边缘的鼠标位置。 | |
阻止事件的默认动作。 | |
包含由被指定事件触发的事件处理器返回的最后一个值。 | |
触发该事件的 DOM 元素。 | |
该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 | |
描述事件的类型。 | |
指示按了哪个键或按钮。 | |
触发、或将函数绑定到指定元素的 focus 事件 | |
触发、或将函数绑定到指定元素的 key down 事件 | |
触发、或将函数绑定到指定元素的 key press 事件 | |
触发、或将函数绑定到指定元素的 key up 事件 | |
为当前或未来的匹配元素添加一个或多个事件处理器 | |
触发、或将函数绑定到指定元素的 load 事件 | |
触发、或将函数绑定到指定元素的 mouse down 事件 | |
mouseenter()(当鼠标指针穿过元素时,会发生 mouseenter 事件) | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
mouseleave()(当鼠标指针离开元素时,会发生 mouseleave 事件) | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
mousemove()(当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件) | 触发、或将函数绑定到指定元素的 mouse move 事件 |
mouseout()(当鼠标指针从元素上移开时,发生 mouseout 事件) | 触发、或将函数绑定到指定元素的 mouse out 事件 |
mouseover()(当鼠标指针位于元素上方时,会发生 mouseover 事件) | 触发、或将函数绑定到指定元素的 mouse over 事件 |
mouseup()(当在元素上放松鼠标按钮时,会发生 mouseup 事件) | 触发、或将函数绑定到指定元素的 mouse up 事件 |
向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 | |
文档就绪事件(当 HTML 文档就绪可用时) | |
resize()(当调整浏览器窗口的大小时,发生 resize 事件。) | 触发、或将函数绑定到指定元素的 resize 事件 |
触发、或将函数绑定到指定元素的 scroll 事件 | |
触发、或将函数绑定到指定元素的 select 事件 | |
触发、或将函数绑定到指定元素的 submit 事件 | |
toggle()(oggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。) | 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 |
所有匹配元素的指定事件 | |
第一个被匹配元素的指定事件 | |
从匹配元素移除一个被添加的事件处理器 | |
从匹配元素移除一个被添加的事件处理器,现在或将来 | |
触发、或将函数绑定到指定元素的 unload 事件 |
3.2常用事件方法举例
3.2.1.bind()方法
当点击鼠标时,隐藏或显示 p 元素:
$("button").bind("click",function(){
$("p").slideToggle();
});
定义和用法
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
将事件和函数绑定到元素
规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行的函数。
语法
$(selector).bind(event,data,function)
参数 | 描述 |
Event | 必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件。必须是有效的事件。 |
Data | 可选。规定传递到函数的额外数据。 |
Function | 必需。规定当事件发生时运行的函数。 |
替代语法
$(selector).bind({event:function,event:function, ...})
参数 | 描述 |
{event:function, event:function, ...} | 必需。规定事件映射,其中包含一个或多个添加到元素的事件,以及当事件发生时运行的函数。 |
3.2.2.blur方法。
实例
当输入域失去焦点 (blur) 时改变其颜色:
<html>
<head>
<script type="text/javascript"src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
</head>
<body>
Enter your name: <inputtype="text" />
<p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p>
</body>
</html>
定义和用法
当元素失去焦点时发生 blur 事件。
blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码。
提示:早前,blur 事件仅发生于表单元素上。在新浏览器中,该事件可用于任何元素。
触发 blur 事件
触发被选元素的 blur 事件。
语法
$(selector).blur()
将函数绑定到 blur 事件
规定当被选元素的 blur 事件发生时运行的函数。
语法
$(selector).blur(function)
参数 | 描述 |
function | 可选。规定当 blur 事件发生时运行的函数。 |
3.2.3delegate()
实例
当点击鼠标时,隐藏或显示 p 元素:
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"src="../js/jquery-1.6.2.js"></script>
<script type="text/javascript"src="../js/jquery.url.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
//向这个按钮后面添加一个段落
$("button").click(function(){
$("<p>这是一个新段落。</p>").insertAfter("button");
});
});
</script>
</head>
<body>
<divstyle="background:blue;">
<p>这是一个段落</p>
<button>请点击这里</button>
</div>
</body>
</html>
定义和用法
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
语法
$(selector).delegate(childSelector,event,data,function)
参数 | 描述 |
childSelector | 必需。规定要附加事件处理程序的一个或多个子元素。 |
Event | 必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。 |
Data | 可选。规定传递到函数的额外数据。 |
Function | 必需。规定当事件发生时运行的函数。 |
3.2.4error方法
实例:如果图像不存在,则用一段预定义的文本取代它:
<html>
<head>
<script type="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("img").error(function(){
$("img").replaceWith("<p><b>图片未加载!</b></p>");
});
});
</script>
</head>
<body>
<img src="errorimg.gif" />
<p>如果上面的图像没有正确地加载,会被替换为一段 "图片未加载" 的文本。</p>
</body>
</html>
3.2.5.which 属性
实例:显示按了哪个键:
<html>
<head>
<script type="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
});
</script>
</head>
<body>
请随意键入一些字符:<inputtype="text" />
<p>当您在上面的框中键入文本时,下面的 div 会显示键位序号。</p>
<div />
</body>
</html>
定义和用法
which 属性指示按了哪个键或按钮。
语法
event.which
参数 | 描述 |
event | 必需。规定要检查的事件。这个 event 参数来自事件绑定函数。 |
3.2.6,target 属性
<html>
<head>
<script type="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("p, button, h1, h2").click(function(event){
$("div").html("点击事件由一个 " + event.target.nodeName + " 元素触发");
});
});
</script>
</head>
<body>
<h1>这是一个标题</h1>
<h2>这是另一个标题</h2>
<p>这是一个段落</p>
<button>这是一个按钮</button>
<p>标题、段落和按钮元素定义了一个点击事件。如果您触发了事件,下面的 div 会显示出哪个元素触发了该事件。</p>
<div></div>
</body>
</html>
3.2.7 mouseup()方法 mouseover方法
<html>
<head>
<script type="text/javascript"src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").mouseup(function(){
$("div").slideToggle();
});
$("#mousePara").mouseover(function(){
$("button").mouseup();
});
});
</script>
</head>
<body>
<div>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</div>
<button>切换</button>
<p id="mousePara">如果您把鼠标移动本段落上,会激活上面这个按钮的 mouseup 事件。</p>
</body>
</html>
3.2.8resize()方法
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"src="../js/jquery-1.6.2.js"></script>
<script type="text/javascript"src="../js/jquery.url.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(window).resize(function(){
while(true){
alert("傻X别动我的浏览器!");
}
});
});
</script>
</head>
<body>
<div style="background:blue;">
<p>请您改变浏览器的窗口</p>
</div>
</body>
</html>
(注:以上内容是通过http://www.w3school.com.cn学习,很多内容粘帖下来是为了方便学习)