jQuery - GeekMeet Timisoara
22
jQuery
-
Upload
mihai-oaida -
Category
Technology
-
view
2.044 -
download
0
description
Libraria jQuery. Utilitatea ei. Selectori, modul de manipulare al elementelor si evenimentelor, construirea unui plugin si multe altele.
Transcript of jQuery - GeekMeet Timisoara
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
