Upload
mihai-oaida
View
2.043
Download
0
Embed Size (px)
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 <[email protected]> 01
BrowsereFirefoxIE 6 | 7OperaSafari
jQuery
Mihai Oaida <[email protected]> 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 <[email protected]> 03
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 <[email protected]> 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 <[email protected]> 06
Google AmazonDigg
jQuery – funcţii de bază
jQuery
Mihai Oaida <[email protected]> 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 <[email protected]> 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 <[email protected]> 09
$('.menuItem').each(function(div){//stuff
})$('a').size()
DOM - Selectori
jQuery
Mihai Oaida <[email protected]> 10
$('a[title]') – ancorele cu atributul titlu$('a[alt="main"]')
$('input[type="text"]') = $('input:text')$(':file')$(':password')$(':radio')$(':checkbox')
DOM - Atribute
jQuery
Mihai Oaida <[email protected]> 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 <[email protected]> 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 <[email protected]> 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 <[email protected]> 14
.css('width')
.css('width','100px')
.css('background-color','red')
.height()
.width()
.offset()
DOM - Altele
jQuery
Mihai Oaida <[email protected]> 15
Q: Cum se accesează elementul DOM dintr-un obiect jQuery?
R: $('#mainMenu').get(0) document.getElementByid('mainMenu')
Evenimente
jQuery
Mihai Oaida <[email protected]> 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 <[email protected]> 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 <[email protected]> 18
toggle(…)slideToggle(…)animate() – animaţii custom
$('div').click(function(){$(this).hide(100,function(){
alert('m-am ascuns');})
})
AJAX
jQuery
Mihai Oaida <[email protected]> 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 <[email protected]> 20