注：使用的是人民邮电出版社出版的《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>

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