「融职培训」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名,我们会在后续的课程中讲解。

课后练习

  1. 图卡片切换
  2. 选项卡
  3. 模态框

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