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). //设置属性