针对初学者的jQuery入门指南


Posted in Javascript onAugust 15, 2015

 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 还有其它许多动画效果需要不断地去深入学习和挖掘。

Javascript 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
js操作iframe父子窗体示例
May 22 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
vue实现评论列表功能
Oct 25 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 #Javascript
在jQuery中处理XML数据的大致方法
Aug 14 #Javascript
JavaScript中var关键字的使用详解
Aug 14 #Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 #Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 #Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 #Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 #Javascript
You might like
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
目前最全的python的就业方向
2018/06/05 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python3 使用traceback定位异常实例
2020/03/09 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
python-地图可视化组件folium的操作
2020/12/14 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
开学典礼感言
2014/02/16 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS