1.2. Selección de nodos en el DOM con Jquery

Con jQuery se puede acceder a los elementos en el Document Object Model (DOM) con el fin de manipularlos.

jQuery hace uso de CSS y el XPath para manipular los selectores y acceder a los elementos en el DOM. Cuando se aplica un selector para acceder a elementos en el DOM, los elementos se recuperan en forma de objetos jQuery. Para usar cualquier selector, si es CSS o XPath, y para acceder a los elementos en el DOM, hacemos uso de la función $ ().

Un archivo típico JavaScript para seleccionar un párrafo utilizando el código jQuery aparece como sigue:

//d1.js

$ (document) .ready (function () {

$ ('p').addClass ('highlight');

});

¿Cómo funciona?

La función $ () se utiliza para seleccionar una parte en especifica del documento. Se acepta cualquier expresión de orden selector CSS y con cero o más nodos en el DOM., este devuelve todos los elementos coincidentes, lo que nos permite manipularlos para cambiar su apariencia.

He aquí algunos ejemplos:

• $ ('p') - Permite acceder a todos los elementos de párrafo en el archivo HTML

• $ ('div') - Permite acceder a todos los elementos div en el archivo HTML

• $ ('# A') - Permite acceder a todos los elementos HTML con id = A

• $ ('. B') - Permite acceder a todos los elementos HTML con class = b

Así, se recogieron todos los elementos de párrafo y si llamamos al método addClass () se puede aplicar este método sobre ellos. Esto aplicará la clase CSS que de resaltado modificara  todos los párrafos del documento.