针对初学者的jQuery入门指南

jQuery 是什么，它能为我们做什么？如果你是一名 Web 开发人员，写过 JavaScript 程序，那么你很可能正在使用 jQuery，即使没有试用过，至少也听说过，事实上 jQuery 可以说是现阶段最流行的 JavaScript 库。据有关部门统计，全球网站上面，约有 28% 的网站在使用 jQuery，这个数字可能有些夸张，但足见 jQuery 受欢迎的程度。本文仅对 jQuery 的使用方法作简单介绍，且作为一个入门教程吧。
下载 jQuery 代码，并在页面中载入

首先需要从jQuery 官方网站去下载最新的 jQuery 代码，jQuery 官方提供两个版本的，一个是经过压缩的，一个是没有经过压缩的，如果你不打算阅读或分析 jQuery 源代码的话，那么建议下载压缩过的版本，因为它体积更小。下载完成后，在你的 HTML 代码中载入，载入方法如下：

<html>
 <head>
 <title>jQuery tutorial</title>
 <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
 </head>
 <body>
 jQuery tutorial
 </body>
</html>

当然，介于 jQuery 目前之流行程度，也有不少网站提供了在线的 jQuery API，例如 Google API，所以我们可以通过以下方法载入 jQuery：

代码如下:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.1.4"></script>

地址后面加上了一个参数 ver=1.1.4，需要说明的是，JavaScript 代码肯定是无法接收任何参数的，这里加了这个参数仅仅是为了让浏览器重服务器上获取最新版本，因为之前你的浏览器缓存中可能已经有了jquery.min.js 这个文件，这里只是为了避免缓存罢了。
jQuery 代码如何执行

学习编写 jQuery 代码，首先要接触的就是 document ready 这个事件处理机制，几乎你所有的 jQuery 代码都要写在这个事件里面。这个东西主要有两个作用：

确保在网页完全载入完成后，才执行 jQuery 代码。因为如果网页中有 DOM 元素还未完全载入，那么用 jQuery 代码去访问或操作 DOM 元素的话会出错。
    一定程度上将 jQuery 代码和其它代码区分开来。

代码写法一般如下：

<script type="text/javascript">
$(document).ready(function() {
 // 所有的 jQuery 代码都写在这里
});
</script>

使用 jQuery 选择器选择 DOM 元素

jQuery 里面封装了一个函数 $("") 让我们在 HTML 文档里面方便地选择 DOM 元素，下面是几个简单的使用方法。

$("div"); // 选择当前 HTML 文档中的所有 DIV 元素
$("#myElement"); // 选择当前 HTML 文档中 ID 为 "myElement" 的元素
$(".myClass"); // 选择当前 HTML 文档中 class 为 "myClass" 的元素
$("p#myElement"); // 选择当前 HTML 中 ID 为 "myElement" 的段落 P 标签元素
$("ul li a.navigation"); // 选择列表元素中 class 为 "navigation" 的超链接

jQuery 支持几乎所有的 CSS 选择器方法

$("p > a"); // 选择所有 P 标签中的超链接 A 元素
$("input[type=text]"); // 选择 input 元素中 type 为 text 的元素
$("a:first"); // 选择当前页面中的第一个超链接 A 元素
$("p:odd"); // 选择当前页面中序数为奇数的段落 P 元素
$("li:first-child"); // 选择列表中的第一个元素

jQuery 自身也定义了一些选择器方法，下面是几个例子：

$(":animated"); // 选择所有正在执行动画效果的元素
$(":button"); // 选择所有按钮元素 （input 或 button）
$(":radio"); // 选择所有单选框元素
$(":checkbox"); // 选择所有复选框元素
$(":checked"); // 选择所有已经在 选定状态 的单选框和复选框
$(":header"); // 选择所有标题元素 （h1, h2, h3, h4 ...）

操作和访问 CSS 中的 class 名称

