十、jQuery（上） - 章节课后练习题及答案

第一章链接：初识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>

标签： javascript jquery 前端

本文转载自: https://blog.csdn.net/weixin_57002282/article/details/125208920
版权归原作者 小泽的熊先森 所有，如有侵权，请联系我们删除。

十、jQuery（上） - 章节课后练习题及答案

一、填空题

二、判断题

三、选择题

四、简答题

五、编程题

参考答案：

发表评论

“十、jQuery（上） - 章节课后练习题及答案”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航