问答

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

类库（Class Library）：类库就是一些类的集合，只要我们将一些可以复用的类集中放到一个Library中，我们就可以称其为一个类库。
类库解决的是代码或者是模块级别的复用或者对复杂度的封装问题，例如将一个解决复杂问题的功能模块封装成一个函数，提供一个简单的接口。
类库它是一种工具，它提供了很多封装好的方法，用与不用取决于我们自身，即使用了也不会影响我们的代码结构。
类库有：jQuery等

框架（framework）：框架的第一含义是一个骨架，它封装了某领域内处理流程的控制逻辑，你只需要对它填充具体的业务逻辑。框架的目标性非常强，它专注于解决某一特定领域的问题，并为这一特定领域提供通用的解决方案。
这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架中也包含了很多元素，但是这些元素之间关系的紧密程度要远远大于类库中元素之间的关系。框架中的所有元素都为了实现一个共同的目标而相互协作。
框架有：react.js, angular.js, vue.js,backbone.js, Bootstrap等
业务代码、库、框架的关系可以参考下图：

Paste_Image.png

2.jquery 能做什么？

Jquery是一个javaScript的函数库。
①简化常见的js任务
②dom操作
③ajax
④绑定事件
⑤实现动画和特效

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

jquery对象是通过jquery选择器选择的对象，得到的是类数组对象，有自己的独有的属性和方法；DOM原生对象是通过JS选择器获得的对象,有自己的属性和方法。二者不能够混用，否则会报错。
DOM对象 转化为jquery对象： 用( )包裹DOM对象，如(DOM对象)

var btn=document.getElementById('btn');   //dom对象
$btn=$(btn);  //jquery对象

jquery对象转化为DOM对象：jQuery对象是一个类似数组的对象，可以使用它的下标，如[index]或者get[index]方法转换为DOM对象

var $test=$('#test')  //jquery对象
var test1=$test[index]  //dom对象
var test2=$test.get[index]  //dom对象
var test3=$test.eq(index)  //jquery对象

注意：用$选中的元素，无论一个还是多个，所得的都是类数组的对象。如果用eq(index)会得到jQuery对象，而用[index]会得到原生DOM对象。

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

jQuery绑定事件的方法有.bind()、.live()、.delegate()和.on()。下面同上一一对应的 .unbind()、.die()、.undelegate()和.off()是解除绑定的方法；其中的bind,live及die，在jQuery 1.7版本中，官方已废除了。
参考
bind、unbind、delegate、live 都在对应的在各个版本中弃用或者有局限性,而 on 和 off 兼容了上面绑定的所有方法,推荐使用on和off方法绑定和解除绑定
参考
①bind:对匹配到已经存在的元素绑定事件，可以绑定的多个事件以及处理方法，但是对新增加的元素不能绑定事件

//绑定单个事件
$(selector).bind(event,data,function)  

//绑定多个事件
$(selector).bind({   
    click: function() {
        // do something on click
    },
    mouseenter: function() {
        // do something on mouseenter
    }
});

//绑定多个事件类型
$('selecotr').bind('event1 event2', function() {
     //do something on mouseenter
});

②unbind:用来解除bind方法绑定的事件。

$('#p').unbind('click') 

