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

时间：2025-01-14 19:49:08

一、填空题

        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")。 

                交集选择器：交集元素，语法$("")。 

        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."></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."></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>

相关文章