1. 说说库和框架的区别？
库的英语为 Library ( 简写 Lib )，框架的英语为 Framework。
库是一个一个封装好的代码，你需要哪个就调用哪个就可以了，使用的只是其中一部分，有面向对象的类库，有面向过程的函数库。优点：使用灵活，任意组装；缺点：需要自己搭建方案，建立各个部分的联系，过程相对繁琐，出现问题的几率高，耗时。
框架是一整套解决某个问题的系统化方案，你必须使用整个框架里规定的代码。优点：统一规范方便；缺点：难以自定义其中的某个部件
2.jquery 能做什么？
1.选取DOM元素
jQuery的核心是通过各种选择器，选中DOM元素，可以用querySelectorAll方法模拟这个功能。
//简单例举基本选择器
$('\*') //匹配所有
$('#id') //id选择器
$('.class') //类选择器
$('element') //标签选择器
2.DOM操作
尾部追加DOM元素
// jQuery写法
$(parent).append($(child));
//DOM写法
parent.appendChild
头部插入DOM元素
//jQuery写法
$(parent).prepend($(child));
//DOM写法
parent.indertBefore(child,parent.childNode[0])
删除DOM
//jQuery写法
$(child).remove()
//DOM写法
child.parentNode.removeChild(child)
3.事件的监听
//jQuery写法 //DOM写法
Element.prototype.on = Element.protype.addEventListener;
4.事件的触发
Element.protype.trigger = function (type, data){
var event = document.createEvent('HTMLEvents');
event.initEvent(type, true, true);
event.data = data || {};
event.eventName = type;
event.target = this;
this.dispatchEvent(event);
return this;
};
5.document.ready
目前的最佳实践，是将JavaScript脚本文件都放在页面底部加载。这样的话，其实document.ready方法（jQuery简写为$(function)）已经不必要了，因为等到运行的时候，DOM对象已经生成了。
6.atter方法
//jQuery方法
$("#picture").attr("src", "http://url/to/image");
//DOM方法
$("#picture").src = "http://url/to/image";
7.addClass方法
//jQuery方法
$('body').addClass('hasJS');
//DOM方法
document.body.className = 'hasJs';
// or
document.body.className += 'hasJS';
8.CSS
//jQuery方法
$(node).css("color", red)
//DOM方法
element.style.color = "red";
// or
element.style.cssText += 'color:red';
9.数据储存
//jQuery方法
$("body").data("foo", 52);
//DOM方法
element.dataset.user = JSON.stringify(user);
element.dataset.score = score;
10.Ajax
//jQuery方法
$.ajax({
type: "post",
url: "some.php",
data: {
name: "John", location: "Boston"
}
}).done(function(msg){
alert("Data Saved: " + msg);
})
//DOM方法
function request(type, url, opts, callback) {
var xhr = new XMLHttpRequest();
if (typeof opts === 'function') {
callback = opts;
opts = null;
}
xhr.open(type, url);
var fd = new FormData();
if (type === 'POST' && opts) {
for (var key in opts) {
fd.append(key, JSON.stringify(opts[key]));
}
}
xhr.onload = function () {
callback(JSON.parse(xhr.response));
};
xhr.send(opts ? fd : null);
}
//基于request函数，模拟jQuery的get和post方法
var get = request.bind(this, 'GET');
var post = request.bind(this, 'POST');
11.动画
//jQuery方法
$foo.animation('slow', { x : '+=10px'});
jQuery的动画效果，很大部分基于DOM。但是目前，CSS 3的动画远比DOM强大，所以可以把动画效果写进CSS，然后通过操作DOM元素的class，来展示动画。
//DOM方法
foo.classList.add('animate');
//使用回调函数
el.addEventListener("webkitTransitionEnd", transitionEnded);
el.addEventListener("transitionend", transitionEnded);
12.替代方案
由于jQuery体积过大，替代方案层出不穷。
其中，最有名的是zepto.js。它的设计目标是以最小的体积，做到最大兼容jQuery的API。zepto.js 1.0版的原始大小是55KB，优化后是29KB，gzip压缩后为10KB。
3.jquery 对象和 DOM 原生对象有什么区别？如何转化？
联系：
jQuery对象是通过包装DOM原生对象生成的对象。
两者之间可以互相转换。
区别：
jQuery与原生JS取得的对象不同，两者不等价。
jQuery与DOM对象各自的方法不能互用，会报错
相互转换：
1.jQuery对象转换成DOM对象
//[index]，转换单个jQuery对象
var $box = $('.box') //jQuery对象
var box = $('.box')[0] //DOM对象
<----------------------------------------------->
//.get(index)，不添加index可以将结果集全部转换
var $box = $('.box') //jQuery对象
var box = $box.get(0) //DOM对象
2.DOM对象转换成jQuery对象
//用$()将DOM对象装起来
var box = document.querySelector('.box') //DOM对象
var $box = $(box) //jQuery对象
4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
绑定事件
// 推荐用法on,还可用bind
$('div').on('click', function(e){
console.log(this);
console.log(e);
});
bind、unbind、delegate、live、on、off都是操作事件的方法
//bind方法，添加点击事件,3.0已弃用
$( "table" ).bind( "click", function() {
$( this ).toggleClass( "chosen" );
});
//delegate方法，添加点击事件
$( "table" ).delegate( "td", "click", function() {
$( this ).toggleClass( "chosen" );
});
//等同于这个on方法
$( "table" ).on( "click", "td", function() {
$( this ).toggleClass( "chosen" );
});
//unbind off都是取消事件
<-------------------------------------->
var foo = function() {
// Code to handle some kind of event
};
//给$("p")添加点击事件，每当点击的时候触发foo这个函数
$( "p" ).live( "click", foo );
//给$("p")添加点击事件，每当点击的时候取消触发foo这个函数
$( "p" ).die( "click", foo );
事件代理
/*
* 事件委托或者事件代理
* 想让div下面所有的span绑定事件
* 可以把事件绑定到div上
*/
$('div').on('click', 'span', function(e){
console.log(this);
console.log(e);
});
5.jquery 如何展示/隐藏元素？
.div {
//...
display: none;
}
.active{
display: block;
}
//通过添加删除class
$('.btn').on('click', function(){
$('.div').addClass('active')
$('.div').removeClass('active')
})
//通过判断class的有无，有就去掉，没有就加上
$('.btn').on('click', function(){
$('.div').toggleClass('active')
})
<------------------------------------>
//动画效果，hide()和show(),fadeIn()和fadeOut(),slideUp()和slideDown()
$('.btn1').on('click', function(){
$('.div').hide();
// $('.div').fadeIn();
// $('.div').slideUp();
})
$('.btn2').on('click', function(){
$('.div').show();
//$('.div').fadeOut();
// $('.div').slideDown();
})
//动画效果，toggle(),fadeToggle(),slideToggle()
$('.btn3').on('click', function(){
$('.div').toggle();
//$('.div').fadeToggle();
//$('.div').slideToggle();
})
//动画效果，非toggle()
$('.btn4').on('click', function(){
if($('.div').css('display', 'none'){
$('.div').show()
//$('.div').fadeOut()
// $('.div').slideDown();
})else{
$('.div').hide()
//$('.div').fadeIn()
// $('.div').slideUp();
}
})
//一个回到顶部的简易代码
<div class="go-top">顶部</div>
<style>
.go-top{
position: fixed;
right: 10px;
bottom: 10px;
width: 60px;
height: 100px;
color: #fff;
background-color: #6ff;
display: none;
}
</style>
<script>
$(window).on('scroll', function(){
var top = $(window).scrollTop()
if(top>100){
$('.go-top').css('display', 'block');
}else{
$('.go-top').css('display', 'none');
}
})
$(window).on('click', function(){
$(window).scrollTop(0)
})
</script>
6. jquery 动画如何使用？
简而言之，服从正交原则，使用jQuery时，不去干扰HTML和CSS
推荐使用增加或者去除class的方法给DOM添加动画效果
当需要自定义动画时，可以使用animate
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
获取HTML内容
$('.box').children('li')
$('.box').find('.box>li')
$('.box').html()
设置HTML内容
增：
//.inner内部末尾添加内容
$( ".inner" ).append( "<p>Test</p>" );
$( "<p>Test</p>" ).appendTo( ".inner" );
//.inner内部头部添加内容
$( ".inner" ).prepend( "<p>Test</p>" );
$( "<p>Test</p>" ).prependTo( ".inner" );
//与.inner同级，在.inner之前插入内容
$( ".inner" ).before( "<p>Test</p>" );
$("<p>Test</p>").insertBefore($(".inner"));
//与.inner同级，在.inner之后插入内容
$( ".inner" ).after( "<p>Test</p>" );
$( "<p>Test</p>" ).insertAfter( ".inner" );
<---------------------------------------------------------->
删：
//删除.test的所有子元素包括.test本身
//再次添加该元素时，绑定在元素上的事件无效
$('div').remove('.test');
//删除body的所有子元素
$('body').empty();
//删除.test的所有子元素包括.test本身
//再次添加该元素时，绑定在元素上的事件有效
$('div').detach('.test');
获取元素内部文本
$('div').text()
设置元素内部文本
$('div').html('123')
$('div').text('123')
<------------------------------->
$( ".inner" ).append( "<p>Test</p>" );
$( ".inner" ).remove( "<p>Hello</p>" );
8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
获取表单用户的value
$('input').val()
设置表单用户的value
$('input').val('newValue');
获取元素的属性
var title = $( "em" ).attr( "title" );
设置元素的属性
attr方法
//改变指定属性的value
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
//给匹配的所有元素移除指定的属性
$('div').removeAttr('id');
class方法
//添加class，不会覆盖，不会重复
$( "p" ).addClass( "myClass yourClass" );
//移除元素单个/多个/所有class
$( "p" ).removeClass( "myClass yourClass" );
//检查元素是否包含某个class，返回true/false
$( "#mydiv" ).hasClass( "foo" )
<------------------------------------->
//切换元素的class的有无
<div class="tumble">Some text.</div>
//第一次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
//第二次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>
9.
导航
10.
11.