③delegate:为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。(也就是可以指定事件代理的父元素，并且后来添加的元素也绑定了事件）

$(selector).delegate(childSelector,event,data,function)

$('#container').delegate('a', 'click', function() { alert("That tickles!") });

解释：JQuery扫描文档查找(‘#container’)，并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。

④live:相当于自动使用了事件代理，默认事件冒泡到 document 节点。不仅能对能对已有的元素绑定事件，还能对未来插入的元素绑定事件

$('a').live('click', function() { });
//相当于$(document).delegate('a', 'click', function() { });

解释：JQuery把函数绑定到$(document)元素上，并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与’a’这一CSS选择器是否匹配，如果都是的话，则执行函数。

⑤on:在选定的元素上绑定一个或多个事件处理函数。从jQuery1.7开始，.on()方法提供了事件处理的所有功能。所以，为了统一和方便，推荐使用.on()方法作为绑定事件的方法

$(".ct").on("click","a",function(){
       console.log($(this).text());
})

⑥off:用来移除用.on()方法绑定的事件。

移除所有段落上的事件：
$("p").off()

移除所有段落上的代理事件：
$("p").off( "click", "**" )

通过传入的第三个参数，仅移除先前绑定的事件处理函数：
var foo = function () {
    // code to handle some kind of event
};

// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);

// ... foo will no longer be called.
$("body").off("click", "p", foo);

通过指定名字空间，解除绑定表单上所有的代理事件：
var validate = function () {
    // code to validate form entries
};

// delegate events under the ".validator" namespace
$("form").on("click.validator", "button", validate);
$("form").on("keypress.validator", "input[type='text']", validate);

// remove event handlers in the ".validator" namespace
$("form").off(".validator");

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

隐藏展示有

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

①可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
②可选的 callback 参数是隐藏或显示完成后所执行的函数。
③本质上是修改dom.style.display属性

//展示p1
$("#btn1").on('click', function(e){
     $(".p1").show();
});

//隐藏p1
$("#btn2").on('click', function(){ 
    $(".p1").hide();
});

//隐藏p1，持续时间1s之后再执行回调
$("#btn3").on('click', function(){ 
    $(".p1").hide(1000, function(){ 
        $(".p2").hide(2000, function(){ 
            $(".p3").hide(3000); 
        }); 
    });
});

$("#btn4").on('click', function(){ 
     $(".p1").show(1000, function(){ 
         $(".p2").show(2000, function(){ 
            $(".p3").show(3000); 
         }); 
    });
});

//状态切换
$("#btn5").on('click', function(){ 
     $(".p1").toggle();
});

6.jquery 动画如何使用？

jQuery animate() 方法用于创建自定义动画。
语法：$(selector).animate({params},speed,callback);
①{params}必需的，包含样式属性及值的对象。例如：{width:'100px',height:'80px'}
②speed可选的，动画的时长。例如：slow/fast/毫秒数 。
③callback可选的，回调函数，在动画执行完毕后执行。
注意：只有数字值才能创建动画（比如 margin:30px）。字符串值无法创建动画（比如 background-color:red），写了之后会没有任何效果。
举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    div{
        background:yellow;
        width: 300px;
        height: 300px;
        position:relative;
    }
</style>
</head>
<body>
    <div></div>
    <button class="btn">点我动画</button> 

    <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
    <script>
        $('.btn').on('click',function(){
            $('div').finish();//连续点击只执行一次

            $('div').animate({width:"200px",height:"200px"})
                    .animate({left:"200px"})
                    .animate({top:"200px"});

            $('div').animate({left:"0px"});
            $('div').animate({top:'0px'});
            $('div').animate({width:"300px",height:"300px"});
        })
        
    </script>   
</body>
</html>

demo

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

• .html()方法可以获取元素内部的html内容（包含html标签）;如果在html()方法内加参数，可以设置元素内部html内容。如果参数内含有html标签，会被解析。

$('div').html();    //获取内容
$('div').html('<p>测试</p>')  //设置内容

• .text()方法可以获取元素内部的文本内容（丢弃html标签）；如果在text()方法内加参数，可以设置元素内部的文本内容。如果内容含有html标签，则会被转义成字符串，而不会被浏览器解析，适合用来处理用户输入。

$('div).text();  //获取文本
$('div').text('我是文本')  //设置文本

举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    *{
        margin:0;
        padding: 0;
    }
</style>

</head>
<body>
    <h1 id="header">我是<span>头部</span></h1>    
    <p id="footer">我是<strong>尾部</strong></p>
    <button class="btn1">获取“我是头部”的html内容</button>
    <button class="btn2">获取“我是头部”的文本内容</button>
    <button class="btn3">设置“我是头部”的html内容</button>
    <button class="btn4">设置“我是头部”的文本内容</button>

   <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>

    <script>
        $(".btn1").on("click",function(){
            console.log($("#header").html())
        });

         $(".btn2").on("click",function(){
             console.log($("#header").text())
         });

         $(".btn3").on("click",function(){
             $("#header").html('我是<em>内容</em>')
         });

         $(".btn4").on("click",function(){
             $("#header").text('我是<em>内容</em>')
         });

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

demo

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

• .val()方法可以获取表单用户输入或者选择的内容;在val()方法内加参数，可以设置表单内部输入或者选择的内容。

$('input').val();   // 获取值
$('input').val();   //设置值

• attr()方法可以获取元素的属性;在attr()方法内加参数，可以设置元素的属性。

$('img').attr('src'); // 获取属性
$('img').attr('src', newSrc); // 设置属性

demo

代码

1.代码运行结果
1.1范例
源码

2.代码运行结果
2.1范例
源码
问题： 点奢侈品2的时候页面跳到了顶部，可能是什么原因？如何解决？
答：查看源代码我们可以发现，<a>标签的<href=“#”>会使得当“奢侈品2”被点击时，页面跳转到了顶部。
因为默认#是#top会自动回到顶部，因此不要使用#作为占位符。如果href=""，不设置占位符就相当于刷新整个页面，所以必须设置占位符。
解决方法：
1、href让其等于两个或四个“#”；（这种方式最安全）；
2.设置为<href=“#!”>,因为没有任何元素的id值会为”!”，因此这样设置的话，就不会发生任何事情；
3.设置为<href=“javascript:void(0)”>,这样使用了javascript的伪协议，void(0)
的返回值是undefined,也相当于什么都不会发生。
4.当<a>被点击时，设置preventDefault()

3.代码运行结果
3.1范例
源码