利用 jQuery 可以为 DOM 元素添加、移除类名，并且使用起来相当之方便。下面是几个典型的使用方法：

$("div").addClass("content"); // 为所有 <div> 元素添加名为 "content" 的类
$("div").removeClass("content"); // 移除所有 <div> 元素中，名为 "content" 的类
$("div").toggleClass("content"); // 交替所有 <div> 元素中，名为 "content" 的类 （如果该元素中不存在这个类，则为它加上这个类；如存在，则移除之）

当然，你也可以用 jQuery 来检测一下某元素中是否正在使用某个 class，代码如下

if ($("#myElement").hasClass("content")) {
 alert("存在名为 content 的类！");
}
else {
 alert("不存在名为 content 的类！");
}

用 jQuery 来操作 CSS 中的样式

使用 jQuery 可以轻松的为 DOM元素添加 CSS 样式，下面是几个范例：

$("p").css("width", "400px"); // 为所有段落添加一个宽度
$("#myElement").css("color", "blue") // 将所有 ID 为 #myElement 的元素中文本颜色变为蓝色
$("ul").css("border", "solid 1px #ccc") // 为所有无序列表添加实线边框，且边框颜色为 #ccc

在网页中添加、移除、追加 DOM 元素或内容

jQuery 中同样提供了好多种方法来操作 DOM 元素，例如改变操作标签中的文本。。。几个例子如下：

var myElementHTML = $("#myElement").html();
// 获取 ID 为 myElement 的元素中的所有内容，包括文本和 HTML 标签
// 这种方法类似于传统 JavaScript 中的 innerHTML

var myElementHTML = $("#myElement").text();
// 获取 ID 为 myElement 的元素中的文本，仅包括文本，HTML 标签除外

类似以上两种方法，还可以改变 DOM 元素中的 HTML 或文本：

$("#myElement").html("<p>This is the new content.</p>");
// #myElement 中的内容将被这个段落替换掉

$("#myElement").text("This is the new content.");
// #myElement 中的内容将被这行文本替换掉

在元素内追加内容：

$("#myElement").append("<p>This is the new content.</p>");
// 保留标签内原有内容，并在末尾处追加新内容

对于向元素上追加内容，jQuery 还有其它几种用法，如： appendTo(), prepend(), prependTo(), before(), insertBefore(), after(), insertAfter()，各有其特点，但使用方法和 append() 类似。
jQuery 之事件处理

一些特定的事件处理程序可以用如下方法来实现：

$("a").click(function() {
 // 可以在这里写一些代码
 // 当超链接被点击的时候这里的代码将被执行
});

当超链接被点击的时候，function() 里面的代码将被执行。还有其它的一些事件使用方法也一样，如：blur, focus, hover, keydown, load, mousemove, resize, scroll, submit, select。
用 jQuery 隐藏或显示元素

jQuery 也可以非常方便地显示或隐藏 DOM 元素，示例代码如下：

$("#myElement").hide("slow", function() {
 // 这里可以写一些代码，当元素被隐藏后，这里的代码将被执行
});

$("#myElement").show("fast", function() {
 // 这里可以写一些代码，当元素被隐藏后，这里的代码将被执行
});

$("#myElement").toggle(1000, function() {
 // 这里可以写一些代码，当元素被隐藏/显示后，这里的代码将被执行
});

可以看到，当元素显示或隐藏的时候，是慢慢的渐渐变化的，这是因为上面用到了几个速度参数，如 slow，fast，除此之外还有 normal，数字 1000 表示毫秒数，可以自定义。如果没有设置速度参数，那么元素将直接显示或隐藏，一闪而过，没有任何动画效果。后面的第二个参数是一个 function，用来当显示/隐藏完毕后，再执行一些需要的代码，如果不需要，可省略此参数。

另外还有一种“渐隐渐显”的方法，也是动画效果，使用方法如下：

$("#myElement").fadeOut("slow", function() {
 // 这里的代码在 fade out 完成后执行
});

