jQuery:基本教程
这个教程是帮助初始学习jQuery的人.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
编辑<script>的src属性值,使其指向jquery.js文件.例如,如果jquery.js文件与HTML文件所有目录相同,则可写成:
<script type="text/javascript" src="jquery.js"></script>
可以从 Downloading jQuery 下载jquery.js.
在document准备加载时运行指定代码
许多javscript程序员都采取出下的方式:
window.onload = function(){ alert("welcome"); }
然而,使用这种方式,要想运行代码首先必须等待document加载完毕.如果页面中包含了许多图片,且页面没有加载完毕,则要想立即运行的代码将无法运行
为了避免以上问题,jQuery采用了一种语句,检测document并等待其为操作做好准备.这就是所谓的ready event
$(document).ready(function(){
// Your code here
});
在ready event中,添加了一个点击链接的处理函数:
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
保存你的HTML文件,重新加载页面,点击页面上的链接,你将会在页面跳转之前得到一个弹出信息提示框
如果想阻止点击事件所触发的默认行为--跳转到其他页面,可以调动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.js文件引用于Google网络链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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>
添加和移除CSS class
在head标签中添加一些CSS样式
<style type="text/css">
a.test { font-weight: bold; }
</style>
通过jquery的addClass函数来添加CSS class
$("a").addClass("test");
现在你所有的a元素都将会加粗.
通过jquery的removeClass函数来移除CSS class
$("a").removeClass("test");
CSS允许为一个元素添加多个class
特效
在jQuery中,有几个生成特效的函数被提供用于使网页变的更具吸引:
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});
现在,你点击任何一个链接,该链接会慢慢地消失(隐藏)
回调与函数
回调是一种作为其它函数的参数.当主函数执行完成后,回调函数开始执行.
还有一种重要的事情就是回调函数作为参数时是如何正确传递的.
不带参数的回调函数
如下:
$.get('myhtmlpage.html', myCallBack);
注意 第二个参数是回调函数名(不是字符串,也没有括号).
带参数的回调函数
错误
这是一种错误的方式
$.get('myhtmlpage.html', myCallBack(param1, param2));
这将无法工作,因为它调用了
myCallBack(param1, param2)
并且它将返回值作为$.get()第二个参数.
正确
创建匿名函数作为回调函数,并调用带参的myCallBack
$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});
当$.get执行完后,两个参数将会被赋值
相关推荐
《jQuery基础教程(第2版)》前6章以通俗易懂的方式介绍了jQuery的基本概念，主要包括jQuery的选择符、事件、效果、DOM操作、AJAX支持等。随后3章从理论到实践，通过表格操作、构建功能型表单、实现滑移和翻转效果等...
1:教程概述 2:配置站点 3:jquery缩写 4:基本选择器1 5:基本选择器2 6:基本选择器3 7:基本选择器4 8:层次选择器1 9:层次选择器2 10:层次选择器3 11:层次选择器4 12:过滤选择器1 13:过滤选择器2 14:过滤选择器3 15:...
jquery学习资料+教程 包括五个文档:jQuery的起点教程,jQuery经典入门教程,jquery的基本用法.pdf,2010最新jQuery学习资料.pdf,精通JavaScript+jQuery.pdf
［教程］jQuery使用手册--核心篇(Core) jquery基本教程之简单体验 jQuery中文入门指南 比较简单的jquery教程 API 文档
本书以通俗易懂的方式介绍了jQuery的基本概念，主要包括jQuery的选择符、事件、特效、DOM操作、AJAX、表格操作、表单函数、拖曳与旋转和插件等内容，最后几章以实例操作为主，在前面内容的基础上，提出了常见的...
本书以通俗易懂的方式介绍了jQuery的基本概念，主要包括jQuery的选择符、事件、特效、DOM操作、AJAX、表格操作、表单函数、拖曳与旋转和插件等内容，最后几章以实例操作为主，在前面内容的基础上，提出了常见的...
本书以通俗易懂的方式介绍了jQuery的基本概念，主要包括jQuery的选择符、事件、特效、DOM操作、AJAX、表格操作、表单函数、拖曳与旋转和插件等内容，最后几章以实例操作为主，在前面内容的基础上，提出了常见的...
本书以通俗易懂的方式介绍了jQuery的基本概念，主要包括jQuery的选择符、事件、特效、DOM操作、AJAX、表格操作、表单函数、拖曳与旋转和插件等内容，最后几章以实例操作为主，在前面内容的基础上，提出了常见的...
本jquery实战教程是以实战来讲述jquery的基本知识，从jquery环境搭建到各种页面效果的讲解，让你对jquery有一个理性的认识！
juery 入门经典教程，详细、系统的介绍了jQuery的配置 基本操作及使用
#jQuery 教程 我们在自学 jQuery 的同时，将其作为一个小组项目进行了研究。 请注意，我们假设您具有 vanilla JavaScript 的基本知识。 贡献者： | | | | “jQuery ……它只是 JavaScript……” -玛丽亚 背景和...
2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 2.2 JQuery事件响应 8 2.2.1 常见的JQuery事件 9 2.2.2 淡入淡出效果 12 2.2.3 滑动效果 15 2.2.4 动画效果 18 2.2.5 终止动画 20 2.2.6 回调函数 20 2.2.7 方法链 22 ...
jQuery其实很简单，相信您看了W3Cfuns.com精心编写的jQuery速成教程后，一定会被它的优雅、轻巧吸引住，而且如果您掌握了它，定能成为提升薪水的一个资本。 本节并没有涉及到jQuery如何编写，只为大家解决几个常见...
jQuery其实很简单，相信您看了W3Cfuns.com精心编写的jQuery速成教程后，一定会被它的优雅、轻巧吸引住，而且如果您掌握了它，定能成为提升薪水的一个资本。 本节并没有涉及到jQuery如何编写，只为大家解决几个常见...
第四节：jQuery速成 - 基本对象获取 第五节：jQuery速成 - 层级对象获取 第六节：jQuery速成 - 简单对象获取 第七节：jQuery速成 - 内容对象的获取和对象可见性！ 第八节：jQuery速成 - 对象获取进阶 第九节：...
Web前端开发实例教程——jQuery的基本操作，元素属性的操作，元素样式的操作...
2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 2.2 JQuery事件响应 8 2.2.1 常见的JQuery事件 9 2.2.2 淡入淡出效果 12 2.2.3 滑动效果 15 2.2.4 动画效果 18 2.2.5 终止动画 20 2.2.6 回调函数 20 2.2.7 ...
介绍了jQuery的基本概念，主要包括jQuery的选择符、事件、特效、DOM操作、AJAX、表格操作、表单函数、拖曳与旋转和插件等内容，最后几章以实例操作为主，在前面内容的基础上，提出了常见的客户端实际问题并给出了其...