]]>
]]>
注：(x)
web.config中要指定允许调用web服务?/span>
必须为Post方式来调用?/span>
WEB服务q回的ؓ(f)XMLԌ所以客L(fng)要{换ؓ(f)JSON再处理?/span>
[WebMethod]
public static string AjaxServiceTest(string str)
{
return string.Format("Hello,{0}", str);
}
[System.Web.Script.Services.ScriptService]
public class TestWebService : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld(string s)
{
return "Hello World" + s ;
}
}
function WebServiceMethod() {
$.ajax({
type: "POST",
contentType: "application/json;utf-8",
url: "TestWebService.asmx/HelloWorld",
data: "{s:""" + $("#inputName").val() + """}", //传webserviceҎ(gu)的参敎ͼs是方法的参数Q必M?nbsp;
success: function(data) {
//返回字W串转换为json对象
var json = null;
try {
json = eval('(' + data + ')');
} catch (e) {
alert("q回字符串不是json格式!");
return;
}
alert(json.d);
}
});
}
function PageAjaxServiceTest() {
$.ajax({
type: "POST",
contentType: "application/json;utf-8",
url: "PageService.aspx/AjaxServiceTest",
data: "{str:""" + $("#inputName").val() + """}", //传到.cs?rn)态方法的参数Qstr是方法的参数Q必M?nbsp;
success: function(data) {
//返回字W串转换为json对象
var json = null;
try {
json = eval('(' + data + ')');
} catch (e) {
alert("q回字符串不是json格式!");
return;
}
alert(json.d);
}
});
}
</script>
<div>
<input id="inputName" type="text" value="" />
<a href="#" onclick="WebServiceMethod();">调用web服务</a><br /><br />
<a href="#" onclick="PageAjaxServiceTest();">调用面?rn)态方?/span></a><br /><br />
</div>
?/span>Q?/span>
$.post("PagingService.asmx/GetLoginHtml", { s: "fda" },
function(data) {
$("#ajaxlogin").html(data);
alert(data);
}, "html");
]]>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.Services;
using System.IO;
using WebFunction;
namespace AstarMvc
{
/// <summary>
/// WsAjax 的摘要说?/span>
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用?Web 服务Q请取消对下行的注释?/span>
[System.Web.Script.Services.ScriptService]
public class WsAjax : System.Web.Services.WebService
{
[WebMethod(EnableSession = true)]
public string GetLoginHtml(string s)
{
ControlManager<WcUserLogin> viewManager = new ControlManager<WcUserLogin>();
var control = viewManager.LoadViewControl("~/WcUserLogin.ascx");
return viewManager.RenderView(control);
}
[WebMethod(EnableSession = true)]
public string GetLoginCheck(string userName, string userPwd, string checkCode)
{
ControlManager<WcUserLogin> viewManager = new ControlManager<WcUserLogin>();
var control = viewManager.LoadViewControl("~/WcUserLogin.ascx");
control.UserName = userName;
control.UserPwd = userPwd;
control.CheckCode = checkCode;
string msg = control.UserLogin() == "1" ? "LoginSucess" : "LoginError";
//string jsonData = "{ucresult:""" + viewManager.RenderView(control) + """,msgresult:""" + msg + """}";
return "<!--" + msg + "-->" + viewManager.RenderView(control);
}
[WebMethod(EnableSession = true)]
public string ExitLogin(string a)
{
ControlManager<WcUserLogin> viewManager = new ControlManager<WcUserLogin>();
var control = viewManager.LoadViewControl("~/WcUserLogin.ascx");
control.ExitLogin();
return viewManager.RenderView(control);
}
[WebMethod]
public string GetPagingData(int page)
{
ControlManager<PagingData> viewManager = new ControlManager<PagingData>();
var control = viewManager.LoadViewControl("~/PagingData.ascx");
control.PageIndex = page;
return viewManager.RenderView(control);
}
}
}
]]>
注：(x)jQuery都可替换?
览?/span>
jQuery.browser()Q浏览器内核标识。依?navigator.userAgent 判断?/span>
可用? safari opera msie mozilla
?Microsoft's Internet Explorer 览器中q回 true?
代码:$.browser.msie
仅在 Safari 中提C?"this is safari!" ?
代码:
if ($.browser.safari) {
alert("this is safari!");
}
jQuery.browser.version()Q浏览器渲染引擎版本?/span>
典型l果:
Internet Explorer: 6.0, 7.0
Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3
Opera: 9.20
Safari/Webkit: 312.8, 418.9
if ( $.browser.msie )
alert( $.browser.version );
jQuery.boxModel()Q当前页面中览器是否用标准盒模型渲染面
?Internet Explorer 怪癖模式QQuirksModeQ中q回 False?
代码:$.boxModel
数组和对象操?/span>
jQuery.each(obj,callback)Q通用例遍Ҏ(gu)Q可用于例遍对象和数l?/span>
代码:例遍数组Q同时用元素烦(ch)引和内容?
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
代码:例遍对象Q同时用成员名U和变量内容?
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
jQuery.extend(target,obj1,objN)Q?/span>用一个或多个其他对象来扩展一个对?/span>Q?/span>q回被扩展的对象
代码:合ƈ settings ?/span> optionsQ?/span>修改q返?/span> settings?/span>
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
l果:settings == { validate: true, limit: 5, name: "bar" }
代码:合ƈ defaults ?/span> options, 不修?/span> defaults?/span>
var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
l果:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }
jQuery.grep(array,callback,invert)Q?/span>使用qo(h)函数qo(h)数组元素
代码:qo(h)数组中小?0 的元素?/span>
$.grep( [0,1,2], function(n,i){
return n > 0;
});
l果:[1, 2]
代码:排除数组中大?0 的元素，使用W三个参数进行排除?/span>
$.grep( [0,1,2], function(n,i){
return n > 0;
}, true);
l果:[0]
jQuery.makeArray(obj)Q将cLl对象{换ؓ(f)数组对象
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
代码:qo(h)数组中小?0 的元素?/span>
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // 使用数组{函数
l果:
Fourth
Third
Second
First
jQuery.map(array,callback)Q?/span>一个数l中的元素{换到另一个数l中
代码:原数组中每个元素加 4 转换Z个新数组?/span>
$.map( [0,1,2], function(n){
return n + 4;
});
l果:[4, 5, 6]
代码:原数l中大于 0 的元素加 1 Q否则删除?
$.map( [0,1,2], function(n){
return n > 0 ? n + 1 : null;
});
l果:[2, 3]
代码:原数l中每个元素扩展Z个包含其本n和其值加 1 的数l，q{换ؓ(f)一个新数组?
$.map( [0,1,2], function(n){
return [ n, n + 1 ];
});
l果:[0, 1, 1, 2, 2, 3]
jQuery.unique(array)Q?/span>删除数组中重复元?/span>
代码:删除重复 div 标签?/span>
$.unique(document.getElementsByTagName("div"));
l果:<div>, <div>, ...
试操作
jQuery.isFunction(obj)Q测试对象是否ؓ(f)函数
代码:(g)是否ؓ(f)函数
function stub() {}
var objs = [
function () {},
{ x:15, y:20 },
null,
stub,
"function"
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$("span:eq( " + i + ")").text(isFunc);
});
l果: true,false,false,true,false
字符串操?/span>
jQuery.trim(str)Q?/span>L字符串v始和l尾的空?/span>
$.trim(" hello, how are you? "); l果:"hello, how are you?"
]]>
基本
show()Q显C隐藏的匚w元素
<p style="display: none">Hello</p>
代码:$("p").show()
show(speed,callback)Q显C所有匹配的元素Qƈ在显C完成后可选地触发一个回调函?/span>
<p style="display: none">Hello</p>
代码:$("p").show("slow");
代码://用迅速的动画隐藏的D落昄出来Q历?00毫秒?/span>
$("p").show("fast",function(){
$(this).text("Animation Done!");
});
代码://隐藏的D落用将q?U的旉昄出来
$("p").show(4000,function(){
$(this).text("Animation Done...");
});
hide()Q?/span>隐藏昄的元?/span>
$("p").hide()
hide(speed,callback)Q?/span>?/span>show(speed,callback)相反?/span>
toggle()Q?/span>切换元素的可见状态。如果元素是可见的，切换为隐藏的Q如果元素是隐藏的，切换为可见的
<p>Hello</p><p style="display: none">Hello Again</p>
代码:$("p").toggle()
l果:<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
滑动
slideDown(speed,callback)Q?/span>通过高度变化Q?/span>向下增大Q?/span>来动态地昄所有匹配的元素Q?/span>在显C完成后可选地触发一个回调函数?/span>
代码:?00毫秒~慢的将D落滑下
$("p").slideDown("slow");
代码:?00毫秒快速将D落滑下Q之后弹Z个对话框
$("p").slideDown("fast",function(){
alert("Animation Done.");
});
slideUp(speed,callback)Q通过不透明度的变化来实现所有匹配元素的淡出效果Qƈ在动d成后可选地触发一个回调函?/span>
代码:?00毫秒~慢的将D落滑上
$("p").slideUp("slow");
代码:?00毫秒快速将D落滑上Q之后弹Z个对话框
$("p").slideUp("fast",function(){
alert("Animation Done.");
});
slideToggle(speed,callback)Q通过高度变化来切换所有匹配元素的可见性，q在切换完成后可选地触发一个回调函?/span>
代码:$("p").slideToggle("slow");
代码:?00毫秒快速将D落滑上或滑下，之后弹出一个对话框
$("p").slideToggle("fast",function(){
alert("Animation Done.");
});
淡入淡出
fadeIn(speed,callback)Q?/span>通过不透明度的变化来实现所有匹配元素的淡入效果Q?/span>q在动画完成后可选地触发一个回调函?/span>
代码:?00毫秒~慢的将D落淡入
$("p").fadeIn("slow");
代码:?00毫秒快速将D落淡入Q之后弹Z个对话框
$("p").fadeIn("fast",function(){
alert("Animation Done.");
});
fadeOut(speed,callback)Q通过不透明度的变化来实现所有匹配元素的淡出效果Qƈ在动d成后可选地触发一个回调函?/span>
代码:?00毫秒~慢的将D落淡出
$("p").fadeOut("slow");
代码:?00毫秒快速将D落淡出Q之后弹Z个对话框
$("p").fadeOut("fast",function(){
alert("Animation Done.");
});
fadetTo(speed,opacity,callback)Q把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，q在动画完成后可选地触发一个回调函?/span>
代码:?00毫秒~慢的将D落的透明度调整到0.66Q大U?/3的可见度
$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);
代码:?00毫秒快速将D落的透明度调整到0.25Q大U?/4的可见度Q之后弹Z个对话框
$("p").fadeTo("fast", 0.25, function(){
alert("Animation Done.");
});
自定?/span>
animate(params[,duration[,easing[,callback]]])
说明Q?/span>用于创徏自定义动ȝ函数
params (Options) : 一l包含作为动d性和l值的样式属性和?qing)其值的集合
duration (String,Number) : (可?/span>) 三种预定速度之一的字W串("slow", "normal", or "fast")或表C动L长的毫秒数?/span>(?/span>Q?000)
easing (String) : (可?/span>) 要用的擦除效果的名U?/span>(需要插件支?/span>).默认jQuery提供"linear" ?/span> "swing".
callback (Function) : (可?/span>) 在动d成时执行的函?/span>
<button id="go"> Run</button>
<div id="block">Hello!</div>
代码:// 在一个动M同时应用三种cd的效?/span>
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
代码:让指定元素左右移?/span>
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
代码:?00毫秒内切换段落的高度和透明?
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
代码:?00毫秒段落移到l(f)eft?0的地方ƈ且完全清晰显C出来（透明度ؓ(f)1Q?
$("p").animate({
left: 50, opacity: 'show'
}, 500);
代码:一个?/span>“easein”函数提供不同动画样式的例子。只有用了(jin)插g来提供这?/span>“easein”函数Q这个参数才起作用?
$("p").animate({
opacity: 'show'
}, "slow", "easein");
animate(params,options)
params (Options) : 一l包含作为动d性和l值的样式属性和?qing)其值的集合
options (Options) : 一l包含动画选项的值的集合?/span>
选项
duration (String,Number) : (默认?/span>: "normal") 三种预定速度之一的字W串("slow", "normal", or "fast")或表C动L长的毫秒数?/span>(?/span>Q?000)
easing (String) : (默认?/span>: "swing") 要用的擦除效果的名U?/span>(需要插件支?/span>).默认jQuery提供"linear" ?/span> "swing".
complete (Function) : 在动d成时执行的函?/span>
step (Callback) : Template:APICallback
queue (Boolean) : (默认?/span>: true) 讑֮?/span>false此动Mq入动画队列 (jQuery 1.2中新?/span>)
CZ
W一个按钮按?jin)之后展CZ(jin)不在队列中的动画。在div扩展?0%的同时也在增加字体，一旦字体改变完毕后Q边框的动画才开始?
W二个按钮按?jin)之后就是一个传l的铑ּ动画Q即{前一个动d成后Q后一个动L?x)开?
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>
代码:
$("#go1").click(function(){
$("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});
$("#go2").click(function(){
$("#block2").animate( { width: "90%"}, 1000 )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});
代码:?/span>600毫秒切换D落的高度和透明?/span>
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, { duration: "slow" });
代码:?/span>500毫秒段落移?/span>left?/span>50的地方ƈ且完全清晰显C出?/span>Q?/span>透明度ؓ(f)1Q?
$("p").animate({
left: 50, opacity: 'show'
}, { duration: 500 });
代码:一个?/span>“easein”函数提供不同动画样式的例子。只有用了(jin)插g来提供这?/span>“easein”函数Q这个参数才起作用?
$("p").animate({
opacity: 'show'
}, { duration: "slow", easing: "easein" });
stop()Q?/span>停止所有在指定元素上正在运行的动画
<button id="go">Go</button> <button id="stop">STOP!</button>
<div class="block"></div>
<button id="go">Go</button> <button id="stop">STOP!</button>
<div class="block"></div>
代码:点击Go之后开始动?/span>,?/span>Stop之后?x)在当前位置停下?/span>
// Start animation
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// Stop animation when button is clicked
$("#stop").click(function(){
$(".block").stop();
});
queue()Q返回指向第一个匹配元素的队列(是一个函数数l?
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
span { color:red; }
</style>
<button id="show">Show Length of Queue</button><span></span><div></div>
代码:昄队列长度
$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();
queue(callback)Q在匚w的元素的动画队列中添加一个函?/span>
queue(queue)Q将匚w元素的动画队列用新的一个队列来代替(函数数组).
dequeue()Q从动画队列中移除一个队列函?/span>
]]>
Ajaxh
jQuery.ajax(options)
说明Q通过 HTTP h加蝲q程数据?/span>
$.ajax()q回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该对象，但特D情况下可用于手动终止请求?/span>
注意Q?如果你指定了(jin)dataType选项Q请保服务器返回正的MIME信息Q?如xmlq回 "text/xml")。错误的 MIME cd可能D不可预知的错误?/span>
$.ajax()只有一个参敎ͼ(x)参数 key/value 对象Q包含各配置?qing)回调函C息?/span>
1.2 中可以跨域加载JSON数据Q用时需数据类型设|ؓ(f)JSONP。用JSON 形式调用函数Ӟ?"myurl?callback=?" jQuery 自动替?为正的函数名，以执行回调函数。数据类型设|ؓ(f) "jsonp" ӞjQuery 自动调用回调函数?/span>
选项
async(Boolean):(默认: true)所有请求均为异步请求。如要发送同步请求，讄为false。注意，同步h锁住浏览器Q用户其它操作必ȝ待请求完成才可以执行?/span>
beforeSend(Function):发送请求前可修改XMLHttpRequest对象的函敎ͼ如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数?/span>
cache(Boolean):(默认: true) 讄为fals 不?x)从览器缓存中加蝲h信息?/span>
complete(Function): h完成后回调函?h成功或失败时均调?。参敎ͼ(x) XMLHttpRequest 对象Q成功信息字W串?
contentType(String): (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容~码cd。默认值适合大多数应用场合?/span>
data(Object,String): 发送到服务器的数据。将自动转换求字W串格式。GET h中将附加?URL 后。查?processData 选项说明以禁止此自动转换。必Mؓ(f)Key/Value 格式。如果ؓ(f)数组QjQuery 自动ؓ(f)不同值对应同一个名U。如 {foo:["bar1", "bar2"]} 转换?'&foo=bar1&foo=bar2'?/span>
dataType(String) : 预期服务器返回的数据cd。如果不指定QjQuery 自动根?HTTP ?MIME 信息q回 responseXML ?responseTextQƈ作ؓ(f)回调函数参数传递，可用?
"xml": q回 XML 文档Q可?jQuery 处理?/span>
"html": q回U文?HTML 信息Q包?script 元素?
"script": q回U文?JavaScript 代码。不?x)自动缓存结果?/span>
"json": q回 JSON 数据 ?/span>
"jsonp": JSONP 格式。?JSONP 形式调用函数Ӟ?"myurl?callback=?" jQuery 自动替?? 为正的函数名，以执行回调函数?/span>
error(Function) : (默认:自动判断 (xml ?html)) hp|时调用时间。参敎ͼ(x)XMLHttpRequest 对象Q错误信息，Q可能）(j)捕获的错误对象?/span>
global (Boolean) : (默认: true) 是否触发全局 AJAX 事g。设|ؓ(f) false 不?x)触发全局 AJAX 事gQ如 ajaxStart ?ajaxStop 可用于控制不同的Ajax事g?/span>
ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。?HTTP ?Last-Modified 头信息判断?/span>
processData (Boolean) : (默认: true) 默认情况下，发送的数据被转换为对?技术上讲ƈ非字W串) 以配合默认内容类?"application/x-www-form-urlencoded"。如果要发?DOM ?wi)信息或其它不希望{换的信息Q请讄?false?/span>
success (Function) : h成功后回调函数。参敎ͼ(x)服务器返回数据，数据格式?/span>
timeout (Number) : 讄h时旉Q毫U）(j)。此讄覆盖全局讄?/span>
type (String) : (默认: "GET") h方式 ("POST" ?"GET")Q?默认?"GET"。注意：(x)其它 HTTP hҎ(gu)Q如 PUT ?DELETE 也可以用，但仅部分览器支持?/span>
url (String) : (默认: 当前地址) 发送请求的地址?/span>
加蝲q执行一?JS 文g?
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
保存数据到服务器Q成功时昄信息?/span>
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
装入一?HTML |页最新版本?
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
同步加蝲数据。发送请求时锁住览器。需要锁定用户交互操作时使用同步方式?
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
发?XML 数据x务器。设|?processData 选项?falseQ防止自动{换数据格式?/span>
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
load( url, [data], [callback] ) Q?/span>载入q程 HTML 文g代码q插入至 DOM 中，默认使用 GET 方式 - 传递附加参数时自动转换?POST 方式?/span>
url (String) : h的HTML늚URL地址?
data (Map) : (可选参? 发送至服务器的 key/value 数据。如果有[data]参数Q就?x)自动{换ؓ(f)POST方式?/span>
callback (Callback) : (可选参? h完成?不需要是success?的回调函数?
CZ代码Q?/span>
$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html",
function (responseText, textStatus, XMLHttpRequest){
this;//在这里this指向的是当前的DOM对象Q即$(".ajax.load")[0]
//alert(responseText);//hq回的内?/span>
//alert(textStatus);//h状态：(x)successQerror
//alert(XMLHttpRequest);//XMLHttpRequest对象
});
注：(x)不知道ؓ(f)什么URL写绝对\径在FF下会(x)出错。下面的get()和post()CZ使用的是l对路径Q所以在FF下你会(x)出错q不?x)看到返回结果?/span>
<b>jQuery Links:</b><ul id="links"></ul>
代码:$("#links").load("/Main_Page #p-Getting-Started li");
代码:加蝲 feeds.html 文g内容?
$("#feeds").load("feeds.html");
代码:?POST 形式发送附加参数ƈ在成功时昄信息?/span>
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
jQuery.get(url,[data],[callback])Q?/span>通过q程 HTTP GET h载入信息
CZ代码Q?/span>
$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
//q回?data 可以?xmlDoc, jsonObj, html, text, {等.
this; // 在这里this指向的是Ajaxh的选项配置信息
alert(data);
//alert(textStatus);//h状态：(x)successQerror{等。当然这里捕捉不到errorQ因为error的时候根本不?x)运行该回调函?/span>
//alert(this);
});
h test.php |页Q忽略返回倹{?$.get("test.php");
$.get("test.php", { name: "John", time: "2pm" } );
昄 test.php q回?HTML ?XMLQ取决于q回??
$.get("test.php", function(data){
alert("Data Loaded: " + data);
});
昄 test.cgi q回?HTML ?XMLQ取决于q回?Q添加一l请求参数?
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
jQuery.getJSON(url,data,callback)Q?/span>通过 HTTP GET h载入 JSON 数据
?Flickr JSONP API 载入 4 张最新的关于猫的囄?
<div id="images"></div>
代码:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src",
item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
?test.js 载入 JSON 数据q显C?JSON 数据中一?name 字段数据?
$.getJSON("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
});
?test.js 载入 JSON 数据Q附加参敎ͼ昄 JSON 数据中一?name 字段数据?
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});
jQuery.getScript(url,callback)Q?/span>通过 HTTP GET h载入q执行一?JavaScript 文g?/span>
载入 jQuery 官方颜色动画插g 成功后绑定颜色变化动甅R?
<button id="go">» Run</button>
<div class="block"></div>
代码:
jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
function(){
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});
加蝲q执?test.js?$.getScript("test.js");
加蝲q执?test.js Q成功后昄信息?
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
jQuery.post(url,data,callback,type)Q?/span>通过q程 HTTP POST h载入信息
url (String) : 发送请求的URL地址.
data (Map) : (可? 要发送给服务器的数据Q以 Key/value 的键值对形式表示?
callback (Function) : (可? 载入成功时回调函?只有当Response的返回状态是success才是调用该方??/span>
type (String) : (可?官方的说明是QType of data to be sent。其实应该ؓ(f)客户端请求的cd(JSON,XML,{等)
CZ代码Q?/span>
Ajax.aspxQ?/span>
Response.ContentType = "application/json";
Response.Write("{result: '" + Request["Name"] + ",你好Q?q消息来自服务器)'}");
代码Q?/span>
$.post("Ajax.aspx", { Action: "post", Name: "lulu" },
function (data, textStatus){
// data 可以?xmlDoc, jsonObj, html, text, {等.
//this; // q个Ajaxh的选项配置信息Q请参考jQuery.get()说到的this
alert(data.result);
}, "json");
Ajax事g
ajaxComplete(callback)Q?/span>AJAX h完成时执行函数?/span>
$("#msg").ajaxComplete(function(request, settings){
$(this).append("<li>Request Complete.</li>");
});
ajaxError(callback)Q?/span>AJAX h发生错误时执行函?/span>
$("#msg").ajaxError(function(request, settings){
$(this).append("<li>Error requesting page " + settings.url +
"</li>");
});
ajaxSend(callback)Q?/span>AJAX h发送前执行函数
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li>Starting request at " + settings.url +
"</li>");
});
ajaxStart(callback)Q?/span>AJAX h开始时执行函数
$("#loading").ajaxStart(function(){
$(this).show();
});
ajaxStop(callback)Q?/span>AJAX hl束时执行函?/span>
$("#loading").ajaxStop(function(){
$(this).hide();
});
ajaxSuccess(callback)Q?/span>AJAX h成功时执行函?/span>
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<li>Successful Request!</li>");
});
其它
jQuery.ajaxSetup(options)Q?/span>讄全局 AJAX 默认选项
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
serialize()Q?/span>序列表表格内容ؓ(f)字符丌Ӏ?/span>
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );
serializeArray()Q?/span>序列化表格元?(cM '.serialize()' Ҏ(gu)) q回 JSON 数据l构数据
var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
$("#results").append(field.value + " ");
});
]]>
面载入
ready(fn)Q?/span>当DOM载入qA可以查询?qing)操U|l定一个要执行的函数?/span>
$(document).ready(function(){
// Your code here...
});
或者直接：(x)当然jQuery可以?
jQuery(function() {
// Your code using failsafe $ alias here...
});
事g处理
bind(type,data,fn)Q?/span>为每一个匹配元素的特定事gQ?/span>?/span>clickQ?/span>l定一个事件处理器函数
当每个段落被点击的时候，弹出其文本?/span>
$("p").bind("click", function(){
alert( $(this).text() );
});
可以在事件处理之前传递一些附加的数据?
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
通过q回false来取消默认的行ؓ(f)q止事件v泡?/span>
$("form").bind("submit", function() { return false; })
通过使用 preventDefault() Ҏ(gu)只取消默认的行ؓ(f)?
$("form").bind("submit", function(event){
event.preventDefault();
});
通过使用 stopPropagation() Ҏ(gu)只阻止一个事件v泡?/span>
$("form").bind("submit", function(event){
event.stopPropagation();
});
one(type,data,fn)Q?/span>为每一个匹配元素的特定事gQ像clickQ绑定一个一ơ性的事g处理函数
当所有段落被W一ơ点ȝ时候，昄所有其文本?
$("p").one("click", function(){
alert( $(this).text() );
});
trigger(type,data)Q?/span>在每一个匹配的元素上触发某cM?/span>
提交W一个表?
$("form:first").trigger("submit")
l一个事件传递参?
$("p").click( function (event, a, b) {
// 一个普通的点击事gӞa和b是undefinedcd
// 如果用下面的语句触发Q那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
下面的代码可以显CZ?Hello World"
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
triggerHandler(type,data)Q?/span>q个特别的方法将?x)触发指定的事gcd上所有绑定的处理函数。但不会(x)执行览器默认动?/span>
例：(x)如果你对一个focus事g执行?.triggerHandler()Q浏览器默认动作不?x)被触发Q只?x)触发你l定的动作?/span>
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/>
代码:
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){ $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });
unbind(type,data)Q?/span>bind()的反向操作，从每一个匹配的元素中删除绑定的事g
把所有段落的所有事件取消绑?/span>
$("p").unbind()
段落的click事g取消l定
$("p").unbind( "click" )
删除特定函数的绑定，函C为第二个参数传入
var foo = function () {
// code to handle some kind of event
};
$("p").bind("click", foo);
$("p").unbind("click", foo);
交互处理
hover(over,out)Q?/span>一个模仿?zhn)停事件的?gu)Q修正了(jin)使用mouseout事g的一个常见错误）(j)?/span>
over (Function) : 鼠标Ud元素上要触发的函?/span>
out (Function) : 鼠标Ud元素要触发的函数
鼠标(zhn)停的表格加上特定的c?
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
toggle(fn,fn)Q?/span>每次点击时切换要调用的函?/span>
fn (Function) : W奇数次点击时要执行的函数?/span>
fn (Function) : W偶数次点击时要执行的函数?/span>
对表格的切换一个类
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
ALL事g
blur()/blur(fn)
说明Q触发每一个匹配元素的blur事g/或者绑定一个事件处理函?/span>
使用Q?("p").blur(); /$("p").blur( function () { alert("Hello World!"); } );
change()/change(fn)
click()/click(fn)
dblclick()/dblclick(fn)
error()/error(fn)
focus()/focus(fn)
keydown()/keydown(fn)
keypress()/keypress(fn)
keyup()/keyup(fn)
load(fn)
mousedown(fn)
mousemove(fn)
mouserout(name)/blur(fn)
mouseover(fn)
mouseup(fn)
rasize(fn) 当文档窗口改变大时触发
$(document).resize(function(){
alert("Stop it!");
});
scroll(fn) 当滚动条发生变化时触?/span>
$(document).scroll( function() { /* ...do something... */ } );
select()/select(fn)
submit()/submit(fn)
$("form").submit( function () {
return false;
} );
upload(fn)
面卸蝲的时候弹Z个警告框: $(document).unload( function () { alert("Bye now!"); } );
]]>
q篇单，查看以前的文档时发现q有background,color{APIQ但是在1.2以后的版本中已经找不到这些了(jin)。还是直接用css()?...
CSS
css(name)Q?/span>讉KW一个匹配元素的样式属?/span>
例：(x)$("p").css("color");
css(properties)Q?/span>把一?/span>“?值对”对象讄为所有匹配元素的样式属性?/span>
?/span>Q?("p").css({ color: "#ff0011", background: "blue" });
如果属性名包含 "-"的话Q?/span>必须使用引号: $("p").css({ "margin-left": "10px", "background-color": "blue" });
css(name,value)Q?/span>在所有匹配的元素?/span>Q?/span>讄一个样式属性的?/span>Q?/span>数字自动{化ؓ(f)像素倹{?/span>
?/span>Q?("p").css("color","red");
位置
offset()Q?/span>获取匚w元素在当前视口的相对偏移Q返回的对象包含两个整Ş属性：(x)top ?left。此Ҏ(gu)只对可见元素有效
<p>Hello</p><p>2nd Paragraph</p>
代码:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
l果:<p>Hello</p><p>left: 0, top: 35</p>
宽高
height()Q?/span>取得W一个匹配元素当前计的高度?/span>QpxQ?/span>。可以用来获?/span>window ?/span> document 的高
代码:$("p").height();
代码:$(document).height(); //获取文档的高
height(val)Q?/span>为每个匹配的元素讄CSS高度(hidth)属性的倹{如果没有明指定单位（如：(x)em?Q，使用px
代码:$("p").height(20);
width()Q?/span>取得W一个匹配元素当前计的宽度|pxQ。可以用来获取window ?document 的高
width(val)Q?/span>为每个匹配的元素讄CSS宽度(width)属性的倹{?/span>
]]>
]]>
注：(x)其中jQuery()可替换ؓ(f)快捷方式$()Q如?被其它对象占用，可?span style="color: red">jQuery.noConflict()函数取消快捷方式?/span>
核心(j)函数
$(expr,[context])/jQuery(expression,[context])
该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此ؓ(f)基础
expression (String)用来查找的字W串,context(Element, jQuery)(可?作ؓ(f)待查扄DOM元素集、文档或 jQuery 对象?br />
例子
<p>one</p>
<div><p>two</p></div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码?qing)功能?x)
function jq(){
alert($("div>p").html());
}
当点击id为test的元素时Q弹出对话框文字为twoQ即div标签下p元素的内?
function jq(){
$("<div><p>Hello</p></div>").appendTo("body");
}
当点击id为test的元素时Q向body中添?/span>“<div><p>Hello</p></div>”
context
在文档的W一个表单中Q查找所有的单选按?? type gؓ(f) radio ?input 元素)?$("input:radio", document.forms[0]);
在一个由 AJAX q回?XML 文档中，查找所有的 div 元素?("div", xml.responseXML);
$(elem)
限制jQuery作用于一个特定的dom元素Q这个函C接受xml文档和windows对象
elemQ通过jQuery对象压羃的DOM元素
例子
<p>one</p>
<div><p>two</p></div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码?qing)功能?x)
function jq(){
alert($(document).find("div>p").html());
}
当点击id为test的元素时Q弹出对话框文字为twoQ即div标签下p元素的内?
function jq(){
$(document.body).background("black");
}
q行Q当点击id为test的元素时Q背景色变成黑色
$(elems)
限制jQuery作用于一l特定的DOM元素
elemQ一l通过jQuery对象压羃的DOM元素
例子
<form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
</form>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码?qing)功能?x)
function jq(){
$(form1.elements).hide();
}
当点击id为test的元素时Q隐藏form1表单中的所有元素?/span>
$(fn)/jQuery(callback)
$(document).ready()的简写，当文档全部蝲入时执行函数。可以有多个$(fn)当文档蝲入时Q同时执行所有函敎ͼ
fn(Function):当文档蝲入时执行的函敎ͼ
例子
$(function() {
alert($(document.body).html());
});
当文档蝲入时背景变成黑色Q相当于onLoad?/span>
$(obj)
复制一个jQuery对象
obj (jQuery): 要复制的jQuery对象
例子
<p>one</p>
<div><p>two</p></div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码?qing)功能?x)
function jq(){
var f = $("div");
alert($(f).find("p").html())
}
当点击id为test的元素时Q弹出对话框文字为twoQ即div标签下p元素的内宏V?/span>
$("<input>").attr("type", "checkbox");// 在IE中无?微Y规定 <input>元素的type只能写一?/span>
$("<input type='checkbox'>");// 在IE中有?
对象讉K
each(callback)
以每一个匹配的元素作ؓ(f)上下文来执行一个函数。每ơ执行传递进来的函数Ӟ函数中的this关键字都指向一个不同的DOM元素Q每ơ都是一个不同的匚w元素Q。在每次执行函数Ӟ都会(x)l函C递一个表CZ为执行环境的元素在匹配的元素集合中所处位|的数字g为参敎ͼ从零开始的整ŞQ。返?'false' 停止@?像在普通的循环中?break')。返?'true' 跌下一个@?像在普通的循环中?continue')?/span>
对于每个匚w的元素所要执行的函数
例子
<img/><img/>
jQuery代码
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
l果:<img src="test0.jpg" /><img src="test1.jpg" />
可以使用 $(this) 函数得到 jQuery对象?
jQuery 代码:
$("img").each(function(){
$(this).toggleClass("example");
});
可以使用 'return' 来提前蟩?each() 循环?
<button>Change colors</button>
<span></span><div></div><div></div><div></div> <div></div><div id="stop">Stop here</div><div></div><div></div><div></div>
jQuery代码
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
eq(pos)
减少匚w对象C个单独得dom元素
pos (Number): 期望限制的烦(ch)引，?开?br />
例子
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码?qing)功能?x)
function jq(){
alert($("p").eq(1).html())
}
当点击id为test的元素时Qalert对话框显C：(x)So is thisQ即W二?lt;p>标签的内?/span>
get()/get(num)
获取匚w元素Qget(num)q回匚w元素中的某一个元?br />
get(Number): 期望限制的烦(ch)引，?开?br />
例子
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码?qing)功能?x)
function jq(){
alert($("p").get(1).innerHTML);
}
当点击id为test的元素时Qalert对话框显C：(x)So is thisQ即W二?lt;p>标签的内?/span>
注意get和eq的区别，eqq回的是jQuery对象Qgetq回的是所匚w的dom对象Q所有取$("p").eq(1)对象的内容用jQueryҎ(gu)html()Q而取$("p").get(1)的内容用innerHTML
index(obj)
q回对象索引,如果扑ֈ?jin)匹配的元素Q从0开始返回；如果没有扑ֈ匚w的元素，q回-1?br />
obj(Object)要查扄对象
例子
<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码?qing)功能?x)
function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}
当点击id为test的元素时Q两ơ弹出alert对话框分别显C?Q?
size()/Length
jQuery对象中元素的个数,与jQuery对象?length' 属性一致?/span>
例子
<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码?qing)功能?x)
function jq(){
alert($("img").length);
}
当点击id为test的元素时Q弹出alert对话框显C?Q表C找C个匹配对?/span>
多库共存
jQuery.noConflict()
q行q个函数变?的控制权让渡l第一个实现它的那个库?/span>
q有助于保jQuery不会(x)与其他库?对象发生冲突。在q行q个函数后，只能用jQuery变量讉KjQuery对象。例如，在要用到$("div p")的地方，必L成jQuery("div p")?
CZ
jQuery.noConflict();
jQuery("div p").hide();// 使用 jQuery
$("content").style.display = 'none'; // 使用其他库的 $()
恢复使用别名$Q然后创建ƈ执行一个函敎ͼ在这个函数的作用域中仍然?作ؓ(f)jQuery的别名来使用。在q个函数中，原来?对象是无效的。这个函数对于大多数不依赖于其他库的插g都十分有效?
jQuery.noConflict();
(function($) {
$(function() {
//使用 $ 作ؓ(f) jQuery 别名的代?/span>
});
})(jQuery);
// 其他?$ 作ؓ(f)别名的库的代?
创徏一个新的别名用以在接下来的库中使用jQuery对象?
var j = jQuery.noConflict();
j("div p").hide();// Z jQuery 的代?/span>
$("content").style.display = 'none'; // Z其他库的 $() 代码
jQuery.noConflict(extreme)
?和jQuery的控制权都交q给原来的库。用之前误(g)虑清楚!
q是相对于简单的 noConflict Ҏ(gu)更极端的版本Q因完全重新定义jQuery。这通常用于一U极端的情况Q比如你惌jQuery嵌入一个高度冲H的环境。注?调用此方法后极有可能D插g失效?/span>
extreme (Boolean):传入true来允许彻底将jQuery变量q原
完全jQueryUd一个新的命名空间?
var dom = {};
dom.query = jQuery.noConflict(true);
l果:
dom.query("div p").hide();// ?jQuery 的代?/span>
$("content").style.display = 'none';// 另一个库 $() 的代?/span>
jQuery("div > p").hide(); // 另一个版?jQuery 的代?/span>
]]>
从网上找?jin)些资料和?sh)子书。这个系列是我看qjQuery1.2API中文文档后的W记。希望对大家有帮助～
jQuery
jQuery库ؓ(f)共同?/span>web脚本提供?jin)一U通用的抽象层Qƈ且它几乎?/span>44U脚本环境都是有用的。它以插件的形式持箋地通过开发加入新的功能。这核心(j)的特性，满以下的需?/span>:
获取面的部分内容，不?/span>JavaScript库，必须写很多行代码来遍?/span>DOM?wi)，q定位一?/span>HTML文档的指定部分?/span>jQuery提供?jin)一个强大而有效的选择机制来返回被(g)查或者被操作的文档?/span>
修改面的外观，CSS提供?jin)一个Ş响文档渲染的张大Ҏ(gu)Q当web览器不支持同样的标准时Q它却是不尽人意的?/span>jQuery能I补这个差距，提供?jin)跨所有浏览器的同L(fng)标准的支持。另外，即ə面被渲染后Q?/span>jQUery仍可改变文档一部分中的cL者独立的样式属性?/span>
修改面的内容，不仅限外观的改变Q?/span>jQueryq可以用很少的按键就可修Ҏ(gu)档的内容本n。文本可改变Q图像可插入或替换，列表可重新排序或者整?/span>HTMLl构可被重写和扩展?/span>
在页面中响应用户的交互，当它们发生时Q如果我们不能控Ӟ即ɭ周密蛟强大的行ؓ(f)也是没有用的.jQUery库提供了(jin)一个优雅的Ҏ(gu)来截取多U事Ӟ例如用户单击链接Q我
们不需要将事g句柄h?/span>HTML代码中。同Ӟ事g句柄API删除览器不一致性，往往?x)?/span>web开发者感到很?ch)恼?/span>
l页面加上动画，Z(jin)有效地执行交互行为，设计师必L供可视的反馈l用PjQuery库提供了(jin)一l效果来推进它，效果如揭Ԍ空来，也可定制一套新?/span>T兗?/span>
无刷新返回服务器端的信息Q这个代码模式己l以^synchronous JavaScript and XML(AJAX)著称?jin)?/span>;仁协?/span>web开发者制作可响应的功能丰富的|站?/span>
化共同的JavaScriptdQ除?/span>jQuery指定的文档的所有特性外Q这个库q提供了(jin)改进基本?/span>JavaScriptl构Q如U代和数l操作?/span>
下蝲Q?/span>http://www.cnblogs.com/lyj/archive/2008/11/08/1329713.html
?/span>VS08中添加智能提C：(x)http://www.cnblogs.com/lyj/archive/2008/11/08/1329713.html
引入Q?/span><script type="text/javascript" src="js/jquery-1.2.6.js"></script> 或用 <ScriptManager>引入
]]>