JQuery Framework. Teoria

De wikijoan
Salta a la navegació Salta a la cerca

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