题目1： jQuery 能做什么？
1.方便快捷获取DOM元素
2.动态修改页面样式
3.动态改变DOM内容
4.响应用户的交互操作
5.为页面添加动态效果
6.统一Ajax操作
7.简化常见的JavaScript任务
http://blog.csdn.net/jiary5201314/article/details/38311809
题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？
- jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法
- jQuery选择器得到的jQuery对象和DOM 原生对象是两种不同的对象类型，两者不等价；
jQuery对象转换成DOM对象：
- [index]
jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
如：var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象- .get(index);
jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
如：var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
DOM对象转成jQuery对象:
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
如：var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后，就可以任意使用jQuery的方法了。
题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
-
bind(type,[data],fn)
为每个匹配元素的特定事件绑定事件处理函数。
type,[data],function(eventObject)String,Object,Function
type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数
false: 将第三个参数设置为false会使默认的动作失效。 -
live(type, [data], fn)
jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。 这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。
type:一个或多个事件类型，由空格分隔多个事件。
fn:要从每个匹配元素的事件中反绑定的事件处理函数
data:传递给事件处理函数的附加参数
false:设置为false会使默认的动作失效。
$('.clickme').live('click', function() {
alert("Live handler called.");
}); -
delegate(selector,[type],[data],fn)
指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
selector:选择器字符串，用于过滤器触发事件的元素。
type:附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
fn:当事件发生时运行的函数
data:传递到函数的额外数据
$("div").delegate("button","click",function(){
$("p").slideToggle();
}); -
on(events,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数。
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
$("p").on("click", function(){
alert( $(this).text() );
}); -
取消绑定事件：unbind() die() undelegate() off()
-
off(events,[selector],[fn])
off() 方法移除用.on()绑定的事件处理程序。
如：
$("p").off() //Remove all event handlers
$("body").off("click", "p", foo) //Remove just one previously bound handler
由于在新版本中bind/unbind/delegete/undelegete/live/die 都已经弃用，推荐使用on/off
使用on绑定事件使用事件代理
//让.box>ul中的所有li绑定事件
$('.box>ul').on('click','li',function(){
var $this=$(this);
var str=$this.text();
$('.wrap').text(str);
})
题目4：jQuery 如何展示/隐藏元素？
隐藏元素
$('#btn1').on('click',function(){
$('.box').hide(1000)
})
展示元素
$('#btn2').on('click',function(){
$('.box').show(1000)
})
切换元素的可见状态
$('#btn3').on('click',function(){
$('.box').toggle(1000);
});
题目5： jQuery 动画如何使用？
简单的动画不能满足需求的时候，jquery提供了自定义动画行为的方法
.animate( properties, options )
properties：一个CSS属性和值的对象,动画将根据这组对象移动。
options是一组包含动画选项的值的集合。
常用的选项:
- duration (default: 400)：一个字符串或者数字决定动画将运行多久。默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如：1000) ）
- easing (default: swing)：一个字符串，表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
- step：每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
- complete：在动画完成时执行的函数
$('#clickme').click(function() {
$('#book').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
});
题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
//html内容
$('').html() // 获取
$('').html(value) // 设置
//内部文本
$('').text();
$('').text(value);
题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
.val() //获取内容
.val(str) //设置内容
.attr(attributeName) //获取元素指定属性的值
.attr(attributeName, value) // 设置指定属性的值
题目8： 使用 jQuery实现如下效果
代码8
题目9：. 使用 jQuery 实现如下效果
代码9
题目10：实现如下效果
Ps:当点击按钮时使用如下数据
var products = [ { img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg', name: '珂兰 黄金手 猴哥款', price: '￥405.00' },{ img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg', name: '珂兰 黄金转运珠 猴哥款', price: '￥100.00' },{ img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg', name: '珂兰 黄金手链 3D猴哥款', price: '￥45.00' }];
代码10
题目11： 模仿视频6，完成 左右切换的 Tab 效果
网友评论