1.说说库和框架的区别？
库：将一些常用的方法进行封装方便使用，类似一个工具箱（API）。原生JS实现起来较为复杂的操作或功能,都可以被封装组成库中,以备使用.比如jQuery,Underscore等。
框架：可以理解为一个半成品，一个房子骨架（框架）已经搭好了使用者只要往里面砌砖头（内容）就可以了。比如angular,bootstrap就是框架。
2.jquery 能做什么？
jquery能方便的操作DOM(元素节点、文本节点、属性节点)，还能对元素增加事件处理、动画特效、以及AJAX。jquery对各浏览器有一定兼容性。
3.jquery 对象和 DOM 原生对象有什么区别？如何转化？
jquery对象只能使用jquery中封装好的对象和方法，DOM对象只能使用javascript原生的属性和方法。二者可以相互转化，jquery转原生DOM对象用数据成员索引号即$(select)[i]，原生DOM对象转换成jquery对象用$()包裹即$(this)
4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
$(select).bind()//对目标元素绑定事件，jquery1.9以前旧版本先已删除
$(select).unbind()//解除目标元素绑定的事件，jquery1.9以前旧版本先已删除
$(select).delegate()//对目标元素绑定事件代理，jquery1.9以前旧版本先已删除
$(select).live()//将事件代理绑定到$(document)元素上，jquery1.9以前旧版本先已删除
$(select).on()//对目标元素绑定一个或多个事件处理函数
$(select).off()//移除目标元素绑定的事件处理函数
on绑定事件的写法如下：
$(select).on("click","li a",function(){
todo.......
}) //在符合$(select)选择器条件的元素上绑定事件代理函数，只要选择器条件内的li a元素有事件发生，事件代理函数就会被激活
5.jquery 如何展示/隐藏元素？
$(select).hide(speed,callback)//隐藏
$(select).show(speed,callback)//显示
$(select).toggle(speed,callback)//显示和隐藏切换
$(selector).fadeIn(speed,callback); //淡入
$(selector).fadeOut(speed,callback); //淡出
$(selector).fadeToggle(speed,callback); //淡入和淡出切换
$(selector).fadeTo(speed,opacity,callback); //渐变到透明度 $div1.fadeTo('slow', 0.5);
$(selector).slideDown(speed,callback); //滑入
$(selector).slideUp(speed,callback); //滑出
$(selector).slideToggle(speed,callback); //滑入和滑出切换
speed参数可使用slow/fast/毫秒数，控制显示/隐藏的速度。callback参数是隐藏或显示完成后所执行的函数名称。
6.jquery 动画如何使用？
$(selector).animate({params},speed,callback);
必选参数{ params }:定义形成动画的 CSS 属性,用 { } 定义。
可选参数speed:控制动画效果时长（slow/fast/毫秒数）
可选参数 callback:动画完成后所执行的函数名称
$("#btn15").on('click', function(){
$div3.animate({
width:'80px',
height: '80px',
left: '0px',
top: '0px'
}, 500);
});
作用链写法：$div2.slideDown(1000).fadeOut(1000)//先滑入，然后淡出
作用链写法：
$div3.animate({width:'150',height:'150px'})
.animate({left:'200px'})
.animate({top:'200px'})
.animate({left:'0px'})
.animate({top:'0px'})
.animate({width:'80px',height:'80px'})//可将多个动画效果连接起来依次执行
7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
$(select).html()//获取目标元素内部的html内容（包括文本内容）
$(select).html("<div><a href="123">abcde</a></div>") //设置目标元素html内容
$(select).text()//获取目标元素
$(select).text("<span>abcde</span>")//设置目标元素文本内容
8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
$(select).val()//获取表单输入内容
$("input:checked").val()//获取表单元素中选中选项的内容
$(select).attr("src") //获取目标元素的src属性对应的属性值
$(select).attr("src","/img.png")//设置目标元素src属性的属性值为/img.png
9.使用 jquery实现如下效果
8-1.gif
代码地址
预览地址
10.使用 jquery 实现如下效果
8-2.gif
代码地址
预览地址
点奢侈品2的时候页面跳到了顶部，可能是什么原因？如何解决：
由于a标签点击后有默认跳转行为所以会导致上面的问题，解决方法是使用preventDefault取消默认行为。
11.实现如下效果
8-3-1.gif
代码地址
预览地址
本文版权归本人和饥人谷所有，转载请注明来源。
网友评论