crm开发定制十、jQuery（上） - 章节课后练习题及答案

crm开发定制第一章链接：

crm开发定制第二章链接：

crm开发定制第三章链接：

crm开发定制第四章链接：

crm开发定制第五章链接：

crm开发定制第六章链接：

第七章链接：

第八章链接： 

第九章链接：

注：使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍。

 一、填空题

        1、在筛选选择器中，通过______方法获取第一个li元素。 

        2、中，通过______方法用来控制元素的淡入显示。

        3、在筛选选择器中，通过______方法获取最后一个li元素。

        4、jQuery动画中，通过______方法显示被隐藏的匹配元素。

        5、jQuery操作类名的方法中，通过______方法向被选元素添加一个或多个类名。

二、判断题

        1、jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“write less，do more”。（ ）

        2、jQuery文件的类型主要包括未压缩（uncompressed）的开发版和压缩（minified）后的生产版。（ ）

        3、将jQuery引入后，在全局作用域下会新增“$”和“jQuery”两个全局变量。（ ）

        4、 $("div")可以获取div元素，这种方式就是通过来获取元素。（ ）

        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。

  1. //定义div元素：
  2. <div style="background-color:red"></div>
  3.  
  4. //jQuery代码如下：
  5. $('div').css({width:'200px',height:'200px'});

        完整代码如下：

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6.     <title>Document</title>
  7.     //引入jquery文件
  8.     <script src = "jquery-3.4.1.min.js"></script>
  9. </head>
  10. <body>
  11.     <div style="background-color:red"></div>
  12.     <script>
  13.         $('div').css({width:'200px',height:'200px'});
  14.     </script>
  15. </body>
  16. </html>

        2、请使用jQuery实现页面中div元素向右运动100px后回到初始位置的动画效果。

  1. //定义div元素:
  2. <button>向右移动</button>
  3. <div style="background-color:red;
  4.             width:50px;
  5.             height:50px;
  6.             position:absolute;">
  7. </div>
  8.  
  9. //jQuery代码如下：
  10.     $("button").click(function () {
  11.       $("div").animate({
  12.         left: 100,
  13.       }, 500);
  14.     });
  15.     $("button").click(function () {
  16.       $("div").animate({
  17.         left: 0,
  18.       }, 500);
  19.     });

 完整代码如下：

  1. <html lang="en">
  2.  
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   //注意引入jquery文件
  9.   <script src="jquery-3.4.1.min.js"></script>
  10. </head>
  11.  
  12. <body>
  13.   <button>向右移动</button>
  14.   <div style="background-color:red;width:50px;height:50px;position:absolute;"></div>
  15.   <script>
  16.   $("button").click(function () {
  17.         $("div").animate({
  18.           left: 100,
  19.         }, 500);
  20.       });
  21.       $("button").click(function () {
  22.         $("div").animate({
  23.           left: 0,
  24.         }, 500);
  25.       });
  26.   </script>
  27. </body>
  28.  
  29. </html>
网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发