JQuery Framework. Teoria

De Wikijoan
Revisió de 16:21, 9 abr 2018; Joan (Discussió | contribucions)
(dif) ←Versió més antiga | Versió actual (dif) | Versió més nova→ (dif)
Dreceres ràpides: navegació, cerca

Contingut

Introducció

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:

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

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines