JQuery开发——轻松入门
本文是关于JQuery的基本介绍和一些相关的基本概念,大部分内容翻译自How_jQuery_Works,有少许改动。
JQuery:基础知识
本人是针对新手入门的基础教程,直接复制以下内容以创建一个新的HTML页面:
<! doctype html> < html > < head > < meta charset="utf-8"> < title >Demo</ title > < script src="jquery.js"></ script > < script > </ script > </ head > < body > < a href="http://jquery.com/">jQuery</ a > </ body > </ html > |
编辑script标签内的src属性,将其指向位于你计算机硬盘上或者网络上的jquery.js文件。如果jquery.js文件与你的HTML文件位于计算机中的同一目录,你可以按如下方式指定src属性:
< script src="jquery.js"></ script > |
在JQuery官网的下载页上可以下载到JQuery的副本文件。
如何启动JQuery/Javascript代码
很多使用Javascript的开发者极其热衷于以下面的方式来启动Javascript代码:
window.onload = function (){ alert( "welcome" ); } |
方法里面是你想在页面加载完毕后运行的代码。然而这种方式存在一定的问题,如果页面中包含许多图片,那么直到所有图像都下载完毕之后,才会开始执行对应的Javascript代码。除此之外,使用window.onload还有其它的一些缺陷,在此不详细阐述。与之相比,JQuery中的$(document).ready()方法更为方便易用:
$(document).ready( function (){ // Your code here }); |
比如,在ready事件中,为超级连接添加一个click事件句柄:
$(document).ready( function (){ $( "a" ).click( function (event){ alert( "Thanks for visiting!" ); }); }); |
保存好你的HTML文件并在浏览器中浏览该页面,单机页面上的JQuery主页连接,会先弹出一个消息框,然后才会跳转到JQuery主页。使用下面这段代码也会得到与上面相同的结果:
$(document).ready( function () { $( "a" ).bind( "click" , function (event) { Msg(); }); }); function Msg(){ alert( "Thanks for visiting" ); } |
对于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页面示例的完整代码:
<! DOCTYPE html> < html lang="en"> < head > < meta charset="utf-8"> < title >jQuery demo</ title > < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></ script > < script > $(document).ready(function(){ $("a").click(function(event){ alert("As you can see, the link no longer took you to jquery.com"); event.preventDefault(); }); }); </ script > </ head > < body > < a href="http://jquery.com/">jQuery</ a > </ body > </ html > |
在该示例页面中,是写在同一个文件中的,一种更好的建议方式是将HTML代码与Javascript/JQuery代码分别存储于不同的文件,然后在HTML页面中通过指定script标签的src属性来引用Javascript文件。见如下代码:
HTML页面代码
<! DOCTYPE html> < html lang="en"> < head > < meta charset="utf-8"> < title >jQuery demo</ title > < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></ script > < script src="test.js"></ script > </ head > < body > < a href="http://jquery.com/">jQuery</ a > </ body > </ html > |
test.js文件代码
$(document).ready( function () { $( "a" ).click( function (event) { alert( "As you can see, the link no longer took you to jquery.com!" ); event.preventDefault(); }); }); |
添加和移除HTML类(Class)
添加和移除HTML类在Web页面开发中是很常见的。在此对上述代码做一点改进,在HTML页面的head标签里加入以下样式代码:
< style > a.test {font-weight: bold;} </ style > |
在脚本文件中调用JQuery的addClass方法,HTML页面在加载完毕后即会运行该代码,使得a标签成为a.test类,从而应用a.test类的样式。
$( "a" ).addClass( "test" ); |
如果要移除类,使用removeClass方法即可,使用方式同addClass。在用户交互的一些事件中,通过addClass与removeClass方法,可实现更适宜的UI效果。
特殊的效果
JQuery中提供很多方便易用的效果,在链接标签a的click事件中天添加如下代码:
$( this ).hide( "slow" ); |
现在又多了一个动态的效果,在页面中点击链接后,该链接内容便会慢慢消失掉了。
函数与回调
回调是一种特殊的函数,一般将回调函数作为另一个函数(暂且称之为父函数)的参数,在父函数执行完毕之后,才会开始执行回调函数。
无参数的回调
无参数的回调,一般其用法如下:
$.get( 'myhtmlpage.html' , myCallBack); |
注意第二个参数是一个函数的名称,而不是字符串。
有参数的回调
错误的用法
如下所示是错误的,因为它会调用myCallBack('foo', 'bar'),并将其返回值传递给$.get()作为$.get()的第二个参数。
$.get( 'myhtmlpage.html' , myCallBack( 'foo' , 'bar' )); |
正确的用法
创建一个无名函数并将其注册为回调函数,如下所示:
$.get( 'myhtmlpage.html' , function (){ myCallBack( 'foo' , 'bar' ); }); |
无名函数的作用就是用来正确的调用myCallBack('foo', 'bar')。
扩展阅读
JQuery文档是关于JQuery最为全面最为详细的说明文档,涵盖JQuery的方方面面,是学习JQuery的最优秀的资料之一。在使用JQuery的过程中有什么问题,可以在JQuery论坛上参与讨论。
出处:http://www.cnblogs.com/hans_gis/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 上周热点回顾(1.20-1.26)
· 【译】.NET 升级助手现在支持升级到集中式包管理
2011-07-06 ArcGIS Desktop学习备忘