JQuery中的load()、$.get()和$.post()详解

 jquery  JQuery中的load()、$.get()和$.post()详解已关闭评论
1月 182018
 

文章解析的比较清楚,来自: http://blog.csdn.net/csdn_yudong/article/details/52537609

load()

1.载入HTML文档 
load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。 
它的结构为:

load(url [,data][,callback])
参数名称 类型 说明
url String 请求HTML页面的URL地址
data(可选) Object 发送至服务器的key/value数据
callback(可选) Function 请求完成时的回调函数,无论请求成功或失败

首先创建一个test.html文件,用于被load()方法加载并追加到页面中。

test.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"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div class="comment"> <h6>张三:</h6> <p class="para">沙发.</p> </div> <div class="comment"> <h6>李四:</h6> <p class="para">板凳.</p> </div> <div class="comment"> <h6>王五:</h6> <p class="para">地板.</p> </div> </body> </html> 

然后再建一个demo1.html,在上面添加两个元素:<button>用来触发Ajax事件,id为”resText”的元素用来显示追加的HTML内容。HTML代码如下:

demo1.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"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <!--   引入jQuery --> <script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script> <script language="javascript" type="text/javascript"> $(function(){ $("#send").click(function(){ $("#resText").load("test.html");
      })
  }) </script> </head> <body> <input type="button" id="send" value="Ajax获取" /> <div class="comment"> 已有评论: </div> <div id="resText" ></div> </body> </html> 

显然,load()方法完成了原本很繁琐的工作。开发人员只需要使用jQuery选择器为HTML片段指定目标位置,然后将要加载的文件的URL作为参数传递给load()方法即可。当单击按钮后,test.html页面的HTML内ring就会被加载并插入主页面<div id=”resText”></div>的元素中。

2.筛选载入的HTML文档 
上面的例子是将test.html页面中的内容都加载到id为”resText”的元素里。如果只需要加载test.html页面内的某些元素,那么可以使用load()方法的URL参数来达到目的。通过为URL参数指定选择符,就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。

load()方法的URL参数的语法结构为:“url selector”。注意,URL和选择器之间有一个空格。

例如只需要加载test.html页面中class为”para”的内容,可以将demo1.html中的

$("#resText").load("test.html");

改为

$("#resText").load("test.html  .para");

3.传递方法 
load()方法的传递方式根据参数data来自动指定。如果没有参数传递,则采用GET方式传递;反之,则会自动转换为POST方法。

