• jQuery 练习题


    1.考点:jQuery入口函数和顶级对象

    单选题

    关于jQuery,以下描述正确的是:

    A,$(function(){})这种入口函数等同于window.load

    B,$(window).ready(function(){})这种入口函数等同于window.load

    C, jQuery中的入口函数相当于JS中的DOMContentLoaded事件,因此jQuery无法实现window.onload同样的功能

    D, jQuery中的顶级对象$和jQuery是一回事儿

    答案: D

    解析: 选项ABC,都错了,正确写法为$(window).load();D选项,是正确的可以验证 console.log( $=== jQuery)

    难度: ☆☆

     

     

     

     

    2.考点:jQuery对象和DOM对象

    单选题

    关于获取元素,以下获取到单个元素的方法是:

    A,jQuery对象就是DOM对象

    B,jQuery对象可以转换为DOM对象,但是DOM对象无法转换为jQuery对象

    C, jQuery对象转换为DOM对象的方法有两种:jQuery对象[索引值]和jQuery对象.get(索引值)

    D, DOM对象转换成jQuery对象的方法有一种:$(DOM对象)[0]

    答案: C

    解析:

    A选项,jQuery对象和DOM对象不一样。

    B选项,jQuery对象和DOM对象可以相互转换。

    D选项,后面多出来一部分:[0]

    难度: ☆☆☆

     

     

    3.考点:jQuery选择器

    多选题

    关于获取元素,以下获取到"目标元素"所在a链接的有:

    <div>
     <ul>
       <li>
      <a href='#' class='aaa' id='ccc'>皮鞋</a>
       </li>
       <li>
      <a href='#' class='bbb' id='bbb'>帽子</a>
       </li>
       <li>
      <a href='#' class='ccc' id='aaa'>目标元素</a>
       </li>
     </ul>
    </div>

     

    A,$('ul li a:eq(3)')

    B,$('ccc')

    C,$('#aaa')

    D,$('a:last')

    答案: CD

    解析: A选项索引值应该为 2 ; B选项类名前应该加点。

    难度: ☆☆

     

     

     

    4.考点:jQuery样式操作

    多选题

    以下说法,正确的是:

    A,css() 既可以获取属性值,也可以设置属性值。

    B,css() 有两种设置属性值方式,一种是传递两个参数第一个属性,第二个值;第二种可以传递一个对象,对象中属性和值以键值对形式存在。

    C,jQuery中有三种常见的类操作方法:addClass() / removeClass() / toggleClass();

    D,addClass()不会像原生js中的className属性一样覆盖原有的属性值。

    答案: ABCD

    解析: 全部正确

    难度: ☆☆☆

     

     

     

     

    5.考点: jQuery动画效果

    多选题

    关于动画效果,下列描述正确的是:

    A,show()和hide()所能完成的效果,toggle()可以切换完成。

    B,slideDown()和slideUp()和slideToggle()可以设置动画完成时间。

    C,fadeIn()和fadeOut()和fadeToggle()和fadeTo()是可以设置回调函数的,于动画完成后执行。

    D,以上说法至少有一项是错误的。

    答案: ABC

    解析: ABC均正确,则D错误。

    难度: ☆☆

     

     

     

    6.考点:jQuery自定义动画

    多选题

    关于自定义动画,说法正确的是:

    A,自定义动画可以设置4个参数分别为:样式,时间,动画类型,回调函数

    B,animate()中,除了样式其他参数都可以省略或自带默认值

    C,回调函数的执行,是在所有样式全部达到目标值后才执行的

    D,animate()可以模拟显示隐藏、滑入滑出、淡入淡出等动画,使用原则为哪个方便用哪个

    答案:ABCD

    解析:全部正确。

    难度: ☆☆☆

     

     

     

    7.考点:综合题

    多选题

    下列说法,错误的是:

    A,连式编程和隐式迭代是 jQuery 的两大优点,能够达到快速开发的目的。

    B,stop() 用于停止动画队列,设置动画之前可先停止动画排队,这样可以避免动画堆积。

    C,有了 hover() 事件,就没有必要再使用 mouseenter() / mouseleave() 了。

    D,利用 jQuery 实现排他思想的思路是: 先统一设置所有元素的样式,然后找出特殊的单独处理。

    答案:CD

    解析:AB选项为正确选项。

    C选项错误在hover() 如果只传递一个函数那么鼠标进入和移出都执行同一个函数,没有两个事件单独写灵活,且有些复杂逻辑,可能只需要绑定某一个特定事件。

    D选项错误在于,jQuery实现排他思想是特殊元素特殊处理,其他兄弟元素单独处理。

    难度: ☆☆☆☆

     

    1.考点:jQuery 属性操作

    单选题

    关于jQuery,以下描述正确的是:

    A,prop() 可以获取和设置普通属性,但是表单属性 disabled / selected / checked 等就无能为力了。

    B,attr() 可以获取和设置普通属性,但是自定义属性就无能为力了。

    C, data()可以自定义属性,且不会出现在标签上。

    D,以上答案均正确。

    答案: C

    解析:

    A选项,prop() 可以操作表单属性 disabled / selected / checked等,且只适合他操作。

    B选项,attr() 可以自定义属性。

    难度: ☆☆☆

     

     

     

     

    2.考点:jQuery 文本属性值

    单选题

    下列方法,可以获取 input 中value属性的方法是:

    A,html()

    B,text()

    C,val()

    D,三个方法都不可以

    答案: C

    解析:

    A选项,类似 innerHTML 属性

    B选项,类似 innerText 属性

    C选项,类似value属性

    难度: ☆☆

     

     

    3.考点:jQuery 元素操作

    多选题

    下列 jQuery 的元素操作,说法正确的是:

    A,each() 可以遍历jQuery对象中的每一个元素,但是回调函数中的对象为DOM对象。

    B,jQuery 创建元素只有 $('标签') 这一种方法。

    C,append() 和 prepend() 功能完全相同,可以交换使用。

    D,remove() 和 html() 都可以删除元素。

    答案: AD

    解析:

    B选项,html() 识别标签,所以也可以用它创建元素。

    C选项,append() 和 prepend() 前者添加到父元素的最末尾,后者添加到最前面。

    难度: ☆☆☆

     

     

     

    4.考点:jQuery 的尺寸操作

    多选题

    以下说法,正确的是:

    A,height() 既可以获取 height 值,也可以设置 height 值。

    B,css('height')和height()获取的结果完全一样,只不过 height() 更简单一点儿。

    C,height() 和 innerHeight() 和 outerHeight() 方法获取的盒子属性不一样。

    D,以上说法都正确。

    答案: AC

    解析:

    B选项: css('height')获取的是字符串带有单位,height() 获取的是数值,无单位。

    难度: ☆☆☆

     

     

     

     

    5.考点: jQuery 位置操作

    多选题

    下列 jQuery 方法,描述错误的是:

    A,offset()方法用于获取盒子距离整个页面的距离,和父盒子是否有定位没有关系。

    B,position()获取的是距离所有父盒子中,嵌套自己最近的父盒子的距离,可以获取,也可以赋值。

    C,scrollTop()和scrollLeft()可用于获取盒子或者页面顶部和左侧的超出(或者卷起)部分。

    D,animate()可以让页面滑动到顶端或者指定位置,使用方法需要两个参数:animate( scrollTop, 值 ) ;

    答案: BD

    解析:

    B选项,position() 只能获取值,不能赋值。

    D选项,animate() 滑动页面的正确用法是传递一个对象:animate( {scrollTop: 值} )

    难度: ☆☆☆☆

     

     

     

    6.考点:代码题

    单选题

    运行一下代码,正确的输出结果是:

    <body>
    <style>
           div {
               height: 100px;
                200px;
               background-color: pink;
               margin: 10px;
               padding: 20px;
               border: 10px solid red;
          }
       </style>

       <div></div>
       <script src='http://code.jquery.com/jquery-latest.js'>
       <script>
           $(function() {
               console.log($("div").innerWidth());
          })
       </script>
    </body>

    A,120

    B,140px

    C,220

    D,240

    答案:D

    解析:

    1. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小

    2. 不带单位

    难度: ☆☆☆

     

     

     

    7.考点:综合题

    多选题

    下列说法,错误的是:

    A,attr()和prop()都可以操作普通属性,前者更适合自定义属性操作,后者更适合操作表单属性disabled、selected、checked等。

    B,html() 和text() 功能一样,可以替换使用。

    C,after() 是把调用者作为父元素,把参数作为子元素,放到调用者的最末尾。

    D,scrollTop() 操作页面时,只可以获取页面被卷去的部分,不能赋值修改页面的显示位置。

    答案:BCD

    解析:

    B选项,错误在于html()识别标签,text()不识别标签。

    C选项,错误在于after()方法是以兄弟节点的形式插入节点。

    D选项,scrollTop() 既可以获取页面被卷去的部分,也可以进行赋值修改。

    难度: ☆☆☆☆

     

    1.考点:jQuery 事件注册

    多选题

    关于jQuery事件事件注册,以下描述正确的是:

    A,点击事件绑定,jQuery中仅有 click() 一种绑定形式

    B,jQuery中的click(),不会出现事件逻辑覆盖。

    C,jQuery中的click(),一定会出现事件逻辑覆盖。

    D,以上答案均不正确。

    答案: B

    解析:

    A选项,除了click()还有bind() / delegate() / on() 方法,都可以绑定click事件

    C选项,click() 不会出现事件逻辑覆盖

    难度: ☆☆☆

     

     

     

     

    2.考点:jQuery 事件处理

    多选题

    下列方法,可以获取 input 中value属性的方法是:

    A,on()可以给元素绑定多个事件,且可以做事件委托,为动态元素绑定事件

    B,off()可以解绑事件上的逻辑

    C,trigger()和triggerHandler()的不同之处在于后者不会触发浏览器的默认行为

    D,以上说法至少有一个是错的

    答案: ABC

    解析:

    前三项无任何一项错误。

    B选项,类似 innerText 属性

    C选项,类似value属性

    难度: ☆☆☆

     

     

    3.考点:jQuery 事件对象

    多选题

    下列 jQuery 的中的事件对象event,说法正确的是:

    A,jQuery中的事件对象event,兼容性更好,获取更方便

    B,jQuery中的事件对象event是在DOM中的event对象基础上封装的,但是属性名和方法名全部类似

    C,jQuery中的event.preventDefault()可以阻止浏览器的默认行为

    D,jQuery中的event.stopPropagation()可以阻止事件传播

    答案: ABCD

    解析:

    B选项,html() 识别标签,所以也可以用它创建元素。

    C选项,append() 和 prepend() 前者添加到父元素的最末尾,后者添加到最前面。

    难度: ☆☆☆

     

     

     

    4.考点:jQuery 拷贝对象

    多选题

    以下说法,正确的是:

    A,jQuery中的可以使用$.extend()实现对象拷贝

    B,$.extend()的第一个参数为复制的时候选择深层还是浅层复制,深层复制则属性中的复杂数据类型会被重新创建一份儿

    C,$.extend()的第二个参数开始是将要拷贝的对象,未来即将被合并。

    D,$.extend()的最后一个参数是合并的目标对象,所有合并的对象信息都会出现在这个对象当中。

    答案: AB

    解析:

    CD选项: 解释错误,说法反了正确说法为:

    $.extend()的第二个参数是合并的目标对象,所有合并的对象信息都会出现在这个对象当中。

    $.extend()的最后一个参数是将要拷贝的对象,未来即将被合并。

    难度: ☆☆☆

     

     

     

    5.考点:jQuery 多库共存

     

    单选题

    下列 jQuery 方法,描述正确的是:

    A,一个项目中,无法同时使用多个版本的jQuery

    B,jQuery的顶级对象只能使用jQuery或者$,无法进行修改

    C,$.noConflict()或者jQuery.noConflict()可以实现jQuery的多库共存

    D,一个项目,没有同时存在多个版本的jQuery的必要

    答案: C

    解析:

    AB选项,jQuery是可以多库共存的,也就是可以同时存在多个jQuery版本,且顶级对象可以自定义。

    D选项,一个项目中同时存在多个版本的jQuery就可以使用不同版本jQuery的特性,是有必要的,且大型项目开发存在遗留问题,非常容易出现多库共存。

    难度: ☆☆☆

     

     

     

    6.考点:jQuery 插件

    单选题

    下列有关jQuery插件的说法正确的是:

    A,jQuery的插件机制没用,没必要使用插件

    B,jQuery的插件使用本质就是: 使用别人已经写好的代码复制html 、 css、js,调整必要的参数就可以实现很强大的功能

    C,bootstrap是一个开源框架,可以不依赖jQuery独立运行,所以不包含所谓的插件

    D,以上答案均正确

    答案:B

    解析:

    A选项,jQuery插件是jQuery非常强大的组成部分,很多插件可以直接在项目中修改并使用

    D选项,bootstrap是基于jQuery实现的框架,包含很多插件。

    难度: ☆☆☆

     

     

     

    7.考点:代码题

    单选题

    运行下面代码,点击li标签后,正确的输出结果是:

    <body>
    <ul>
           <li>我是原生土著li1</li>
           <li>我是原生土著li2</li>
           <li>我是原生土著li3</li>
           <li>我是原生土著li4</li>
           <li>我是原生土著li5</li>
       </ul>

    <script>
           $(function () {
               $("li").on("click",fn1)
               $("li").on("click",fn2)
               $("li").on("click",fn3)

               $("li").off("click",fn2);

               //总结:怎么绑定的事件怎么解绑;(一把钥匙开一把锁)

               function fn1(){
                   console.log(111);
              }
               function fn2(){
                   console.log(222);
              }
               function fn3(){
                   console.log(333);
              }
          });
       </script>
    </body>

    A,111 和 222

    B,111 和 333

    C,222和 333

    D,无任何输出

    答案:B

    解析:

    B选项,off只是解绑了 fn2 逻辑,所以点击li后,fn1和fn3的逻辑依然会执行

    难度: ☆☆☆☆

     

  • 相关阅读:
    IntelliJ IDEA maven库下载依赖包速度慢的问题
    安装 PHP
    秒杀怎么样才可以防止超卖?基于mysql的事务和锁实现
    MySQL 使用自增ID主键和UUID 作为主键的优劣比较详细过程(从百万到千万表记录测试)
    架构师之路16年精选50篇
    基于ELK和Python搭建简单的监控告警系统
    MySQL5.7 利用keepalived来实现mysql双主高可用方案的详细过程
    在线数据迁移
    jedisLock—redis分布式锁实现
    Intellij IDEA 最新旗舰版注册激活破解(2018亲测,可用)
  • 原文地址:https://www.cnblogs.com/ndh074512/p/14730557.html
Copyright © 2020-2023  润新知