题目1： jQuery 能做什么？
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。[1]
以更简洁的语法和更好的兼容性实现js的效果：dom操作、事件操作、动画等；
题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？
进行全等判断发现他们是不一样的，
$('li')===document.querySelectorAll('li')
false
$('li')返回的是一个类数组对象，只需要在后面加个[index]就可以转化为dom对象了
这里需要注意：当ul元素在当前页面只有一个时，
jquery.png
说明jquery返回的是一个类数组对象，即使用id选择也是需要加[0],才能返回dom对象，类似于document.getElementsByClassName('ct')[0]
如何将dom对象转换为jquery对象？
$(dom对象)即可转化为jQuery对象
jquery.png
题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on
绑定事件使用事件代理的写法？
jQuery中如何绑定事件
.on( events [,selector ] [,data ], handler(eventObject) )
events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
data：当一个事件被触发时，要传递给事件处理函数的event.data
handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false
bind：.bind()方法用于直接附加一个事件处理程序到元素上。处理程序附加到jQuery对象中当前选中的元素，所以，在.bind()绑定事件的时候，这些元素必须已经存在。
$('.ct').bind('mouseenter',function(){console.log(4)})
unbind
unbind( "click", handler );可以传参数或者不传入，不传入则将元素所有的事件都移除，
第一个参数指明移除的事件类型，第二个参数指明需要移除的函数处理程序，可传入false,则移除return false 的函数
delegate
.delegate( selector, eventType, handler(eventObject) )
为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。
selector
类型: String
选择器字符串，用于过滤器触发事件的元素。
eventType
类型: String
一个包含一个或多个用空格隔开的JavaScript事件类型的字符串，比如"click"或"keydown,"或自定义事件的名称。
handler(eventObject)
类型: Function()
每当事件触发时执行的函数。
live()
附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。
.live( events, data, handler(eventObject) )
events
类型: String
一个包含一个JavaScript事件类型的字符串，比如"click"或"keydown,"或自定义事件的名称。从jQuery 1.4开始，字符串可以包含多个空格分隔的事件类型或自定义事件的名称。
data
类型: PlainObject
一个包含数据的对象将被传递到事件处理程序。
handler(eventObject)
类型: Function()
每当事件触发时执行的函数。
缺点：在调用 .live() 方法之前，jQuery 会先获取与指定的选择器匹配的元素，这一点对于大型文档来说是很花费时间的。
不支持链式写法。例如，$("a").find(".offsite, .external").live( ... ); 这样的写法是不合法的，并不能像期待的那样起作用。
由于所有的 .live() 事件被添加到 document 元素上，所以在事件被处理之前，可能会通过最长最慢的那条路径之后才能被触发。
on
.on( events [,selector ] [,data ], handler(eventObject) )
events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
data：当一个事件被触发时，要传递给事件处理函数的event.data
handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false
off
off( events [, selector ] [, handler ] )
移除一个事件处理函数
off()
方法移除用.on()绑定的事件处理程序
推荐使用on/off
1.on()方法可以绑定动态添加到页面元素的事件
比如动态添加到页面的DOM元素，用.on()方法绑定的事件不需要关心注册该事件的元素何时被添加进来，也不需要重复绑定。
2.on()方法绑定事件可以提升效率
on()绑定利用事件代理，只在document上注册了一个click事件.
事件代理写法
一个委派事件的方法只在一个元素上绑定一个事件处理程序，下面的代码是绑定在tbody元素上，并且事件只会向上冒泡一层（从被点击的tr 到 tbody ）:
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
题目4：jQuery 如何展示/隐藏元素？
1、用show(）和hide()方法
.hide( [duration ] [, complete ] )
duration
类型: [Number]
一个字符串或者数字决定动画将运行多久。
complete
类型: [Function](http://www.jquery123.com/Types/#Function)()
在动画完成时执行的
$('.d2').show()
.show( [duration ] [, complete ] )
展示元素，参数与hide一样，
duration (默认: 400
)
类型: [Number]
一个字符串或者数字决定动画将运行多久。
complete
类型: [Function]
在动画完成时执行的函数
这些参数都是可选的。
2,可以使用使用toggle(),在show和hide的状态切换
.toggle( [duration ] [, complete ] )
题目5： jQuery 动画如何使用？
可以使用animate方法
.animate( properties [, duration ] [, easing ] [, complete ] )返回: jQuery
**描述: **根据一组 CSS 属性，执行自定义动画。
properties
类型:
一个CSS属性和值的对象,动画将根据这组对象移动。
duration (默认: 400)
类型: [Number]
一个字符串或者数字决定动画将运行多久。（注：默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ）
easing (默认: swing)
类型: String
一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
complete
类型: Function()
在动画完成时执
$('.d1').on('click',function(){
//console.log(1)
$('.d2').animate({
left:'100px',
top:'100px'
},2000)
})
当我点击.d1的时候，.d2 css发生变化，注意位置变化：需要设置postion
题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
使用html()方法可以获取元素的html内容，如果里面传入内容则会以html的语法设置html内容
text(）可以获取元素的text内容相当于innerText,如果传入参数则变成内部文本；
题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
获取/设置内容
$('#demo').val('sss')//传入参数，设置value值
$('#demo').val()//获取value值与html()和text（）方法类似
select 和radio checkbox类似
获取/设置属性
$('#demo').attr(属性名)//获取该元素某个元素的值，必填
$('#demo').attr(属性名,值)//设置该元素的指定属性为指定值
题目8： 使用 jQuery实现如下效果
参考答案：demo140
我的代码：
jscode
与参考答案对比，有哪些不足？
1、dom结构不好，子菜单与父级菜单在dom上没有关系,需要随时调整position；li可以内置ul
2、因为1的问题造成了js代码绑定事件很麻烦需要一个一个的绑定
$(function(){
$('.nav-aside .category').on('mouseenter', function(){
$(this).addClass('hover');
// 或者
// $(this).find('.child-panel').show();
// 或者
// $(this).find('.child-panel').css('display', 'block');
});
$('.nav-aside .category').on('mouseleave', function(){
$(this).removeClass('hover');
// 或者
// $(this).find('.child-panel').hide();
// 或者
// $(this).find('.child-panel').css('display', 'none');
});
});
改进后的代码为：jsbin
题目9：. 使用 jQuery 实现如下效果
8-2.gif840x607 615 KB我的代码
引入在线jquery有时候会反应迟钝的，不出来效果的时候，刷新几次。不知道是我代码有问题还是怎么回事，求指正
题目10：实现如下效果
8-3-1.gif950x615 630 KBPs:当点击按钮时使用如下数据
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' }];
我的jscode
此题关键点是：事件委托
大多数浏览器事件冒泡, 或者 传播，都是由内到外的，从在文档最深处的元素( 事件目标 event target)开始， 一路传递到body和document元素。（注：事件冒泡简单的说就是，在冒泡路径上所有绑定了相同事件类型的元素上都会触发这些类型的事件。）在Internet Explorer 8和更低，一些事件，如change 和 submit本身不泡沫，但 jQuery 为了跨浏览器一致性， jQuery 在这些事件上模拟了冒泡行为。
如果省略selector或者是null，那么事件处理程序被称为直接事件 或者 直接绑定事件 。每次选中的元素触发事件时，就会执行处理程序，不管它直接绑定在元素上，还是从后代（内部）元素冒泡到该元素的
当提供selector参数时，事件处理程序是指为委派 事件（愚人码头注：通常也有很多人叫它代理事件）。事件不会在直接绑定的元素上触发，但当selector参数选择器匹配到后代（内部元素）的时候，事件处理函数才会被触发。jQuery 会从 event target 开始向上层元素(例如，由最内层元素到最外层元素)开始冒泡，并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器，那么这些元素上的事件也会被触发。
事件处理只能绑定在当前被选中的元素上;而且，在您的代码调用.on()的时候，他们必须在页面文档中已经存在。为了确保目前的元素可以被选择的（愚人码头注：即，存在），最好是在 document 的 ready 事件中进行事件绑定。如果新的HTML被注入页面时，新的HTML放置到页面后，事件会绑定到匹配选择器（selector参数）的元素。或者，使用委派事件绑定事件处理程序，如下所述。
委托事件有一个优势，他们能在后代元素添加到文档后，可以处理这些事件。 在确保所选择的元素已经存在的情况下，进行事件绑定时，您可以使用委派的事件，以避免频繁的绑定事件及解除绑定事件。 例如，这个已经存在的元素可以是 Model-View-Controller（模型 - 视图 - 控制器）模式中 View（视图） 的一个容器元素，或document。如果想监视所有文档中的冒泡事件的话。在加载任何其它 HTML 之前，document 元素在 head 中就是有效的，所以您可以安全的在 head 中进行事件绑定，而不需要等待文档加载完。
除了可以给未创建的后代元素绑定事件外（即上面提到的优势），代理事件的另一个好处就是，当需要监视很多元素的时候，代理事件的开销更小。例如，在一个表格的 tbody 中含有 1,000 行，下面这个例子会为这 1,000 元素绑定事件：
$("#dataTable tbody tr").on("click", function(event){
alert($(this).text());
});
委派事件的方法只有一个元素的事件处理程序，tbody，并且事件只会向上冒泡一层（从被点击的tr 到 tbody ）:
$("#dataTable tbody").on("click", "tr", function(event){
alert($(this).text());
});
题目11： 模仿视频6，完成 左右切换的 Tab 效果
学习提示
我的代码
js部分实现，这样代码比较繁琐
$('.tab-button').eq(0).on('click',function(){
$('.tab-content').removeClass('active')
$('#news-0').addClass('active')
})
$('.tab-button').eq(1).on('click',function(){
$('.tab-content').removeClass('active')
$('#news-1').addClass('active')
})
$('.tab-button').eq(2).on('click',function(){
$('.tab-content').removeClass('active')
$('#news-2').addClass('active')
})
$('.tab-button').eq(3).on('click',function(){
$('.tab-content').removeClass('active')
$('#news-3').addClass('active')
})
改进版
$('.tab-f-button>li').on('click',function(){
var index=$(this).index()
console.log(index)
$('.tab-content').eq(index).addClass('active').siblings().removeClass('active')
})
//关键点，jquery的index()和siblings()
更正：
$('.tab-f-button>li').on('click',function(){
var index=$(this).index()
var $this=$(this)
$this.parents('.tab-outer').find('.tab-content').eq(index).addClass('active').siblings().removeClass('active')
})
关键点： $this.parents('.tab-outer').find('.tab-content')
li 元素只控制跟自己同父辈的div的css
网友评论