jQurey基本

题目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('<p>11</p>')      //用html()方法获取元素内部html内容,传入值可以设置html内容
$('div').text()
$('div').text('11')         //用text()方法获取内部文本内容,传入值可以设置文本内容

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

$('div').val()         //获取元素当前值的内容
$('div').val('123')         //设置当前值的内容
$('div').attr('id')         //获取元素id属性
$('div').attr('id','one')         //设置元素id属性
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容