() translation by (you can also view the original English article)
En este tutorial, tendrás un vistazo a PyQuery, una librería Python que ter permite hacer consultas jQuery en documentos XML. Sintácticamente es similar a jQuery, y si estás familiarizado con jQuery debería ser más fácil de seguir.
Comenzando Con PyQuery
Para comenzar con PyQuery, instala el paquete Python usando PIP.
1 |
pip install pyquery
|
Una vez que has instalado PyQuery, impórtalo en el programa Python.
1 |
from pyquery import PyQuery as pq |
Comencemos con un ejemplo básico de cómo trabaja. Considera el siguiente HTML:
1 |
<div id="divMain"> |
2 |
<span>
|
3 |
Hello World |
4 |
</span>
|
5 |
</div>
|
Pasa el XML de entrada al objeto PyQuery y deberías poder aplicar consultas de estilo jQuery a este.
1 |
divMain = pq("<div id='divMain'><span>Hello World</span></div>") |
Asume divMain como un objeto jQuery e imprime el contenido HTML del div.
1 |
print divMain('#divMain').html() |
Guarda los cambios e intenta ejecutar el programa. Deberías tener la siguiente salida:
1 |
<span>Hello World</span> |
Para acceder al texto Hello World desde el interior del span, el código sería:
1 |
print divMain('#divMain').text() |
Guarda los cambios y prueba ejecutar el código. deberías tener la siguiente salida:
1 |
Hello World |
Manipulación de Atributos Usando PyQuery
Ahora echemos un vistazo a cómo leer los atributos usando la librería PyQuery. Asume que tienes un elemento HTML como se muestra:
1 |
<ul id="ulMain"> |
2 |
<li>Roy</li> |
3 |
<li>Hari</li> |
4 |
</ul>
|
Usa la librería PyQuery para leer el contenido HTML de arriba.
1 |
ulMain = pq("<ul id='ulMain'><li>Roy</li><li>Hari</li></ul>") |
Tratemos de acceder el atributo ID del ul ulMain.
1 |
print ulMain.attr('id') |
Guarda los cambios de arriba e intenta ejecutar el programa Python. Deberías tener ID ulMain impreso en la terminal.
Viste cómo acceder al tributo ID del ul ulMain. Intentemos establecer un nombre de clase para el mismo elemento ulMain. Para especificar un atributo de nombre de clase, necesitas especificar el nombre de atributo y su valor correspondiente como se muestra:
1 |
ulMain.attr('class','testclass') |
Imprime el objeto ulMain y deberías tener el elemento con el atributo de clase.
1 |
<ul id="ulMain" class="testclass"> |
2 |
<li>Roy</li> |
3 |
<li>Hari</li> |
4 |
</ul> |
También puedes agregar y quitar clases directamente sin usar el método attr. Para agregar una clase al elemento, puede hacer uso del método addClass.
1 |
ulMain.addClass('test') |
Para remover una clase existente del elemento, puedes hacer uso del método removeClass.
1 |
ulMain.removeClass('test') |
Manejando CSS Usando PyQuery
Además de atributos, el elemento tendría algunas propiedades CSS. Para agregar o modificar las propiedades CSS, puedes usar el método css y especificar las propiedades. Digamos que quieres especificar la altura en el estilo del ul ulMain. El siguiente código agregaría las propiedades de estilo requeridas al elemento.
1 |
ulMain.css('height','100px') |
Guarda los cambios de arriba e intenta ejecutar el programa Python. Deberías tener el ul ulMain impreso junto con el nuevo estilo.
1 |
<ul id="ulMain" style="height: 100px"> |
2 |
<li>Roy</li> |
3 |
<li>Hari</li> |
4 |
</ul>
|
Para agregar múltiples estilos al elemento, puedes especificarlos como se muestra:
1 |
ulMain.css({'height':'100px','width':'100px'}) |
Ejecuta el programa y deberías tener los estilos agregados al ulMain.
1 |
<ul id="ulMain" style="width: 100px; height: 100px"> |
2 |
<li>Roy</li> |
3 |
<li>Hari</li> |
4 |
</ul> |
Creando y Adicionando Elementos
Durante la creación dinámica de elementos, se te requiere crear nuevos elementos y adicionarlos al elemento padre existente en donde serán generados. Echemos un vistazo a cómo crear y adicionar elementos usando PyQuery.
Asume que tienes un contenedor principal div llamado divMain.
1 |
divMain = pq("<div id='divMain'></div>") |
Creemos un nuevo elemento span usando PyQuery.
1 |
span = pq('<span>Hello World</span>') |
Agrega algunas propiedades CSS al span.
1 |
span.css({'color':'blue','font-weight':'bold'}) |
PiQuery proporciona un método para agregar elementos a elementos existentes. Puedes usar el método append para adicionar el elemento span al div divMain. Aquí está el código:
1 |
divMain.append(span) |
2 |
print divMain |
Guarda los cambios y ejecuta el programa. Deberías poder ver el divMain impreso con el recién creado span adicionado a este.
1 |
<div id="divMain"> |
2 |
<span style="color: blue; font-weight: bold"> |
3 |
Hello World |
4 |
</span>
|
5 |
</div>
|
Usaste el método append para adicionar el span al div. Tienes otro método alternativo llamado appendTo el cuál adiciona los nodos al valor. En el caso de arriba puedes usar el método así:
1 |
span.appendTo(divMain) |
Encontrando Elementos Usando PyQuery
PyQuery proporciona métodos para encontrar hijos, los siguientes elementos, los elementos más cercanos, etc. También proporciona métodos para filtrar y encontrar elementos dentro de un nodo particular.
Asume que tienes una pieza particular de HTML como se muestra:
1 |
<div id="divMain"> |
2 |
<div id="content"> |
3 |
<ul> |
4 |
<li>Jade</li> |
5 |
<li>Jim</li> |
6 |
</ul> |
7 |
</div> |
8 |
<div id="list"> |
9 |
<span>Hello World</span> |
10 |
</div> |
11 |
</div> |
Agrega el siguiente HTML al objeto PyQuery:
1 |
divMain = pq("<div id='divMain'>"+ |
2 |
"<div id='content'>"+ |
3 |
"<ul>"+ |
4 |
"<li>Jade</li>"+ |
5 |
"<li>Jim</li>"+ |
6 |
"</ul>"
|
7 |
"</div>"+ |
8 |
"<div id='list'>"+ |
9 |
"<span>Hello World</span>"
|
10 |
"</div>"+ |
11 |
"</div>") |
Usemos PyQuery para encontrar los hijos del div divMain. Agrega la siguiente línea de código para imprimir los hijos de divMain.
1 |
print divMain.children() |
En el programa en ejecución, deberías tener la siguiente salida:
1 |
<div id="content"> |
2 |
<ul>
|
3 |
<li>Jade</li> |
4 |
<li>Jim</li> |
5 |
</ul>
|
6 |
</div>
|
7 |
<div id="list"><span>Hello World</span></div> |
Para encontrar el elemento más cercano a un elemento, puedes usar el método closest. Para encontrar el elemento div más cercano al span, el código sería:
1 |
print divMain('span').closest('div') |
El comando de arriba regresaría la siguiente salida:
1 |
<div id="list"><span>Hello World</span></div> |
Un método find también está disponible para encontrar los elementos. Por ejemplo, para encontrar un span dentro del divMain, necesitas llamar al método como se muestra:
1 |
print divMain.find('span') |
El comando de arriba devolvería el span.
1 |
<span>Hello World</span> |
Inserta un Elemento Dentro de HTML
Cuando append no funciona para adicionar elementos a los elementos existentes, algunas veces necesitas insertar elementos después o antes de ciertos elementos. PyQuery proporciona un método para insertar elementos antes o después de otros elementos.
Definamos un nuevo elemento párrafo para ser insertado después del span dentro del div divMain.
1 |
p = pq('<p>Welcome</p>') |
Llama al método insertAfter en el elemento de párrafo p para insertarlo después del span.
1 |
p.insertAfter(divMain('span')) |
2 |
print divMain |
Guarda los cambios de arriba y ejecuta el programa Python. Deberías tener la siguiente salida:
1 |
<div id="divMain"> |
2 |
<div id="content"> |
3 |
<ul>
|
4 |
<li>Jade</li> |
5 |
<li>Jim</li> |
6 |
</ul>
|
7 |
</div>
|
8 |
<div id="list"> |
9 |
<span>Hello World</span> |
10 |
<p>Welcome</p> |
11 |
</div>
|
12 |
</div>
|
De manera similar, tienes el método insertBefore, que inserta antes del elemento. Modifica el código como se muestra abajo para usar el método insertBefore:
1 |
p.insertBefore(divMain('span')) |
2 |
print divMain |
Guarda los cambios y ejecuta el programa. Deberías poder ver la siguiente salida en la terminal:
1 |
<div id="divMain"> |
2 |
<div id="content"> |
3 |
<ul>
|
4 |
<li>Jade</li> |
5 |
<li>Jim</li> |
6 |
</ul>
|
7 |
</div>
|
8 |
<div id="list"> |
9 |
<p>Welcome</p> |
10 |
<span>Hello World</span> |
11 |
</div>
|
12 |
</div>
|
Concluyendo
En este tutorial, viste como comenzar con PyQuery, una librería Python que te permite hacer consultas jQuery en documentos XML. Viste cómo manipular los atributos y estilos CSS de los elementos HTML.
Aprendiste cómo crear y adicionar elementos a elementos existentes e insertar nuevos elementos antes y después de elementos. Lo que viste en este tutorial es solo la punta del iceberg, y hay mucho más que esta librería tiene que ofrecer.
Para información más detallada sobre usar esta librería, recomendaría leer la documentación oficial. Déjanos conocer tus sugerencias en los comentarios de abajo.
