本文共 2529 字，大约阅读时间需要 8 分钟。
框架jQuery入门 由发表在
jQuery入门
是一个快速简单的JavaScript工具库，为快速开发提供了DOM遍历、事件处理、动画、AJAX交互几个方面的工具。jQuery会改变你写JavaScript的方式。
先来看看jQuery用起来是怎样的：
// 给拥有continue类的
引入jQuery
jQuery是一种JavaScript库，应当使用<script>标签加以引入。可以有两种方式：
-
使用jQuery CDN。在HTML中加入下面的代码：
也有很多其他CDN可选，参见：
-
使用本地文件。首先在这里：下载
jquery.min.js。然后在HTML中加以引入：
名称选择器
jQuery最常用的特性便是DOM操作。使用$()进行DOM元素的选择，其参数成为选择符（selector）。返回值为jQuery集合，该集合是DOM元素集合的一个包装，可以更方便地进行DOM操作。
顾名思义，名称选择器是根据DOM元素的名称进行选择的。例如下面的HTML：
harttleMy name is harttle.
harttleland
运行下列jQuery操作：
$('div').html('David'); 你的HTML将会变成这样：
DavidMy name is harttle.
David
jQuery选中了所有的<div>标签并设置了它的内容。
ID选择符
ID选择符是以#起始的字符串，例如对下面的HTML：
运行下列jQuery操作：
$('#name').html('Harttle'); 其中html()函数用来设置jQuery集合中DOM元素的HTML内容，操作后HTML会变成这样：
Harttle
其他选择器
到这里想必你会发现jQuery选择器和CSS选择器很像，这是jQuery故意设计的（CSS Compliance）。这样才方便前端人员的工作。其他的一些CSS风格选择符都是可用的，例如：
- Class选择符：
.active。 - 后代元素选择符：
div #name。 - 子元素选择符：
div>#name。 - 属性选择符：
a[href="/foo.html"]。
更多的jQuery选择器等着你去探索：
事件监听
DOM事件处理在不同浏览器中一直没有一致的实现，包括attachEvent、addEventListener、onclick等方法。jQuery提供了一致的DOM事件处理方式，最常用的包括on和click方法：
$('button.next').click(function(){ alert('clicked 1!');});$('button.next').on('click', function(){ alert('clicked 2!');}); 在鼠标点击那个具有next类的<button>时，便会弹出两个提示。其实.click()只是.on('click')的快捷方式，本质上还是调用后者来实现的。不同的是.on还可以绑定其他事件，比如：.on('hover')，.on('touch')等等。
DOM创建
jQuery还提供了DOM创建和插入的工具，不需要再用繁琐的DOM API了！
将$()函数传入参数的选择符替换成一段HTML即可创建HTML元素，然后使用.append()方法将新创建的元素插入到DOM中对应的位置。使用.remove()方法可以移除当前选择符选中的元素。
var element = $('Harttle
');$('.name').append(element);$('button').click(function(){ element.remove();}); 在页面初始化后，jQuery在<div class="name">里面插入了一个<p>标签。点击<button>，jQuery会去移除刚刚插入的<p>标签。
动画
jQuery集合还有一个.animate方法，可以让某个属性的值产生渐变。例如：
.animate的第一个参数是一个CSS属性列表，可以包含任意多的键值对。第二个参数是渐变的时间，这里没有设置采用默认值normal。
$("button").click(function(){ $("div").animate({height:"300px"});}); 点击按钮后<div>会逐渐变高。.animate还有很多更好玩的参数，比如时间函数、结束回调等，可以在这里查阅：
一个例子
上面详细介绍了jQuery的各种使用方式，包括DOM创建与遍历、事件监听、动画效果等。其实当你开始使用jQuery后会发现更多的特性，比你想象中还要好用！还是那句话：jQuery会改变你写JavaScript的方式。下面给一个例子，看看用jQuery写的JavaScript是怎样的：
// 选择 id 为 fruits 的元素集合（该集合中只有一个元素，即 ul ）var $ul = $('#fruits');// 找到该元素的第一个子元素（即 li）并将其移除$ul.find(':first-child').remove();// 创建一个 li 元素，并设置其 color 样式为 red，其内容为 pearvar $pear = $('更多文章请访问
