jQuery

jQuery• Browsere• Librării• jQuery• DOM• Evenimente• Animaţii• Ajax

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 01

BrowsereFirefoxIE 6 | 7OperaSafari

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 02

http://infoeducatie.ro/order.js

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)}

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

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 03

Popularitea librăriilor

Prototype Yahoo UI

jQuery DOJO

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 04

jQueryjQuery.comJohn Resig – Ian 2006Licenţă duală MIT si GNUAvantaje

Dom query – (css 1 – 3 ,xpath)

Inlănţuirea obiectelorMărime mică 15Kb (Comprimată)

Cross browser IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 05

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• Usor extensibilă

• Unobtrusive javascript

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 06

Google AmazonDigg

jQuery – funcţii de bază

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 07

Majoritatea operaţiunilor 1 găseşte elemente 2 aplică/scoate stiluri, handlere,etc

$('') – returnează obiecte jQuery

jQuery.fn.extend – pluginuri

jQuery.noConflict() – foloseşte jQuery în loc de $

DOM - Selectori

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 08

$('#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ă

jQuery – Iterare

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 09

$('.menuItem').each(function(div){//stuff

})$('a').size()

DOM - Selectori

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 10

$('a[title]') – ancorele cu atributul titlu$('a[alt="main"]')

$('input[type="text"]') = $('input:text')$(':file')$(':password')$(':radio')$(':checkbox')

DOM - Atribute

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 11

$('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

DOM - Traversare

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 12

.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

DOM - Manipulare

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 13

.html()

.text()

$('a').append('</b>').prepend('<b>') - wrap la conţinut

$('a').before('<p>').after('</p>')- wrap la elemente

$('a').wrap('<div></div>')

CSS

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 14

.css('width')

.css('width','100px')

.css('background-color','red')

.height()

.width()

.offset()

DOM - Altele

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 15

Q: Cum se accesează elementul DOM dintr-un obiect jQuery?

R: $('#mainMenu').get(0) document.getElementByid('mainMenu')

Evenimente

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 16

$('div').mouseover(function(){$(this).css('background-color','red')

}).mouseout(function(){$(this).css('background-color','blue')

})$('.click').click(function(){

$(this).hide()})

Evenimente

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 17

onload

$(document).ready(function(){alert('dom ready');

})$(function(){console.log('dom ready');

})

Efecte.show([speed[,callback]]).hide([speed[,callback]]).slideUp(…).slideDown(…).fadeIn(…).fadeOu(…)

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 18

toggle(…)slideToggle(…)animate() – animaţii custom

$('div').click(function(){$(this).hide(100,function(){

alert('m-am ascuns');})

})

AJAX

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 19

$('#menu').load('menu.php');

$.get(url,[data],[callback],[type])$.ajax

callbackfunction(data,textStatus){}

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 <mihai.oaida@gmail.com> 20

Întrebări?

jQuery

Mihai Oaida <mihai.oaida@gmail.com> 21