JQuery es una liviana librería de JavaScript, pensada para interactuar con los elementos de una Web por medio del DOM. Lo que la hace tan especial es su sencillez y su reducido tamaño.
Para que vean cuan sencillo es JQuery, aquí les va este pequeño webtip. Tomando como base el tutorial de scx7:
El cual modifiqué un poco (espero que no le moleste) y lo volví a escribir en JQuery, les recomiendo que lean el tutorial antes de seguir.
El PHP:
Código :
<?php
[color=olive]//aqui va la URI del blog gestionado por WordPress
$filename = "http://www.cristalab.com/rss.php";
header("Content-type:text/xml");
readfile ($filename);
?>El XHTML
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Lector RSS con AJAX</title> <script language="JavaScript" type="text/javascript" src="js/jquery.js"></script> <script language="JavaScript" type="text/javascript" src="js/lector_rss.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="rss"> <load>Cargando...</load> </div> </body> </html>
El JavaScript
Código :
$(document).ready(function (){[color=olive]//cuando el documento este listo
var url="blog.php";[color=olive]//inicio la url de donde estará la dirección del rss
cargar_pagina(url, "#rss");[color=olive]//función que carga el rss (el#, es para indicar que es un id)
});
function cargar_pagina(url,id_contenedor){
var xml = $.ajax({//comienzo el AJAX y le asigno sus propiedades
url: url,// la url
success: function(xml){// cuando tenga éxito
$(id_contenedor).html("");//borro el mensaje cargando...
cargar_rss(xml, id_contenedor);//llamo la función que me mostrara las entradas
}
});
}
function cargar_rss(xml, id_contenedor){
var limit = xml.getElementsByTagName('item').length;//obtengo la cantidad de entradas
var rss = "";//comienzo el string
for (var l=1; l<=limit; l++){// un for desde 1 hasta la cantidad de entradas
//obtengo titulo vinculo fecha de publicación y descripción
var title = xml.getElementsByTagName('title').item(l+1).firstChild.data;
var url = xml.getElementsByTagName('link').item(l+1).firstChild.data;
var pubDate = xml.getElementsByTagName('pubDate').item(l-1).firstChild.data;
var description = xml.getElementsByTagName('description').item(l+1).firstChild.data;
var date = pubDate.split(" +");//no se para que pero estaba en el tutorial
rss = "<fecha>"+date[0]+"<fecha><br/><titulo><a href=\""+url+"\">"+title+"</a></titulo><br/><descripcion>"+description+"</descripcion><hr />";//relleno el string con la información
$(id_contenedor).append(rss);//lo agrego en el contenedor
}
}El CSS
Código :
#rss{
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:800px;
height:auto;
padding-left:15px;
padding-top:40px;
padding-right:10px;
border:1px solid #0033FF;
margin:0 auto;
}
titulo{
font-weight:bold;
color:#FF0000;
}
descripcion{
color:#000000;
}
fecha{
color:#999999;
}
enlace a{
color:#003399;
margin-left:180px;
}
next a{
color:#006699;
margin-left:180px;
text-decoration:none;
}
load{
color:#003366;
}Espero les sirva de algo. A mi si me sirvió
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
gcm :
Por gabo el 07 de Mayo de 2007
eso es javascript? no eso es jQuery
Por itcaso el 11 de Mayo de 2007
http://groups.google.com/group/jquery-en/browse_thread/thread/f68c82066ed64919
mi mail italoc(at)gmail.com
Por rodrigo el 11 de Diciembre de 2007
#!/bin/sh
ps -ef|grep calcula|grep -v grep 2>
Por ASDW el 23 de Junio de 2008
¿Eso es Jquery? No, eso es javascript.
El código tiene partes en javascript puro y partes en Jquery.
gabo_blog, tomate el colacao que te veo perdido.
Por Gaston el 28 de Octubre de 2008
Ejemplo:
?php
[color=olive]//aqui va la URI del blog gestionado por WordPress
$filename = "http://www.24con.com/files/rss/ciudaddebuenosaires.xml";
header("Content-type:text/xml");
readfile ($filename);
?>
Por Albertcito el 17 de Diciembre de 2008
Excelente!!!! .....
Por Albertcito el 17 de Diciembre de 2008
Y no entiendo esto de tu código:
[color=olive]//aqui va la URI del blog gestionado por WordPress
¿?
Por Albertcito el 17 de Diciembre de 2008
...
Por argento el 12 de Enero de 2009
Por Isildur el 06 de Marzo de 2014
2º donde veais un simbolo $ seguido de parentesis es JQuery (el selector)