jquery - infoeducatie 2008
DESCRIPTION
De ce avem nevoie de o librarie Javascript? Ce librarii exista deja si cine la foloseste? jQuery este o librarie Javascript mica, cross browser si CSS3 compliant. Are o comunitate mare si multe plugin-uri disponibile. Dar ce aduce jQuery nou? Se vor prezenta selectori, modul de manipulare al elementelor si evenimentelor, construirea unui plugin si multe altele.TRANSCRIPT
![Page 1: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/1.jpg)
jQuery
![Page 3: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/3.jpg)
BrowsereFirefoxIE 6 | 7OperaSafari
jQuery
Mihai Oaida <[email protected]> 02
function returnTarget(e){var targ;if (!e)
var e =
window.event;if (e.target)
targ =
e.target;else if (e.srcElement)
targ =
e.srcElement;
if (targ.nodeType ==
3)
//defeat Safari bugtarg =
targ.parentNode;
return targ;}
elem.onclick=function(e){elem=returnTarget(e)
}
http://infoeducatie.ro/order.js
![Page 4: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/4.jpg)
Librarii javaScript• Te concentrezi mai mult pe functionalitate si
mai putin pe buguri si hack-uri• Lucrurile se fac mai repede• Este mai simplu de garantat cross browser
jQuery
Mihai Oaida <[email protected]> 03
![Page 6: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/6.jpg)
jQueryjQuery.comJohn Resig – Ian 2006Licenta duala MIT si GNUAvantaje
Dom query – (css 1 – 3 ,xpath)
Inlantuirea obiectelorMarime mica 14Kb (Comprimata)
cross browser IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
jQuery
Mihai Oaida <[email protected]> 05
![Page 7: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/7.jpg)
De ce jQuery?Poate fi folosita cu alte librariiCodul pur javaScript functioneazaScris sa fie intuitiv (write less do more)
Documentata bine + exempleMulte pluginuri, documentateMulte tutorialeSe invata usorUsor extensibila
jQuery
Mihai Oaida <[email protected]> 06
Google AmazonDigg
![Page 8: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/8.jpg)
jQuery – functii de baza$(‘’) , jQuery(‘’) – returneaza obiecte jquery
jQuery.fn.extend – pluginuri
jQuery.noConflict() – foloseste jQuery in loc de $
jQuery
Mihai Oaida <[email protected]> 07
![Page 9: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/9.jpg)
DOM - Selectori$(‘#nr’) - id $(‘.item’) - clasa $(‘a’) - element$(‘span,p’)- elemente$(‘*’) - toate elementele
jQuery
Mihai Oaida <[email protected]> 08
$(‘li a’) - descendent indirect $(‘li > a’) – descendent direct
$(‘a:first’) - prima ancora$(‘td:even’) – pozitii pare$(‘a:eq(4)’) – a 4-a ancora
![Page 10: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/10.jpg)
jQuery – iterare$(‘.menuItem’).each(function(div){
//stuff})
$(‘a’).size()
jQuery
Mihai Oaida <[email protected]> 09
![Page 11: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/11.jpg)
DOM - Selectori$(‘a[title]’) – ancorele cu atributul titlu$(‘a[alt=“main”]’)
jQuery
Mihai Oaida <[email protected]> 10
$(‘input[type=“text”]’) = $(‘input:text’)$(‘:file’)$(‘:password’)$(‘:radio’)$(‘:checkbox’)
![Page 12: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/12.jpg)
DOM - atribute$(‘a’).attr(‘href’)$(‘a’).attr(‘href’,’http://google.com’)$(‘a’).removeAttr(‘title’)
jQuery
Mihai Oaida <[email protected]> 11
$(‘.item’).addClass(‘item2’).removeClass(‘item’)$(‘#item’).hasClass(‘marked’)
$(‘#mainMenu’).html() – continutul html
![Page 13: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/13.jpg)
DOM - traversare.children(exp) – copii selectiei curente.siblings(exp) - frati.next(exp) - fratii urmatori.prev(exp) - fratii precedenti.parents(exp) - toti parintii .parent(exp) - parintele
jQuery
Mihai Oaida <[email protected]> 12
![Page 14: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/14.jpg)
DOM - manipulare.html().text()$(‘a’).append(‘</b>’).prepend(‘<b>’)
- wrap la continut$(‘a’).before(‘<p>’).after(‘</p>’)
- wrap la elemente$(‘a’).wrap(‘<div></div>’)
jQuery
Mihai Oaida <[email protected]> 13
![Page 15: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/15.jpg)
CSS.css(‘width’).css(‘width’,’100px’).css(‘background-color’,’red’)
.height()
.width()
.offset()
jQuery
Mihai Oaida <[email protected]> 14
![Page 16: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/16.jpg)
DOM - alteleQ: Cum se acceseaza elementul DOM dintr-un
obiect jQuery?
R: $(‘#mainMenu’).get(0)document.getElementByid(‘mainMenu’)
jQuery
Mihai Oaida <[email protected]> 15
![Page 17: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/17.jpg)
Evenimente$(‘div’).mouseover(function(){
$(this).css(‘background-color’,’red’)
}).mouseout(function(){$(this).css(‘background-color’,’blue’)
})
$(‘.click’).click(function(){$(this).hide()
})
jQuery
Mihai Oaida <[email protected]> 16
![Page 18: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/18.jpg)
Evenimenteonload
$(document).ready(function(){alert(‘dom ready’)
})
$(function(){alert(‘dom is really ready’)
})
jQuery
Mihai Oaida <[email protected]> 17
![Page 19: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/19.jpg)
Efecte.show([speed[,callback]]).hide([speed[,callback]]).slideUp(…).slideDown(…).fadeIn(…)
.fadeOu(…)
jQuery
Mihai Oaida <[email protected]> 18
$(‘div’).click(function(){
$(this).hide(100,function(){alert(‘m-am ascuns’)
})
})
toggle(…)slideToggle(…)
animate() – animatii custom
![Page 20: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/20.jpg)
AJAX$(‘#menu’).load(‘menu.php’)
$.get(url,[data],[callback],[type])
$.ajax
jQuery
Mihai Oaida <[email protected]> 19
callbackfunction(data,textStatus){}
![Page 21: jQuery - Infoeducatie 2008](https://reader033.vdocuments.mx/reader033/viewer/2022060121/5594710f1a28ab8d0e8b4746/html5/thumbnails/21.jpg)
PluginurijQuery.fn.slowHighlight =
function(background,
time){
original =
this.css('background-color');startColor =
'white';this.css('backgroundColor',
background).animate({backgroundColor:
startColor},
time,
function(){$(this).css('backgroundColor',
original);
});}
jQuery
Mihai Oaida <[email protected]> 20