Diferencia entre revisiones de «Usuario:Juanda/jQuery/Sintaxis»
De WikiEducator
Línea 1: | Línea 1: | ||
{{Usuario:juanda/jQuery/nav }} | {{Usuario:juanda/jQuery/nav }} | ||
− | {{#widget:Slides}} {{MiTitulo| Curso de jQuery}} | + | {{#widget:Slides}} {{MiTitulo| Curso de jQuery-Sintaxis}} |
<div class="slides layout-regular template-default"> | <div class="slides layout-regular template-default"> | ||
<div class="slide"> | <div class="slide"> | ||
− | = | + | = Sintaxis de jQuery = |
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
− | === | + | ===Sintaxis=== |
− | * | + | '''$(selector).action()''' |
− | * | + | *'''$''': Simbolo para definir JQuery (podríamos usar también JQuery) |
− | + | :'''selector''': Consulta sobre los elementos HTML (sintaxis muy similar a CSS) | |
+ | :'''action''': Acción que se ejecuta sobre los elementos | ||
+ | |||
+ | *Ejemplos: | ||
+ | <source lang="javascript"> | ||
+ | $(this).hide() //oculta el elemento actual | ||
+ | |||
+ | $("p").hide() //oculta todos los elementos de tipo párrafo | ||
+ | |||
+ | $("p.test").hide() //oculta todos los párrafos con class=test | ||
+ | |||
+ | $("#test").hide() //oculta todos los elementos con id=test | ||
+ | </source> | ||
+ | |||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
− | === | + | === Ejemplos de uso del selector de jQuery === |
− | + | <source lang="javascript"> | |
− | + | $("p") //se seleccionan todos los elementos de tipo párrafo | |
− | + | ||
− | + | $("p.intro") //todos los párrafos con class=intro | |
− | + | ||
− | + | $("p#demo") //todos los párrafos con id=demo | |
− | + | ||
− | + | $("[href]") //todos los elementos con atributo href | |
− | + | ||
− | + | $("[href='#']") //todos los elementos con atributo href="#" | |
− | : | + | |
+ | </source> | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | <source lang="javascript"> | ||
+ | $("[href!='#']") //todos los elementos con atributo href diferente de "#" | ||
+ | |||
+ | $("[href$='.jpg']") //todos los elmentos con atributo href que acabe en .jpg | ||
+ | |||
+ | $("p").css("background-color","yellow"); | ||
+ | //modificamos el background-color de todos los párrafos a amarillo | ||
+ | |||
+ | $("p#intro:first") //El primer párrafo con id="intro" | ||
+ | |||
+ | $("ul li:first") El primer elemento <li> de cada <ul> | ||
+ | |||
+ | $("div#intro .head") | ||
+ | //Todos los elementos con class="head" dentro de un <div> con id="intro" | ||
+ | |||
+ | </source> | ||
</div> | </div> | ||
Revisión de 09:28 27 oct 2012