网页交互开发高级第十一章课后习题及答案

课后习题：

一、填空题

1. jQuery中的用于获取元素自定义属性的方法是______。  

2. jQuery中的______方法用来设置元素的HTML内容。

3. 若要实现元素的遍历，需调用jQuery中的______方法。

4. 若要获取元素的宽度，使用jQuery提供的______方法。

5. 若要获取元素的卷去的顶部距离，使用jQuery提供的______方法。

二、判断题

1. 内部添加元素可以实现在元素内部添加元素并且放到内容的最后面或者最前面。（ ）

2. 外部添加就是把内容放入目标元素的后面或者前面。（ ）

3. $.each()方法可用于遍历任何对象，主要用于数据处理，比如数组、对象。（ ） 

4. width()/height()用于设置 width和height + padding + border + margin。（ ） 

5. offset()方法获取元素的位置，返回的是一个对象，包含left和right属性。（ ）

三、选择题

1. jQuery中关于offset()方法，描述正确的是（ ）。 

A. offset().top可以获取距离页面左侧的距离

B. offset().top用于获取设置了定位的父元素的顶部距离

C. offset()方法获取元素的位置，返回的是一个对象

D. offset()方法获取元素的位置跟父级有关系。

2. 下列属于jQuery中获取属性方法的是（ ）。

A. attr()  B. val()   C. html()   D. text()

3. jQuery中关于prop()方法，下列描述正确的是（ ）。

A.可以用来获取自定义属性

B.用来获取元素固有属性

C.用来获取元素的宽度

D.获取元素的内容

4. 下列关于jQuery中方法的说法，错误的是（ ）。

A. val()方法获取表单元素的值

B. text()方法获取表单元素的值

C. each()方法可以用来遍历元素

D. on()方法用来绑定事件

5. 下列关于jQuery中事件的描述，错误的是（ ）。

A. on()方法在匹配元素上绑定一个或多个事件处理函数

B. 当事件被触发，就会有事件对象的产生。

C. on()方法可以实现事件委托（委派）

D. trigger()与triggerHandler()的区别是trigger()不会触发元素默认行为

四、简答题

1. 请列举jQuery中常用的获取属性的方法。

2. 请简述trigger()方法和triggerHandler()方法的区别。

3. jQuery中on()方法可以实现事件委派，请编写示例代码并解释。

五、编程题

1. 请使用jQuery实现对象深拷贝。

2. 请使用jQuery实现当表单元素失去焦点时，显示“请输入内容信息”。

答案：

一、 填空题

1. attr()             

2. html()

3. each()

4. width() 

5. scrollTop() 

二、 判断题

1. 对

2. 对

3. 对

4. 错

5. 错

三、 选择题

1. C

2. A

3. B

4. B

5. D

四、 简答题

1. 请列举jQuery中常用的获取属性的方法。

prop()方法：用来设置或获取元素固有属性值。元素固有属性是指元素本身自带的属性，如<a>标签的href属性。

attr()方法：用来设置或获取元素的自定义属性，自定义属性是指用户给元素添加的非固有属性。

data()方法：用来在指定的元素上存取数据，数据保存在内存中，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

2. 请对比trigger()方法和triggerHandler()方法的区别。

trigger()方法在触发事件时，会执行元素的默认行为。

triggerHandler()方法在触发事件时不会执行元素的默认行为。

3. jQuery中on()方法可以实现事件委派，请编写示例代码并解释。

定义页面按钮：

<div id="btn">

  <button>我是第1个button</button>

  <button>我是第2个button</button>

</div>

<script>

$("#btn").on("click", "button", function() {

  alert("单击了button");

}) 

 </script>

上述代码中，click事件是绑定在id值为btn的div父元素上的，当分别单击按钮1和按钮2时都会触发单击事件，这是因为当子元素触发事件后，就会通过事件冒泡，执行父元素div的事件处理程序了。

五、编程题

1. jQuery实现对象深拷贝：

// 定义对象:

var obj1 = {name:'张三',age:20,msg:{like:'篮球'}}

var obj2 = {name:'张三',age:30,msg:{like:'足球'}}

$.extend(true,obj1,obj2)

obj2.msg.like = '橄榄球'

console.log(obj2.msg.like) // 橄榄球

console.log(obj1.msg.like) // 足球

2. 编写input输入框：

<div id = "val">

<input type="text">

</div>

jQuery代码如下：

<script>

// 当失去焦点时，在内部元素的最后面添加span元素，展示“请输入内容信息”

$("input").blur(function () {

if(!$('input').val()){

    $("#val").append("<span>请输入内容信息</span>");

}

  });

  // 当获取焦点时，删除span元素

  $("input").focus(function () {

    $("#val>span").remove(); 

  });

</script>