学习JQuery中的DOM操作和事件操作

一些问题

JQuery是一个javascript类库，那类库是什么，库和框架的区别有是什么呢？

• 库的英语为Library，是将代码集合成的一个产品，供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。在函数库中的可直接使用的函数叫库函数。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。
• 框架则是为解决一个（或一类）问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。可以说框架是库的升级版。开发者在使用框架的时候，必须使用这个框架的全部代码

jquery 能做什么？

• 简单快捷的获取DOM元素
• 响应用户的事件
• 动态的修改页面的样式
• 动态的修改DOM的内容
• 添加动画或者特效效果
• 统一Ajax操作

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

• DOM原生对象：通过原生js获取的dom节点是DOM元素；只能使用DOM元素的属性和方法。
• jquery对象：通过jquery选择器选择的元素是jquery对象；只能使用jquery的属性和方法
• 使用$(dom)函数可以将dom对象转化为jquery对象。
• jquery对象是类数组对象，使用索引想去数组的第几项就能将第几项转化为dom对象。

jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

• bind()：最简单的绑定方法，JQuery扫描DOM中所有的JQuery选择器选择的元素，并将函数绑定到每个元素的事件上，例子：

$('a').bind('click', function() { 
    alert("That tickles!") 
});

• live()：JQuery把alert函数绑定到$(document)元素上，并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与a这一CSS选择器是否匹配，如果都是的话，则执行函数，例子如下：

$('a').live('click', function() { 
    alert("That tickles!") 
});

• delegate()：事件代理。JQuery扫描文档查找$(‘#container’)，并使用click事件和a这一CSS选择器作为参数把alert()绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。
• on()：推荐使用的方法，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 ) {} );

jquery 如何展示/隐藏元素？

$(selector).hide(speed,callback);  //隐藏元素
$(selector).show(speed,callback);  //展示元素
$(selector).toggle(speed,callback);  //切换元素的可见状态，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

• 可选的speed参数规定隐藏/显示的速度，可以使用这些值："slow"、"fast" 或毫秒。
• 可选的callback参数是隐藏或显示完成后所执行的函数名称。

jquery 动画如何使用？

• jQuery animate()方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

• 必须的params参数定义形成动画的CSS属性。
• 可选的speed参数规定效果的时长，可以使用这些值："show"、"fast"或毫秒
• 可选的callback参数是隐藏或显示完成后所执行的函数名称。

如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

• html()设置或返回所选元素的内容（包括 HTML 标记）
• text()设置或返回所选元素的文本内容

如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

• val()设置或返回表单字段的值
• attr()设置或返回元素的属性

一些例子

下面是一些用JQuery实现的我们再网页上常用的部件

下拉菜单，右侧出现、代码
tab切换、代码
注意：
- 奢侈品2的a标签中的href属性值设为了#页面会跳回顶部，将其设为javascript:void(0)就不会出现这种情况了。
- 页面的默认锚点再页面顶部，当herf="#"时，页面会跳转到锚点，javascript:void(0)的作用是将连接变为一个死链接，既不会跳转也不会回到顶部。
点击加载更多、代码