jQuery选择器_Dom操作_样式_事件处理_动画

题目1： jQuery 能做什么？

jQuery是一个Javascript库，可以让用户更简单的进行HTML文档DOM遍历、操作、事件处理、动画，以及使用Ajax。且具有多浏览器兼容性。

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

jQuery对象具有一系列jQuery方法，传入原生对象转化后可以具有链式调用的特性，而且它是一个类数组，并不是一个单独的个体。而dom原生对象则是JS文档对象模型的原始对象，只具有原生JS赋予的方法，可以是一个dom节点个体，也可以是一个节点集合

转换：

$('ct') //jQuery对象，通常以$()的形式出现 
$('ct').eq(0); //只有一个元素的类数组
$('ct').get(0); //原生dom节点
$('ct')[0]; //原生dom节点

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

绑定事件一般使用on: $(XX).on( events [,selector ] [,data ], handler(eventObject) ); 这是1.7版本后统一的写法。

1. bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数。jQuery 3.0中已弃用此方法

2. unbind(type,[data|fn]])
   bind()的反向操作，从每一个匹配的元素中删除绑定的事件。jQuery 3.0中已弃用此方法，用off()代替。如果没有参数，则删除所有绑定的事件。

3. delegate(selector,[type],[data],fn)
   指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
   Query 3.0中已弃用此方法，用on()代替。
   使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

4. live(type, [data], fn)
   jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
   .live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。

5. on(events,[selector],[data],fn)
   在选择元素上绑定一个或多个事件的事件处理函数。
   on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live().

6. off(events,[selector],[fn])
   在选择元素上移除一个或多个事件的事件处理函数。
   off() 方法移除用.on()绑定的事件处理程序。

推荐使用on，它的功能最齐全，也是官方推荐的事件绑定语法。

$(document).on('click','li.ct',function(){
    alert("hi");
});
//document检测到点击时，匹配事件源为li且类名含ct的元素，并绑定事件。

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

(1) .hide() 隐藏匹配的元素。
(2) .show() 显示匹配的元素
(3) .toggle()绑定两个或多个处理程序绑定到匹配的元素，用来执行在交替的点击。从而实现显示隐藏。在1.8版本中弃用
(4) .fadeIn() 通过淡入的方式显示匹配元素。
(5) .fadeOut() 通过淡出的方式隐藏匹配元素。
(6) .fadeToggle() 通过匹配的元素的不透明度动画，来显示或隐藏它们。
(7) .fadeTo() 调整匹配元素的透明度。从而达到显示、隐藏
(8) .slideUp() 用滑动动画隐藏一个匹配元素。
(9) .slideDown() 用滑动动画显示一个匹配元素。
(10) .slideToggle() 用滑动动画显示或隐藏一个匹配元素。

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

animate(params,[speed],[easing],[fn])
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。
例子

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

$('#ele').html() //获取
$('#ele').html(value) //设置
$('#ele').text();
$('#ele').text(value);

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

$("#input").val()//获取表单输入内容
$("#input").val(String)//设置表单输入内容
$("#input:checked").val()//获取表单选择内容
$("#input:checked").val(String)//设置表单选择内容
$('.target').attr(String)//获取元素属性
$('.target').attr('src',$img.attr('data-img'))//设置元素属性

效果1
效果2
效果3
效果4