Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.
Ambdós costats versió prèvia Revisió prèvia Següent revisió | Revisió prèvia | ||
jquery [2022/12/16 17:50] enric_mieza_sanchez [Referències] |
jquery [2022/12/16 18:34] (actual) enric_mieza_sanchez [Crear i insertar un element jQuery] |
||
---|---|---|---|
Línia 13: | Línia 13: | ||
===== Referències ===== | ===== Referències ===== | ||
Referències principals: | Referències principals: | ||
- | * Principal: www.jquery.com | + | * Pàgina oficial: www.jquery.com |
+ | * Una bona intro de [[https:// | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
Línia 22: | Línia 23: | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
+ | |||
+ | \\ | ||
+ | |||
+ | ===== Introducció ===== | ||
+ | El més important a tenir en compte és que una crida jQuery retorna un element jQuery. Aquest no és exactament com els elements de DOM de Javascript simples, sinó que tenen una mena de //wrap//. | ||
+ | |||
+ | jQuery utilitza selectors CSS, i ens pot retornar un o diversos elements jQuery. | ||
+ | |||
+ | Per accedir a un element per ID: | ||
+ | $("# | ||
+ | |||
+ | Per accedir a tots els paràgrafs que tenen la class " | ||
+ | $(" | ||
+ | | ||
+ | O fins i tot, tots els elements amb class " | ||
+ | $(" | ||
+ | | ||
+ | Si fem això, amagarem tots els paràgrafs del document: | ||
+ | $(" | ||
+ | |||
+ | Per saber més mira [[https:// | ||
\\ | \\ | ||
Línia 36: | Línia 58: | ||
A la consola (o al nostre codi) podem fer: | A la consola (o al nostre codi) podem fer: | ||
+ | |||
+ | <tabbox Versió jQuery> | ||
+ | |||
+ | <code javascript> | ||
+ | var elem = $("# | ||
+ | $("# | ||
+ | </ | ||
+ | |||
+ | <tabbox Versió Javascript "a pèl"> | ||
+ | |||
<code javascript> | <code javascript> | ||
var elem = document.getElementById(" | var elem = document.getElementById(" | ||
Línia 41: | Línia 73: | ||
</ | </ | ||
+ | </ | ||
+ | |||
+ | \\ | ||
<WRAP info> | <WRAP info> | ||
- | **En jQuery**: | + | **En jQuery** |
- | * Per accedir al contingut dels **elements | + | * **Elements |
- | * Per accedir al contingut dels **elements | + | * **Elements |
</ | </ | ||
+ | \\ | ||
+ | |||
+ | ===== Crear i insertar un element jQuery ===== | ||
+ | Un element jQuery es crea amb un element HTML normal, embolcallat amb $(): | ||
+ | <code javascript> | ||
+ | // creem element jQuery | ||
+ | var jquery_elem = $("< | ||
+ | // l' | ||
+ | $(" | ||
+ | </ | ||
+ | |||
+ | Com podem veure, insertem en un altre element del DOM amb la [[https:// | ||
\\ | \\ | ||
+ | |||
+ | ====== jQuery UI : llibreries gràfiques ====== | ||
+ | |||
===== jQuery UI quickstart amb Dialog ===== | ===== jQuery UI quickstart amb Dialog ===== |