jQury选择器_Dom操作_样式_事件处理

题目1： 说说库和框架的区别？

框架也算是库的一种，但倾向于重量级一些，倾向于提供整套的解决方案，倾向于创造一些需要你来遵守的规则和范例。

比如 AngularJS 就算是一个框架，因为它提供了一整套的解决方案，需要你按照它设计好的方式来写代码。而 jQuery 的分类则比较模糊一些，可以说是库，也可以说是框架。

题目2： jquery 能做什么？

Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

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

DOM对象是我们用传统的方法（javascript）获得的对象，jQuery对象就是用jQuery的类库选择器获得的对象。JQuery对象就是通过jQuery包装DOM对象后产生的对象。JQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；
相互转化的方法：jquery->dom:jquery对象[0] //利用jquery类数组特性 选择第一个index
dom->jquery:$(dom对象) //很多时候要先把dom对象先转化为jquery对象后再使用

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

jquery中绑定事件有以下几种，
1.最简单常见的是bind（type,handle）,这种方式的写法和type（handle）的写法的基本作用是相同的(如$(“a”).click(function(){})),对应的取消事件的绑定方法是unbind：如果不带参数默认移除所有绑定的事件监听，若带参数则移除指定的事件监听（如$(“p”).unbind(“click”)）,这种是直接在符合条件的元素的事件类型上绑定监听函数，因此每生成一个新的元素，就需要给新元素绑定一次事件，比较麻烦，
2.于是有了live这种方式（如$(“a”).live(type,function(){})），这种方式实现了事件的代理，把监听函数绑定在$(document)对象上，每次有事件触发时，通过事件冒泡，$(document)会首先接收到，并且判断target是否是目标元素（如上例中$(“a”)），事件类型是否是该类型（type），若都符合条件会执行该监听函数，解决了bind的弊端，但是又有新的缺点，如果dom树结构比较深，点击的目标需要通过层层遍历经历事件冒泡到达顶端，性能低，开销大，在老版本的juery中已经被废弃。
3.delegate，实现指定代理对象（如$(".div1").delegate(“a”，type,function(){})）,这样代理方从$(document)对象变成了一个更具体的$(".div1")对象，减少了查找范围，缩短了冒泡旅程，比live更精确，效率高。
3.on这种方式把以上三种方法做了统一（如$(".div1").on(type，“a”，,function(){})，注意第二个参数是个子元素选择标签），对应的off是移除事件绑定的方式，在jquery的新的版本上都是支持的，也是现在比较推荐的写法。

$('ul').on('click', 'li', function() {
    console.log($(this).text());
});

用on 在ul上绑定事件，监听li的变化。推荐使用on()，这个方法可以将以上的各种事件绑定的方法都替代掉。

题目5：jquery 如何展示/隐藏元素？

jquery对象.hide(时间参数(可选),回调函数(可选));
jquery对象.show(时间参数(可选),回调函数( 可选));

题目6： jquery 动画如何使用？

$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
当动画 100% 完成后，即调用回调函数 Callback。

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

• html();获取html内容，有值的话就是设置html内容

$('div').html();//获取内容
$('div').html('
我是段落
');//设置内容

• text();获取文本元素，有值的话就是设置文本内容

 $('p').text();//获取文本
 $('p').text('我不是段落')//设置文本

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

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

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

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

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

题目9： 使用 jquery实现如下效果

demo1

题目10：. 使用 jquery 实现如下效果

demo2

题目11：实现如下效果

demo3
//还是 不是很懂加 selector 第二个可选参数的作用。