View
2.045
Download
0
Category
Preview:
DESCRIPTION
Libraria jQuery. Utilitatea ei. Selectori, modul de manipulare al elementelor si evenimentelor, construirea unui plugin si multe altele.
Citation preview
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
Recommended