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

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


需求有了,其实一开始对于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();
}
})   

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值