jQuery学习第八课(ajax实例和插件编写模板及实例)

浏览数：35 / 时间：2015年06月09日

一、ajax实例

1.前端与程序员之间的数据约定

json(常用)，text文本，xml

2.处理不同种类数据的方法

    url:‘demo1.php?‘+Math.random(),
    type:‘get‘,
    success:function(data){
     $(‘div‘).html(data);
    }
   });
  });
</script>

3.ajax执行时的提示

4.ajax中的细节（编码和提交方式）

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo9</title>
<script src="jquery.js"></script>
</head>
<body>
<input type="button" value="获取数据" />
<div></div>
<span style="color:red"></span>
<script>
  $(‘input‘).click(function(){
   $.ajax({
    url:‘demo9.php?‘+Math.random(),
    type:‘get‘,
    timeout:1000,
    success:function(data){
     $(‘div‘).html(data);
    },
    error:function(jqXHR,textStatus,errrorThrown){
     if(errrorThrown==‘Not Found‘){
      $(‘span‘).html(‘你请求的地址不存在‘);
     }
     if(textStatus==‘timeout‘){
      $(‘span‘).html(‘请求超时，请刷新页面重新操作‘);
     }
    }
   });
  });

  $(document).ajaxError(function(){
   $(‘span‘).html(‘ajax请求发生错‘);
  });
</script>
</body>
</html>

-----------------------------二、jquery插件编写---------------------------------

类级别开发

类级别开发就是给jquery添加静态方法

1）添加新的全局函数

jQuery.myAlert=function(str){alert(str);};

2）使用$.extend(obj)

jQuery.extend({
myAlert1:function(str){
alert(str);
},
myAlert2:function(){
alert(2222222);
}
});

3）使用命名空间

jQuery.ns={
myAlert:function(str){
alert(str);
}
}

  /*$(‘input‘).click(function(){
       $.myAlert(a);
    });*/
  // var a = ‘我是通过extend()方法写的插件弹出的警告框‘

    /*$(‘input‘).click(function(){
       $.myAlert(a);
      });*/
   var a = ‘我是有命名空间的插件警告框‘
  $(‘input‘).click(function(){
   $.ns.myAlert(a);
  });
</script>
</body>
</html>

实例二：将元素放在中心

-------------------------demo2.html--------------------------

  div.css({
   ‘top‘:($(window).height()-div.height())/2,
   ‘left‘:($(window).width()-div.width())/2,
   ‘position‘:‘absolute‘
  });*/

  var div = $(‘#div1‘);
  $.ns.centerDiv(div).css(‘background‘,‘red‘);
</script>

</body>
</html>

--------------------------demo2.js---------------------------

$.ns={
centerDiv:function(obj){
  obj.css({
   ‘top‘:($(window).height()-div.height())/2,
   ‘left‘:($(window).width()-div.width())/2,
   ‘position‘:‘absolute‘
  });

  return obj;//如果没有这句，元素无法进行链式操作，demo2.html中的$.ns.centerDiv(div).css(‘background‘,‘red‘);将

报错，"Cannot call method ‘css‘ of undefined"
}
}

对象级别开发（常用）

给jquery对象添加方法

jquery插件开发模板：

;(function($){

$.fn.pluginName=function(options){
  var defaults = {
   //各种参数，各种属性
  }

var options = $.extend(defaults,options);

  this.each(function(){
   //实现功能的代码
  });

return this;
}

})(jQuery);

两个简单的插件实例：

----------------------------------------jquery-table-1.0.js----------------------------------

;(function($){

$.fn.table=function(options){
  var defaults = {
   //各种参数，各种属性
   evenRowClass:‘evenRow‘,
   oddRowClass:‘oddRow‘,
   currentRowClass:‘currentRow‘,
   eventType:‘mouseover‘,
   eventType2:‘mouseout‘
  }

var options = $.extend(defaults,options);

  this.each(function(){
   var _this = $(this);
   //偶数行
   _this.find(‘tr:even‘).addClass(options.evenRowClass);
   //奇数行
   _this.find(‘tr:odd‘).addClass(options.oddRowClass);

   /*_this.find(‘tr‘).mouseover(function(){
    $(this).addClass(options.currentRowClass);
   }).mouseout(function(){
    $(this).removeClass(options.currentRowClass);
   });*/

   _this.find(‘tr‘).bind(options.eventType,function(){
    $(this).addClass(options.currentRowClass);
   });

   _this.find(‘tr‘).bind(options.eventType2,function(){
    $(this).removeClass(options.currentRowClass);
   });

});
return this;
}

})(jQuery);

1---------------------------------------table.html--------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dth/xhtml1-transitional.dth">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>table</title>
<style>
  table{width: 100%;border: 1px solid #abcdef;border-collapse: collapse;}
  th,td{height: 28px;border: 1px solid #abcdef;text-align: center;}
  .evenRow1{background: #38a38a;}
  .oddRow1{background:#09f;}
  .currentRow1{background: yellow;}
</style>
<script src="jquery.js"></script>
<script src="jquery-table-1.0.js"></script>
<script>
  $(function(){
   $(‘#table1‘).table({
    evenRowClass:‘evenRow1‘,
    oddRowClass:‘oddRow1‘,
    currentRowClass:‘currentRow1‘,
    eventType:‘click‘
   });
  })
</script>
</head>
<body>

</table>
</body>
</html>

2-----------------------------------jquery.tab.1.0.js----------------------------------

;(function($){

$.fn.tab=function(options){
  var defaults = {
   //各种参数，各种属性
   currentClass:‘current‘,
   tabNav:‘.tabNav>li‘,
   tabContent:‘.tabContent>div‘,
   eventType:‘click‘
  }

var options = $.extend(defaults,options);

  this.each(function(){
   //实现功能的代码
   var _this =$(this);
   _this.find(options.tabNav).bind(options.eventType,function(){
    $(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);
    var index = $(this).index();
    _this.find(options.tabContent).eq(index).show().siblings().hide();
   });
  });
  return this;
}

})(jQuery);

-----------------------------------tab.html---------------------------------------------------

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>tab</title>
<script src="jquery.js"></script>
<script src="jquery.tab.1.0.js"></script>
<style>
  *{padding: 0;margin: 0;}
  body{margin: 50px;}
  .tabNav1 {list-style-type: none;}
  .tabNav1 li{float: left;width: 150px;height: 26px;line-height: 26px;text-align: center;margin-right: 3px;border: 1px solid #abcdef;border-bottom: none;cursor: pointer;}
  .tabNav1 li.current1{background: #abcdef;color: #fff;font-weight: 700;}
  .tabContent{clear: both;}
  .tabContent div{border: 1px solid #abcdef;display: none;width: 500px;height: 200px;}
</style>
<script>
  $(function(){
   $(‘.tab‘).tab({
    eventType:‘mouseover‘,
    tabNav:‘.tabNav1>li‘,
    currentClass:‘current1‘
   }).find(‘.tabNav1>li‘).css(‘background‘,‘red‘);
  })
</script>
</head>
<body>

<div class="tab">

  <ul class="tabNav1">
   <li class="current1">html</li>
   <li>css</li>
   <li>javascript</li>
  </ul>