1.说说库和框架的区别？
- 库的的概念和意义是用来提供一些方法的集合，避免重复定义相同功能的函数并具有一定的模式兼容性。例如jquery
- 框架的相对于库更重量级一些，倾向于提供整套的解决方案，倾向于创造一些需要你来遵守的规则和范例。例如angular.js
2.jquery 能做什么？
jQuery 库包含以下特性：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
HTML 元素选取 跟document.querySelectorAll()用法很相似
$("a") 返回所有的a元素
$(".category")返回所有的含有category类的元素
$("#header") 返回id为header的元素
$("ul li") 返回ul中的所有li
$("ul").find("li") =$("ul li")
$("ul li").eq(0) 返回ul中的第一个li元素
- HTML 元素操作
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容（包括 HTML 标记）
val() 设置或返回表单字段的值
attr() 设置或返回元素的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class25</title>
<style>
a.btn{
display: inline-block;
margin: 0 10px;
padding: 5px;
text-decoration: none;
color: black;
border: 1px solid #ccc;
border-radius: 3px;
}
</style>
</head>
<body>
<ul class="pannel">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<a href="" class="btn">点我</a>
<form action="#">
<ul>
<li>用户名</li>
<li><input type="text" name="name"></li>
</ul>
</form>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(".pannel li").text() //123
$(".pannel li").html() //1
$(".pannel li").text("123") //[<li>123</li>,<li>123</li>,<li>123</li>]
$(".pannel li").html("<a href=''>这是一个链接</a>")
$("a").attr("class") //btn
$("a").attr("class",$("a").attr("class")+" hehe") //class="btn hehe"
$("input").val("xiaohan") //设置input元素值
$("input").val() //获取input元素值
</script>
</body>
</html>
- CSS 操作
$("a").css("background-color","#ccc") //直接给元素设置样式
//添加和移除CSS
$("a").removeClass("btn")
$("a").removeClass()
$("a").addClass("btn")
3.jquery 对象和 DOM 原生对象有什么区别？如何转化？
DOM元素是用原生js获取的，jquery元素是利用jquery选择器获取的
jquery ->DOM ：jquery [0]和jquery.get(0);
DOM->jquery :$(DOM)
4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
事件的绑定：
第一种方法： 直接使用关键字绑定 $(...).click(handler(e))、$(...).keydown(handler(e)) 等
click 鼠标单击
dbclick 鼠标双击
** keydown** 键盘按下
** keypress** keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件
** keyup** 键盘弹起
** mouseover ** 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。与mouseout合用
** mouseenter ** 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。与mouseleave合用
** mouseout ** 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件
** mouseleave** 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
** change** 当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
** scroll ** 当用户滚动指定的元素时，会发生 scroll 事件
** focus** 当元素获得焦点时，发生 focus 事件
** blur ** 当元素失去焦点时，发生 focus 事件
** resize ** $("window").resize(function(e){}) 当浏览器窗口大小改变时触发
** hover ** 跟CSS中的hover一样 只不过触发函数要写两个
- mouseover和mouseenter 的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.div{
width: 500px;
margin-bottom: 20px;
padding: 1px;
background-color: #ccc;
vertical-align: middle;
text-align: center;
}
.div h2{
background-color: white;
display: inline-block;
}
</style>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="div over">
<h2>被触发的 Mouseover 事件<span></span></h2>
</div>
<div class="div enter">
<h2>被触发的 Mouseenter 事件<span></span></h2>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
var x=0;
var y=0;
$(".over").mouseover(function(e){
$(this).find("span").text(++x);
});
$(".enter").mouseenter(function(e){
$(this).find("span").text(++y);
});
});
</script>
</body>
</html>
- mouseout 和mouseleave的区别
<p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
<p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
<div class="div over">
<h2>被触发的 Mouseout次数 <span></span></h2>
</div>
<div class="div enter">
<h2>被触发的 Mouseleave次数<span></span></h2>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
var x=0;
var y=0;
$(".over").mouseout(function(e){
$(this).find("span").text(++x);
});
$(".enter").mouseleave(function(e){
$(this).find("span").text(++y);
});
});
- hover 的用法
$('.btn').hover(function () { $(this).addClass('hover');}, function () { $(this).removeClass('hover');});
第二种方法：使用 绑定事件函数
$(...).on( eventType,handler(e));
bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- bind( events,handler(e)) 为元素逐一绑定事件处理函数
- unbind( events) 为元素解绑事件函数
- delegate( selector, events, handler(e) ) 事件代理，当元素下面的selector元素触发事件执行
- .undelegate( selector, events) 解绑事件代理
- live( events,handler(e)) 事件代理 ，当事件冒泡到document元素时执行，
- on(events,handler(e)) 为元素逐一绑定事件处理函数
- on(events,selector,handler(e)) 事件代理 当元素下面的selector元素触发事件执行
- 另外值得一提的是 所有的事件绑定函数 在1.4版本以后都支持传入多个event
推荐使用on函数
on既可以为元素逐一绑定事件，又可以使用事件代理
live函数在1.7版本以前就过时了（但百度提供的在1.9才不能使用，可能是做了兼容），效率又不高。
delegate函数也逐渐使用 on函数来替代，现在仍然可以用，但不推荐
5.jquery 如何展示/隐藏元素？
- hide(speed,callback); //显示
- show(speed,callback); //隐藏
- toggle(speed,callback); //切换
其中speed 代表执行时间，可以是 slow fast normal 三个字符串也可以是毫秒值
callback是完成后的调用函数
<style>
.box{
float: left;
background-color: #ccc;
margin-right: 10px;
padding: 0 5px;
display: none;
}
</style>
<body>
<button id="show">show</button>
<button id="hide">hide</button>
<button id="toggle">toggle</button>
<div class="box">hello</div>
<div class="box">world!</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#show").on("click",function (){
$(".box").first().show("fast",function showNext(){
$(this).next(".box").show("fast",showNext);
});
});
$("#hide").on("click",function(){
$(".box").last().hide("fast",function hideNext(){
$(this).prev(".box").hide("fast",hideNext);
})
});
$("#toggle").on("click",function(){
$(".box").toggle("slow");
})
})
</script>
6.jquery 动画如何使用？
animate({params},speed,callback);
params 代表css属性集合
speed 代表 动画执行时间，可以是slow fast normal 三个字符串也可以是毫秒值
callback 是回调函数
<script type="text/javascript">
$(function(){
$("#animate").on("click",function(){
$(".box").animate(
{
"margin-left":"100px",
width: "200px",
height: "200px",
},"fast",function(){
$(".box").animate(
{
"margin-left" :"10px",
width: "100px",
height: "100px"
},"fast"
);
});
})
})
</script>
7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
text() 设置或返回所选元素的文本内容,设置文本传入字符串参数
html() 设置或返回所选元素的内容（包括 HTML 标记）设置html传入字符串参数
8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- 获取表单输入的内容
$("#name").val(); - 获取表单选择的内容
<select class="" name="year">
<option value="2015">2015年</option>
<option value="2016">2016年</option>
</select>
$("select option:selected").text() //2015年 获取选中文本
$("select").val() //2015 获取选中的值
- 设置和获取元素属性
$(selector).css("background-color"); //获取样式
$(selector).css("background-color","#ccc") //设置样式
$("input").attr("placeholder","hello") //设置属性
$("input").attr("placeholder") //获取属性
代码题：
代码
本教程版权归小韩同学和饥人谷所有，转载须说明来源
参考文档：
饥人谷课件-jquery基础
饥人谷课件-jquery基础2
事件绑定：参考自jquery中文API
常用的事件：参考自w3c事件
