使用php和jquery显示rss源

1.index.html
<html>
<head><title>Endless scroll</title>
<style type="text/css">
body{font-famiy:"Trebuchet MS",verdana,arial;}
ul{border:1px solid #000;float:left;list-style:none;margin:0;pading:0;width:900px;}
li{padding:5px;border:1px solid #000}
h3{color:brown;cursor:pointer;text-decoration:none;}
span{font-size:12px;font-weight:bold;}
.content{display:none;}
div{width:100%;}
a{font-weight:bold;}
</style>

</head>
<body>
<div id="results">loading</div>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>

$(document).ready(function(){
     $.get('feed.php',{},showPosts);
     function showPosts(data)
     {
          var posts=$(data).find('channel>item');
          var str='<ul>';
          $.each(posts,function(index,value){
               var title=$(value).find('title').text();
               var link=$(value).find('link').text();
               var description=$(value).find('description').text();
               var comments=$(value).find('slash\\:comments').text();
               var pDate=new Date($(value).find('pubDate').text());
               var day=pDate.getDate();
               var month=parseInt(pDate.getMonth(),10)+1;
               var year=pDate.getFullYear();
               var fullDate=day+'-'+month+'-'+year;
               str+='<li>';
               str+='<div><h3>'+title+'</h3><div class="content"><p>'+description+' <a href="'+link+'" target="_blank">Read Full Post</a>';
               str+='</p><span>Published on '+fullDate+' with '+comments+ 'comments</span></div></div></li>';

               });
          str+='</ul>';
          $('#results').html(str);
          $('#results ul li:even').css({'background-color':'CornflowerBlue'});
          }
          $('h3').live('click',function(){
               $(this).next('div').slideToggle('fast');
          });
    
});

</script>
</body>
</html>
 
2.feed.php
 
<?php
$feedData=file_get_contents('http://vijayjoshi.org/feed');
header('Content-type:text/xml');
echo $feedData;
3.

jQuery 文档操作 - text() 方法

实例

设置所有 <p> 元素的内容：

$(".btn1").click(function(){
  $("p").text("Hello <b>world</b>!");
});

亲自试一试

定义和用法

text() 方法方法设置或返回被选元素的文本内容。

返回文本内容

当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。

posted @ 2014-03-31 17:31  wint  Views(148)  Comments(0)    收藏  举报