Jquery

说说库和框架的区别？

JQ(Jquery,不是冰欺凌哦)就是JS的库，打个比方，比如新买的房子需要改水电，那么就需要水电工人师傅。水电工人师傅身上有个工具箱，里面可以放电笔啊，锤子啊，螺丝刀啊等常用工具。也可以是学生们工具盒里面的铅笔，原子笔，旋笔刀等。总之就是一堆工具的集合。

而框架呢，相当于给我们盖房子的开发商，房子已经盖好了，也就是说整体架构已经弄好了，这个呢开发商盖起的房子就是相当于框架。比如现在很火的backbone.js就是一个JS的框架。

JQ 能做什么？

1  操作以及遍历HTML文档
2  事件的处理
3  动画
4  Ajax

JQ对象和 DOM 原生对象有什么区别？如何转化？

我们直接看下图一看就明白了：

DOM和JQ.png

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() 只有一个参数的话，代表获取该元素属性的属性值。如果有两个数值的话，则代表重新设置该元素属性的属性值。