第一章链接：初识JavaScript - 章节课后练习题及答案
第二章链接：JavaScript 基础（上） - 章节课后练习题及答案
第三章链接：JavaScript 基础（下） - 章节课后练习题及答案
第四章链接：JavaScript 函数 - 章节课后练习题及答案
第五章链接：JavaScript 对象 - 章节课后练习题及答案
第六章链接：DOM（上） - 章节课后练习题及答案
第七章链接：DOM（下） - 章节课后练习题及答案
第八章链接：BOM - 章节课后练习题及答案
第九章链接：JavaScript网页特效 - 章节课后练习题及答案
注：使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍。
一、填空题
1、在筛选选择器中，通过______方法获取第一个li元素。
2、jQuery动画中，通过______方法用来控制元素的淡入显示。
3、在筛选选择器中，通过______方法获取最后一个li元素。
4、jQuery动画中，通过______方法显示被隐藏的匹配元素。
5、jQuery操作类名的方法中，通过______方法向被选元素添加一个或多个类名。
二、判断题
1、jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“write less，do more”。（ ）
2、jQuery文件的类型主要包括未压缩（uncompressed）的开发版和压缩（minified）后的生产版。（ ）
3、将jQuery引入后，在全局作用域下会新增“$”和“jQuery”两个全局变量。（ ）
4、 $("div")可以获取div元素，这种方式就是通过jQuery选择器来获取元素。（ ）
5、用id选择器获取指定id的元素，语法表示为$(".id")。（ ）
三、选择题
1、下列选项中，通过标签名获取元素的是（ ）。
A. $("#id") B. $(".class") C. $("div") D. $("*")
2、下列筛选选择器中，获取li元素，并选择索引为奇数的元素的是（ ）。
A. $("li:first") B. $("li:last") C. $("li:odd") D. $("li:even")
3、jQuery提供了用于停止动画效果的方法是（ ）。
A. stop() B. fadeTo() C. animate() D. show()
4、下面选项中，可以实现从被选元素移除一个或多个类的是（ ）。
A. removeClass() B. toggleClass() C. toggle() D. addClass()
5、下列关于jQuery的说法，错误的是（ ）。
A. jQuery是一个轻量级的脚本，其代码非常小巧。
B. 不支持CSS 1~CSS 3定义的属性和选择器。
C. 实现了JavaScript脚本和HTML代码的分离，便于后期编辑和维护
D. 插件丰富，可以通过插件扩展更多功能
四、简答题
1、请列举jQuery中基本选择器有哪些。
2、请例举操作元素类名的方法有哪些。
五、编程题
1、请使用jQuery设置页面中的div元素的宽度为200px，高度200px。
2、请使用jQuery实现页面中div元素向右运动100px后回到初始位置的动画效果。
参考答案：
一、填空题
1、**:first** 2、**fadeIn()** 3、**:last**** 4、show()**
5、**addClass()**二、判断题
1、对 2、对 3、对 4、对 5、错三、选择题
1、C 2、C 3、A 4、A 5、B四、****简答题
** 1、请列举jQuery中基本选择器有哪些。** id选择器：获取指定id的元素，语法$("#id")。 全选选择器：匹配所有元素，语法$("*")。 类选择器：获取同一类class的元素，语法$(".class")。 标签选择器：获取相同标签名的所有元素，语法$("div")。 并集选择器：选取多个元素，语法$("div,p,li")。 交集选择器：交集元素，语法$("li.current")。** 2、请列举操作元素类名的方法有哪些。**
addClass()方法向被选元素添加一个或多个类名。 removeClass()方法从被选元素移除一个或多个类。 toggleClass()方法用来为元素添加或移除某个类，如果类不存在，就添加该类，如果类存在，就移除该类。五、编程题
** **1、请使用jQuery设置页面中的div元素的宽度为200px，高度200px。
//定义div元素： <div style="background-color:red"></div> //jQuery代码如下： $('div').css({width:'200px',height:'200px'});完整代码如下：<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> //引入jquery文件 <script src = "jquery-3.4.1.min.js"></script> </head> <body> <div style="background-color:red"></div> <script> $('div').css({width:'200px',height:'200px'}); </script> </body> </html>2、请使用jQuery实现页面中div元素向右运动100px后回到初始位置的动画效果。//定义div元素: <button>向右移动</button> <div style="background-color:red; width:50px; height:50px; position:absolute;"> </div> //jQuery代码如下： $("button").click(function () { $("div").animate({ left: 100, }, 500); }); $("button").click(function () { $("div").animate({ left: 0, }, 500); });完整代码如下：
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> //注意引入jquery文件 <script src="jquery-3.4.1.min.js"></script> </head> <body> <button>向右移动</button> <div style="background-color:red;width:50px;height:50px;position:absolute;"></div> <script> $("button").click(function () { $("div").animate({ left: 100, }, 500); }); $("button").click(function () { $("div").animate({ left: 0, }, 500); }); </script> </body> </html>
本文转载自: https://blog.csdn.net/weixin_57002282/article/details/125208920
版权归原作者 小泽的熊先森 所有， 如有侵权，请联系我们删除。
版权归原作者 小泽的熊先森 所有， 如有侵权，请联系我们删除。