SlideShare a Scribd company logo
1 of 9
Download to read offline
jQuery overview
Functions
• DOM Selector and manipulation
• Events
• Effect
• Ajax
• Deferred
• Utilities and Plugins
DOM Selector
• $(‘#id’)
• $(‘.class’)
• $(‘element’)
• $(‘[attr=”value”]’)
• $(‘parent descendant’)
• $(‘multiple, multiple, multiple’)
• #.parent(), #.children()
• #.next(), #.prev()
• #.eq(index), #.not(selector)
• #.find(selector)
• #.filter(selector)
DOM manipulation
• #.each(function (index) {})
• #.before(obj), #.prepend(obj),
#.append(obj), #.after(obj)
• #.attr(k,v), #.css(k,v)
• #.addClass(c), #.removeClass(c),
#.toggleClass(c)
• #.html(s), #.text(s), #.val(v)
• #.width(w), #.height(h)
• #.remove()
• #.clone()
• #.data(k,v)
Events
• #.on(event, func), #.off(event,
func), #.bind(event, func)
• #.click(func)
• #.focus(func), #.blur(func),
#.hover(func)
• #.submit(func), #.change(func)
• #.trigger(event)
• #.ready(func), #.load(func)
• #.resize(func), #.scroll(func)
• $.proxy(func,context)
Effects
• #.animate(props,time,func)
• #.show(), #.hide(), #.toggle()
• #.fadeIn(time), #.fadeOut(time)
• #.slideDown(time),
#.slideUp(time)
• #.delay(time)
• #.stop(), #.finish()
• $.fx.interval
• $.fx.off
Ajax
• $.ajax(url,props)
• $.get(url, func), $.post(url, data,
func)
• $.getJSON(url, func)
• $.param(data)
• #.serialize(), #.serializeArray()
• #.done(func), #.fail(func),
#.always(func)
Deferred
• $.Deferred
• #.promise()
• #.resolve(data), #.reject(data)
• #.state()
• #.done(func), #.fail(func),
#.always(func)
• #.progress(func), #.notify(data)
• #.then(func, func, func)
• $.when(func, func, func, ...)
Utilities and Plugins
• $.support
• $.each(collection, func)
• $.extend(target, object)
• $.contains(container, target)
• $.parseJSON(s), $.parseXML(s)
• $.fx.jquery
• $.your_plugin = function (params()
{}
• $.fx.your_plugin = function
(params) {}
• $.fx.extend(plugins)

More Related Content

What's hot

Pimp your site with jQuery!
Pimp your site with jQuery!Pimp your site with jQuery!
Pimp your site with jQuery!Elliott Kember
 
UI実装におけるコーディングあれこれ
UI実装におけるコーディングあれこれUI実装におけるコーディングあれこれ
UI実装におけるコーディングあれこれHiromu Hasegawa
 
10 Programación Web con .NET y C#
10 Programación Web con .NET y C#10 Programación Web con .NET y C#
10 Programación Web con .NET y C#guidotic
 
JQuery应用开发
JQuery应用开发JQuery应用开发
JQuery应用开发chevionlu
 
HOJA RESUMEN
HOJA RESUMENHOJA RESUMEN
HOJA RESUMENeddyhgv
 
JavascriptMVC
JavascriptMVCJavascriptMVC
JavascriptMVC4lb0
 
How I Develop Carousel Module
How I Develop Carousel ModuleHow I Develop Carousel Module
How I Develop Carousel Module明 城
 

What's hot (13)

Pimp your site with jQuery!
Pimp your site with jQuery!Pimp your site with jQuery!
Pimp your site with jQuery!
 
UI実装におけるコーディングあれこれ
UI実装におけるコーディングあれこれUI実装におけるコーディングあれこれ
UI実装におけるコーディングあれこれ
 
10 Programación Web con .NET y C#
10 Programación Web con .NET y C#10 Programación Web con .NET y C#
10 Programación Web con .NET y C#
 
Just for think
Just for thinkJust for think
Just for think
 
Jquery2
Jquery2Jquery2
Jquery2
 
Jquery Framework
Jquery FrameworkJquery Framework
Jquery Framework
 
Asp .net Jquery
Asp .net JqueryAsp .net Jquery
Asp .net Jquery
 
jQueryチュートリアル
jQueryチュートリアルjQueryチュートリアル
jQueryチュートリアル
 
Load2
Load2Load2
Load2
 
JQuery应用开发
JQuery应用开发JQuery应用开发
JQuery应用开发
 
HOJA RESUMEN
HOJA RESUMENHOJA RESUMEN
HOJA RESUMEN
 
JavascriptMVC
JavascriptMVCJavascriptMVC
JavascriptMVC
 
How I Develop Carousel Module
How I Develop Carousel ModuleHow I Develop Carousel Module
How I Develop Carousel Module
 

Viewers also liked

Cистемный кризис и ресурсы. Иннокентий Андреев
Cистемный кризис и ресурсы. Иннокентий АндреевCистемный кризис и ресурсы. Иннокентий Андреев
Cистемный кризис и ресурсы. Иннокентий АндреевИннокентий Андреев
 
Semantics at Scale: A Distributional Approach
Semantics at Scale: A Distributional ApproachSemantics at Scale: A Distributional Approach
Semantics at Scale: A Distributional ApproachAndre Freitas
 
соотношение понятий норма и деятельность
соотношение понятий норма и деятельностьсоотношение понятий норма и деятельность
соотношение понятий норма и деятельностьelena_lagoda
 
Pasos para prevenir la influenza ah1n1
Pasos para prevenir la influenza ah1n1Pasos para prevenir la influenza ah1n1
Pasos para prevenir la influenza ah1n1Influenzaah1n1
 
Innovación educativa con recurso educativos abiertos 4
Innovación educativa con recurso educativos abiertos 4Innovación educativa con recurso educativos abiertos 4
Innovación educativa con recurso educativos abiertos 4Debbie Cronenbold Zankiz
 
Pesquisa Trevisan e IBGME sobre o Programa Sócio Torcedor do C. R. do Flameng...
Pesquisa Trevisan e IBGME sobre o Programa Sócio Torcedor do C. R. do Flameng...Pesquisa Trevisan e IBGME sobre o Programa Sócio Torcedor do C. R. do Flameng...
Pesquisa Trevisan e IBGME sobre o Programa Sócio Torcedor do C. R. do Flameng...Rodrigo Fortuna
 
Strefa PMI nr 2, wrzesień 2013
Strefa PMI nr 2, wrzesień 2013Strefa PMI nr 2, wrzesień 2013
Strefa PMI nr 2, wrzesień 2013Strefa PMI
 
La paz de las mujeres populares del oriente de Cali no es la paz del Gobierno
La paz de las mujeres populares del oriente de Cali no es la paz del GobiernoLa paz de las mujeres populares del oriente de Cali no es la paz del Gobierno
La paz de las mujeres populares del oriente de Cali no es la paz del GobiernoCrónicas del despojo
 

Viewers also liked (17)

Cистемный кризис и ресурсы. Иннокентий Андреев
Cистемный кризис и ресурсы. Иннокентий АндреевCистемный кризис и ресурсы. Иннокентий Андреев
Cистемный кризис и ресурсы. Иннокентий Андреев
 
Semantics at Scale: A Distributional Approach
Semantics at Scale: A Distributional ApproachSemantics at Scale: A Distributional Approach
Semantics at Scale: A Distributional Approach
 
Facebook
FacebookFacebook
Facebook
 
Don francisco quevedo sueños
Don francisco quevedo   sueñosDon francisco quevedo   sueños
Don francisco quevedo sueños
 
Serrano 182
Serrano 182Serrano 182
Serrano 182
 
соотношение понятий норма и деятельность
соотношение понятий норма и деятельностьсоотношение понятий норма и деятельность
соотношение понятий норма и деятельность
 
Pasos para prevenir la influenza ah1n1
Pasos para prevenir la influenza ah1n1Pasos para prevenir la influenza ah1n1
Pasos para prevenir la influenza ah1n1
 
March 26 2015
March 26 2015March 26 2015
March 26 2015
 
Búsquedas Avanzadas
Búsquedas Avanzadas Búsquedas Avanzadas
Búsquedas Avanzadas
 
Coal act 1969
Coal act 1969Coal act 1969
Coal act 1969
 
Innovación educativa con recurso educativos abiertos 4
Innovación educativa con recurso educativos abiertos 4Innovación educativa con recurso educativos abiertos 4
Innovación educativa con recurso educativos abiertos 4
 
Pesquisa Trevisan e IBGME sobre o Programa Sócio Torcedor do C. R. do Flameng...
Pesquisa Trevisan e IBGME sobre o Programa Sócio Torcedor do C. R. do Flameng...Pesquisa Trevisan e IBGME sobre o Programa Sócio Torcedor do C. R. do Flameng...
Pesquisa Trevisan e IBGME sobre o Programa Sócio Torcedor do C. R. do Flameng...
 
Strefa PMI nr 2, wrzesień 2013
Strefa PMI nr 2, wrzesień 2013Strefa PMI nr 2, wrzesień 2013
Strefa PMI nr 2, wrzesień 2013
 
La paz de las mujeres populares del oriente de Cali no es la paz del Gobierno
La paz de las mujeres populares del oriente de Cali no es la paz del GobiernoLa paz de las mujeres populares del oriente de Cali no es la paz del Gobierno
La paz de las mujeres populares del oriente de Cali no es la paz del Gobierno
 
Attest Norges Energi - Robert Hoffmann
Attest Norges Energi - Robert HoffmannAttest Norges Energi - Robert Hoffmann
Attest Norges Energi - Robert Hoffmann
 
Proyecto final
Proyecto finalProyecto final
Proyecto final
 
Access
AccessAccess
Access
 

Jquery overview 2013

  • 2. Functions • DOM Selector and manipulation • Events • Effect • Ajax • Deferred • Utilities and Plugins
  • 3. DOM Selector • $(‘#id’) • $(‘.class’) • $(‘element’) • $(‘[attr=”value”]’) • $(‘parent descendant’) • $(‘multiple, multiple, multiple’) • #.parent(), #.children() • #.next(), #.prev() • #.eq(index), #.not(selector) • #.find(selector) • #.filter(selector)
  • 4. DOM manipulation • #.each(function (index) {}) • #.before(obj), #.prepend(obj), #.append(obj), #.after(obj) • #.attr(k,v), #.css(k,v) • #.addClass(c), #.removeClass(c), #.toggleClass(c) • #.html(s), #.text(s), #.val(v) • #.width(w), #.height(h) • #.remove() • #.clone() • #.data(k,v)
  • 5. Events • #.on(event, func), #.off(event, func), #.bind(event, func) • #.click(func) • #.focus(func), #.blur(func), #.hover(func) • #.submit(func), #.change(func) • #.trigger(event) • #.ready(func), #.load(func) • #.resize(func), #.scroll(func) • $.proxy(func,context)
  • 6. Effects • #.animate(props,time,func) • #.show(), #.hide(), #.toggle() • #.fadeIn(time), #.fadeOut(time) • #.slideDown(time), #.slideUp(time) • #.delay(time) • #.stop(), #.finish() • $.fx.interval • $.fx.off
  • 7. Ajax • $.ajax(url,props) • $.get(url, func), $.post(url, data, func) • $.getJSON(url, func) • $.param(data) • #.serialize(), #.serializeArray() • #.done(func), #.fail(func), #.always(func)
  • 8. Deferred • $.Deferred • #.promise() • #.resolve(data), #.reject(data) • #.state() • #.done(func), #.fail(func), #.always(func) • #.progress(func), #.notify(data) • #.then(func, func, func) • $.when(func, func, func, ...)
  • 9. Utilities and Plugins • $.support • $.each(collection, func) • $.extend(target, object) • $.contains(container, target) • $.parseJSON(s), $.parseXML(s) • $.fx.jquery • $.your_plugin = function (params() {} • $.fx.your_plugin = function (params) {} • $.fx.extend(plugins)