//无参数传递,则是GET方式
$('#resText').load('test.php',function(){
    //... });
//有参数传递,则是POST方式
$('#resText').load('test.php',{name:'rain',age:'22'},function(){
    //... });

4.回调函数 
对于必须在加载完成后才能继续的操作,load()方法提供了回调函数(callback),该函数有3个参数,分别代表请求返回的内容请求状态XMLHttpRequest对象,jQuery代码如下:

$("#resText").load("test.html",function (responseText, textStatus, XMLHttpRequest){ alert(responseText); //请求返回的内容 alert(textStatus); //请求状态:success,error alert(XMLHttpRequest); //XMLHttpRequest对象 });

在load()方法中,无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数(callback)就被触发。


load()方法通常用来从Web服务器上获取静态的数据文件,然后这并不能体现Ajax的全部价值。在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()或者$.ajax()方法。


$.get()

$.get()方法使用GET方式来进行异步请求。 
它的结构为:

$.get(url[,data][,callback][,type])
参数名称 类型 说明
url String 请求的HTML页的URL地址
data(可选) Object 发送至服务器的key/value数据会作为QueryString附加到请求URL中
callback(可选) Function 载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法
type(可选) String 服务器端返回内容的样式,包括xml、html、script、json、text和_default

我们用$.get()来实现评论的功能:

get1.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"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <!--   引入jQuery --> <script src="../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("#send").click(function(){ $.get("get1.php", { 
                        username :  $("#username").val() , 
                        content :  $("#content").val()  
                    }, function (data, textStatus){ $("#resText").html(data); // 把返回的数据添加到页面上 }
            );
       })
    }) //]]> </script> </head> <body> <form id="form1" action="#"> <p>评论:</p> <p>姓名: <input type="text" name="username" id="username" /></p> <p>内容: <textarea name="content" id="content" rows="2" cols="20"></textarea></p> <p><input type="button" id="send" value="提交"/></p> </form> <div class='comment'>已有评论:</div> <div id="resText" > </div> </body> </html> 

get1.html向get1.php发送get请求,服务器端get1.php的代码如下:

<?php 
    header("Content-Type:text/html; charset=utf-8");
    echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
?> 

由于服务器端get1.php返回的数据格式是一段HTML片段,因此并不需要经过处理就可以将新的HTML数据插入到主页面中。 
我们再来看一下get.html中的核心代码jQuery是如何完成get请求的:

$(function(){ $("#send").click(function(){ $.get("get1.php", { 
                        username :  $("#username").val() , 
                        content :  $("#content").val()  
                    }, function (data, textStatus){ $("#resText").html(data); // 把返回的数据添加到页面上 }
            );
       })
    })

我们可以看到在回调函数中,我们直接将返回回来的data(也就是HTML片段)直接在html中使用。

HTML片段实现起来只需要很少的工作量,但这种固定的数据结构并不一定能够在其他的Web应用程序中得到重用。

XML文档

服务器端是如何接收数据然后返回XML的呢? 
代码如下:

get2.php 
<?php 
    header("Content-Type:text/xml; charset=utf-8");
    echo "<?xml version='1.0' encoding='utf-8'?>".
         "<comments>".
         "<comment username='{$_REQUEST['username'] }' >".
         "<content>{$_REQUEST['content']}</content>".
         "</comment>".
         "</comments>";
?> 

注意:由于服务器端返回的数据格式是XML文档,因此需要在服务端设置Content-Type类型,代码如下:

header("Content-Type:text/xml; charset=utf-8");

对于服务器端返回的数据是XML格式的情况,我们需要对返回的数据进行处理,才能应用到HTML中,jQuery有强大的DOM处理能力,处理XML文档与处理HTML文档一样,也可以使用常规的attr()、find()、filter()以及其他方法。jQuery代码如下:

$(function(){ $("#send").click(function(){ $.get("get2.php", { 
      username :  $("#username").val() , 
      content :  $("#content").val()  
    }, function (data, textStatus){ var username = $(data).find("comment").attr("username"); var content = $(data).find("comment content").text(); var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
      $("#resText").html(txtHtml); // 把返回的数据添加到页面上 },'XML');
  });
})

返回数据格式为XML文档的过程实现起来比HTML片段要稍微复杂些,但XML文档的可移植性是其他数据格式无法比拟的,因此以这种格式提供的数据的重要性将极大提高。不过,XML文档体积相对较大,与其他文件格式相比,解析和操作它们的速度要慢一些。

JSON文件 
之所以会出现这种数据格式的文件,很大程度上是因为XML文档体积大和难以解析。JSON文件和XML文档一样,也可以方便的被重用。而且,JSON文件非常简洁,也容易阅读。

服务器端是如何接收数据然后返回JSON的呢? 
代码如下:

get3.php 
<?php 
    header("Content-Type:text/html; charset=utf-8");
    echo "{ \"username\" : \"{$_REQUEST['username']}\" , \"content\" : \"{$_REQUEST['content']}\"}" ?>

JSON的格式还是比较严格的,所以格式不能写错了。 
由于服务器端返回的数据格式是JSON文件,因此需要对返回的数据进行处理之后,才可以将新的HTML数据添加到主页面中。HTML文件其他部分还是一样,要修改的地方是jQuery部分,jQuery代码如下:

$(function(){ $("#send").click(function(){ $.get("get3.php", { 
                username :  $("#username").val() , 
                content :  $("#content").val()  
            }, function (data, textStatus){ var username = data.username; var content = data.content; var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
        $("#resText").html(txtHtml); // 把返回的数据添加到页面上 },"json");
       });
    })

在上面的代码中,将$.get()方法的第4个参数(type)设置为”json”来代表期待服务器返回的数据格式。

对于服务器端返回HTML片段、XML数据、JSON数据的优缺点进行分析,可以的得知在不需要与其他应用程序共享数据的时候,使用HTML片段来提供返回数据一般来说是最简单的;如果数据需要重用,那么JSON文件是不错的选择,它在性能和文件大小方面具有优势,它是Web服务器领域的“世界语”,我们推荐使用JSON。

$.post()

它与$.get()方法的结构和使用方式都相同,不过它们之间仍然有以下区别。

  • GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTPP消息的实体内容发送给Web服务器。当然,在Ajax请求中,这种区别对用户是不可见的
  • GET方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制)
  • GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说就可以避免这些问题。
  • GET方式和POST方式传递的数据在服务器端的获取也不相同。在PHP中,GET方式的数据可以用$_GET[]获取,而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。

由于POST和GET方式提交的所有数据都可以通过$_REQUEST[]来获取,因此只需要改变jQuery函数,就可以将程序在GET请求和POST请求之间切换。 
代码如下:

$(function(){ $("#send").click(function(){ $.post("post1.php", { 
      username :  $("#username").val() , 
      content :  $("#content").val()  
    }, function (data, textStatus){ $("#resText").html(data); // 把返回的数据添加到页面上 });
  })
})

load()、$.get()和$.post(),我们可以发现,$.get()和$.post()方法是jQuery中的全局函数,而在此之前讲的load()是对jQuery对象进行操作的。

jQuery事件命名空间

 javascript  jQuery事件命名空间已关闭评论
12月 232016
 

命名控件是event对象上的一个属性

官网栗子:

 

 

使用场景

 

我们知道在JavaScript中对同一DOM元素使用传统的绑定模型绑定事件,后绑定的事件会覆盖先绑定的事件,也就是某个类型的事件只能有一个处理函数;而使用jQuery则可以绑定多个事件,无论前后绑定的事件都能被触发。(使用原生js,现代绑定方法也可以,addEventListener)

 

例:

 

<button id=”button1″>按钮</button>

JavaScript传统绑定方法:

 

?
1
2
3
4
5
6
7
var button1 = document.getElementById(“button1”);
button1.onclick = function(){
alert(“handler1”);
};
button1.onclick = function(){
alert(“handler2”);
};

 

只会弹出“handler2”一个提示框

jQuery绑定方法:

 

?
1
2
3
4
5
6
7
$(“#button”).on(“click”,handler1).on(“click”,handler2);
function handler1(){
         alert(“handler1”);
     }
function handler2(){
         alert(“handler2”);
}

 

如果想要解绑其中的一个事件处理函数,可以这样:

 

$(“#button”).off(“click”,handler1);

如果绑定的事件处理函数都是匿名函数的话则无法实现,例如:

 

?
1
2
3
$(“#button”).on(“click”,function(){
alert(“handler2”);
});

 

使用事件命名空间

?
1
2
3
4
5
$(“#button”).on(“click.name1”,function(){
    alert(“handler1”);
}).on(“click.name2”,function(){
    alert(“handler2”);
});

 

这样就可以解绑具体的函数了:

 

$(“#button”).off(“click.name2”);

命名空间和事件好比人的姓和名

 

命名空间 <==> 姓

 

事件 <==> 名字

转自:http://www.2cto.com/kf/201508/439264.html

JQuery:常用方法一览

 未分类  JQuery:常用方法一览已关闭评论
8月 292016
 

JQuery:常用方法一览 , 来自网络搜集

Attribute:
$(”p”).addClass(css中定义的样式类型); 给某个元素添加样式
$(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性
/值,参数是map
$(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/
$(”img”).attr(”title”, function() { return this.src }); 给某个元素添加属性/
$(”元素名称”).html(); 获得该元素内的内容(元素,文本等)
$(”元素名称”).html(”
<b>new stuff</b>”); 给某元素设置内容
$(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值
$(”元素名称”).removeClass(”class”) 给某元素删除指定的样式
$(”元素名称”).text(); 获得该元素的文本
$(”元素名称”).text(value); 设置该元素的文本值为value
$(”元素名称”).toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式
$(”input元素名称”).val(); 获取input元素的值
$(”input元素名称”).val(value); 设置input元素的值为value
Manipulation:
$(”元素名称”).after(content); 在匹配元素后面添加内容
$(”元素名称”).append(content); 将content作为元素的内容插入到该元素的后面
$(”元素名称”).appendTo(content); 在content后接元素
$(”元素名称”).before(content); 与after方法相反
$(”元素名称”).clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理)
$(”元素名称”).empty() 将该元素的内容设置为空
$(”元素名称”).insertAfter(content); 将该元素插入到content之后
$(”元素名称”).insertBefore(content); 将该元素插入到content之前
$(”元素”).prepend(content); 将content作为该元素的一部分,放到该元素的最前面
$(”元素”).prependTo(content); 将该元素作为content的一部分,放content的最前面
$(”元素”).remove(); 删除所有的指定元素
$(”元素”).remove(”exp”); 删除所有含有exp的元素
$(”元素”).wrap(”html”); 用html来包围该元素
$(”元素”).wrap(element); 用element来包围该元素
Traversing:
add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings(expr)
Core:
$(html).appendTo(”body”) 相当于在body中写了一段html代码
$(elems) 获得DOM上的某个元素
$(
function(){……..}); 执行一个函数
$(”div 
> p”).css(”border”, “1px solid gray”); 查找所有div的子节点p,添加样式
$(”input:radio”, document.forms[
0]) 在当前页面的第一个表单中查找所有的单选按钮
$.extend(prop) prop是一个jquery对象,
举例:
jQuery.extend({
min: 
function(a, b) { return a < b ? a : b; },
max: 
function(a, b) { return a > b ? a : b; }
});
jQuery( expression, [context] ) —$( expression, [context]); 在默认情况下,$()查询的是当前HTML文档中的DOM元素。
each( callback ) 以每一个匹配的元素作为上下文来执行一个函数
举例:
1
$(”span”).click(
function){
$(”li”).each(
function(){
$(
this).toggleClass(”example”);
});
});
举例:
2
$(”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;
}
});
});

jQuery Event:
ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行。在每个页面中可以
有很多个函数被加载执行,按照fn的顺序来执行。
bind( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。可能的事件属性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
keyup, error
one( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。在每个对
象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
trigger( type, [data] ) 在每一个匹配的元素上触发某类事件。
triggerHandler( type, [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型),同时取消浏览器对此事件的默认行动
unbind( [type], [data] ) 反绑定,从每一个匹配的元素中删除绑定的事件。
$(”p”).unbind() 移除所有段落上的所有绑定的事件
$(”p”).unbind( “click” ) 移除所有段落上的click事件
hover( over, out ) over,out都是方法, 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
$(”p”).hover(function(){
$(
this).addClass(”over”);
},
function(){
$(
this).addClass(”out”);
}
);
toggle( fn, fn ) 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。
$(”p”).toggle(
function(){
$(
this).addClass(”selected”);
},
function(){
$(
this).removeClass(”selected”);
}
);
元素事件列表说明
注:不带参数的函数,其参数为可选的 fn。jQuery不支持form元素的reset事件。
事件 描述 支持元素或对象
blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
change( ) 用户改变域的内容 input, textarea, select
click( ) 鼠标点击某个对象 几乎所有元素
dblclick( ) 鼠标双击某个对象 几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window
JQuery Ajax 方法说明:
load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
$(”#feeds”).load(”feeds.html”); 将feeds.html文件载入到id为feeds的div中
$(”#feeds”).load(”feeds.php”, {limit: 
25}, function(){
alert(”The last 
25 entries in the feed have been loaded”);
});
jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get(”test.cgi”, { name: “John”, time: “2pm” }, 
function(data){
alert(”Data Loaded: ” 
+ data);
});
jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
$.getJSON(”test.js”, { name: “John”, time: “2pm” }, 
function(json){
alert(”JSON Data: ” 
+ json.users[3].name);
});
jQuery.getScript( url, [callback] ) 使用GET请求javascript文件并执行。
$.getScript(”test.js”, 
function(){
alert(”Script loaded and executed.”);
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。
ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件
$(”#msg”).ajaxComplete(
function(request, settings){
$(
this).append(”<li>Request Complete.</li>”);
});
ajaxError( callback ) 当一个AJAX请求失败后,执行一个函数。这是一个Ajax事件
$(”#msg”).ajaxError(
function(request, settings){
$(
this).append(”<li>Error requesting page ” + settings.url + “</li>”);
});

 

 

ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数。这是一个Ajax事件
$(”#msg”).ajaxSend(
function(evt, request, settings){
$(
this).append(”<li<Starting request at ” + settings.url
+ “</li<”);
});
ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时,执行一个函数。这是一个Ajax事件
当AJAX请求开始(并还没有激活时)显示loading信息
$(”#loading”).ajaxStart(
function(){
$(
this).show();
});
ajaxStop( callback ) 当所有的AJAX都停止时,执行一个函数。这是一个Ajax事件
当所有AJAX请求都停止时,隐藏loading信息。
$(”#loading”).ajaxStop(
function(){
$(
this).hide();
});
ajaxSuccess( callback ) 当一个AJAX请求成功完成后,执行一个函数。这是一个Ajax事件
当AJAX请求成功完成时,显示信息。
$(”#msg”).ajaxSuccess(
function(evt, request, settings){
$(
this).append(”<li>Successful Request!</li>”);
});
jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。
设置默认的全局AJAX请求选项。
$.ajaxSetup({
url: “
/xmlhttp/”,
global: 
false,
type: “POST”
});
$.ajax({ data: myData });
serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列
function showValues() {
var str = $(”form”).serialize();
$(”#results”).text(str);
}
$(”:checkbox, :radio”).click(showValues);
$(”select”).change(showValues);
showValues();
serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法),但是返回一个JSON数据格式。
从form中取得一组值,显示出来
function showValues() {
var fields = $(”:input”).serializeArray();
alert(fields);
$(”#results”).empty();
jQuery.each(fields, 
function(i, field){
$(”#results”).append(field.value 
+ ” “);
});
}
$(”:checkbox, :radio”).click(showValues);
$(”select”).change(showValues);
showValues();
JQuery Effects 方法说明
show( ) 显示隐藏的匹配元素。
show( speed, [callback] ) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
hide( ) 隐藏所有的匹配元素。
hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数
toggle( ) 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,
切换为可见的。
slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选
地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以
“滑动”的方式显示出来。
slideUp( speed, [callback] ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地
触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”
的方式隐藏起来。
slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回
调函数。 这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”的方式隐
藏或显示。
fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触
发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的
高度和宽度不会发生变化。
fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触
发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的
高度和宽度不会发生变化。
fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成
后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所
有匹配的元素的高度和宽度不会发生变化。
stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。
queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)
queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数
queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列
dequeue( ) 执行并移除动画序列前端的动画
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
animate( params, options ) 创建自定义动画的另一个方法。作用同上。
JQuery Traversing 方法说明
eq( index ) 从匹配的元素集合中取得一个指定位置的元素,index从0开始
filter( expr ) 返回与指定表达式匹配的元素集合,可以使用”,”号分割多个expr,用于实现多个条件筛选
filter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。
is( expr ) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的
表达式就返回true。
map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。
not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。
slice( start, [end] ) 从匹配元素集合中取得一个子集,和内建的数组的slice方法相同。
add( expr ) 把与表达式匹配的元素添加到jQuery对象中。
children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器
将使这个方法只匹配符合的元素(只包括元素节点,不包括文本节点)。
contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点,不
包括文本节点),如果元素为iframe,则取得其中的文档元素
find( expr ) 搜索所有与指定表达式匹配的元素。
next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合
parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。
prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。
siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。
andSelf( ) 将前一个匹配的元素集合添加到当前的集合中
取得所有div元素和其中的p元素,添加border类属性。取得所有div元素中的p元素,
添加background类属性
$(”div”).find(”p”).andSelf().addClass(”border”);
$(”div”).find(”p”).addClass(”background”);
end( ) 结束当前的操作,回到当前操作的前一个操作
找到所有p元素其中的span元素集合,然后返回p元素集合,添加css属性
$(”p”).find(”span”).end().css(”border”, “2px red solid”);
JQuery Selectors 方法说明
基本选择器
$(”#myDiv”) 匹配唯一的具有此id值的元素
$(”div”) 匹配指定名称的所有元素
$(”.myClass”) 匹配具有此class样式值的所有元素
$(”
*”) 匹配所有元素
$(”div,span,p.myClass”) 联合所有匹配的选择器
层叠选择器
$(”form input”) 后代选择器,选择ancestor的所有子孙节点
$(”#main 
> *”) 子选择器,选择parent的所有子节点
$(”label 
+ input”) 临选择器,选择prev的下一个临节点
$(”#prev 
~ div”) 同胞选择器,选择prev的所有同胞节点
基本过滤选择器
$(”tr:first”) 匹配第一个选择的元素
$(”tr:last”) 匹配最后一个选择的元素
$(”input:not(:checked) 
+ span”)从原元素集合中过滤掉匹配selector的所有元素(这里有是一个临选择器)
$(”tr:even”) 匹配集合中偶数位置的所有元素(从0开始)
$(”tr:odd”) 匹配集合中奇数位置的所有元素(从0开始)
$(”td:eq(
2)”) 匹配集合中指定位置的元素(从0开始)
$(”td:gt(
4)”) 匹配集合中指定位置之后的所有元素(从0开始)
$(”td:gl(
4)”) 匹配集合中指定位置之前的所有元素(从0开始)
$(”:header”) 匹配所有标题
$(”div:animated”) 匹配所有正在运行动画的所有元素
内容过滤选择器
$(”div:contains(’John’)”) 匹配含有指定文本的所有元素
$(”td:empty”) 匹配所有空元素(只含有文本的元素不算空元素)
$(”div:has(p)”) 从原元素集合中再次匹配所有至少含有一个selector的所有元素
$(”td:parent”) 匹配所有不为空的元素(含有文本的元素也算)
$(”div:hidden”) 匹配所有隐藏的元素,也包括表单的隐藏域
$(”div:visible”) 匹配所有可见的元素
属性过滤选择器
$(”div[id]”) 匹配所有具有指定属性的元素
$(”input[name
=’newsletter’]”) 匹配所有具有指定属性值的元素
$(”input[name
!=’newsletter’]”) 匹配所有不具有指定属性值的元素
$(”input[name
^=’news’]”) 匹配所有指定属性值以value开头的元素
$(”input[name$
=’letter’]”) 匹配所有指定属性值以value结尾的元素
$(”input[name
*=’man’]”) 匹配所有指定属性值含有value字符的元素
$(”input[id][name$
=’man’]”) 匹配同时符合多个选择器的所有元素
子元素过滤选择器
$(”ul li:nth
child(2)”),
$(”ul li:nth
child(odd)”), 匹配父元素的第n个子元素
$(”ul li:nth
child(3n + 1)”)
$(”div span:first
child”) 匹配父元素的第1个子元素
$(”div span:last
child”) 匹配父元素的最后1个子元素
$(”div button:only
child”) 匹配父元素的唯一1个子元素
表单元素选择器
$(”:input”) 匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button
$(”:text”) 匹配所有类型为text的input元素
$(”:password”) 匹配所有类型为password的input元素
$(”:radio”) 匹配所有类型为radio的input元素
$(”:checkbox”) 匹配所有类型为checkbox的input元素
$(”:submit”) 匹配所有类型为submit的input元素
$(”:image”) 匹配所有类型为image的input元素
$(”:reset”) 匹配所有类型为reset的input元素
$(”:button”) 匹配所有类型为button的input元素
$(”:file”) 匹配所有类型为file的input元素
$(”:hidden”) 匹配所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器
$(”:enabled”) 匹配所有可操作的表单元素
$(”:disabled”) 匹配所有不可操作的表单元素
$(”:checked”) 匹配所有已点选的元素
$(”select option:selected”) 匹配所有已选择的元素
JQuery CSS 方法说明
css( name ) 访问第一个匹配元素的样式属性。
css( properties ) 把一个”名
/值对”对象设置为所有匹配元素的样式属性。
$(”p”).hover(function () {
$(
this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });
}, 
function () {
var cssObj = {
backgroundColor: “#ddd”,
fontWeight: “”,
color: “rgb(
0,40,244)”
}
$(
this).css(cssObj);
});
css( name, value ) 在所有匹配的元素中,设置一个样式属性的值。
offset( ) 取得匹配的第一个元素相对于当前可视窗口的位置。返回的对象有2个属性,
top和left,属性值为整数。这个函数只能用于可见元素。
var p = $(”p:last”);
var offset = p.offset();
p.html( “left: ” 
+ offset.left + “, top: ” + offset.top );
width( ) 取得当前第一匹配的元素的宽度值,
width( val ) 为每个匹配的元素设置指定的宽度值。
height( ) 取得当前第一匹配的元素的高度值,
height( val ) 为每个匹配的元素设置指定的高度值。
JQuery Utilities 方法说明
jQuery.browser
.msie 表示ie
jQuery.browser.version 读取用户浏览器的版本信息
jQuery.boxModel 检测用户浏览器针对当前页的显示是否基于w3c CSS的盒模型
jQuery.isFunction( obj ) 检测传递的参数是否为function
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);
});
jQuery.trim( str ) 清除字符串两端的空格,使用正则表达式来清除给定字符两端的空格
jQuery.each( object, callback ) 一个通用的迭代器,可以用来无缝迭代对象和数组
jQuery.extend( target, object1, [objectN] ) 扩展一个对象,修改原来的对象并返回,这是一个强大的实现继承的
工具,这种继承是采用传值的方法来实现的,而不是JavaScript中的
原型链方式。
合并settings和options对象,返回修改后的settings对象
var settings = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
jQuery.extend(settings, options);
合并defaults和options对象,defaults对象并没有被修改。options对象中的值
代替了defaults对象的值传递给了empty。
var empty = {}
var defaults = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
var settings = $.extend(empty, defaults, options);
jQuery.grep( array, callback, [invert] ) 通过一个筛选函数来去除数组中的项
$.grep( [
0,1,2], function(n,i){
return n > 0;
});
jQuery.makeArray( obj ) 将一个类似数组的对象转化为一个真正的数组
将选取的div元素集合转化为一个数组
var arr = jQuery.makeArray(document.getElementsByTagName(”div”));
arr.reverse(); 
// use an Array method on list of dom elements
$(arr).appendTo(document.body);
jQuery.map( array, callback ) 使用某个方法修改一个数组中的项,然后返回一个新的数组
jQuery.inArray( value, array ) 返回value在数组中的位置,如果没有找到,则返回
1
jQuery.unique( array ) 删除数组中的所有重复元素,返回整理后的数组

 

 

1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。
2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如:$(document.getElementById(“msg”))则为jquery对象,可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
如:$(“#msg”)[0],$(“div”).eq(1)[0],$(“div”).get()[1],$(“td”)[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:
$(“#msg”).html();
$(“#msg”)[0].innerHTML;
$(“#msg”).eq(0)[0].innerHTML;
$(“#msg”).get(0).innerHTML;
3、如何获取jQuery集合的某一项
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而 get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个
<div>元素的内容。有如下两种方法:
$(“div”).eq(2).html(); //调用jquery对象的方法
$(“div”).get(2).innerHTML; //调用dom的方法属性
4、同一函数实现set和get
Jquery中的很多方法都是如此,主要包括如下几个:
$(“#msg”).html(); //返回id为msg的元素节点的html内容。
$(“#msg”).html(“
<b>new content</b>“);
//将“
<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
$(“#msg”).text(); //返回id为msg的元素节点的文本内容。
$(“#msg”).text(“
<b>new content</b>“);
//将“
<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>
$(“#msg”).height(); //返回id为msg的元素的高度
$(“#msg”).height(“300”); //将id为msg的元素的高度设为300
$(“#msg”).width(); //返回id为msg的元素的宽度
$(“#msg”).width(“300”); //将id为msg的元素的宽度设为300
$(“input”).val(“); //返回表单输入框的value值
$(“input”).val(“test”); //将表单输入框的value值设为test
$(“#msg”).click(); //触发id为msg的元素的单击事件
$(“#msg”).click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法
5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式:
$(“p”).each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][ i ]})
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。
$(“tr”).each(function(i){this.style.backgroundColor=[‘#ccc’,’#fff’][i%2]})
//实现表格的隔行换色效果
$(“p”).click(function(){alert($(this).html())})   
//为每个p元素增加了click事件,单击某个p元素则弹出其内容
6、扩展我们需要的功能
$.extend({
min: function(a, b){return a 
< b?a:b; },
max: function(a, b){return a 
> b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法(通过“$.方法名”调用):
alert(“a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));
7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$(“p”).click(function(){alert($(this).html())})
.mouseover(function(){alert(‘mouse over event’)})
.each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][ i ]});
8、操作元素的样式
主要包括以下几种方式:
$(“#msg”).css(“background”); //返回元素的背景颜色
$(“#msg”).css(“background”,”#ccc”) //设定元素背景为灰色
$(“#msg”).height(300); $(“#msg”).width(“200”); //设定宽高
$(“#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式
$(“#msg”).addClass(“select”); //为元素增加名称为select的class
$(“#msg”).removeClass(“select”); //删除元素名称为select的class
$(“#msg”).toggleClass(“select”); //如果存在(不存在)就删除(添加)名称为select的class
9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
如:
$(“#msg”).click(function(){alert(“good”)}) //为元素添加了单击事件
$(“p”).click(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][ i ]})
//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件:
(1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over,离开时置为out。
$(“tr”).hover(function(){
$(this).addClass(“over”);
},
function(){
$(this).addClass(“out”);
});
(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert(“Load Success”)})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为selected的class。
$(“p”).toggle(function(){
  $(this).addClass(“selected”);
},function(){
  $(this).removeClass(“selected”);
});
(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如:
$(“p”).trigger(“click”); //触发所有p元素的click事件
(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中(添加)删除绑定的事件。
例如:
$(“p”).bind(“click”, function(){alert($(this).text());}); //为每个p元素添加单击事件
$(“p”).unbind(); //删除所有p元素上的所有事件
$(“p”).unbind(“click”) //删除所有p元素上的单击事件
10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
11、几个有用的jQuery方法
$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。

$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: ” + n ); });
等价于:
var tempArr=[0,1,2];
for(var i=0;i
<tempArr.length;i++){
alert(“Item #”+i+”: “+tempArr[ i ]);
}
也可以处理json数据,如
$.each( { name: “John”, lang: “JS” }, function(i, n){ alert( “Name: ” + i + “, Value: ” + n ); });
结果为:
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
如:
$.extend(settings, options);
//合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在 setting中。
var settings 
= $.extend({}, defaults, options);
//合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数(合并多项并返回)
$.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
如:
var tempArr
=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为:[4,5,6]
var tempArr
=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为:[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如:$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str):删除字符串两端的空白字符。
如:$.trim(” hello, how are you? “); //返回”hello,how are you? “
12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$(“#msg”)改为jQuery(“#msg”)。
如:
jQuery.noConflict();
// 开始使用jQuery
jQuery(“div p”).hide();
// 使用其他库的 $()
$(“content”).style.display = ‘none’;
========================================================================================================
以上资料从网上转载而来

 

 

 

Attribute:
$(”p”).addClass(css中定义的样式类型); 给某个元素添加样式
$(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性
/值,参数是map
$(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/
$(”img”).attr(”title”, function() { return this.src }); 给某个元素添加属性/
$(”元素名称”).html(); 获得该元素内的内容(元素,文本等)
$(”元素名称”).html(”
<b>new stuff</b>”); 给某元素设置内容
$(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值
$(”元素名称”).removeClass(”class”) 给某元素删除指定的样式
$(”元素名称”).text(); 获得该元素的文本
$(”元素名称”).text(value); 设置该元素的文本值为value
$(”元素名称”).toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式
$(”input元素名称”).val(); 获取input元素的值
$(”input元素名称”).val(value); 设置input元素的值为value
Manipulation:
$(”元素名称”).after(content); 在匹配元素后面添加内容
$(”元素名称”).append(content); 将content作为元素的内容插入到该元素的后面
$(”元素名称”).appendTo(content); 在content后接元素
$(”元素名称”).before(content); 与after方法相反
$(”元素名称”).clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理)
$(”元素名称”).empty() 将该元素的内容设置为空
$(”元素名称”).insertAfter(content); 将该元素插入到content之后
$(”元素名称”).insertBefore(content); 将该元素插入到content之前
$(”元素”).prepend(content); 将content作为该元素的一部分,放到该元素的最前面
$(”元素”).prependTo(content); 将该元素作为content的一部分,放content的最前面
$(”元素”).remove(); 删除所有的指定元素
$(”元素”).remove(”exp”); 删除所有含有exp的元素
$(”元素”).wrap(”html”); 用html来包围该元素
$(”元素”).wrap(element); 用element来包围该元素
Traversing:
add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings(expr)
Core:
$(html).appendTo(”body”) 相当于在body中写了一段html代码
$(elems) 获得DOM上的某个元素
$(
function(){……..}); 执行一个函数
$(”div 
> p”).css(”border”, “1px solid gray”); 查找所有div的子节点p,添加样式
$(”input:radio”, document.forms[
0]) 在当前页面的第一个表单中查找所有的单选按钮
$.extend(prop) prop是一个jquery对象,
举例:
jQuery.extend({
min: 
function(a, b) { return a < b ? a : b; },
max: 
function(a, b) { return a > b ? a : b; }
});
jQuery( expression, [context] ) —$( expression, [context]); 在默认情况下,$()查询的是当前HTML文档中的DOM元素。
each( callback ) 以每一个匹配的元素作为上下文来执行一个函数
举例:
1
$(”span”).click(
function){
$(”li”).each(
function(){
$(
this).toggleClass(”example”);
});
});
举例:
2
$(”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;
}
});
});

jQuery Event:
ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行。在每个页面中可以
有很多个函数被加载执行,按照fn的顺序来执行。
bind( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。可能的事件属性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
keyup, error
one( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。在每个对
象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
trigger( type, [data] ) 在每一个匹配的元素上触发某类事件。
triggerHandler( type, [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型),同时取消浏览器对此事件的默认行动
unbind( [type], [data] ) 反绑定,从每一个匹配的元素中删除绑定的事件。
$(”p”).unbind() 移除所有段落上的所有绑定的事件
$(”p”).unbind( “click” ) 移除所有段落上的click事件
hover( over, out ) over,out都是方法, 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
$(”p”).hover(function(){
$(
this).addClass(”over”);
},
function(){
$(
this).addClass(”out”);
}
);
toggle( fn, fn ) 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。
$(”p”).toggle(
function(){
$(
this).addClass(”selected”);
},
function(){
$(
this).removeClass(”selected”);
}
);
元素事件列表说明
注:不带参数的函数,其参数为可选的 fn。jQuery不支持form元素的reset事件。
事件 描述 支持元素或对象
blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
change( ) 用户改变域的内容 input, textarea, select
click( ) 鼠标点击某个对象 几乎所有元素
dblclick( ) 鼠标双击某个对象 几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window
JQuery Ajax 方法说明:
load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
$(”#feeds”).load(”feeds.html”); 将feeds.html文件载入到id为feeds的div中
$(”#feeds”).load(”feeds.php”, {limit: 
25}, function(){
alert(”The last 
25 entries in the feed have been loaded”);
});
jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get(”test.cgi”, { name: “John”, time: “2pm” }, 
function(data){
alert(”Data Loaded: ” 
+ data);
});
jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
$.getJSON(”test.js”, { name: “John”, time: “2pm” }, 
function(json){
alert(”JSON Data: ” 
+ json.users[3].name);
});
jQuery.getScript( url, [callback] ) 使用GET请求javascript文件并执行。
$.getScript(”test.js”, 
function(){
alert(”Script loaded and executed.”);
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。
ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件
$(”#msg”).ajaxComplete(
function(request, settings){
$(
this).append(”<li>Request Complete.</li>”);
});
ajaxError( callback ) 当一个AJAX请求失败后,执行一个函数。这是一个Ajax事件
$(”#msg”).ajaxError(
function(request, settings){
$(
this).append(”<li>Error requesting page ” + settings.url + “</li>”);
});

 

 

 

 

ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数。这是一个Ajax事件
$(”#msg”).ajaxSend(
function(evt, request, settings){
$(
this).append(”<li<Starting request at ” + settings.url
+ “</li<”);
});
ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时,执行一个函数。这是一个Ajax事件
当AJAX请求开始(并还没有激活时)显示loading信息
$(”#loading”).ajaxStart(
function(){
$(
this).show();
});
ajaxStop( callback ) 当所有的AJAX都停止时,执行一个函数。这是一个Ajax事件
当所有AJAX请求都停止时,隐藏loading信息。
$(”#loading”).ajaxStop(
function(){
$(
this).hide();
});
ajaxSuccess( callback ) 当一个AJAX请求成功完成后,执行一个函数。这是一个Ajax事件
当AJAX请求成功完成时,显示信息。
$(”#msg”).ajaxSuccess(
function(evt, request, settings){
$(
this).append(”<li>Successful Request!</li>”);
});
jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。
设置默认的全局AJAX请求选项。
$.ajaxSetup({
url: “
/xmlhttp/”,
global: 
false,
type: “POST”
});
$.ajax({ data: myData });
serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列
function showValues() {
var str = $(”form”).serialize();
$(”#results”).text(str);
}
$(”:checkbox, :radio”).click(showValues);
$(”select”).change(showValues);
showValues();
serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法),但是返回一个JSON数据格式。
从form中取得一组值,显示出来
function showValues() {
var fields = $(”:input”).serializeArray();
alert(fields);
$(”#results”).empty();
jQuery.each(fields, 
function(i, field){
$(”#results”).append(field.value 
+ ” “);
});
}
$(”:checkbox, :radio”).click(showValues);
$(”select”).change(showValues);
showValues();
JQuery Effects 方法说明
show( ) 显示隐藏的匹配元素。
show( speed, [callback] ) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
hide( ) 隐藏所有的匹配元素。
hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数
toggle( ) 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,
切换为可见的。
slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选
地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以
“滑动”的方式显示出来。
slideUp( speed, [callback] ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地
触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”
的方式隐藏起来。
slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回
调函数。 这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”的方式隐
藏或显示。
fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触
发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的
高度和宽度不会发生变化。
fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触
发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的
高度和宽度不会发生变化。
fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成
后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所
有匹配的元素的高度和宽度不会发生变化。
stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。
queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)
queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数
queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列
dequeue( ) 执行并移除动画序列前端的动画
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
animate( params, options ) 创建自定义动画的另一个方法。作用同上。
JQuery Traversing 方法说明
eq( index ) 从匹配的元素集合中取得一个指定位置的元素,index从0开始
filter( expr ) 返回与指定表达式匹配的元素集合,可以使用”,”号分割多个expr,用于实现多个条件筛选
filter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。
is( expr ) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的
表达式就返回true。
map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。
not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。
slice( start, [end] ) 从匹配元素集合中取得一个子集,和内建的数组的slice方法相同。
add( expr ) 把与表达式匹配的元素添加到jQuery对象中。
children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器
将使这个方法只匹配符合的元素(只包括元素节点,不包括文本节点)。
contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点,不
包括文本节点),如果元素为iframe,则取得其中的文档元素
find( expr ) 搜索所有与指定表达式匹配的元素。
next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合
parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。
prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。
siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。
andSelf( ) 将前一个匹配的元素集合添加到当前的集合中
取得所有div元素和其中的p元素,添加border类属性。取得所有div元素中的p元素,
添加background类属性
$(”div”).find(”p”).andSelf().addClass(”border”);
$(”div”).find(”p”).addClass(”background”);
end( ) 结束当前的操作,回到当前操作的前一个操作
找到所有p元素其中的span元素集合,然后返回p元素集合,添加css属性
$(”p”).find(”span”).end().css(”border”, “2px red solid”);
JQuery Selectors 方法说明
基本选择器
$(”#myDiv”) 匹配唯一的具有此id值的元素
$(”div”) 匹配指定名称的所有元素
$(”.myClass”) 匹配具有此class样式值的所有元素
$(”
*”) 匹配所有元素
$(”div,span,p.myClass”) 联合所有匹配的选择器
层叠选择器
$(”form input”) 后代选择器,选择ancestor的所有子孙节点
$(”#main 
> *”) 子选择器,选择parent的所有子节点
$(”label 
+ input”) 临选择器,选择prev的下一个临节点
$(”#prev 
~ div”) 同胞选择器,选择prev的所有同胞节点
基本过滤选择器
$(”tr:first”) 匹配第一个选择的元素
$(”tr:last”) 匹配最后一个选择的元素
$(”input:not(:checked) 
+ span”)从原元素集合中过滤掉匹配selector的所有元素(这里有是一个临选择器)
$(”tr:even”) 匹配集合中偶数位置的所有元素(从0开始)
$(”tr:odd”) 匹配集合中奇数位置的所有元素(从0开始)
$(”td:eq(
2)”) 匹配集合中指定位置的元素(从0开始)
$(”td:gt(
4)”) 匹配集合中指定位置之后的所有元素(从0开始)
$(”td:gl(
4)”) 匹配集合中指定位置之前的所有元素(从0开始)
$(”:header”) 匹配所有标题
$(”div:animated”) 匹配所有正在运行动画的所有元素
内容过滤选择器
$(”div:contains(’John’)”) 匹配含有指定文本的所有元素
$(”td:empty”) 匹配所有空元素(只含有文本的元素不算空元素)
$(”div:has(p)”) 从原元素集合中再次匹配所有至少含有一个selector的所有元素
$(”td:parent”) 匹配所有不为空的元素(含有文本的元素也算)
$(”div:hidden”) 匹配所有隐藏的元素,也包括表单的隐藏域
$(”div:visible”) 匹配所有可见的元素
属性过滤选择器
$(”div[id]”) 匹配所有具有指定属性的元素
$(”input[name
=’newsletter’]”) 匹配所有具有指定属性值的元素
$(”input[name
!=’newsletter’]”) 匹配所有不具有指定属性值的元素
$(”input[name
^=’news’]”) 匹配所有指定属性值以value开头的元素
$(”input[name$
=’letter’]”) 匹配所有指定属性值以value结尾的元素
$(”input[name
*=’man’]”) 匹配所有指定属性值含有value字符的元素
$(”input[id][name$
=’man’]”) 匹配同时符合多个选择器的所有元素
子元素过滤选择器
$(”ul li:nth
child(2)”),
$(”ul li:nth
child(odd)”), 匹配父元素的第n个子元素
$(”ul li:nth
child(3n + 1)”)
$(”div span:first
child”) 匹配父元素的第1个子元素
$(”div span:last
child”) 匹配父元素的最后1个子元素
$(”div button:only
child”) 匹配父元素的唯一1个子元素
表单元素选择器
$(”:input”) 匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button
$(”:text”) 匹配所有类型为text的input元素
$(”:password”) 匹配所有类型为password的input元素
$(”:radio”) 匹配所有类型为radio的input元素
$(”:checkbox”) 匹配所有类型为checkbox的input元素
$(”:submit”) 匹配所有类型为submit的input元素
$(”:image”) 匹配所有类型为image的input元素
$(”:reset”) 匹配所有类型为reset的input元素
$(”:button”) 匹配所有类型为button的input元素
$(”:file”) 匹配所有类型为file的input元素
$(”:hidden”) 匹配所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器
$(”:enabled”) 匹配所有可操作的表单元素
$(”:disabled”) 匹配所有不可操作的表单元素
$(”:checked”) 匹配所有已点选的元素
$(”select option:selected”) 匹配所有已选择的元素
JQuery CSS 方法说明
css( name ) 访问第一个匹配元素的样式属性。
css( properties ) 把一个”名
/值对”对象设置为所有匹配元素的样式属性。
$(”p”).hover(function () {
$(
this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });
}, 
function () {
var cssObj = {
backgroundColor: “#ddd”,
fontWeight: “”,
color: “rgb(
0,40,244)”
}
$(
this).css(cssObj);
});
css( name, value ) 在所有匹配的元素中,设置一个样式属性的值。
offset( ) 取得匹配的第一个元素相对于当前可视窗口的位置。返回的对象有2个属性,
top和left,属性值为整数。这个函数只能用于可见元素。
var p = $(”p:last”);
var offset = p.offset();
p.html( “left: ” 
+ offset.left + “, top: ” + offset.top );
width( ) 取得当前第一匹配的元素的宽度值,
width( val ) 为每个匹配的元素设置指定的宽度值。
height( ) 取得当前第一匹配的元素的高度值,
height( val ) 为每个匹配的元素设置指定的高度值。
JQuery Utilities 方法说明
jQuery.browser
.msie 表示ie
jQuery.browser.version 读取用户浏览器的版本信息
jQuery.boxModel 检测用户浏览器针对当前页的显示是否基于w3c CSS的盒模型
jQuery.isFunction( obj ) 检测传递的参数是否为function
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);
});
jQuery.trim( str ) 清除字符串两端的空格,使用正则表达式来清除给定字符两端的空格
jQuery.each( object, callback ) 一个通用的迭代器,可以用来无缝迭代对象和数组
jQuery.extend( target, object1, [objectN] ) 扩展一个对象,修改原来的对象并返回,这是一个强大的实现继承的
工具,这种继承是采用传值的方法来实现的,而不是JavaScript中的
原型链方式。
合并settings和options对象,返回修改后的settings对象
var settings = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
jQuery.extend(settings, options);
合并defaults和options对象,defaults对象并没有被修改。options对象中的值
代替了defaults对象的值传递给了empty。
var empty = {}
var defaults = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
var settings = $.extend(empty, defaults, options);
jQuery.grep( array, callback, [invert] ) 通过一个筛选函数来去除数组中的项
$.grep( [
0,1,2], function(n,i){
return n > 0;
});
jQuery.makeArray( obj ) 将一个类似数组的对象转化为一个真正的数组
将选取的div元素集合转化为一个数组
var arr = jQuery.makeArray(document.getElementsByTagName(”div”));
arr.reverse(); 
// use an Array method on list of dom elements
$(arr).appendTo(document.body);
jQuery.map( array, callback ) 使用某个方法修改一个数组中的项,然后返回一个新的数组
jQuery.inArray( value, array ) 返回value在数组中的位置,如果没有找到,则返回
1
jQuery.unique( array ) 删除数组中的所有重复元素,返回整理后的数组

================================================================

1、关于页面元素的引用 
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 

2、jQuery对象与dom对象的转换 
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。 
普通的dom对象一般可以通过$()转换成jquery对象。 
如:$(document.getElementById(“msg”))则为jquery对象,可以使用jquery的方法。 
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。 
如:$(“#msg”)[0],$(“div”).eq(1)[0],$(“div”).get()[1],$(“td”)[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。 
以下几种写法都是正确的: 

复制代码代码如下:

$(“#msg”).html(); 
$(“#msg”)[0].innerHTML; 
$(“#msg”).eq(0)[0].innerHTML; 
$(“#msg”).get(0).innerHTML; 

3、如何获取jQuery集合的某一项 
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法: 

复制代码代码如下:

$(“div”).eq(2).html(); //调用jquery对象的方法 
$(“div”).get(2).innerHTML; //调用dom的方法属性 

4、同一函数实现set和get 
Jquery中的很多方法都是如此,主要包括如下几个: 
$(“#msg”).html(); //返回id为msg的元素节点的html内容。 
$(“#msg”).html(“<b>new content</b>”); 
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content 

$(“#msg”).text(); //返回id为msg的元素节点的文本内容。 
$(“#msg”).text(“<b>new content</b>”); 
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b> 

$(“#msg”).height(); //返回id为msg的元素的高度 
$(“#msg”).height(“300”); //将id为msg的元素的高度设为300 
$(“#msg”).width(); //返回id为msg的元素的宽度 
$(“#msg”).width(“300”); //将id为msg的元素的宽度设为300 

$(“input”).val(“); //返回表单输入框的value值 
$(“input”).val(“test”); //将表单输入框的value值设为test 

$(“#msg”).click(); //触发id为msg的元素的单击事件 
$(“#msg”).click(fn); //为id为msg的元素单击事件添加函数 
同样blur,focus,select,submit事件都可以有着两种调用方法 

5、集合处理功能 
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。 
包括两种形式: 
$(“p”).each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][i]}) 
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。 

$(“tr”).each(function(i){this.style.backgroundColor=[‘#ccc’,’#fff’][i%2]}) 
//实现表格的隔行换色效果 

$(“p”).click(function(){alert($(this).html())}) 
//为每个p元素增加了click事件,单击某个p元素则弹出其内容 

6、扩展我们需要的功能 
$.extend({ 
min: function(a, b){return a < b?a:b; }, 
max: function(a, b){return a > b?a:b; } 
}); //为jquery扩展了min,max两个方法 
使用扩展的方法(通过“$.方法名”调用): 
alert(“a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20)); 

7、支持方法的连写 
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。 
例如: 
$(“p”).click(function(){alert($(this).html())}) 
.mouseover(function(){alert(‘mouse over event’)}) 
.each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][i]}); 

8、操作元素的样式 
主要包括以下几种方式: 
$(“#msg”).css(“background”); //返回元素的背景颜色 
$(“#msg”).css(“background”,”#ccc”) //设定元素背景为灰色 
$(“#msg”).height(300); $(“#msg”).width(“200”); //设定宽高 
$(“#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式 
$(“#msg”).addClass(“select”); //为元素增加名称为select的class 
$(“#msg”).removeClass(“select”); //删除元素名称为select的class 
$(“#msg”).toggleClass(“select”); //如果存在(不存在)就删除(添加)名称为select的class 

9、完善的事件处理功能 
Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。 
如: 
$(“#msg”).click(function(){alert(“good”)}) //为元素添加了单击事件 
$(“p”).click(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][i]}) 
//为三个不同的p元素单击事件分别设定不同的处理 
jQuery中几个自定义的事件: 
(1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over,离开时置为out。 
$(“tr”).hover(function(){ 
$(this).addClass(“over”); 
}, 
function(){ 
$(this).addClass(“out”); 
}); 
(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 
$(document).ready(function(){alert(“Load Success”)}) 
//页面加载完毕提示“Load Success”,不同于onload事件,onload需要页面内容加载完毕(图片等),而ready只要页面html代码下载完毕即触发。与$(fn)等价 
(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 
//每次点击时轮换添加和删除名为selected的class。 
$(“p”).toggle(function(){ 
$(this).addClass(“selected”); 
},function(){ 
$(this).removeClass(“selected”); 
}); 
(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。 
例如: 
$(“p”).trigger(“click”); //触发所有p元素的click事件 
(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定 
从每一个匹配的元素中(添加)删除绑定的事件。 
例如: 
$(“p”).bind(“click”, function(){alert($(this).text());}); //为每个p元素添加单击事件 
$(“p”).unbind(); //删除所有p元素上的所有事件 
$(“p”).unbind(“click”) //删除所有p元素上的单击事件 

10、几个实用特效功能 
其中toggle()和slidetoggle()方法提供了状态切换功能。 
如toggle()方法包括了hide()和show()方法。 
slideToggle()方法包括了slideDown()和slideUp方法。 

11、几个有用的jQuery方法 
$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。 
$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。 
如 
$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: ” + n ); }); 
等价于: 
var tempArr=[0,1,2]; 
for(var i=0;i<tempArr.length;i++){ 
alert(“Item #”+i+”: “+tempArr[i]); 

也可以处理json数据,如 
$.each( { name: “John”, lang: “JS” }, function(i, n){ alert( “Name: ” + i + “, Value: ” + n ); }); 
结果为: 
Name:name, Value:John 
Name:lang, Value:JS 
$.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。 
如: 
$.extend(settings, options); 
//合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在setting中。 
var settings = $.extend({}, defaults, options); 
//合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。 
可以有多个参数(合并多项并返回) 
$.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。 
如: 
var tempArr=$.map( [0,1,2], function(i){ return i + 4; }); 
tempArr内容为:[4,5,6] 
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; }); 
tempArr内容为:[2,3] 
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。 
如:$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4] 
$.trim(str):删除字符串两端的空白字符。 
如:$.trim(” hello, how are you? “); //返回”hello,how are you? ” 

12、解决自定义方法或其他类库与jQuery的冲突 
很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。 
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$(“#msg”)改为jQuery(“#msg”)。 
如: 
jQuery.noConflict(); 
// 开始使用jQuery 
jQuery(“div p”).hide(); 
// 使用其他库的 $() 
$(“content”).style.display = ‘none’;

 Posted by at 下午5:05  Tagged with:

关于jQuery新的事件绑定机制on()的使用技巧

 javascript  关于jQuery新的事件绑定机制on()的使用技巧已关闭评论
2月 242016
 

从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

替换bind()

当第二个参数’selector’为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的’selector’参数,所以on()可以非常方便的换掉bind()

替换live()

在1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面,当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单,它是通过document进行事件委派的,因此我们也可以使用on()通过将事件绑定到document来达到live()一样的效果。

live()写法

复制代码代码如下:

 $(‘#list li’).live(‘click’, ‘#list li’, function() {
    //function code here.
}); 

on()写法

复制代码代码如下:

$(document).on(‘click’, ‘#list li’, function() {
    //function code here.
});

这里的关键就是第二个参数’selector’在起作用了。它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。

替换delegate()
delegate()是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。

delegate()的写法

复制代码代码如下:

$(‘#list’).delegate(‘li’, ‘click’, function() {
    //function code here.
});

on()写法

复制代码代码如下:

$(‘#list’).on(‘click’, ‘li’, function() {
    //function code here.
});

貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。

总结
jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。

转自:http://www.jb51.net/article/36064.htm

jQuery.extend 函数详解

 javascript  jQuery.extend 函数详解已关闭评论
2月 242016
 

理解下jquery.extend函数

JQuery的extend扩展方法:
      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
      一、Jquery的扩展方法原型是:

 extend(dest,src1,src2,src3...);


      它的含义是将src1,src2,src3…合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

 var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。


      这样就可以将src1,src2,src3…进行合并,然后将合并结果返回给newSrc了。如下例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) 

 

      那么合并后的结果

 result={name:"Jerry",age:21,sex:"Boy"}


      也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

      二、省略dest参数
      上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如:
  1、$.extend(src)
   该方法就是将src合并到jquery的全局对象中去,如:

 $.extend({
  hello:function(){alert('hello');}
  });


   就是将hello方法合并到jquery的全局对象中。
  2、$.fn.extend(src)
   该方法将src合并到jquery的实例对象中去,如:

 $.fn.extend({
  hello:function(){alert('hello');}
 }); 

 

 就是将hello方法合并到jquery的实例对象中。

   下面例举几个常用的扩展实例:

$.extend({net:{}}); 

 

这是在jquery全局对象中扩展一个net命名空间。

 $.extend($.net,{
   hello:function(){alert('hello');}
  })


    这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

  三、Jquery的extend方法还有一个重载原型:  

extend(boolean,dest,src1,src2,src3...)


      第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:

var result=$.extend( true,  {},  
    { name: "John", location: {city: "Boston",county:"USA"} },  
    { last: "Resig", location: {state: "MA",county:"China"} } ); 


      我们可以看出src1中嵌套子对象location:{city:”Boston”},src2中也嵌套子对象location:{state:”MA”},第一个深度拷贝参数为true,那么合并后的结果就是: 

result={name:"John",last:"Resig",
        location:{city:"Boston",state:"MA",county:"China"}} 

 

       也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:

var result=$.extend( false, {},  
{ name: "John", location:{city: "Boston",county:"USA"} },  
{ last: "Resig", location: {state: "MA",county:"China"} }  
                    ); 


     那么合并后的结果就是:

 result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

 

以上就是$.extend()在项目中经常会使用到的一些细节。

来自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

9月 282014
 

看到的一篇关于json和jsonp区别的文章,非常好,强烈推荐:

前言:

 

由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。

当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持WebSocket,因此都不能算是ST2的原生解决方案,原生的只有AJAX。

 

说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决。

但到目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来跨域。而这就是本文将要讲述的内容。

 

JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的“暗号”,而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没?一个是描述信息的格式,一个是信息传递双方约定的方法。

 

既然随便聊聊,那我们就不再采用教条的方式来讲述,而是把关注重心放在帮助开发人员理解是否应当选择使用以及如何使用上。

小小的广告一下,该篇文章是在自己群里与Sencha Touch 2的开发者们一起探讨ST2数据交互模型时有感而发写出来的因此如果您对Mobile Web App开发有兴趣的话,欢迎加入Sencha Touch 交流 QQ 群 213119459 

 

 什么是JSON?

 

前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点。

 

JSON的优点:

1、基于纯文本,跨平台传递极其简单;

2、Javascript原生支持,后台语言几乎全部支持;

3、轻量级数据格式,占用字符数量极少,特别适合互联网传递;

4、可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的;

5、容易编写和解析,当然前提是你要知道数据结构;

JSON的缺点当然也有,但在作者看来实在是无关紧要的东西,所以不再单独说明。

 

JSON的格式或者叫规则:

JSON能够以非常简单的方式来描述数据结构,XML能做的它都能做,因此在跨平台方面两者完全不分伯仲。

1、JSON只有两种数据类型描述符,大括号{}和方括号[],其余英文冒号:是映射符,英文逗号,是分隔符,英文双引号””是定义符。

2、大括号{}用来描述一组“不同类型的无序键值对集合”(每个键值对可以理解为OOP的属性描述),方括号[]用来描述一组“相同类型的有序数据集合”(可对应OOP的数组)。

3、上述两种集合中若有多个子项,则通过英文逗号,进行分隔。

4、键值对以英文冒号:进行分隔,并且建议键名都加上英文双引号””,以便于不同语言的解析。

5、JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个,字符串必须用双引号引起来,其余的都不用,日期类型比较特殊,这里就不展开讲述了,只是建议如果客户端没有按日期排序功能需求的话,那么把日期时间直接作为字符串传递就好,可以省去很多麻烦。

 

JSON实例:

复制代码
// 描述一个人 var person = { "Name": "Bob", "Age": 32, "Company": "IBM", "Engineer": true } // 获取这个人的信息 var personAge = person.Age; // 描述几个人 var members = [
    { "Name": "Bob", "Age": 32, "Company": "IBM", "Engineer": true },
    { "Name": "John", "Age": 20, "Company": "Oracle", "Engineer": false },
    { "Name": "Henry", "Age": 45, "Company": "Microsoft", "Engineer": false }
] // 读取其中John的公司名称 var johnsCompany = members[1].Company; // 描述一次会议 var conference = { "Conference": "Future Marketing", "Date": "2012-6-1", "Address": "Beijing", "Members":
    [
        { "Name": "Bob", "Age": 32, "Company": "IBM", "Engineer": true },
        { "Name": "John", "Age": 20, "Company": "Oracle", "Engineer": false },
        { "Name": "Henry", "Age": 45, "Company": "Microsoft", "Engineer": false }
    ]
} // 读取参会者Henry是否工程师 var henryIsAnEngineer = conference.Members[2].Engineer;
复制代码

 

关于JSON,就说这么多,更多细节请在开发过程中查阅资料深入学习。

 

 什么是JSONP?

 

先说说JSONP是怎么产生的:

其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题,看看是否有帮助。

1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;

2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);

3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;

4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;

5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。

6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。

7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

如果对于callback参数如何使用还有些模糊的话,我们后面会有具体的实例来讲解。

JSONP的客户端具体实现:

不管jQuery也好,extjs也罢,又或者是其他支持jsonp的框架,他们幕后所做的工作都是一样的,下面我来循序渐进的说明一下jsonp在客户端的实现:

 

1、我们知道,哪怕跨域js文件中的代码(当然指符合web脚本安全策略的),web页面也是可以无条件执行的。

远程服务器remoteserver.com根目录下有个remote.js文件代码如下:

alert('我是远程文件');

本地服务器localserver.com下有个jsonp.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"> <head> <title></title> <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> </head> <body> </body> </html>
复制代码

毫无疑问,页面将会弹出一个提示窗体,显示跨域调用成功。

 

2、现在我们在jsonp.html页面定义一个函数,然后在远程remote.js中传入数据进行调用。

jsonp.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"> <head> <title></title> <script type="text/javascript">  var localHandler = function(data){
        alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
    }; </script> <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> </head> <body> </body> </html>
复制代码

remote.js文件代码如下:

localHandler({"result":"我是远程js带来的数据"});

运行之后查看结果,页面成功弹出提示窗口,显示本地函数被跨域的远程js调用成功,并且还接收到了远程js带来的数据。很欣喜,跨域远程获取数据的目的基本实现了,但是又一个问题出现了,我怎么让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,而这些服务对象各自的本地函数都不相同啊?我们接着往下看。

 

3、聪明的开发者很容易想到,只要服务端提供的js脚本是动态生成的就行了呗,这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码,请你返回给我”,于是服务器就可以按照客户端的需求来生成js脚本并响应了。

看jsonp.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"> <head> <title></title> <script type="text/javascript"> // 得到航班信息查询结果后的回调函数 var flightHandler = function(data){
        alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
    }; // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码) var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; // 创建script标签,设置其属性 var script = document.createElement('script');
    script.setAttribute('src', url); // 把script标签加入head,此时调用开始  document.getElementsByTagName('head')[0].appendChild(script); </script> </head> <body> </body> </html>
复制代码

这次的代码变化比较大,不再直接把远程js文件写死,而是编码实现动态查询,而这也正是jsonp客户端实现的核心部分,本例中的重点也就在于如何完成jsonp调用的全过程。

我们看到调用的url中传递了一个code参数,告诉服务器我要查的是CA1998次航班的信息,而callback参数则告诉服务器,我的本地回调函数叫做flightHandler,所以请把查询结果传入这个函数中进行调用。

OK,服务器很聪明,这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html(服务端的实现这里就不演示了,与你选用的语言无关,说到底就是拼接字符串):

flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 });

我们看到,传递给flightHandler函数的是一个json,它描述了航班的基本信息。运行一下页面,成功弹出提示窗口,jsonp的执行全过程顺利完成!

 

4、到这里为止的话,相信你已经能够理解jsonp的客户端实现原理了吧?剩下的就是如何把代码封装一下,以便于与用户界面交互,从而实现多次和重复调用。

什么?你用的是jQuery,想知道jQuery如何实现jsonp调用?好吧,那我就好人做到底,再给你一段jQuery使用jsonp的代码(我们依然沿用上面那个航班信息查询的例子,假定返回jsonp结果不变):

复制代码
<!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>Untitled Page</title> <script type="text/javascript" src=jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){
        $.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)  jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据  success: function(json){
                 alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。'); },
             error: function(){
                 alert('fail');
             }
         });  }); </script> </head> <body> </body> </html>
复制代码

是不是有点奇怪?为什么我这次没有写flightHandler这个函数呢?而且竟然也运行成功了!哈哈,这就是jQuery的功劳了,jquery在处理jsonp类型的ajax时(还是忍不住吐槽,虽然jquery也把jsonp归入了ajax,但其实它们真的不是一回事儿),自动帮你生成回调函数并把数据取出来供success属性方法来调用,是不是很爽呀?

这里针对ajax与jsonp的异同再做一些补充说明:

1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本

3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变着一点!

转自: http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html