JQuery Framework. Teoria
Contingut
Introducció
- jQuery és una llibreria de JavaScript.
- jQuery simplifica la programació amb JavaScript (i redueix les línies de codi).
- jQuery és fàcil d'aprendre.
jQuery és una llibreria de JavaScript que va amb la idea del write less, do more. El propòsit de jQuery és que sigui més fàcil implementar Javascript en els teus projectes.
jQuery agafa moltes de les tasques comunes que amb JavaScript requereixen moltes línies de codi per programar-les, i les embolcalla en mètodes que només cal una simple línia de codi per cridar-los.
jQuery també simplifica molt aspectes que hem vist de JavaScript, com ara crides AJAX i manipulació del DOM.
La llibreria jQuery conté les següents característiques:
- manipulació HTML/DOM
- manipulació CSS
- events
- efectes i animacions
- AJAX
- utilitats
Referències
Exemples de què es pot fer amb jQuery:
Exemples
Amagar paràgrafs amb DOM i amb JQuery
phide_dom.htm:
<!DOCTYPE html>
<html>
<head>
<script>
function amagar_p() {
var totsParagrafs = document.getElementsByTagName('p');
for (var i=0; i < totsParagrafs.length; i++ ) {
//totsParagrafs[i].style.visibility='hidden';
//o bé (veure la diferència)
//totsParagrafs[i].innerHTML='';
//o millor:
totsParagrafs[i].style.display='none';
}
}
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button onclick="amagar_p()">Click me</button>
</body>
</html>
phide_jquery.htm:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Exercicis proposats a classe
1. A partir de l'exemple
crear una taula i amb un botó afegir una nova fila a la taula
2. Veure la diferència entre remove() i empty() amb una taula
creat per Joan Quintana Compte, abril 2018
