任务25 jqueryDOM&事件-简答题

2016-11-28 本文已影响0人 GarenWang

1.说说库和框架的区别？

类库（Class Library）简单来说，类库就是一些类的集合，只要我们将一些可以复用的类集中放到一个Library中，我们就可以称其为一个类库。类库中的许多元素（如类、结构、接口、枚举、委托等）之间可能有一些关联，但这些关联通常用于支持一个类概念或接口概念的完整表达。如果我们从一个更高的视角来审视类库，可以发现类库中的一个个“完整的概念”之间是无关的或是关系松散的。
框架，框架的第一含义是一个骨架，它封装了某领域内处理流程的控制逻辑，所以我们经常说框架是一个半成品的应用。由于领域的种类是如此众多，所以框架必须具有针对性，比如，专门用于解决底层通信的框架，或专门用于医疗领域的框架。框架中也包含了很多元素，但是这些元素之间关系的紧密程度要远远大于类库中元素之间的关系。框架中的所有元素都为了实现一个共同的目标而相互协作。框架的目标性非常强，它专注于解决某一特定领域的问题，并致力于为这一特定领域提供通用的解决方案。
框架与类库的区别主要表现在以下几个方面：
（1）从结构上说，框架内部是高内聚的，而类库内部则是相对松散的。
（2）框架封装了处理流程的控制逻辑，而类库几乎不涉及任何处理流程和控制逻辑。
（3）框架具有IOC（控制反转）能力，而类库没有。对于类库中的元素来说，通常都是由我们的应用来调用它；而框架具有这种能力――在适当的时候调用我们应用中的逻辑。这种能力是通过框架扩展点（或称为“插槽”）来做到的――具体的应用通过扩展点注入自己的逻辑，而在适当的时候，框架会调用这个扩展点中已注册的逻辑。实际上，.NET中的事件（event）发布、预定机制就是IOC的一个代表性例子。
（4）框架专注于特定领域，而类库却是更通用的。框架着力于一个特定领域的解决方案的完整表达，而类库几乎不针对任何特定领域。
（5）框架通常建立在众多类库的基础之上，而类库一般不会依赖于某框架。根据框架针对的领域是否具有通用性而将它们分为通用框架（General Framework）和应用框架（Application Framework）。通用框架可以在不同类型的应用中使用，而应用框架只被使用于某一特定类型的应用中

下图描述了类库、框架和应用之间的层次关系。

![]`5TD%C5T]NT@6MOQZS@AVA.png](https://img.haomeiwen.com/i3361706/1362695e658379d6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2.2.jquery 能做什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
1.操作DOM
2.操作data
3.events
4.ajax
5.effects&animation
6.HTML Templating
7.Widget/Theming
8.Graphic/Charts
9.app Architecture

3.jquery 对象和 DOM 原生对象有什么区别？如何转化？

jQuery对象：通过jQuery包装DOM对象后产生的对象
jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，两者不等价；
jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
eg:$("#id").innerHTML、document.getElementById("id").html()之类的写法都是错误的
相互装换
1.jquery对象转化为原生DOM对象
var $lis = $("li") ; //jQuery对象　
var li = $lis[0]; //DOM对象
var $divs = $("div"); //jQuery对象　　
var div = $divs.get(0); //DOM对象
2.DOM对象转成jQuery对象
对于DOM对象，只需用$()把DOM对象包装起来，就可得到jQuery对象
var li=document.getElementById("li"); //DOM对象　　
var $li=$(li); //jQuery对象

4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

jQuery有绑定事件的方法有bind()、live()、delegate()on()。解除绑定的方法有unbind()、die()、undelegate()和off()
bind、unbind、delegate、live 都想对应的在各个版本中弃用或者有局限性,而 on 和 off 兼容了上面绑定的所有方法,推荐使用on和off方法绑定和解除绑定.

使用on绑定事件使用事件代理的写法

<ul id="ct">
  <li><a href="#">百度</a></li>
</ul>
<script type="text/javascript">
  //绑定事件
  $('#ct').on('click','a',function(e){
       //'a'这个参数是一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。
       e.preventDefault();
       //一般都使用: $('#ct')on('click',function()}
  })
  //解除绑定
  $('#ct').off('click','a',function(){})
</script>

5.jquery 如何展示/隐藏元素？

jquery显示影藏元素主要有三个方法，hide(),show(),toggle()

所有jQuery的添加的css操作都是内联样式
如hide()等同于<p style="display:none"></p>,show等同于<p style="display:block"></p>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>显示和隐藏</title>
  <script type="text/javascript" src="jquery-3.1.1.js"></script>
  <script type="text/javascript" src="hide-show.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
  <p>hello world</p>
  <button id="show">显示</button>
  <button id="hide">隐藏</button>
  <button class="toggle">显示/隐藏</button>
  <script type="text/javascript">
  
  $('#show').on('click',function(){
      $(this).show(easing)//
      //show(参数)可以使用毫秒数show(500)，
      //也可以使用linear等效果
  })
  $('#hide').on('click',function(){
      $(this).hide(linear)
      //show(参数)可以使用毫秒数show(500)
      //也可以使用linear等效果
  })
  $('.toggele').on('click',function(){
      $(this).toggle();
  })
  //jquery官网的实例
  for(var i=0;i<10;i++){
      $("<div>").appendTo(document.body)
  };
  $(document).ready(function(){
      $("div").click(function(){
          $(this).hide(2000,function(){
              $(this).remove();
          })
      })
  })
</script>

6.jquery 动画如何使用？

animate() 根据一组 CSS 属性，执行自定义动画
$(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒可选的 callback 参数是动画完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<style type="text/css">
#ct{
    width: 200px;height: 200px;
    border: 1px solid #ccc;
}
.div1{
    width: 100px;height: 100px;
    background: orange;
    position: relative;
    /*必须要有position*/
}
</style>

 </head>
  <body>
<div id="ct">
    <button id="btn">点我动画效果</button>
    <div class="div1"></div>
</div>
<script type="text/javascript">
    $('#btn').on('click',function(){
        $('.div1').animate({width:50,height:50})
                  .animate({opacity:0.5})
                  .animate({left:100})
                  .animate({top:100})

        $(".div1").animate({width:50,height:50})
                  .animate({left:0})
                  .animate({top:0})
    })
</script>
</body>
</html>

jsbin地址

7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

获取 HTML 内容:html()包括html标签和文本
获取 HTML 内部文本:text()只有文本
设置 HTML内容: html('<p>你好<p>')
设置 HTML内容文本:text('你好')
demo演示地址

8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

val() 获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。
获取表单输入或选择的内容
<input type="text" id="username"
value='wangsan'> $("#username").val();
设置表单输入或选择的内容
<input type="text" id="username"
value='wangsan'> $("#username").val('lisi');
设置元素属性
<input type="text" id="username">
$("#username").attr("name", "username");
获取元素属性
<input type="text" id="username">
$("#username").attr("id"); //username
注意：在jquery里，css才能取该标签定义的css属性，attr只能取该标签里自带的属性，否则无效。

代码题

代码1
代码2
为何点击奢侈品2会回到顶部？因为a链接有默认行为，a链接必须有一个href属性，此时设置为#,点击链接会刷新页面回到顶部，event.preventDefault()阻止默认行为、javascript:void(0)等方法，阻止其刷新页面的行为发生。
代码3
为何设置.prod事件不行？因为事件绑定已经在页面刷新完成前建立好了，添加的新元素需要重新绑定，否则不会有hover效果，所以需使用父元素事件代理。