1：说说库和框架的区别？
- 库
库是一个数据仓库，里面放了各种可以利用的API，由于库的内部已经做了各种底层的封装和各种兼容实现，因此可以调用提供的API接口来实现我们需要的功能，而不需要复杂的代码和加工，因此使代码得到优化，效率提高 。 - 框架
框架相当于一个模板，用来搭建一个项目的最基层的部分，框架内部可以根据不同项目的需要填入不同的内容。
另外一种解释是：
库是跟着你的思维走；
框架是牵着你的思维跟他走；
2： jquery 能做什么？
选择网页元素
改变结果集
元素的操作：取值和赋值
元素的操作：移动
元素的操作：复制、删除和创建
工具方法
事件操作
特殊效果
AJAX
JQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互，特点是兼容性好，API友好，能写更少的代码做更多的事情。
3： jquery 对象和 DOM 原生对象有什么区别？如何转化？
- 区别：
Dom是文档对象模型，通过dom节点能构建成一个基本的网页，jQuery对象是通过对dom对象的包装后产生的对象，jQuery对象能使用jQuery里的方法，如$("#ct").html();这段代码等同于document.getElementById("foo").innerHTML,jQuery对象无法使用Dom对象的任何方法，同理Dom对象也不能使用jQuery的方法。 - 转化：
1.jQuery对象是一个类似数组的独享，可以通过[index]得到相应的Dom对象。
例如$("#cr")是一个jQuery对象，$("#cr")[0]就能得到dom对象
2.通过jQuery的get()方法，$("#cr").get(0)。
3.Dom对象转化成jQuery对象，在dom对象外面用$()包裹起来就得到相应的jQuery对象。
4：jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- 用bind,delegate,live,on方法绑定事件。
- bind，delegate,live,on都是事件绑定方法，bind是最早期的适用于所有版本的事件绑定方式，和其他三种绑定方法不同的是，bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置。off() 方法移除用.on()绑定的事件处理程序，unbind() 方法移除用.bind()绑定的事件处理程序是解除绑定事件。
- 推荐使用on和off
- 使用on绑定事件使用事件代理的写法：
$('list').on('click','li',function(){
console.log($(this));
})
5：jquery 如何展示/隐藏元素？
- 显示元素:$.show()
- 隐藏元素:$.hide()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p class="content">我是HARRISKING!</p>
<button class="btn1">点我变消失</button>
<button class="btn2">点我变出现</button>
<button class="btn3">点我就切换</button>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" charset="utf-8"></script>
<script>
$('.btn1').on('click',function(){
$('.content').hide(1000);
});
$('.btn2').on('click',function(){
$('.content').show(1000);
})
$('.btn3').on('click',function(){
$('.content').toggle(1000);
})
</script>
</body>
</html>
6： jquery 动画如何使用？
- 简单的动画：通过hide()和show()，fadeIn()，fadeOut()，函数并添加以毫秒为单位的参数来实现动画效果。
- 复杂的动画：通过animate()方法来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animate</title>
<style>
.ct{
border:1px solid #ccc;
border-radius: 50%;
display: inline-block;
background-color: red;
width:100px;
height:100px;
position: relative;
}
</style>
</head>
<body>
<div class="ct"></div>
<button class="btn">点我</button>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
$('.btn').on('click',function(){
$('.ct').animate({top: '0px',left:'200px'},500)
.animate({top:'200px',left:'200px'},1000)
.animate({top:'200px',left:'0px'},2000)
.animate({top:'0px',left:'0px'},500)
})
</script>
</body>
</html>
动画有队列的概念，即当需要连续执行多个动画时，不需要一层层的放入函数中，而是直接下列即可，每次点击（操作）时，会向队列中添加这些操作，点击n次，则添加n次，执行n次。
解决方法具体请点击这里！
7：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- 设置html：$.html(element)，获取html：$.html()
- 设置文本：$.text(element),获取文本：$.text()
8：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- $("input").val(); //获得内容
- $("input").val(string); //设置内容
- $.attr(element) //获得属性
- $.attr(element,content). //设置属性
9：效果
111.png
10：效果
222.png
11：效果
333.png
网友评论