jQuery nos permite seleccionar elementos de una página a través del valor del ID del HTML.
En el siguiente ejemplo;
addClass( ).- Método de jQuery que permite agregar un conjunto de clases a un elemento (elementos) de HTML.
removeClass( ).- Método de jQuery que permite remover las clases que coinciden de la lista de parámetros con las que presentan los elementos seleccionados.
toggleClass( ).- Método de jQuery que permite alternar un conjunto de clases a un elemento (elementos) de HTML.
text( ).- Método de jQuery que devuelve la cadena de texto, de la concatenación del contenido de los elementos seleccionados (excluyendo el HTML). Puede ser usado para documentos XML y HTML.
agregar_clases( ).- Aplica la función addClass() a los elementos seleccionados del div.result.
remover_clases( ).- Aplica la función removeClass() a los elementos seleccionados del div.result.
alternar_clases( ).- Aplica la función toggleClass() a los elementos seleccionados del div.result.
mostrar_contenido( ).- Aplica la función text() al párrafo con id "destacado" del div.result y despliega en un cuadro de diálogo su contenido.
//reglas de estilo CSS < style type="text/css"> #container div.result p#destacado {font-size:18px;font-style:italic;} .marcado{background-color:#FFA500; font-style:none; font-variant:small-caps;padding:3px;} < /style> //Código en javascript < script type="text/javascript"> function agregar_clase(){ $('.result p#destacado').addClass('marcado'); } function remover_clase(){ $('.result p#destacado').removeClass('marcado'); } function alternar_clase(){ $('.result p#destacado').toggleClass('marcado'); } function mostrar_contenido(){ var cad = $('.result p#destacado').text(); alert("El contenido del párrafo con id destacado es: \n"+cad); } script> //código en HTMl < div class ="result"> < p id="destacado" class="marcado">párrafo 1< /p> < p >párrafo 2< /p> < p >párrafo 3< /p> < p >párrafo 4< /p> < /div> < form> < input type="button" value="Agregar Clase" onClick="agregar_clase()"> < input type="button" value="Remover Clase" onClick="remover_clase()"> < input type="button" value="Alternar Clase" onClick="alternar_clase()"> < input type="button" value="Mostrar Contenido" onClick="mostrar_contenido()"> < /form>
párrafo 1
párrafo 2
párrafo 3
párrafo 4