一、ajax实例
1.前端与程序员之间的数据约定
json(常用)，text文本，xml
2.处理不同种类数据的方法
<script>
$('input').click(function(){
$.ajax({
//url:'test.txt?'+Math.random(),
url:'demo1.php?'+Math.random(),
type:'get',
success:function(data){
$('div').html(data);
}
});
});
</script>
<script>
$('input').click(function(){
var ul = $('#info>ul');
$.ajax({
url:'demo2.php?'+Math.random(),
type:'get',
dataType:'xml',
success:function(xml){
$(xml).find('title').each(function(){
//操作xml文件时，html()方法不可用
//alert($(this).text())
ul.append('<li>'+$(this).text()+'</li>');
});
}
});
});
</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);
}
}
<!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>demo1</title>
<script src="jquery.js"></script>
<script src="demo1.js"></script>
</head>
<body>
<input type="button" value="点击" />
<script>
// var a = '我是通过调用插件参数参数参数参数参数弹出的警告框'
/*$('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--------------------------
<!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>demo2</title>
<style>
#div1{width: 150px;height: 150px;background: #f90;}
</style>
<script src="jquery.js"></script>
<script src="demo2.js"></script>
</head>
<body>
<div id="div1"></div>
<script>
/*var div = $('#div1');
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>
<!-- 需求：
开发一个插件：要求奇数行的颜色是#38a38a，偶数行的颜色是#09f,当鼠标移动到当前行的时候，当前行的颜色变成yellow，当鼠标移开时还是显示原来的颜色 -->
<table id="table1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
<th>体重</th>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>187</td>
<td>70KG</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>170</td>
<td>60KG</td>
</tr>
<tr>
<td>小四</td>
<td>30</td>
<td>148</td>
<td>40KG</td>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>187</td>
<td>70KG</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>170</td>
<td>60KG</td>
</tr>
<tr>
<td>小四</td>
<td>30</td>
<td>148</td>
<td>40KG</td>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>187</td>
<td>70KG</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>170</td>
<td>60KG</td>
</tr>
<tr>
<td>小四</td>
<td>30</td>
<td>148</td>
<td>40KG</td>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>187</td>
<td>70KG</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>170</td>
<td>60KG</td>
</tr>
<tr>
<td>小四</td>
<td>30</td>
<td>148</td>
<td>40KG</td>
</tr>
</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>
<div class="tabContent">
<div style="display:block">html</div>
<div>css</div>
<div>javascript</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
jquery ajax实例点击按钮触发Ajax loading jquery ajax实例点击按钮触发Ajax loading jquery ajax实例点击按钮触发Ajax loading
其中包含6款Ajax分页Demo，文字分页、图片分页都可以。具有一定特效、很炫。基本已经满足各种web分页开发了。
这是一个学习jquery-ajax的实例，实例中应用到了bean -json的转化， 页面上应用到了jqury如何解析返回的json数据。
一个完整的jquery+ajax传送请求的实例
jQuery Ajax 实例 全解析; jQuery Ajax 实例 全解析;
PHP jQuery 可拖动的Ajax购物车实例，带有提示功能的商品展示 ，用鼠标拖动商品到购物车中，即可选中商品，购物车程序可根据 拖入的产品数量进行统计，自动给出价格。同时对不满意的商品， 可随时从购物车中移除...
jquery 文本框 自动补全 ajax autocomplete 完整实例
在VS环境下使用。C#代码。这是我总结的js和JQUERY使用ajax调用webservice和ashx(一般处理程序)的代码。还有使用AjaxPro第三方控件的使用的练习。
基于JQuery框架的AJAX实例代码 $.ajax $.post $.get 三种方式传递参数
Vs2005C#下使用Jquery实现的Ajax简单实例
关于在c# .net 框架下详细讲述了几种采用jQuery ajax的数据传输方法并配有案例，有文档教程以及可运行的源码
jquery官方插件ajax file upload使用的实例，用asp.net做的服务器端。具体说明请看这里http://www.cnblogs.com/luq885/archive/2007/11/15/959749.html
jquery实现ajaxjquery实现ajaxjquery实现ajaxjquery实现ajaxjquery实现ajaxjquery实现ajaxjquery实现ajaxjquery实现ajax
jquery中ajax的用法实例 关于Jquery异步刷新的代码实例
JQuery打造PHP的AJAX表单提交实例
基于jquery的ajax功能，对ASP网站的数据库进行无刷新操作，包括对数据库内容进行添加，删除，修改，分页
jQuery Validation表单验证插件实例合集，是锋利的JQuery第七章中的一个典型实例，一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法，一共包含了7个...
特别实用的Jquery Ajax 实例,希望能帮助到你