十、jQuery(上) - 章节课后练习题及答案

这篇具有很好参考价值的文章主要介绍了十、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);
    });

 完整代码如下:文章来源地址https://www.toymoban.com/news/detail-522212.html

<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(上) - 章节课后练习题及答案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Javascript面试题:30道含答案和代码示例的练习题

    以下是30道Javascript面试题,每个问题都包含答案和代码示例。这些问题涵盖了Javascript的各个方面,包括基础知识、DOM操作、事件处理、异步编程和面向对象编程等。 什么是Javascript? Javascript是一种脚本语言,用于在Web浏览器中编写交互式网页应用程序。 如何声明变量? 使用

    2024年02月03日
    浏览(87)
  • 【数据结构】第二章课后练习题——线性结构

    1、线性表是 一个有限序列,可以为空 2、链表中最常用的操作是在最后一个元素之后插入一个元素和删除最后一个元素,则采用 单循环链表 存储方式最节省运算时间 3、若某线性表中最常用的操作实在最后一个元素之后插入一个元素和删除第一个元素,则采用 仅有尾结点的

    2024年02月07日
    浏览(59)
  • 正则表达式练习题(含答案)

    1. d,W,s,B,.,*,+,?分别是什么? d:数字 W:非英文数字下划线的任意字符 s:任意空白字符 B:非单词开始或结尾的位置 .表示非换行符的任意字符 *表示匹配前面子表达式0次或多次 +表示匹配前面子表达式1次或多次 ?表示匹配前面子表达式0次或1次 2. (?=a),(?!a),

    2024年02月06日
    浏览(48)
  • C#声明Employee类实现其构造函数(C#课后练习题-构造函数篇)

    本篇文章的题目为C#的基础练习题,构造函数部分。做这些习题之前,你需要确保已经学习了构造函数的知识。 本篇文章可以用来在学完构造函数后加深印象,也可以用于大学课后习题。 假设你正在开发一个简单的员工管理系统,其中有一个 Employee 类表示员工。请编写一个

    2024年02月07日
    浏览(48)
  • Photoshop平面设计练习题(附答案)

    1.下列哪个是photoshop图像最基本的组成单元: C A. 节点 B. 色彩空间 C. 像素 D. 路径 2.下面对矢量图和像素图描述正确的是: C A. 矢量图的基本组成单元是像素 B. 像素图的基本组成单元是锚点和路径 C. Adobe Illustrator 9图形软件能够生成矢量图 D. Adobe photos

    2024年02月03日
    浏览(47)
  • 32道子网划分练习题详细解析含答案

    目录 1 子网划分概念: 2 划分方法: 子网划分方法:段,块,数的计算三步。 段就是确定ip地址段中既有网络地址,又有主机地址的那一段是四段中的那一段? 块就确定上一步中确定的那一段中的主机位数n,这样就确定该段中主机位中最大ip变化是2^n。 变化段数的计算:

    2023年04月20日
    浏览(76)
  • JavaScript 课后习题答案

    注:本书是由人民邮电出版社《JavaScript + jQuery 交互式前端开发》 1、单行注释以__    //  ___开始。  2、console.log(alert(\\\'Hello\\\')) 在控制台的输出结果是___ Undefined ___。 3、JavaScript由___ ECMAScript ___、___ DOM ___、___ BOM ___三部分组成。 4、console.log(\\\'scriptalert(123);/script\\\') 的输出结果是

    2023年04月08日
    浏览(36)
  • 【机器学习】第四章决策树练习题及答案

    一. 单选题(共10题,66分) 1. 【单选题】以下关于决策树特点分析的说法错误的有 ( )。 A. 推理过程容易理解,计算简单 B. 算法容易造成过拟合 C. 算法自动忽略了对模型没有贡献的属性变量 D. 算法考虑了数据属性之间的相关性 正确答案: D 2. 【单选题】以下关于决策树原理

    2024年02月01日
    浏览(62)
  • 【机器学习】第三章线性模型练习题及答案

    一. 单选题(共21题,63分) 1.【单选题】以下哪组变量之间存在线性回归关系? A. 正三角形的边长与周长 B. 学生的性别与他的成绩 C. 正方形的边长与面积 D. 儿子的身高与父亲的身高 正确答案: A 2.【单选题】下列关于线性回归分析中的残差(Residuals)说法正确的是? A. 以上说法

    2024年02月03日
    浏览(54)
  • 【机器学习】第六章支持向量机练习题及答案

    一. 单选题(共11题,55分) 1. 【单选题】‍对于在原空间中线性不可分问题,支持向量机()。 A. 无法处理 B. 在原空间中寻找线性函数划分数据 C. 将数据映射到核空间中 D. 在原空间中寻找非线性函数的划分数据 正确答案: C 2. 【单选题】关于支持向量机中硬间隔和软间隔的说

    2024年02月11日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包