说说库和框架的区别?
JQ(Jquery,不是冰欺凌哦)就是JS的库,打个比方,比如新买的房子需要改水电,那么就需要水电工人师傅。水电工人师傅身上有个工具箱,里面可以放电笔啊,锤子啊,螺丝刀啊等常用工具。也可以是学生们工具盒里面的铅笔,原子笔,旋笔刀等。总之就是一堆工具的集合。
而框架呢,相当于给我们盖房子的开发商,房子已经盖好了,也就是说整体架构已经弄好了,这个呢开发商盖起的房子就是相当于框架。比如现在很火的backbone.js就是一个JS的框架。
JQ 能做什么?
1 操作以及遍历HTML文档
2 事件的处理
3 动画
4 Ajax
JQ对象和 DOM 原生对象有什么区别?如何转化?
我们直接看下图一看就明白了:
jquery中如何绑定事件?
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。
jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。
.bind()
$('a').bind('click', function() { alert("That tickles!") });
这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。
.live()
$('a').live('click', function() { alert("That tickles!") });
JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。
.delegate()
$('#container').delegate('a', 'click', function() { alert("That tickles!") });
JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
为什么.delegate()要比.live()好用?
$('a').live('click', function() { blah() });// 或者$(document).delegate('a', 'click', function() { blah() });
后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a’)元素,把它们存成jQuery对象。
.on()
// Bind
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );
// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} );//事件代理
//注意子元素参数位置$( "#members" ).delegate( "li a", "click", function( e ) {} );
function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
$("body").on("click", "#theone", aClick)
.find("#theone").text("Can Click!");
});
$("#unbind").click(function () {
$("body").off("click", "#theone", aClick)
.find("#theone").text("Does nothing...");
});
live方法被废弃
on事件绑定把上面三种方法统一了,用起来更方便.
jquery 如何展示/隐藏元素?
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
//speed : slow fast 毫秒数
//如果任何参数都不传的话,相当于修改 dom.style.display = block|none
jquery 动画如何使用?
$(selector).animate({params},speed,callback);
.animate( properties, options )
options是一组包含动画选项的值的集合。 常用的选项:
duration (default: 400):一个字符串或者数字决定动画将运行多久。默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如:1000) )
easing (default: swing):一个字符串,表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing",其他效果可以使用jQuery Easing Plugin插件
step:每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
complete:在动画完成时执行的函数
如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
JQ DOM 获取
1 text() 元素文本内容
2 html() 包括HTML标记
3 val() 设置或返回表单字段的值
4 attr() 设置或返回表单元素的属性
text() 、html()、val() 如果括号内没有值的话 代表获取元素的文本内容、包括HTML标记的文本内容、和表单元素的value数值。如果有值得话代表设置元素的相关值。
attr() 只有一个参数的话,代表获取该元素属性的属性值。如果有两个数值的话,则代表重新设置该元素属性的属性值。