Libraria jQuery. Utilitatea ei. Selectori, modul de manipulare al elementelor si evenimentelor, construirea unui plugin si multe altele.

1. jQuery

2. jQuery
jQuery
• Browsere
• Librării
• jQuery
• DOM
• Evenimente
• Animaţii
• Ajax
Mihai Oaida <mihai.oaida@gmail.com> 01

3. jQuery
Browsere
function returnTarget(e){
Firefox var targ;
if (!e) var e = window.event;
IE 6 | 7 if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
Opera
if (targ.nodeType == 3) //defeat Safari bug
Safari targ = targ.parentNode;
return targ;
}
elem.onclick=function(e){
elem=returnTarget(e)
}
http://infoeducatie.ro/order.js
Mihai Oaida <mihai.oaida@gmail.com> 02

4. jQuery
Librării javaScript
• Te concentrezi mai mult pe funcţionalitate şi
mai puţin pe buguri şi hack-uri
• Lucrurile se fac mai repede
• Este mai simplu de garantat funcţionalitatea
cross browser
Mihai Oaida <mihai.oaida@gmail.com> 03

5. jQuery
Popularitea librăriilor
Prototype Yahoo UI
jQuery DOJO
Mihai Oaida <mihai.oaida@gmail.com> 04

6. jQuery
jQuery
jQuery.com
John Resig – Ian 2006
Licenţă duală MIT si GNU
Avantaje
Dom query – (css 1 – 3 ,xpath)
Inlănţuirea obiectelor
Mărime mică 15Kb (Comprimată)
Cross browser IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
Mihai Oaida <mihai.oaida@gmail.com> 05

7. jQuery
De ce jQuery?
• Poate fi folosită cu alte librării
• Codul pur javaScript funcţionează
• Scris sa fie intuitiv (write less do more)
• Documentată bine + exemple
• Multe plugin-uri, documentate
• Multe tutoriale
• Se învaţă usor Google
• Usor extensibilă
Amazon
• Unobtrusive javascript Digg
Mihai Oaida <mihai.oaida@gmail.com> 06

8. jQuery
jQuery – funcţii de bază
$('') – returnează obiecte jQuery
jQuery.fn.extend – pluginuri
jQuery.noConflict() – foloseşte jQuery în loc de $
Majoritatea operaţiunilor
1 găseşte elemente
2 aplică/scoate stiluri, handlere,etc
Mihai Oaida <mihai.oaida@gmail.com> 07

9. jQuery
DOM - Selectori
$('#nr') - id
$('.item') - clasă
$('a') - element
$('span,p') - elemente
$('*') - toate elementele
$('li a') - descendent indirect
$('li > a') - descendent direct
$('a:first')- prima ancoră
$('td:even')- poziţii pare
$('a:eq(4)')- a 4-a ancoră
Mihai Oaida <mihai.oaida@gmail.com> 08

10. jQuery
jQuery – Iterare
$('.menuItem').each(function(div){
//stuff
})
$('a').size()
Mihai Oaida <mihai.oaida@gmail.com> 09

11. jQuery
DOM - Selectori
$('a[title]') – ancorele cu atributul titlu
$('a[alt="main"]')
$('input[type="text"]') = $('input:text')
$(':file')
$(':password')
$(':radio')
$(':checkbox')
Mihai Oaida <mihai.oaida@gmail.com> 10

12. jQuery
DOM - Atribute
$('a').attr('href')
$('a').attr('href','http://google.com')
$('a').removeAttr('title')
$('.item').addClass('item2').removeClass('item')
$('#item').hasClass('marked')
$('#mainMenu').html() – conţinutul html
Mihai Oaida <mihai.oaida@gmail.com> 11

13. jQuery
DOM - Traversare
.children(exp) - copii selecţiei curente
.siblings(exp) - fraţi
.next(exp) - fraţii următori
.prev(exp) - fraţii precedenţi
.parents(exp) - toţi părinţii
.parent(exp) - părintele
Mihai Oaida <mihai.oaida@gmail.com> 12

14. jQuery
DOM - Manipulare
.html()
.text()
$('a').append('</b>').prepend('<b>')
- wrap la conţinut
$('a').before('<p>').after('</p>')
- wrap la elemente
$('a').wrap('<div></div>')
Mihai Oaida <mihai.oaida@gmail.com> 13

15. jQuery
CSS
.css('width')
.css('width','100px')
.css('background-color','red')
.height()
.width()
.offset()
Mihai Oaida <mihai.oaida@gmail.com> 14

16. jQuery
DOM - Altele
Q: Cum se accesează elementul DOM dintr-un
obiect jQuery?
R: $('#mainMenu').get(0)
document.getElementByid('mainMenu')
Mihai Oaida <mihai.oaida@gmail.com> 15

17. jQuery
Evenimente
$('div').mouseover(function(){
$(this).css('background-color','red')
}).mouseout(function(){
$(this).css('background-color','blue')
})
$('.click').click(function(){
$(this).hide()
})
Mihai Oaida <mihai.oaida@gmail.com> 16

18. jQuery
Evenimente
onload
$(document).ready(function(){
alert('dom ready');
})
$(function(){
console.log('dom ready');
})
Mihai Oaida <mihai.oaida@gmail.com> 17

19. jQuery
Efecte
.show([speed[,callback]]) toggle(…)
.hide([speed[,callback]]) slideToggle(…)
.slideUp(…) animate() – animaţii
.slideDown(…) custom
.fadeIn(…)
.fadeOu(…)
$('div').click(function(){
$(this).hide(100,function(){
alert('m-am ascuns');
})
})
Mihai Oaida <mihai.oaida@gmail.com> 18

20. jQuery
AJAX
$('#menu').load('menu.php');
$.get(url,[data],[callback],[type])
$.ajax
callback
function(data,textStatus){
}
Mihai Oaida <mihai.oaida@gmail.com> 19

21. jQuery
Pluginuri
jQuery.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);
});
}
Mihai Oaida <mihai.oaida@gmail.com> 20

22. jQuery
Întrebări?
Mihai Oaida <mihai.oaida@gmail.com> 21