黑马程序员技术交流社区

标题: 模仿无刷新分页效果 [打印本页]

作者: ┾——黑马 时间: 2013-9-15 22:24
标题: 模仿无刷新分页效果
<!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">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
      //加载第一页的内容
      function load1() {
         $("#table1 tr").remove();
         var arr = { "百度": "http://www.baidu.com", "谷歌": "http://www.google.com", "新浪": "http://www.sina.com.cn" };
         $.each(arr, function (key, value) {
            $("#table1").append($("<tr><td>" + key + "</td><td><a href='" + value + "'>" + value + "</a></td></tr>"));
         })
      }

      //加载第二页的东西
      function load2() {
         $("#table1 tr").remove();
         var arr = { "搜狗": "http://www.baidu.com", "大象": "http://www.google.com", "新浪": "http://www.sina.com.cn" };
         $.each(arr, function (key, value) {
            $("#table1").append($("<tr><td>" + key + "</td><td><a href='" + value + "'>" + value + "</a></td></tr>"));
         })
      }

      //页面加载完毕后执行
      $(function () {
         load1();
         $(".a1").click(function () {
            load1();
         });

         $(".a2").click(function () {
            load2();
         });
      })
</script>
</head>
<body>
<table id="table1">
</table>
<a href="javascript:void(null);" class="a1">1</a>
<a href="javascript:void(null);" class="a2">2</a>
</body>
</html>

在上面有一个知识点需要注意：$.each(arr, function (key, value) {alert(key+"  "+value)});这里输出key指的数组的下标或者dictionary的key，value指的就是数组的值！如果这种情况$.each(arr, function (item) {alert(item)});这样输出的是key的值；如果是这种情况$.each(arr, function () {alert(this)});这样输出的是value，也就是数组的值.而且不仅可以使用$.each()这种方式调用，而且还可以用：jQuery对象.each（）的方式进行调用，这里each()里面只需要写成each(function(){})这样的形式就行了，其他的该怎么写还是怎么写，规则跟上面说的有一个参数两个参数和没有的参数输出的值的规则是一样的！

作者: ┾——黑马 时间: 2013-9-15 22:26
{:soso_e105:}{:soso_e105:}虽然不怎么全面但是在努力啊，给分啊...三个贴了啊

作者: 七里香 时间: 2013-9-15 22:43
哇哦，这个以前做过的，不过现在忘得差不多了，我以前是用javascript写的，看看。{:soso_e100:}

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2