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名，我们会在后续的课程中讲解。
课后练习
- 图卡片切换
- 选项卡
- 模态框
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。