发布于 2016-09-07 22:57:34 | 148 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例，程序狗速度看过来！

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

---

腾讯微博提供两种加载数据的方式，一种是分页，一种是滚动浏览器滚动条加载数据，分页功能我想大家都做得太多了，今天我与大家分享一下我用滚动条滚动加载数据
自从腾讯微博上线以来，基本上就开始用了，一直到现在，作为一个开发人员，也看到了腾讯微博一直在不停的改变，也不知道大家有没有发现，腾讯微博提供两种加载数据的方式，一种是分页，一种是滚动浏览器滚动条加载数据，分页功能我想大家都做得太多了，今天我与大家分享一下我用滚动条滚动加载数据
下面开讲：
　　首先说一下思路，我用的是Jquery，然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的，用到Jquery，首先要应用jquery.min.js类库，如果本地没有，也可以直接引用下面地址<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>。
　　好吧，下面我们看下核心代码：

 
// - -!,你懂的. 
var count=<%=allcount %>; 
var times=0; 
var loaded = true; 
function Add_Data() 
{ 
var top = $("#main_left_add").offset().top; 
if(loaded && ($(window).scrollTop() + $(window).height() > top)) 
{ 
$("#main_left_add").html("数据加载中..."); 
times++; 
$.ajax( 
{ 
type: "POST", 
dataType: "text", 
url: "weibo.ashx", 
data: "userid="+<%=hf.Value %>+"&touserid="+<%=hf1.Value %>+"&count="+count+"×="+times+"&type=1", 
success: function(data) 
{ 
//alert("第"+times+"次追加数据."); 
if(data == "没有数据") 
{ 
$("#main_left_add").css("display","none"); 
loaded=false; 
AddEffect(); 
} 
else if(data == "") 
{ 
$("#main_left_add").html("点击加载更多..."); 
$("#main_left_add").css("display","block"); 
loaded=false; 
AddEffect(); 
} 
else if(data != "") 
{ 
$("#main_left_down").append(data); 
AddEffect(); 
} 
} 
} 
); 
} 
} 
$(window).scroll(Add_Data); 
//点击追加数据 
$("#main_left_add").click(function(){ 
$.ajax({ 
type: "POST", 
dataType: "text", 
url: "weibo.ashx", 
data:"userid="+<%=hf.Value %>+"&touserid="+<%=hf1.Value %>+"&count="+count+"×="+times+"&type=2", 
success: function(data){ 
if(data=="没有数据") 
{ 
$("#main_left_add").css("display","none"); 
AddEffect(); 
} 
else 
{ 
$("#main_left_down").append(data); 
$("#main_left_add").html("点击加载更多..."); 
AddEffect(); 
} 
} 
}); 
//鼠标移动效果 
$("#main_left_add").mouseover(function(){ 
$(this).css("background-color","#e4eef8"); 
}); 
$("#main_left_add").mouseout(function(){ 
$(this).css("background-color","#f0f5f8"); 
}); 

这是前台js代码，下面我稍微的解释一下代码：count是定义的数据总数，定义两个div，一的div用来追加数据，一个div用来判断滚动条的位置，再建一个*.ashx文件用来处理程序并返回相应的数据，根据此数据我们肯定判断加载情况，滚动追加完成后我还多加了一个"点击加载更多的功能..."，此功能实现也与上面差不多...代码都在上面，供大家参考。
　　注意：为了防止滚动事件一直会被执行，所以才定义了一个loaded来控制滚动事件的执行。