十四：jquery

题目1： jQuery 能做什么？

• 选择网页元素
• 改变结果集
• 元素的操作：取值和赋值，移动，复制，删除和创建
• 工具方法
• 事件操作
• 特殊效果
• AJAX

题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？

• 区别：

1. jQuery选择器得到的jQuery对象和标准的JavaScript中document.getElementByld()取的的dom对象是两种不同的对象类型，两者不等价；
2. jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法、乱使用会报错。

• 转换：

1. jQuery对象转是一个数据对象，通过[index]的方法

var $v = $("#v"); //jQuery对象
var v = $v[0]; //dom对象
alert(v.checked)  // 检测这个checkbox是否被选中

2.jQuery本身提供，通过。get(index)方法

var $v = $("#v"); //jQuery对象
var v = $v.get(0); //dom对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象
对于DOM对象只需要用$()把DOM对象包装起来，就可以得到jQuery对象

var  v = document.getElementByid('v'); //DOM对象
var $v = $(v); //jQuery对象

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

• bind()是最直接的绑定方法，会绑定事件类型和处理函数到DOM element上。这个方法是存在最久的，而且也很好的解决了浏览器在事件处理中的兼容问题。.click(), .hover()...这些非常方便的事件绑定，都是bind的一种简化处理方式对于利用ID选出来的元素是非常好的，不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时，handler可以立即被执行(相对于后面的live, delegate)实现方式，但是它会绑定事件到所有的选出来的元素上，它不会绑定到在它执行完后动态添加的那些元素上，当元素很多时，会出现效率问题。
• .live()方法用到了事件委托的概念来处理事件的绑定。它和用.bind()来绑定事件是一样的。.live()方法会绑定相应的事件到你所选择的元素的根元素上，即是document元素上。那么所有通过冒泡上来的事件都可以用这个相同的handler来处理了。它的处理机制是这样的，一旦事件冒泡到document上，jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。
• .delegate()有点像.live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.
• .bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的
• 推荐使用on和off
• on绑定事件使用事件代理的写法

$('.box li').on('click', function(){
    var str = $(this).text()
})

题目4：jQuery 如何展示/隐藏元素？

• 展示：

$(selector).show(speed,callback);
可选的参数speed：规定元素从隐藏到完全可见的速度，默认为0.
可选的参数callback:show函数执行完之后，要执行的函数。
本质上show方法是修改元素的display为block

• 隐藏

$(selector).hide(speed,callback);
参数同上，本质上hide方法是修改元素display为none。

题目5： jQuery 动画如何使用？

$(selector).animane({parement},speed,callback);

aninmate()方法用于创建自定义动画
params（必选）定义形成动画的CSS属性
speed（可选）规定效果的时长。值：slow,fast或秒。
callback（可选）动画完成后所执行的函数
.delay()设置一个定时器，以延迟执行队列中后续的项目。
.clearQueue()从列队中删除所有还没有运行过的项目。
.stop在匹配的元素上停止当前正在运行的动画。
.finish()针对匹配的元素停止当前正在运行的动画，删除所有的队列中的动画，并结束所有动画。

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

• $(selector).html()设置HTML内容
• $(selector).text()设置文本内容

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

• val();获取表单输入框的值，有值的话就是设置

$('input').val()//获取值
$('input').val('11') //设置值

• attr();获取属性，有值的话就是设置

$('img').attr('src')//获取属性
$('img').attr('src',newSrc) //设置属性

题目8： 使用 jQuery实现如下效果

效果

题目9：

效果

题目10：

效果

题目11：

效果