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() 用于停止动画队列，设置动画之前可先停止动画排队，这样可以避免动画堆积。
D，利用 jQuery 实现排他思想的思路是: 先统一设置所有元素的样式，然后找出特殊的单独处理。
答案：CD
解析：AB选项为正确选项。
C选项错误在hover() 如果只传递一个函数那么鼠标进入和移出都执行同一个函数，没有两个事件单独写灵活，且有些复杂逻辑，可能只需要绑定某一个特定事件。
D选项错误在于，jQuery实现排他思想是特殊元素特殊处理，其他兄弟元素单独处理。
难度: ☆☆☆☆
单选题
关于jQuery,以下描述正确的是:
A，prop() 可以获取和设置普通属性，但是表单属性 disabled / selected / checked 等就无能为力了。
B，attr() 可以获取和设置普通属性，但是自定义属性就无能为力了。
C， data()可以自定义属性，且不会出现在标签上。
D，以上答案均正确。
答案: C
解析:
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;
width: 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
解析：
-
innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
-
不带单位
难度: ☆☆☆
7.考点：综合题
多选题
下列说法，错误的是：
A，attr()和prop()都可以操作普通属性，前者更适合自定义属性操作，后者更适合操作表单属性disabled、selected、checked等。
B，html() 和text() 功能一样，可以替换使用。
C，after() 是把调用者作为父元素，把参数作为子元素，放到调用者的最末尾。
D，scrollTop() 操作页面时，只可以获取页面被卷去的部分，不能赋值修改页面的显示位置。
答案：BCD
解析：
B选项，错误在于html()识别标签，text()不识别标签。
C选项，错误在于after()方法是以兄弟节点的形式插入节点。
D选项，scrollTop() 既可以获取页面被卷去的部分，也可以进行赋值修改。
难度: ☆☆☆☆
多选题
关于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的逻辑依然会执行
难度: ☆☆☆☆
