简单入门JavaScript库jQuery：用选择符创建jQuery对象并应用方法

Posted 2021-03-09 1994jinnan

jQuery，顾名思义，也就是javascript和查询（Query），是一个辅助JavaScript开发的库。

jQuery 能极大地简化 JavaScript 编程。

目录
1 jQuery库包含的特性
2 jQuery与JS
3 获取页面元素
4 DOM事件与jQuery方法
5 简易操作DOM元素
6 处理尺寸
7 遍历操作
8 过滤操作
9 jQuery对JS的增强
10 为页面添加动态效果
11 jQuery与Ajax
12 jQuery工具

通过jQuery，您可以选取（查询，query） html元素，并对它们执行“操作”（actions）。

jQuery语法是为HTML元素的获取而设计的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号$在jQuery中是jQuery的缩写；
选择符（selector）“查询”和“查找”HTML 素，如：
$("#test").hide() - 隐藏所有 id="test" 的元素；

2005年，受该领域的先驱人物Dean Edwards和Simon Willison等人的启发，美国人John Resig编写了一套函数，利用这些函数能够以编程的方式快速查找网页中的元素，并为这些元素指定行为。（jQuery使用jquery()函数或$函数。）

jQuery在2006年1月由John Resig在纽约的barcamp发布。其中包含了DOM操作和基本的动画功能。他把这个项目命名为jQuery，意在强调其查找或“查询”网页元素，并通过JS操作这些元素的核心用途。

js库主要是为了包装和扩展js核心及BOM和DOM已有功能，为开发人员提供大量便捷的实用函数。

js库和框架致力于解决的问题，无非就是（跨浏览器）DOM操作、事件处理、样式更换、外部通信（Ajax）。但jQuery独特的集合对象、隐含迭代、方法连缀、自定义选择符和事件方法，加之不到20KB的轻巧，而很受青睐。

jQuery的大部分概念是从HTML和CSS的结构中借用而来的。

jQuery的特点在于其“独特的编程方式”，“以DOM元素为核心，一点一点地给它们添加新功能”(by centering on DOM Elements and tacking bits of functionality on top of them,jQuery made JavaScript fun again)。其特色在于其“面向集合和方法连缀”。也就是用CSS选择符创建jQuery对象（单个或对象集合），为这些对象创建丰富的方法（操作其中的DOM元素），而且让所有方法尽可能返回这个对象以实现方法连缀使用。

jQuery不仅支持各式各样的CSS选择符表达式，而且还支持XPath和自定义的选择符表达式，使开发者找到要操作的元素或集合简单得难以置信；它有细腻灵巧而富有弹性的事件处理机制，包括事件注册、触发和自定义以及hover()方法，处理Ajax请求和响应简洁明快、简单易用；以及超级方便的扩展机制，丰富的插件支持（Interface等），强大的社区支持，让其独树一帜。

JQuery的库很轻量级，压缩后只有几十K，在http://jquery.com/下载后引入或从公共库引用，如：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="includes/js/jquery-latest.min.js"></script>

在了解细节之前，先来看一个完整的小实例：

 

以上是实例实现的效果是：获取id为“p1“的<p>标签对象，然后添加css以及动态的滑动效果。

1 jQuery 库包含的特性

HTML元素选取；
HTML元素操作；
CSS操作；
HTML事件函数；
JavaScript特效和动画；
HTMLDOM遍历和修改；
AJAX；

2 jQuery与JS

JQuery作为一个库，会在JS的基础上实现自己的一些语法。要理解JQuery，首先要理解JS，JS是一门基于对象的脚本语言，由内置于浏览器的JavaScript引擎解释执行。之所以说是基于对象，是因为JS是通过自身内建的对象和DOM对象模型所提供的对象和事件，对网页内容进行控制、对用户操作进行响应，从而实现网页的动态交互效果的；

当浏览器作为JS的执行环境时，浏览器就作为宿主环境提供了宿主对象（BOM）；因为这些对象在浏览器加载网页时就存在，可以看成它们是一些宿主类的实例，只是这些实例无须使用new运算符显式地实例化。这些宿主对象也就是浏览器公开给JS的API，通过这些API，JS应用程序可以获取浏览器相关的信息，也可以修改浏览器的一些显示；

JS的核心在于通过DOM对象操作HTML页面中的各个节点元素或元素集合，动态修改HTML文档的内容，实现基于Web的应用。如同Word、Excel的“先选定、后操作”一样，JS对页面元素的操作也要“先选择”。JS对页面的选择包括有HTML标签元素、元素属性以及CSS选择器（ID与类选择器）。

3 获取页面元素

从jQuery的字面去理解，j代表javaScript，Query表示查询，jQuery很重要的功能就是实现对象（或叫文档元素、DOM元素、页面元素）的查询或获取，以实现对象的相应操作；Query 最有特色的语法特点就是与CSS 语法相似的选择器。

下面来看JS获取页面元素的语法：

 

如：

var h = document.getElementById(tab).getElementsByTagName("h3");

jQuery 获取页面元素的语法就简便了，jQuery 中所有选择器都以美元符号开头：$()，如：

$("p")、$("#containor")、$(".quo")

括号内的参数可以是HTML标签元素，也可以是CSS的ID或class选择器及其它自定义选择器；

