Joan: /* Exercicis proposats a classe */

2018-04-09T16:21:24Z

Exercicis proposats a classe

Pàgina nova

=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=
*w3schools.com: http://www.w3schools.com/jquery/default.asp
*http://docs.jquery.com/Tutorials
Exemples de què es pot fer amb jQuery:
*http://jqueryui.com/demos/

=Exemples=
==Amagar paràgrafs amb DOM i amb JQuery==
'''phide_dom.htm''':
<pre>
<!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>
</pre>

'''phide_jquery.htm''':
<pre>
<!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>
</pre>
=Exercicis proposats a classe=
1. A partir de l'exemple
*http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append
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

{{Autor}}, abril 2018
[[Categoria: INS Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

JQuery Framework. Teoria - Historial de revisió

Joan: /* Exercicis proposats a classe */