针对初学者的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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
javascript冒泡排序小结
Apr 10 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
原生js实现日历效果
Mar 02 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
如何使用PHP中的字符串函数
2006/10/09 PHP
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
python利用datetime模块计算时间差
2015/08/04 Python
Python 调用Java实例详解
2017/06/02 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
Django models文件模型变更错误解决
2020/05/11 Python
介绍一下JMS编程步骤
2015/09/22 面试题
新任教师自我鉴定
2014/02/24 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
民主生活会剖析材料
2014/09/30 职场文书
社区节水倡议书
2015/04/29 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
公司管理制度范本
2015/08/03 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang