`
rebecca
  • 浏览: 314991 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery基本教程(z)

阅读更多

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基础教程(第四版).7z

    阅读《jQuery基础教程(第四版)》.pdf,你不仅可以掌握jQuery的基本用法,还能了解其设计理念和最佳实践,从而更好地利用jQuery提升Web开发效率,打造更优秀的用户体验。无论你是前端新手还是希望深化jQuery技能的...

    jQueryPrint.7z

    jQueryPrint.7z 是一个包含jQuery打印插件的压缩包,这个插件是JavaScript库jQuery的一个扩展,专门用于实现网页的打印功能。在HTML页面中,我们经常需要提供一种方式让用户能够方便地打印页面内容,而jQuery Print...

    jQuery_EasyUI_中文教程 pdf

    ### jQuery EasyUI中文教程知识点详解 #### 一、在DataGrid上使用复选框功能 **知识点概述:** - 在EasyUI的DataGrid组件中,可以通过简单地设置`checkbox`属性来实现对表格数据行的选择功能。 - `checkbox`属性为...

    JQuery图片特效.7z

    这个名为"JQuery图片特效.7z"的压缩包文件显然包含了与jQuery相关的图片特效代码示例或教程,旨在帮助开发者提升网页的视觉吸引力和用户体验。 1. **jQuery基础**:首先,了解jQuery的基本概念是至关重要的。jQuery...

    jQuery_EasyUI 教程

    ### jQuery EasyUI 教程知识点详解 #### 一、EasyUI 框架简介与配置 **EasyUI** 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 组件和功能,使得开发者能够轻松地创建出美观且交互性强的网页。本教程...

    前端开发Jquery

    这个“前端开发jQuery”的视频教程正是针对这一主题,旨在帮助初学者和有一定基础的开发者快速掌握jQuery的核心概念和技术。 ### 1. jQuery基础 - **选择器**:jQuery的选择器借鉴了CSS,使得选取DOM元素变得非常...

    jQuery EasyUI中文教程和api

    ### jQuery EasyUI中文教程知识点详解 #### 概述 本教程旨在通过具体示例和代码说明如何使用EasyUI框架轻松创建网页。EasyUI是一个基于jQuery的用户界面库,提供了丰富的UI组件,使得开发者能够快速地构建出功能...

    jQuery_EasyUI教程.doc

    ### jQuery EasyUI 教程详解 #### 概述与预备知识 jQuery EasyUI 是一个基于 jQuery 的 UI 插件集合,旨在简化 Web 开发过程,让开发者能够轻松地创建丰富的用户界面。它提供了大量预定义的组件,如对话框、菜单、...

    jquery-easyui-1.5.7z

    这个“jquery-easyui-1.5.7z”压缩包包含了EasyUI 1.5版本的完整源代码,适合开发者进行Web应用的界面设计和交互实现。EasyUI 提供了一系列预先封装好的组件,简化了HTML、CSS和JavaScript的编写,让开发者能够更...

    jQuery_EasyUI中文教程

    本教程将详细介绍如何使用 jQuery EasyUI 创建拖放功能,包括基本拖放操作、构建购物车式拖放以及创建课程表等应用场景。 #### 必备资源 为了能够使用 jQuery EasyUI,首先需要引入以下资源: 1. **CSS 文件**:...

    jQuery_EasyUI_教程

    ### jQuery EasyUI 教程详解 #### 概述与核心组件 jQuery EasyUI 是一个基于 jQuery 的 UI 插件集合,旨在简化 Web 开发过程,让开发者能够轻松地创建丰富的用户界面。它提供了大量预定义的 UI 组件,如对话框、...

    jquery1.4.1

    这两个文件提供了jQuery的基本功能,包括选择器、DOM操作、事件处理、动画效果以及Ajax交互等。 `jQuery1.4.1.chm`是一个帮助文档,以CHM(Compiled HTML Help)格式存在,通常包含详细的API参考、示例和教程。对于...

    jQuery精美浮动层效果

    本教程将详细讲解如何利用jQuery实现一个精美的浮动层效果,这种效果通常用于创建弹出窗口、提示框或信息提示。 首先,我们需要理解浮动层的基本概念。浮动层,也称为浮动对话框或浮窗,是一种在网页上显示临时信息...

    jquery气泡悬浮框.

    在本教程中,我们将深入探讨如何使用jQuery实现气泡悬浮框的功能,这是一种常见的用户界面元素,用于显示提示信息或提供额外的操作选项。 首先,让我们了解什么是气泡悬浮框。气泡悬浮框,也称为提示框或信息提示,...

    jquery仿QQ消息框

    《使用jQuery实现仿QQ消息框的详细教程》 在网页开发中,为了提供更好的用户体验,开发者经常需要创建各种各样的提示、警告或消息框。QQ消息框因其简洁、易用和美观的特点,被广泛应用于各个网站。本教程将详细介绍...

    Jquery,CSS,W3school等API

    1. **jQuery教程**:详细介绍了jQuery的基本用法、选择器、事件、DOM操作、动画和Ajax,还包括实践示例和代码片段。 2. **CSS教程**:从基础样式规则到复杂的布局技巧,提供实例、代码解析和练习题,帮助开发者掌握...

    随机字符变换效果的jQuery插件开发教程

    ### 随机字符变换效果的jQuery插件开发教程 #### 概述 本文将详细介绍如何开发一个可以随机改变任何DOM元素文字内容的jQuery插件。这种效果特别适合用于标题、logo或幻灯片等场景中,能为网页增添一份独特的趣味性...

    jquery+css简单遮罩层

    本教程将详细介绍如何使用jQuery和CSS创建一个简单、可自定义的遮罩层,尤其适用于移动端应用。 首先,我们需要理解jQuery和CSS的基本概念。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理...

    Jquery表单验证(采用poshytip提示)

    本教程将深入探讨如何使用jQuery库,结合Poshytip插件,以及正则表达式来实现优雅的表单验证和错误提示。 ### 1. jQuery基础 jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax...

Global site tag (gtag.js) - Google Analytics