专栏首页学习猿地Web前端学习 第4章 jQuery 1 jQuery概述
原创

Web前端学习 第4章 jQuery 1 jQuery概述

一、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. 模态框

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 初识python脚本#学习猿地

    # 变量就是用一个英文字符串来记录或标记一些数据,并且这个被标记的数据是可以变化的

    学习猿地
  • 初识python脚本#学习猿地

    # 变量就是用一个英文字符串来记录或标记一些数据,并且这个被标记的数据是可以变化的

    学习猿地
  • 【融职培训】Web前端学习 第8章 egg基础教程4 sequelize

    对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术。简单的说,ORM...

    学习猿地
  • 蒙哥马利算法

    这篇文章为大家梳理一下整个蒙哥马利算法的本质,蒙哥马利算法并不是一个独立的算法,而是三个相互独立又相互联系的算法集合,其中包括

    空白的贝塔
  • 异步加载脚本保持执行顺序

    首先是外部脚本和行内脚本,对于异步加载的脚本,会导致竞争状态,使得出现未定义的错。

    菜的黑人牙膏
  • 【推荐】如何使你手里的数据变成现金?

    最近数据挖掘与分析讨论比较热的话题是“数据变现”,也就是所谓的数据挖掘在业务中进行了应用,并确实给业务带来更大的业务绩效收益。很多朋友都知道,有技术、熟悉业务是...

    机器学习AI算法工程
  • 基于Kaggle数据的词袋模型文本分类教程

    本教程展示了改善文本分类的方法,包括:做一个验证集,为AUC预测概率,用线性模型代替随机森林,使用TF-IDF权衡词汇,留下停用词,加上二元模型或者三元模型等。...

    机器学习AI算法工程
  • 运用Atrous XCRF解决点云分类中的过拟合问题 (CS)

    点云数据智能分类技术的进步为许多新的和现有的应用带来了许多新方法与机遇。但是,由于标记点的数量有限,通过机器学习模型进行的自动分类容易过度拟合和模型泛化能力差的...

    DDDDDaemon
  • 认清真相,脱离菜鸟!中级数据分析师,该有什么样的能力?

    “到底咋样算进阶?”是很多做数据的新人同学很疑虑的问题。网上的文章铺天盖地的都是“如何入门”,“如何快速入门”一类。可真正做上数据分析以后才发现:根本学的就是个...

    接地气的陈老师
  • 首台深度学习超级计算机交付 人工智能大战正酣

    用户1908973

扫码关注云+社区

领取腾讯云代金券