$("#myElement").fadeIn("slow", function() {
 // 这里的代码在 fade in 完成后执行
});

调整元素的透明度：

$("#myElement").fadeTo(2000, 0.4, function() {
 // 这里的代码在在调整透明度完成后执行
});

其中第一个参数是仍然是速度参数，第二个参数是透明度，但三个参数是一个匿名回调函数，当渐变完成后执行。
jQuery 之动画效果

jQuery 可以为 DOM 元素添加上下滑动效果：

$("#myElement").slideDown("fast", function() {
 // .......
});

$("#myElement").slideUp("slow", function() {
 // .......
});

$("#myElement").slideToggle(1000, function() {
 // .......
});

jQuery 的动画效果还可以应用在改变 DOM 元素样式的时候，使改变样式的过程以平滑过渡的方式进行，而且可以选择需要速度，示例如下：

$("#myElement").animate({
 opacity: 0.3,
 width: "500px",
 height: "700px"
 },
 1000,
 function() {
 // ......
});

总的来说，jQuery 的动画效果很强大，但是也有其怪癖（例如要改变颜色的话，可能需要其它特定的插件）。jQuery 还有其它许多动画效果需要不断地去深入学习和挖掘。

赞 (0)

相关推荐

  • JQuery入门——事件切换之hover()方法应用介绍

    JQuery入门——事件切换之hover()方法应用介绍

    1.在JQuery中,有两个方法用于事件的切换,一个方法是hover(),另一个是toggle().所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换.如一个超级链接标记<a>若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发一个事件,可以用切换事件轻松实现. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

  • jQuery 操作XML入门

    XMLFile.xml 复制代码 代码如下: <?xml version="1.0" encoding="utf-8" ?> <msglist> <msg name="11"> <id>1</id> <content>content1</content> </msg> <msg name="22"> <id>

  • 针对初学者的jQuery入门指南

    jQuery 是什么,它能为我们做什么?如果你是一名 Web 开发人员,写过 JavaScript 程序,那么你很可能正在使用 jQuery,即使没有试用过,至少也听说过,事实上 jQuery 可以说是现阶段最流行的 JavaScript 库.据有关部门统计,全球网站上面,约有 28% 的网站在使用 jQuery,这个数字可能有些夸张,但足见 jQuery 受欢迎的程度.本文仅对 jQuery 的使用方法作简单介绍,且作为一个入门教程吧. 下载 jQuery 代码,并在页面中载入 首先需要从jQ

  • jQuery中文入门指南，翻译加实例，jQuery的起点教程

    jQuery中文入门指南,翻译加实例,jQuery的起点教程 中文版译者:Keel 此文以实例为基础一步步说明了jQuery的工作方式.现以中文翻译(添加我的补充说明)如下.如有相关意见或建议请麻烦到我的 BLOG 写个回复或者 EMAIL 告知. 英文原版:http://jquery.bassistance.de/jquery-getting-started.html ,感谢原文作者 Jörn Zaefferer 本文发布已征求原作者同意. 另外我认为在学习过程中,有两个API文档你要打开随时

  • jquery 入门教程 [翻译] 推荐

    jQuery入门指南教程 这个指南是一个对jQuery库的说明,要求读者了解HTML(DOM)和CSS的一些常识.它包括了一个简单的Hello World的例子,选择器和事件基础,AJAX.FX的用法,以及如何制作jQuery的插件. 这个指南包括了很多代码,你可以copy它们,并试着修改它们,看看产生的效果. 内容提要 安装 Hello jQuery Find me:使用选择器和事件 Rate me:使用AJAX Animate me(让我生动起来):使用FX Sort me(将我有序化):使

  • JQuery入门基础小实例(1)

    JQuery入门基础小实例(1)

    先展示一下这个例子实现的效果: 页面刚刚加载的时候,显示如图所示: 当在文本框中输入数据后,文本框的红色标识消失,如图所示: 点击确定按钮后,会通过后台来向页面输出数据,如图所示: 前台的代码如下(asp.net): <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <

  • C语言堆栈入门指南

    C语言堆栈入门指南 在计算机领域,堆栈是一个不容忽视的概念,我们编写的C语言程序基本上都要用到.但对于很多的初学着来说,堆栈是一个很模糊的概念.堆栈:一种数据结构.一个在程序运行时用于存放的地方,这可能是很多初学者的认识,因为我曾经就是这么想的和汇编语言中的堆栈一词混为一谈.我身边的一些编程的朋友以及在网上看帖遇到的朋友中有好多也说不清堆栈,所以我想有必要给大家分享一下我对堆栈的看法,有说的不对的地方请朋友们不吝赐教,这对于大家学习会有很大帮助. 首先在数据结构上要知道堆栈,尽管我们这么称呼它,

  • JQuery入门—JQuery程序的代码风格详细介绍

    JQuery入门—JQuery程序的代码风格详细介绍

    <jQuery权威指南>第1章jQuery开发入门,本章通过循续渐进的方式,先从jQuery的基础概念入手,介绍jQuery库的下载,引入简单应用方法:后部分侧重于jQuery控制DOM对象和页面CSS样式的介绍,通过一些简单的小示例,使读者对jQuery在页面中的功能应用有一个大致的了解,为下一章节进一步学习jQuery库的详细对象和方法奠定基础.本节为大家介绍jQuery程序的代码风格. 1.1.5 jQuery程序的代码风格 1．"$"美元符的使用 在jQuery程序

  • Spring Boot 快速入门指南

    Spring Boot 快速入门指南

    最近因为项目的缘故,需要接触 Spring Boot,详细的介绍可以参考官方的文档,这里主要根据自己学习的实践进行简单分享.版本:1.3.6 简介 Spring 框架是非常著名的 Java 开源框架,历经十多年的发展,整个生态系统已经非常完善甚至是繁杂,Spring Boot 正是为了解决这个问题而开发的,为 Spring 平台和第三方库提供了开箱即用的设置,只需要很少的配置就可以开始一个 Spring 项目.当然,建议使用 Java 8 来进行开发. Spring Boot 实际上走的是 Se

  • jQuery入门之层次选择器实例简析

    jQuery入门之层次选择器实例简析

    本文实例分析了jQuery入门之层次选择器的使用方法.分享给大家供大家参考,具体如下: 这里简单介绍一下jQuery层次选择器中ancestor descendant与parent>child的区别. parent>child:根据父元素匹配所有的子元素,层次关系是父子关系. ancestor descendant:根据祖先元素匹配所有的后代元素,层次关系是祖先和后代. 编写代码,进行测试,以更加清楚的区分两者的区别: <div id="first">1 <

  • Web前端新人笔记之jquery入门心得(新手必看)

    本章将为大家介绍以下几点内容: 1.jquery的主要特点: 2.建立jquery的编码环境: 3.简单jquery脚本示例: 4.选择jquery而不是纯javaScript的理由: 5.常用的jquery开发工具:jquery能做什么? ① 取得文档中的元素 $('div.content').find('p'); ② 修改页面的外观 $('ul > li:first').addClass('active'); ③ 改变文档内容 $('#container').append('<a href

  • Oracle RMAN快速入门指南

    正在看的ORACLE教程是:Oracle RMAN快速入门指南.前言: 这篇文章主要介绍RMAN的常用方法,其中包含了作者一些自己的经验,里面的实验也基本全在WIN 2K和ORACLE 8.1.6环境下测试成功(因为这个环境比较容易实现). 本文借鉴了网上一些高手的相关文章,希望大侠们不要见怪,此处一并谢过. 这篇文章主要是在北京出差期间写的,回到家后整理修改了一下,时间比较仓促,同时因为篇幅有限,一些技术细节不能一一覆盖了,只希望能够帮助新手入门的作用,想真正熟练掌握RMAN,必须经过较长时间

随机推荐