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的攻略,快分享吧,很good!
http://www.ibole.cn/Static/Html/jQuery/index.html
http://www.ibole.cn/tags/jQuery
分享到:
相关推荐
阅读《jQuery基础教程(第四版)》.pdf,你不仅可以掌握jQuery的基本用法,还能了解其设计理念和最佳实践,从而更好地利用jQuery提升Web开发效率,打造更优秀的用户体验。无论你是前端新手还是希望深化jQuery技能的...
jQueryPrint.7z 是一个包含jQuery打印插件的压缩包,这个插件是JavaScript库jQuery的一个扩展,专门用于实现网页的打印功能。在HTML页面中,我们经常需要提供一种方式让用户能够方便地打印页面内容,而jQuery Print...
### jQuery EasyUI中文教程知识点详解 #### 一、在DataGrid上使用复选框功能 **知识点概述:** - 在EasyUI的DataGrid组件中,可以通过简单地设置`checkbox`属性来实现对表格数据行的选择功能。 - `checkbox`属性为...
这个名为"JQuery图片特效.7z"的压缩包文件显然包含了与jQuery相关的图片特效代码示例或教程,旨在帮助开发者提升网页的视觉吸引力和用户体验。 1. **jQuery基础**:首先,了解jQuery的基本概念是至关重要的。jQuery...
### jQuery EasyUI 教程知识点详解 #### 一、EasyUI 框架简介与配置 **EasyUI** 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 组件和功能,使得开发者能够轻松地创建出美观且交互性强的网页。本教程...
这个“前端开发jQuery”的视频教程正是针对这一主题,旨在帮助初学者和有一定基础的开发者快速掌握jQuery的核心概念和技术。 ### 1. jQuery基础 - **选择器**:jQuery的选择器借鉴了CSS,使得选取DOM元素变得非常...
### jQuery EasyUI中文教程知识点详解 #### 概述 本教程旨在通过具体示例和代码说明如何使用EasyUI框架轻松创建网页。EasyUI是一个基于jQuery的用户界面库,提供了丰富的UI组件,使得开发者能够快速地构建出功能...
### jQuery EasyUI 教程详解 #### 概述与预备知识 jQuery EasyUI 是一个基于 jQuery 的 UI 插件集合,旨在简化 Web 开发过程,让开发者能够轻松地创建丰富的用户界面。它提供了大量预定义的组件,如对话框、菜单、...
这个“jquery-easyui-1.5.7z”压缩包包含了EasyUI 1.5版本的完整源代码,适合开发者进行Web应用的界面设计和交互实现。EasyUI 提供了一系列预先封装好的组件,简化了HTML、CSS和JavaScript的编写,让开发者能够更...
本教程将详细介绍如何使用 jQuery EasyUI 创建拖放功能,包括基本拖放操作、构建购物车式拖放以及创建课程表等应用场景。 #### 必备资源 为了能够使用 jQuery EasyUI,首先需要引入以下资源: 1. **CSS 文件**:...
### jQuery EasyUI 教程详解 #### 概述与核心组件 jQuery EasyUI 是一个基于 jQuery 的 UI 插件集合,旨在简化 Web 开发过程,让开发者能够轻松地创建丰富的用户界面。它提供了大量预定义的 UI 组件,如对话框、...
这两个文件提供了jQuery的基本功能,包括选择器、DOM操作、事件处理、动画效果以及Ajax交互等。 `jQuery1.4.1.chm`是一个帮助文档,以CHM(Compiled HTML Help)格式存在,通常包含详细的API参考、示例和教程。对于...
本教程将详细讲解如何利用jQuery实现一个精美的浮动层效果,这种效果通常用于创建弹出窗口、提示框或信息提示。 首先,我们需要理解浮动层的基本概念。浮动层,也称为浮动对话框或浮窗,是一种在网页上显示临时信息...
在本教程中,我们将深入探讨如何使用jQuery实现气泡悬浮框的功能,这是一种常见的用户界面元素,用于显示提示信息或提供额外的操作选项。 首先,让我们了解什么是气泡悬浮框。气泡悬浮框,也称为提示框或信息提示,...
《使用jQuery实现仿QQ消息框的详细教程》 在网页开发中,为了提供更好的用户体验,开发者经常需要创建各种各样的提示、警告或消息框。QQ消息框因其简洁、易用和美观的特点,被广泛应用于各个网站。本教程将详细介绍...
1. **jQuery教程**:详细介绍了jQuery的基本用法、选择器、事件、DOM操作、动画和Ajax,还包括实践示例和代码片段。 2. **CSS教程**:从基础样式规则到复杂的布局技巧,提供实例、代码解析和练习题,帮助开发者掌握...
### 随机字符变换效果的jQuery插件开发教程 #### 概述 本文将详细介绍如何开发一个可以随机改变任何DOM元素文字内容的jQuery插件。这种效果特别适合用于标题、logo或幻灯片等场景中,能为网页增添一份独特的趣味性...
本教程将详细介绍如何使用jQuery和CSS创建一个简单、可自定义的遮罩层,尤其适用于移动端应用。 首先,我们需要理解jQuery和CSS的基本概念。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理...
本教程将深入探讨如何使用jQuery库,结合Poshytip插件,以及正则表达式来实现优雅的表单验证和错误提示。 ### 1. jQuery基础 jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax...