Diferència entre revisions de la pàgina «JavaScript: JQuery»
(→Forma d'ús) |
(→Forma d'ús) |
||
| Línia 41: | Línia 41: | ||
[[Fitxer:note.png]] Evidentment, els números de versió variaran amb el temps. | [[Fitxer:note.png]] Evidentment, els números de versió variaran amb el temps. | ||
| + | |||
| + | |||
| + | == Mètode .ready() == | ||
| + | |||
| + | jQuery té accés i pot manipular el nostre document. Per tant és molt important que abans de fer res el document estigui completament carregat. L'equivalent al ''onLoad()'' de JavaScript: | ||
| + | <pre> | ||
| + | <script src="jquery.min.js"></script> | ||
| + | <script> | ||
| + | $(document).ready(function(){ | ||
| + | ........ | ||
| + | }); | ||
| + | </script> | ||
| + | </pre> | ||
| + | |||
| + | |||
| + | [[Fitxer:note.png]] Recorda la notació ''function(){...}''. Si volem posar el nom d'una funció definida en un altre lloc també podem. | ||
| + | |||
| + | |||
| + | |||
| + | == Selecció i acció == | ||
| + | |||
| + | jQuery es basa en dos parts: | ||
| + | * '''Selecció:''' Indiquem sobre quins elements volem actuar. Ex: tot els enllaços d'un document. | ||
| + | * '''Acció:''' Actuem sobre l'element seleccionat: modifiquem propietats, contingut, css, etc. | ||
| + | |||
| + | Sintaxi: | ||
| + | $(selector).accio(); | ||
| + | |||
| + | |||
| + | Exemples: | ||
| + | $('a').hide(); // amaga tots els enllaços | ||
| + | $('.test').show(); // mostra tots els elements que tenen la classe "test" | ||
| + | $('a.blau').show(); // mostra tots els enllaços que pertanyen a la classe "blau" | ||
| + | $('#id1').show(); // mostra tots els elements que tenen el id "test" | ||
| + | $(this).hide(); // amaga l'element actual. (si respon a un esdeveniment per exemple, serà aquest) | ||
| + | |||
| + | Més informació sobre selectors | ||
| + | [http://www.w3schools.com/jquery/jquery_selectors.asp http://www.w3schools.com/jquery/jquery_selectors.asp] | ||
Revisió del 18:05, 26 oct 2016
En aquest article de JavaScript s'aborda la llibreria JQuery.
Què és jQuery?
jQuery és una biblioteca o framework de JavaScript que permet:
- simplificar la manera d'interactuar amb els documents HTML
- manipular l'arbre DOM
- gestionar esdeveniments
- desenvolupar animacions
- i afegir interacció amb la tecnologia AJAX en pàgines web.
jQuery ofereix una sèrie de funcionalitats basades en JavaScript que d'una altra manera requerien molt més codi, és a dir, amb les funcions d'aquesta biblioteca s'aconsegueixen bons resultats en menys temps i espai. O com diu a la pròpia web "write less, do more".
Descarreguem de https://jquery.com/
Forma d'ús
Exemple:
<html>
<head>
<title>Pàgina amb Jquery</title>
<script type="text/javascript" src="jquery.js"></script>
// O bé jquery.js pot ser l'adreça directa a jquery.com
// http://code.jquery.com/jquery-2.1.4.min.js
// https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
// http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js
</head>
<body>
contingut del document
</body>
</html>
A l'exemple es mostren diverses solucions:
- descarregar la llibreria (document .js) i afegir-la en local;
- fer referència a la llibreria remotament (aconsellat en producció)
- fer ús d'un CDN
Evidentment, els números de versió variaran amb el temps.
Mètode .ready()
jQuery té accés i pot manipular el nostre document. Per tant és molt important que abans de fer res el document estigui completament carregat. L'equivalent al onLoad() de JavaScript:
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
........
});
</script>
Recorda la notació function(){...}. Si volem posar el nom d'una funció definida en un altre lloc també podem.
Selecció i acció
jQuery es basa en dos parts:
- Selecció: Indiquem sobre quins elements volem actuar. Ex: tot els enllaços d'un document.
- Acció: Actuem sobre l'element seleccionat: modifiquem propietats, contingut, css, etc.
Sintaxi:
$(selector).accio();
Exemples:
$('a').hide(); // amaga tots els enllaços
$('.test').show(); // mostra tots els elements que tenen la classe "test"
$('a.blau').show(); // mostra tots els enllaços que pertanyen a la classe "blau"
$('#id1').show(); // mostra tots els elements que tenen el id "test"
$(this).hide(); // amaga l'element actual. (si respon a un esdeveniment per exemple, serà aquest)
Més informació sobre selectors
http://www.w3schools.com/jquery/jquery_selectors.asp