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 15:21] enric_mieza_sanchez |
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 25: | Línia 26: | ||
\\ | \\ | ||
- | ===== jQuery UI in a nutshell | + | ===== 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:// | ||
+ | |||
+ | \\ | ||
+ | |||
+ | ===== jQuery vs DOM "a pèl" ===== | ||
+ | |||
+ | Oferim el mateix exemple que a l' | ||
+ | |||
+ | <file html exemple.html> | ||
+ | < | ||
+ | <p>El meu nom és:< | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | A la consola (o al nostre codi) podem fer: | ||
+ | |||
+ | <tabbox Versió jQuery> | ||
+ | |||
+ | <code javascript> | ||
+ | var elem = $("# | ||
+ | $("# | ||
+ | </ | ||
+ | |||
+ | <tabbox Versió Javascript "a pèl"> | ||
+ | |||
+ | <code javascript> | ||
+ | var elem = document.getElementById(" | ||
+ | document.getElementById(" | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | \\ | ||
+ | |||
+ | <WRAP info> | ||
+ | **En jQuery** per accedir al contingut dels elements: | ||
+ | * **Elements jQuery HTML**: utilitzem '' | ||
+ | * **Elements jQuery de formulari**: | ||
+ | </ | ||
+ | |||
+ | \\ | ||
+ | |||
+ | ===== 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 ===== | ||
+ | |||
+ | Un exemple molt resumit que pot servir de base per a moltes altres coses és el del jQuery UI Dialog. | ||
+ | |||
+ | https:// | ||
+ | |||
+ | Si copieu l' | ||
+ | |||
+ | Versió simplificada: | ||
+ | <WRAP prewrap> | ||
+ | <code html> | ||
+ | <link rel=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | O en versió amb check de integritat: | ||
+ | <WRAP prewrap> | ||
+ | <code html> | ||
+ | <link rel=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | \\ | ||