jQuery - Infoeducatie 2008
22
jQuery
-
Upload
mihai-oaida -
Category
Technology
-
view
1.151 -
download
0
description
De ce avem nevoie de o librarie Javascript? Ce librarii exista deja si cine la foloseste? jQuery este o librarie Javascript mica, cross browser si CSS3 compliant. Are o comunitate mare si multe plugin-uri disponibile. Dar ce aduce jQuery nou? Se vor prezenta selectori, modul de manipulare al elementelor si evenimentelor, construirea unui plugin si multe altele.
Transcript of jQuery - Infoeducatie 2008
jQuery
BrowsereFirefoxIE 6 | 7OperaSafari
jQuery
Mihai Oaida <[email protected]> 02
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)
}
http://infoeducatie.ro/order.js
Librarii javaScript• Te concentrezi mai mult pe functionalitate si
mai putin pe buguri si hack-uri• Lucrurile se fac mai repede• Este mai simplu de garantat cross browser
jQuery
Mihai Oaida <[email protected]> 03
jQueryjQuery.comJohn Resig – Ian 2006Licenta duala MIT si GNUAvantaje
Dom query – (css 1 – 3 ,xpath)
Inlantuirea obiectelorMarime mica 14Kb (Comprimata)
cross browser IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
jQuery
Mihai Oaida <[email protected]> 05
De ce jQuery?Poate fi folosita cu alte librariiCodul pur javaScript functioneazaScris sa fie intuitiv (write less do more)
Documentata bine + exempleMulte pluginuri, documentateMulte tutorialeSe invata usorUsor extensibila
jQuery
Mihai Oaida <[email protected]> 06
Google AmazonDigg
jQuery – functii de baza$(‘’) , jQuery(‘’) – returneaza obiecte jquery
jQuery.fn.extend – pluginuri
jQuery.noConflict() – foloseste jQuery in loc de $
jQuery
Mihai Oaida <[email protected]> 07
DOM - Selectori$(‘#nr’) - id $(‘.item’) - clasa $(‘a’) - element$(‘span,p’)- elemente$(‘*’) - toate elementele
jQuery
Mihai Oaida <[email protected]> 08
$(‘li a’) - descendent indirect $(‘li > a’) – descendent direct
$(‘a:first’) - prima ancora$(‘td:even’) – pozitii pare$(‘a:eq(4)’) – a 4-a ancora
jQuery – iterare$(‘.menuItem’).each(function(div){
//stuff})
$(‘a’).size()
jQuery
Mihai Oaida <[email protected]> 09
DOM - Selectori$(‘a[title]’) – ancorele cu atributul titlu$(‘a[alt=“main”]’)
jQuery
Mihai Oaida <[email protected]> 10
$(‘input[type=“text”]’) = $(‘input:text’)$(‘:file’)$(‘:password’)$(‘:radio’)$(‘:checkbox’)
DOM - atribute$(‘a’).attr(‘href’)$(‘a’).attr(‘href’,’http://google.com’)$(‘a’).removeAttr(‘title’)
jQuery
Mihai Oaida <[email protected]> 11
$(‘.item’).addClass(‘item2’).removeClass(‘item’)$(‘#item’).hasClass(‘marked’)
$(‘#mainMenu’).html() – continutul html
DOM - traversare.children(exp) – copii selectiei curente.siblings(exp) - frati.next(exp) - fratii urmatori.prev(exp) - fratii precedenti.parents(exp) - toti parintii .parent(exp) - parintele
jQuery
Mihai Oaida <[email protected]> 12
DOM - manipulare.html().text()$(‘a’).append(‘</b>’).prepend(‘<b>’)
- wrap la continut$(‘a’).before(‘<p>’).after(‘</p>’)
- wrap la elemente$(‘a’).wrap(‘<div></div>’)
jQuery
Mihai Oaida <[email protected]> 13
CSS.css(‘width’).css(‘width’,’100px’).css(‘background-color’,’red’)
.height()
.width()
.offset()
jQuery
Mihai Oaida <[email protected]> 14
DOM - alteleQ: Cum se acceseaza elementul DOM dintr-un
obiect jQuery?
R: $(‘#mainMenu’).get(0)document.getElementByid(‘mainMenu’)
jQuery
Mihai Oaida <[email protected]> 15
Evenimente$(‘div’).mouseover(function(){
$(this).css(‘background-color’,’red’)
}).mouseout(function(){$(this).css(‘background-color’,’blue’)
})
$(‘.click’).click(function(){$(this).hide()
})
jQuery
Mihai Oaida <[email protected]> 16
Evenimenteonload
$(document).ready(function(){alert(‘dom ready’)
})
$(function(){alert(‘dom is really ready’)
})
jQuery
Mihai Oaida <[email protected]> 17
Efecte.show([speed[,callback]]).hide([speed[,callback]]).slideUp(…).slideDown(…).fadeIn(…)
.fadeOu(…)
jQuery
Mihai Oaida <[email protected]> 18
$(‘div’).click(function(){
$(this).hide(100,function(){alert(‘m-am ascuns’)
})
})
toggle(…)slideToggle(…)
animate() – animatii custom
AJAX$(‘#menu’).load(‘menu.php’)
$.get(url,[data],[callback],[type])
$.ajax
jQuery
Mihai Oaida <[email protected]> 19
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
