任务25

2017-01-11 本文已影响10人璐璐熙可

问答

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

库:一个提供了很多方法的API.
框架:相当于一个已经构建好的实体房子，而用户只需在这个房子里添加自己想要的家具等。而框架对于开发者来说，开发者只需在这个框架中添加自己的东西而实现具体的功能。常见的框架有Angular, React等。

2.jquery 能做什么？

操作dom节点
动态修改页面样式
为页面添加动态效果（如：淡入淡出）
统一AJAX操作

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

DOM对象是通过原声JS代码来获取的对象，也只能用原生JS进行操作；
Jquery对象就是在原生Dom对象上做一层包装.

区别:经过包装后我们可以使用jquery对象的一个方法,这个方法就是对原生对象的一个封装.

如何转化:

jquery 对象转化成DOM 对象：

var $wrap=$("#wrap")
var wrap=$wrap[0];

DOM对象转化为jquery对象：

var wrap=document.getElementById("wrap");
var $wrap=$(wrap);

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

事件绑定:

$('button').on('click',function(){
console.log($(this));
});

(1)bind()向匹配元素添加一个或多个事件处理器，绑定单个事件的使用方法：

$(selector).bind(event,data,function(){});

(2)unbind：是 bind对应的取消绑定
(3)delegate:为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

$(selector).delegate(childSelector,event,data,function(){});

(4)live:向当前或未来的匹配元素添加一个或多个事件处理器，绑定单个事件的使用方法：

$(selector).live(event,data,function(){});

(5)on:其实是将以前的绑定事件方法作了统一

$("div").on("click", "p", function(){
    alert($(this).text());
});

(6)off:是on对应的取消绑定事件

推荐使用on
使用on绑定事件使用事件代理的写法如下:给ul绑定click事件当触发的元素为li时触发

$("ul").on("click", "li", function(e){
    console.log(1)
});

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>隐藏显示</title>
</head>
<body>
<div class="ct">
  <div class="row">row1
  <p>标题</p>
  </div>
  <div class="row">row2
    <p>段落</p>
  </div>
</div>
<button id="btn">点我hide</button>
<button id="btn2">点我show</button>

<script src="../js/jquery-1.11.1.min.js"></script>
<script>
  $(function () {
    $('#btn').on('click', function () {
      $('.ct').hide(500);
    });
    $('#btn2').on('click', function () {
      $('.ct').show(500);
    });
  })

</script>
</body>
</html>

浏览效果如下:

6.jquery 动画如何使用？

$(selector).animate({params},speed,callback)

第一个参数：必需的 params 参数定义形成动画的 CSS 属性。
第二个参数：可选参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
第三个参数：可选回调是动画完成后所执行的函数名称。

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

设置HTML内容
$(selector).html(content)

获取HTML内容
$(selector).html()

设置文本内容
$(selector).text(content)

获取文本内容
$(selectoe).text()

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

表单内容：$(el).val()
元素属性：$(el).attr()