题目1: jQuery 能做什么?
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
题目2: jQuery 对象和 DOM 原生对象有什么区别?如何转化?
由于jQuery $封装的方法返回的是一个类数组对象,所以jQuery对象只能用jQuery封装的方法,不能用原生对象的方法,如果要用原生对象的方法,必须把jQuery对象转换为原生对象。DOM原生对象同理。
如何转换: jQuery => DOM 原生对象
$('div').[0] // 选取返回的类数组对象的具体下标
DOM =>jQuery原生对象
$(document.querySelector('div')) //用$包裹住
题目3:jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
在jQuery3.0中,可以用on来绑定事件,off来解除绑定(也建议用这种方式,其余的已不推荐使用或者废弃)
$('div').on('click',function(){...}) //最基本的用法
根据jQuery3.0版本:
1.bind
绑定事件
.bind( eventType [, eventData ], handler(eventObject) )
eventType
类型: String
一个包含一个或多个DOM事件类型的字符串,比如"click"或"submit,"或自定义事件的名称。
eventData
类型: Anything
一个对象,它包含的数据键值对映射将被传递给事件处理程序。
handler(eventObject)
类型: Function()
每当事件触发时执行的函数。
.bind()一个基本的用法:
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
2.unbind
.unbind( eventType [, handler ] )
eventType
类型: String
一个包含一个或多个 DOM 事件类型的字符串,比如 "click" 或 "submit," 或自定义的事件名。
handler
类型: Function( Event eventObject )
这个函数今后不在执行。
unbind() 可以解除元素绑定的事件,最简单的方法是:
$('div').unbind(); //解除元素所有的绑定事件
3.delegate()
.delegate( selector, eventType, handler(eventObject)
描述: 为所有匹配选择器(selector参数)的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些目前已经匹配到的元素,也包括那些今后可能匹配到的元素。
添加的版本: 1.4.2.delegate( selector, eventType, handler(eventObject) )
selector
类型: String
选择器字符串,用于过滤器触发事件的元素。
eventType
类型: String
一个包含一个或多个用空格隔开的JavaScript事件类型的字符串,比如"click"或"keydown,"或自定义事件的名称。
handler(eventObject)
类型: Function()
每当事件触发时执行的函数。
4.live()
描述: 附加一个事件处理器到匹配目前选择器的所有元素,现在和未来。
添加的版本: 1.3.live( events, handler(eventObject) )
events
类型: String
一个包含一个JavaScript事件类型的字符串,比如"click"或"keydown,"或自定义事件的名称。从jQuery 1.4开始,字符串可以包含多个空格分隔的事件类型或自定义事件的名称。
handler(eventObject)
类型: Function()
每当事件触发时执行的函数。
5.on()
绑定事件
.on( events [, selector ] [, data ], handler(eventObject) )
events
类型: String
一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
selector
类型: String
一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null
或者忽略了该选择器,那么被选中的元素总是能触发事件。
data
类型: Anything
当一个事件被触发时,要传递给事件处理函数的event.data
。
handler(eventObject)
类型: Function()
事件被触发时,执行的函数。若该函数只是要执行return false的话,那么该参数位置可以直接简写成 false。
形式
$('div').on('click',function(){...}) //最基本的用法
$('div').on('click','div后代元素',data,function(){...})
6.off
events
类型: String
一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
selector
类型: String
一个选择器,当绑定事件处理程序时匹配最初传递给 .on()
的那个。
handler
类型: Function( Event eventObject )
以前附加的事件处理函数,或特殊值false
用来解除on绑定事件
建议使用on off 来绑定和解除绑定事件
关于on 事件代理的写法
$('div').on('click','div要绑定的后代元素',data,function(){...})
题目4:jQuery 如何展示/隐藏元素?
jQuery 可以用以下几种方式来展示/隐藏元素
.show() 来展示元素
.hide()来隐藏元素
.css("display","none");
.css("display","block");
.addClass()
.removeClass()
题目5: jQuery 动画如何使用?
jQuery提供了如下API来实现动画效果
1.基础
.show() //显示
.hide() //隐藏
.toggle() //切换
2.提供了四种渐变方法和三种滑动方法
渐变
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
滑动
.slideDown()
.slideToggle()
.slideUp()
3.自定义方法
.animate()
.clearQueue()
.delay()
.dequeue()
jQuery.dequeue()
.finish()
jQuery.fx.interval
jQuery.fx.off
.queue()
jQuery.queue()
.stop() //停止匹配元素当前正在运行的动画,finish()停止所有动画,删除动画队列
一般情况 可以传递以下参数
1.duration
控制动画时间 默认normal 还有fast slow
2.easing
一个字符串,表示过渡使用哪种缓动函数。(jQuery自身提供"linear" 和 "swing")
3.queue
一个布尔值,指示是否将动画放置在效果队列中。如果为false时,将立即开始动画。 从jQuery1.7开始,队列选项也可以接受一个字符串,在这种情况下,在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用,动画不会自动启动;你必须调用.dequeue("queuename")来启动它。
4.specialEasing
Type: PlainObject
由此方法的第一个参数properties定义的一个或多个CSS属性,及其相应的缓动函数组成的键值对map。( 1.4 新增)
5.complete
Type: Function()
在动画完成时执行的函数。
举例
$('div').show(2000,linear,function(){...})
注意:.animate()方法允许我们在任意的数值的CSS属性上创建动画。唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似,除了属性范围做了更多限制。
题目6:如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
$('div').html()
$('div').html('11
') //用html()方法获取元素内部html内容,传入值可以设置html内容
$('div').text()
$('div').text('11') //用text()方法获取内部文本内容,传入值可以设置文本内容
题目7:如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
$('div').val() //获取元素当前值的内容
$('div').val('123') //设置当前值的内容
$('div').attr('id') //获取元素id属性
$('div').attr('id','one') //设置元素id属性