上面的JS语句用JQuery表示就是：

var h = $(‘#tab > h3‘);

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

3.1 元素选择器

jQuery 使用 CSS 选择器来选取 HTML元素。

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

3.2 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。
$("[href=‘#‘]") 选取所有带有 href 值等于 "#" 的元素。
$("[href!=‘#‘]") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$=‘.jpg‘]") 选取所有 href 值以 ".jpg" 结尾的元素。

3.3 CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

$("p").css("background-color","red");

 

4 DOM 事件与jQuery方法

在JS中一切都是对象，JQuery也不例如，在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

先选择（或确认）目标对象，后应用等效DOM事件的jQuery方法：

$("p").click(function(){
// 动作触发后执行的代码!!
});

 

5 简易操作DOM元素

选择器允许您对 HTML 元素组或单个元素进行操作。

在 HTML DOM 术语中：

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

如修改页面外观、改变文档内容、应用动态效果等。

首先看一下JS相关的操作代码：

var parent = document.getElementById("parent");
var child0 = document.createElement("div");
child0.innerHTML = "child0";
child0.className = "newDiv";
parent.appendChild(child0);

5.1 设置或返回所选元素的内容或值

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
 $("#test").text());
$("#test").html());
$("#test").val());

5.2 获取并设置 CSS 类

jQuery提供了跨浏览器的标准解决方案，且即使在页面已经呈现之后，jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
 
 $("#div1").addClass("important blue");
 $("h1,h2,p").removeClass("blue");
 $("h1,h2,p").toggleClass("blue");
$("p").css({"background-color":"yellow","font-size":"200%"});

5.3 添加新的 HTML 内容

$(‘#container‘).append(‘<a href="more.html">more</a>‘);

5.4 设置属性

jQuery attr() 方法也用于设置/改变属性值。

$("button").click(function(){
 $("#w3s").attr({
 "href" : "http://www.w3school.com.cn/jquery",
 "title" : "W3School jQuery Tutorial"
 });
});

5.5 删除元素/内容

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
$("#div1").remove();
$("#div1").empty();

6 处理尺寸

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
$("button").click(function(){
 var txt="";
 txt+="Width: " + $("#div1").width() + "</br>";
 txt+="Height: " + $("#div1").height();
 $("#div1").html(txt);
});

7 遍历操作

7.1 向上遍历 DOM 树

parent() 方法返回被选元素的直接父元素。
 $("span").parent();
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
 $("span").parents();
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
 $("span").parentsUntil("div");

7.2 向下遍历

向下遍历 DOM 树，以查找元素的后代。

children() 方法返回被选元素的所有直接子元素。
 $("div").children();
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
 $("div").find("span");
 $("div").find("*");

7.3 水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历：

 $("h2").siblings();
 $("h2").siblings("p");
 $("h2").next();
 $("h2").nextAll();
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
 $("h2").nextUntil("h6");
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

8 元素过滤

元素过滤可以缩小搜索元素的范围。

8.1 按位置过滤

first()、last() 和 eq()允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

 $("div p").first();
 $("div p").last();
 $("p").eq(1);

8.2 filter() 方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

 $("p").filter(".intro");

8.3 not() 方法

not() 方法返回不匹配标准的所有元素。

 $("p").not(".intro");

9 jQuery对JS的增强

JS除于实现更简易操作DOM元素以外，还有其它方面的增强：

9.1 jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

$.each(obj,function(key,value){
total += value
});

9.2 jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

JS以浏览器为运行环境，代码由浏览器解释执行，所以不同的浏览器对一些JS的命令的支持是不一样。另外浏览器所提供的DOM方式也是有区别的。

10 为页面添加动态效果

jQuery内置了一些隐藏、显示、切换，滑动，淡入淡出，以及动画之类的效果，以及制作新效果的工作包。

$(‘div.details‘).slideDown();

11 jQuery与Ajax

无须刷新页面从服务器获取信息：也就是Ajax，是一系列在客户端和服务器之间传输数据强大技术。

$(‘div.details‘).load(‘more.html #content‘);

12 jQuery工具

$.each() 是更通用的循环方法，能够在对象和数组中循环；
（$().each()专用于jQuery对象中的循环；）
$.map() 循环读取数组；
$.merge 合并两个数组；
$.unique 过滤重复的数组元素；
$.trim() 从字符串或者表单值中删除空格；
$().data() 将对象和数据附加到DOM中；

13 结束语

理解了上述内容以后，再来看JQuery语法就简单了，当然首先是要熟悉JS语法，然后再熟悉一下JQuery的选择器语法与等效DOM事件的jQuery方法，大部分的JQuery代码就能看懂了。

参考：http://www.w3school.com.cn/jquery/index.asp

附代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://public.dabiaoge.me/common/js/jquery.min.js"></script>
<script>
$(document).ready(function()
 {
 $("button").click(function(){
 $("#p1").css("color","red").slideUp(2000).slideDown(2000);
 });
});
</script>
</head>
<body>
<p id="p0">1 Query html node.</p>
<p id="p1">2 applyint event emthod.</p>
<p id="p2">3 easy for Javascript coding.</p>
<button>chaining</button>
</body>
</html>

－End－来源：贵阳网站优化