开发公司十一、jQuery（下） - 章节课后练习题及答案

开发公司第一章链接：

开发公司第二章链接：

开发公司第三章链接：

开发公司第四章链接：

开发公司第五章链接：

开发公司第六章链接：

开发公司第七章链接：

开发公司第八章链接： 

开发公司第九章链接：

开发公司第十章链接： 

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

 一、填空题

        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()方法可以实现事件委派，请编写示例代码并解释。

                 定义页面按钮：

  1. <div id="btn">
  2.  
  3.   <button>我是第1个button</button>
  4.  
  5.   <button>我是第2个button</button>
  6.  
  7. </div>
  8.  
  9. <script>
  10.  
  11.     $("#btn").on("click", "button", function() {
  12.  
  13.       alert("单击了button");
  14.  
  15.     }) 
  16.  
  17.  </script>

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

五、编程题

        1、jQuery实现对象深拷贝：

  1. <script>
  2.     // 定义对象:
  3.     var obj1 = { name: '张三', age: 20, msg: { like: '篮球' } }
  4.     var obj2 = { name: '张三', age: 30, msg: { like: '足球' } }
  5.     $.extend(true, obj1, obj2)
  6.     obj2.msg.like = '橄榄球'
  7.     console.log(obj2.msg.like) // 橄榄球
  8.     console.log(obj1.msg.like) // 足球
  9. </script>

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

  1. <body>
  2.   <!-- 定义输入框 -->
  3.   <div id="val">
  4.     <input type="text">
  5.   </div>
  6.  
  7.   <script>
  8.     // 当失去焦点时，在内部元素的最后面添加span元素，展示“请输入内容信息”
  9.     $("input").blur(function () {
  10.       if(!$('input').val()){
  11.          $("#val").append("<span>请输入内容信息</span>");
  12.     }
  13.       });
  14.       // 当获取焦点时，删除span元素
  15.       $("input").focus(function () {
  16.         $("#val>span").remove(); 
  17.       });
  18.     </script>
  19.     
  20. </body>
网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发