-
说说库和框架的区别?
库就是把特定效果的代码写好,提供了一套方便的接口供调用。起主导作用的是使用者的代码,由使用者来决定何时使用。
框架是一种特殊的、已经实现了的应用,是一个模板。你只需要对它填充具体的业务逻辑。使用者是被框架控制的。 -
jquery 能做什么?
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 -
jquery 对象和 DOM 原生对象有什么区别?如何转化?
jquery对象是包含DOM原生对象在内的一个对象,还拥有其他jq的属性和方法
DOM原生对象可以通过$()转换成jquery对象。
jquery对象的[0]就是DOM原生对象 -
jquery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
$('li').click(function(xx){xxx})
例如click()方法直接便捷的绑定click事件,这是便捷方法。
$('li').bind('click',function(){})
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
unbind()从匹配元素移除一个被添加的事件处理器
delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器
live()为当前或未来的匹配元素添加一个或多个事件处理器,和bind相比支持动态的数据
on() 提供绑定事件处理的所有功能。用法bind差不多,可以多一个seletor参数。
off():移除用on()绑定的事件处理程序
从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定。
on写法$(elements).on( events [, selector] [, data] , handler );
$('#list').on('click', 'li', function() {
//function code
});
-
jquery 如何展示/隐藏元素?
$(selector).hide([duration][,easing][,callback]);
隐藏元素,duration规定隐藏的速度;callback 参数是隐藏完成后所执行的函数名称。
$(selector).show([duration][,easing][,callback]);
显示元素,deration规定隐藏的速度;callback 参数是显示完成后所执行的函数名称
toggle() 方法可以切换 hide() 和 show() 方法。显示被隐藏的元素,并隐藏已显示的元素。
easing参数表示过渡使用哪种缓动函数。linear表示匀速直线运动,而swing则表示变速运动。swing是默认值 - jquery 动画如何使用?
- 隐藏显示动画
- 高度变化动画,使用show()/hide()实现动画效果时,宽度、高度及透明度会同时变化。若只想让高度发生变化,则需要使用slideUp()方法、slideDown()方法和slideToggle()方法。
- 淡入淡出动画,设置元素透明度为0,可以让元素不可见,透明度的参数是0~1之间的值,通过改变这个值可以让元素有一个透明度的效果。淡入淡出动画用fadeIn()、fadeOut()和fadeToggle()方法。
-----
以上方法的参数都是[duration][,easing][,callback]。deration规定隐藏的速度;easing参数表示过渡使用哪种缓动函数;callback 参数是显示完成后所执行的函数名称
- jQuery animate() 方法用于创建自定义动画。
调用多个animate方法,按照调用顺序挨个运行动画。 - 如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
$('#ele').html() //获取
$('#ele').html(value) //设置
$('#ele').text();
$('#ele').text(value);
- 如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
$("#input").val()//获取表单输入内容
$("#input").val(String)//设置表单输入内容
$("#input:checked").val()//获取表单选择内容
$("#input:checked").val(String)//设置表单选择内容
$('.target').attr(String)//获取元素属性
$('.target').attr('src',$img.attr('data-img'))//设置元素属性