web开发场景正以闪电般的速度向前发展，开发人员必须继续保持他们的技能新鲜。如果你在过去5年左右的时间里从事过任何形式的前端设计或开发，那么你很可能在某个时候尝试过流行的JavaScript库，其中许多已经变得非常突出，现在被许多大型商业网站使用。
在这篇文章中，我将介绍一个最流行的JavaScript库，并为高级JavaScript开发奠定基础:jQuery．
尽管网上有许多入门教程可以为jQuery开发提供一个很好的起点，但在本文中，我希望不仅仅是快速入门语法，而是提供jQuery的坚实概述，并讨论使用这样一个库的好处。当然，这些信息中的大部分——语法和其他特定于jquery的细节之外——将适用于任何JavaScript库。
为什么使用JavaScript库?
引用jQuery的官方口号:“少写，多做。”网页开发人员的角色是创建代码，以确定用户与网页的交互将产生什么结果。Web开发人员不应该花费数小时调试浏览器的怪癖。
相反，他们应该完全自由地处理行动和结果。这就是JavaScript库发挥作用的地方。
克服浏览器差异
不同的浏览器以不同的方式处理DOM操作、透明效果和动画，在某些情况下，仅仅创建一个简单的效果就需要大量的代码。使用JavaScript库可以完全绕过所有这些挑战，使您能够访问直接处理实际需要完成的任务的API(应用程序编程接口)。JavaScript的所有共同挑战和问题都在幕后处理，允许您集成功能，而不必担心它是否能在特定的浏览器中工作。
低调的JavaScript
使用JavaScript库的另一个重要原因是，所有库都允许您在页面中不显眼地包含JavaScript，从而保持您的行为层(JavaScript)与内容而且演讲层(XHTML和CSS)。
轻松完成复杂任务
最后，JavaScript库的一个非常强大的特性是，它能够用一行代码操作网页上的任何元素或元素集。以下面的HTML为例:
- Text Here
- Text Here
- Text Here
- Text Here
- Text Here
假设您想使用JavaScript更改第一个列表项元素的背景颜色(<李>)在上面的无序列表中。使用纯JavaScript，你的代码看起来像这样:
var myListCollection = document.getElementsByTagName("ul");For (var I = 0;i < myListCollection.length;i++) {if (myListCollection[i].使用实例className === "list") {myListCollection[i]. childnodes [0].style。backgroundColor = "blue";}}
使用jQuery，你只需要一行易于维护的代码就可以完成同样的事情:
$ (" ul。).css("background-color"， "blue");
进一步的阅读
- JavaScript库或代码自己
- jQuery的JavaScript演示
理解CSS概念
强大的jQuery开发必须具备的一个方面是对CSS的深刻了解。这是因为jQuery经常利用基于css的语法来操作DOM元素。下面是一些在深入jQuery开发之前应该非常熟悉的概念:
- 类型选择器
- 类选择符
- ID选择器
- 后代选择器
- 子选择器
- 属性选择器
- CSS特异性
- 级联与继承
任何现代前端开发人员都应该非常熟悉上面的大多数CSS概念，因为任何CSS布局都会使用这些概念。jQuery不仅集成了基本的选择器(类型、类和ID)，而且还使用了后代和子选择器，目前使用的所有浏览器都不支持这些选择器。但是对于jQuery，由于其内置的浏览器规范化，所有选择器都得到了同等的支持。
了解jQuery在访问元素时合并CSS语法将极大地增强您使用jQuery快速、轻松地创建强大的JavaScript应用程序的能力。
理解JavaScript概念
为了充分利用jQuery，学习一些JavaScript概念是个好主意。当然，你可以在不了解下面列出的一些概念的情况下用jQuery做很多事情，但如果你花时间理解一些基本原理，你将在jQuery开发中获得更大的优势，包括:
- 对象的创建
- 对象的属性
- 对象字面量
- 函数作为方法
- 匿名函数
- 闭包
同样，在开始使用jQuery之前，没有必要完全理解上面的任何一个概念，但是如果您理解了上面的一个或多个概念，那么您使用jQuery API的能力将大大提高。
- 面向对象的JavaScript:核心概念简介
- 面向对象的Javascript在Scotch.io
jQuery源代码
在开始任何jQuery开发之前，您必须首先了解下载最新版本jQuery库，并将其包含在页面中:
.js
上面这行HTML应该出现在任何实际的jQuery代码之前，否则会出现错误。另外，您可以直接链接到谷歌Ajax Libraries API上的最新版本，而不是自己托管源代码，这可以为您节省一些服务器资源。(阅读更多卸载网站功能的方法)。
jQuery语法
现在您已经对jQuery的好处有了一个概述，并对所涉及的概念有了一定的理解，接下来让我们了解一些语法，以便开始使用这个强大的库。
jQuery包装器
jQuery包装器是所有jQuery命令的核心函数。我在前面的一个例子中使用了它。再看一遍:
$(“李”);
的＄symbol是jQuery函数的别名，所以上面这行代码也可以写成:
jQuery(“李”);
但是，由于显而易见的原因(例如;
为了保持代码简洁)，您很少会看到这种语法。上面两个示例中显示的jQuery函数返回一个对象，该对象包含圆括号内指定的DOM元素数组(在本例中，是嵌套在的所有锚标记)<李>标签)。当然，在上述两个例子中，我们都没有指定操作;我们所做的只是返回那些DOM元素，它什么也不做。
在下一节中，我们将添加作用于目标元素组的方法。
jQuery命令
jQuery的API包括通过内置方法轻松访问效果和其他操作，这些操作通常需要几十行代码才能在纯JavaScript的跨浏览器方式下完成。例如，让我们在前面示例的代码中添加一个“淡出”方法:
$(“李”).fadeOut ()；
上面的代码行“淡出”了页面上嵌套的所有锚标记<李>标签。如果我们想让锚点再次淡出，我们只需使用渐显()方法:
$(“李”).fadeIn ()；
链接命令
jQuery还允许开发人员将命令串起来，一个接一个地串起来。所以，我们可以结合前面两个例子，如下所示:
$(“李”).fadeOut () .fadeIn ();
上面的代码将淡出所有嵌套在列表项中的锚标记，然后立即淡出它们。链接项的数量是无限的(或在合理设置的限制内)，允许在同一组元素上执行多个命令，每个命令都是连续发生的。
这只是jQuery所能实现的功能的一小部分，以及完成通常需要很多行代码和大量浏览器测试的任务是多么容易。尽管在运行jQuery代码时仍然要进行浏览器测试，但结果几乎总是相同的:跨浏览器的、不引人注目的、易于编写和维护的JavaScript。
在DOM准备就绪时运行代码
前面我们谈到了不引人注目的JavaScript的概念，以及如何编写jQuery使您的脚本与内容和表示保持分离。到目前为止，我们讨论的代码示例只要包含在HTML页面的底部，就可以正常运行。另一方面，如果它们被包含在文档的头部，那么它们将无法工作，因为此时文档树还没有呈现。
jQuery只允许我们在DOM准备就绪时运行代码。这是通过美元(文档)时处理程序。这个处理程序的美妙之处在于，它不会让代码等待直到整个页面完成加载，而典型的window事件。
用(文件)。ready处理程序，您的代码将在DOM树完成渲染后立即运行，在所有图像和其他媒体完成加载之前，从而最小化加载时间。当DOM准备就绪时，让我们试着运行前面的代码示例:
$(文档)时函数(){$(“李”).fadeOut () .fadeIn ();})；
上面的代码告诉jQuery在文档树完成呈现时运行一个匿名函数。匿名函数包含我们前面看到的代码，该代码将锚褪色，然后立即将它们重新褪色。
该代码可以包含在< >头文档的，接近页面底部的，或任何其他地方，它将以完全相同的方式运行。“ready”事件只是通过jQuery的API可用的众多事件之一。其他包括点击，双击鼠标，负载，模糊，keydown，提交等等。
进一步的阅读
结论
jQuery的功能远不止这些，而我才刚刚开始演示它的强大和简单。但我认为这足以提供一个很好的概述，以及一些语法基础，从而为jQuery初学者编写易于编写和实用的JavaScript代码做好准备。
进一步的阅读
- jQuery通用教程
- 51+ jQuery教程
- 30 jQuery教程完全初学者
