用jquery实现网页分块,分层,筛选

来源:互联网 发布:multism数据库导入 编辑:程序博客网 时间:2024/06/05 04:29

最近做的项目 中需要读取门户网站的页面,并且提供分块,就是把它体育、生活等资讯分开,独立开来


需求有了,其实一开始对于jquery不熟悉的,但是做了这么多的后台开发,经验可以告诉我应该怎么做,思想是这样的:
1.因为读取的页面是未知的,它的页面是如何构成的是很难预测的,有的用div,有的用table,有的用ul,
2.每一块模块应该是关系平等的,从实际开发中可以想象得到


如果页面结构是未知的,只能用一种通用的方法去处理,大家可以想到的应该是每个html中都有一些必需的元素:head,body,title等
而内容都会放到body下面,好,可以先取到body的对象,再取到它的孩子,基本分层思想就出来了,每一个孩子都会有若干孩子,
递归调用分块就可以了,可以让用户用鼠标触发事件,再进入分块:
贴下,主要的代码:
$(document).ready(function(){
//删除href
$('a').removeAttr("href");
$('body').children().each(function(index,item){
mybind(index.toString(),item);
$(item).hover(function(){
$(item).fadeTo("fast",0.5);
},function(){
$(item).fadeTo("fast",1);
});
});
//绑定事件
function mybind(index,o){
         
$(o).bind("click",function(){
$(o).fadeTo("fast",1);
downChange(index,o);});
}
//取消绑定
function unmybind(index,o){
$(o).unbind("click");

}
//向下筛选
function downChange(index,o){//递归调用,筛选所有的子节点 
      remove(o,index);
  $(o).children().each(function(num,a){
mybind(index+num,a);
$(a).hover(function(){
$(a).fadeTo("fast",0.5);
},function(){
$(a).fadeTo("fast",1);
});
 });
}
function remove(o,index){//去掉所有的兄弟节点
    
$(o).siblings().each(function(num,temp){
unmybind(num,temp);
                
$(temp).fadeOut("normal","linear");
});
$(o).unbind();
}
})   

原创粉丝点击