「融职培训」Web前端学习：深入理解jQuery概述

发表时间: 2020-06-18 14:07

一、jQuery概述

什么是jquery

jQuery是JavaScript的一个库，jQuery 极大地简化了 JavaScript 编程。我们在做网站或web应用的过程中，需要用JavaScript为我们完成一些用户与页面的交互效果，jQuery库可以让我们用更少的JavaScript代码完成更多的功能。

jQuery的优势与劣势

几年前的web开发，浏览器兼容是一个非常重要的问题，前端工程师为了让自己的程序在多个浏览器中正确运行，常常需要编写更多的代码来解决浏览器兼容问题，jQuery出现之后，它为前端工程师们解决了大量的JavaScript兼容问题，并且封装了大量的DOM接口和动画效果，让我们可以用更少的代码实现更多的功能并且保持良好的兼容性，jQuery因此迅速成为了世界上最流行的JavaScript库。

jQuery的流行还有一个原因就是因为它简单、易上手。很多人在不熟悉JavaScript的情况下，仍然可以使用jQuery完成各种页面效果。

随着时间的推移，浏览器的兼容问题越来越少，css3也解决了大量的页面动画效果，jQuery的优势渐渐没有那么突出了，但是它仍然是当前被使用了最多的JavaScript库，是前端工程师必须掌握的技能。

二、jQuery代码的编写

引入jQuery

要使用jQuery，首先我们需要下载和引入jQuery，我们可以到jquery官网下载jQuery文件，然后在html页面中添加script标签引入jQuery。

我们将jQuery放在一个名为script的目录中，然后用下面的代码引入jQuery。

1 <body>2     <script src="script/jquery.js"></script>3     <script>4         //这里可以编写jQuery代码5     </script>6 </body>

引入jQuery的注意事项

如果要编写jQuery的代码，一定要用两个script标签，一个用来引入jQuery，一个用来编写代码，且不可将jQuery的代码写在第一个script标签当中，这样编写的代码将没有任何作用。
一定要在第一个script引入jQuery，上面的script标签编写代码，下面的script引入jQuery，程序不能正常运行。

三、jQuery选择器

刚刚学习jQuery的时候，可以与css做比较：css使用【选择器】查找元素，使用【属性名：属性值】改变元素样式。jQuery与之类似，可以使用【jQuery选择器】查找元素，然后使用【jQuery方法】操作元素。这里的操作不只可以操作元素的样式，还可以添加和删除元素，或者获取元素的属性和文本等等功能。

改变元素样式

jQuery选择器和css选择器很类似（其实可以理解为jQuery选择器扩展了css选择器，在$()中添加css选择器就能找到我们想要的元素），下面我们使用jQuery选择器和css方法来找到并且改变一个元素的样式。

1 <body>2     <h1>hello jquery</h1>3     <script src="script/jquery.js"></script>4     <script>5         $("h1").css("color","red");  //将选择器$("h1")找到的元素的样式color设置成红色6     </script>7 </body>

在上面的例子中$(“h1”)是选择器，我们可以在双引号内插入各种css选择器，jQuery就会找到响应的元素。
css称作jQuery方法，我们可以用jQuery方法来操作元素，这里面的css方法可以设置元素的样式，后续我们还会讲解其他的方法。
使用方法的时候需要在方法名的后面添加一个括号,括号内可以添加参数，用来进一步描述方法的作用。

获取元素文本

上个例子中我们使用了一个jQuery的元素选择器和css方法实现了改变元素样式，接下来我们使用类选择器和text方法获取元素文本。

1 <body>2     <h1 class="title">hello jquery</h1>3     <script src="script/jquery.js"></script>4     <script>5         var txt = $(".title").text();6         console.log(txt);7     </script>8 </body>

在上面的代码中使用$(".title")选择器找到class值为title的元素，让后通过text方法获取元素的文本。
var可以声明一个变量，“=”可以将获取的文本赋值给txt变量。
使用console.log()可以在控制台输出文本的内容。

设置元素属性

我们还可以通过jQuery的attr方法来设置元素的属性，下面的例子我们使用attr方法将img标签的src属性指定成一张图片的路径。

1 <body>2     <img class="pic" src="">3     <script src="script/jquery.js"></script>4     <script>5         $(".pic").attr("src","images/0.jpg");6     </script>7 </body>

在上面的代码中，html标签img并没有设置src属性，我们通过jQuery的attr方法设置了img标签src属性。
attr方法可以设置两个参数，第一个参数是要设置的属性名，第二个参数是属性值。

添加和删除class

在说添加和删除class之前，我们先来看一个略复杂的选择器,代码如下所示。

 1 <body> 2     <ul class="nav"> 3         <li>香蕉</li> 4         <li>苹果</li> 5         <li>鸭梨</li> 6     </ul> 7     <script src="script/jquery.js"></script> 8     <script> 9         $(".nav li:eq(1)").css("background-color","red");10     </script>11 </body>

上面的选择器$(".nav li:eq(1)")我们可以将其拆分来理解

".nav"可以找到class名为nav的元素
".nav li"可以找到class名为nav中的所有li元素
".nav li:eq(1)"可以找到class名为nav中，li标签的第二个元素，这里需要注意的是元素的索引（编号）从0开始，所以1代表第二个元素。

在上面的代码中，我们将第二个li元素背景设置成了红色。

我们经常会使用jQuery操作元素的样式，上面我们已经学习了css方法，但是在实际开发中，css方法并不常用，我们更多的是使用addClass和removeClass方法来操作元素的样式，示例代码如下所示。

通过addClass方法，我们可以给元素添加一个class名active，这样style标签中定义的样式就会作用于这个元素。
同理，removeClass方法可以删除元素的class名，我们会在后续的课程中讲解。

课后练习

图卡片切换
选项卡
模态框

【融职教育】在工作中学习，在学习中工作

「融职培训」Web前端学习：深入理解jQuery概述

一、jQuery概述

二、jQuery代码的编写

三、jQuery选择器

课后练习

热门阅读

推荐阅读