Jquery简介
jQuery是如何工作的
这是一个基本教程,旨在帮助您开始使用jQuery。如果您还没有测试页面设置,可以从创建以下HTML页面开始:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
// Your code goes here.
</script>
</body>
</html>
<script>元素中的src属性必须指向jQuery的副本。从Download jQuery页面下载jQuery的副本,并将jQuery .js文件存储在与HTML文件相同的目录中。
**注意:**当您下载jQuery时,文件名可能包含一个版本号,例如,jQuery -x.y.z.js。确保将该文件重命名为jquery.js,或者更新
在Document Ready上启动代码
为了确保代码在浏览器加载完文档后运行,许多JavaScript程序员将代码封装在onload函数中:
window.onload = function() {
alert( "welcome" );
};
//为了在文档准备好被操作时运行代码,jQuery有一个名为ready event的语句:
$( document ).ready(function() {
// Your code here.
});
注意: jQuery库通过窗口对象jQuery和** ** 只是jQuery的别名,它经常被使用,因为它更短、更快。
例如,在ready事件中,可以向链接添加一个click handler:
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "Thanks for visiting!" );
});
});
将上面的jQuery代码复制到HTML文件中,在这里输入//代码。然后,保存HTML文件并在浏览器中重新加载测试页面。现在,单击该链接应该首先显示一个警告弹出框,然后继续导航到http://jquery.com的默认行为。
对于click和大多数其他事件,可以通过在事件处理程序中调用event. preventdefault()来防止默认行为:
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "As you can see, the link no longer took you to jquery.com" );
event.preventDefault();
});
});
添加和删除HTML类
重要提示:必须将其余jQuery示例放在ready事件中,以便在准备处理文档时执行代码。
结果
event.preventDefault();
另一个常见的任务是添加或删除类。
首先,在文档的中添加一些样式信息,如下所示:
<style>
a.test {
font-weight: bold;
}
</style>
接下来,向脚本添加.addClass()调用:
$( "a" ).addClass( "test" );
所有元素现在都是粗体。
要删除现有类,请使用.removeClass():
$( "a" ).removeClass( "test" );
特效
$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide( "slow" );
});
回调函数和函数
与许多其他编程语言不同,JavaScript允许您自由地传递函数,以便稍后执行。回调函数是一个函数,它作为参数传递给另一个函数,并在父函数完成后执行。回调非常特殊,因为它们耐心地等待执行,直到父类完成。与此同时,浏览器可以执行其他功能或执行各种其他工作。
要使用回调,重要的是知道如何将它们传递到父函数中。
回调函数不带参数
如果回调函数没有参数,你可以这样传递:
$.get( "myhtmlpage.html", myCallBack );
当$.get()完成获取页面myhtmlpage时。它执行myCallBack()函数。
**注意:**这里的第二个参数只是函数名(但不是字符串,也没有括号)。
携带的参数
- 错误的用法:
失败的原因是代码立即执行myCallBack(param1, param2),然后将myCallBack()的返回值作为第二个参数传递给$.get()。我们实际上想要传递函数myCallBack(),而不是myCallBack(param1, param2)的返回值(可能是函数,也可能不是函数)。那么,如何传入myCallBack()并包含它的参数呢?
$.get( "myhtmlpage.html", myCallBack( param1, param2 ) );
- 正确用法:
要延迟执行myCallBack()及其参数,可以使用匿名函数作为包装器。注意函数(){的用法。匿名函数只做一件事:使用param1和param2的值调用myCallBack()。
$.get( "myhtmlpage.html", function() {
myCallBack( param1, param2 );
});