今天弄了一天的Ajax中文亂碼問題，Ajax的亂碼問題分為兩種：
1. JavaScript輸出的中文亂碼，
比如：alert("中文亂碼測試");
2. 這第二種就是Ajax從服務(wù)器端獲得的數(shù)據(jù)出現(xiàn)亂碼的問題。（我搜了n個(gè)小時(shí)試了n中方法才找到答案）
現(xiàn)在將我搜集的比較有效的方法都與大家分享：（我使用的開發(fā)環(huán)境是Eclipse，相信其他語言和開發(fā)環(huán)境都差不太多。）
比如
var message = xmlHttp.responseText;
alert("message: "+message);
獲得這個(gè)message輸出就是亂碼
解決辦法有兩種：
（1）在jsp文件里引入js文件時(shí)可以這樣寫：<script Charset="UTF-8" type="text/javascript" src="jslib/jquery-1.4.2.min.js"></script>，該方法具有移植性
（2）（該方法可能會導(dǎo)致?lián)Q一臺電腦導(dǎo)入項(xiàng)目后js文件里中文會亂碼）. 修改編碼。切記要將代碼備份一下，改了編碼之后中文會變?yōu)閬y碼。
在js文件上右鍵點(diǎn)擊Properties，最好是在菜單欄欄里選擇Window-->Perferences(以絕后患)，修改Text file encode 為UTF-8（這里應(yīng)當(dāng)與jsp中的編碼相同）
置編碼.jpg)
同樣的將JavaScript source file和JSP的Default encoding設(shè)置為UTF-8（這里應(yīng)當(dāng)與jsp中的編碼相同，這樣以后的項(xiàng)目就都是utf-8的編碼了，推薦使用這個(gè)）
（2）. 注意response.setContentType("text/html;charset=utf-8");和PrintWriter out = response.getWriter();的位置關(guān)系，切記要將PrintWriter out = response.getWriter();放在response.setContentType("text/html;charset=utf-8");的后面，否則設(shè)置的編碼將無效，這也是我弄了n久都搞不定的原因！！！
3. 客戶端發(fā)給服務(wù)器端得中文數(shù)據(jù)為亂碼
解決辦法：示例：客戶端的javaScript腳本
function verify(){
$.get("AJAXServer?name="+encodeURI(encodeURI($("#userName").val())),null,function callback(data){$("#result").html(data);});
}
?注意：encodeURI需要使用兩次！
服務(wù)器端代碼:
//1.取參數(shù)
String str = request.getParameter("name");
str = java.net.URIDecode.decode(str,"UTF-8")
]]>
]]>
我們不是最好的，但是我們會努力做的更好，我們愿意傾聽和接受所有用戶的心聲。最后，大家在使用過程中若發(fā)現(xiàn)任何的問題，或者有比較好的創(chuàng)意和想法，可以隨時(shí)向我們反饋(yanis.wang@gmail.com)，我們會隨時(shí)傾聽大家的意見，xhEditor的發(fā)展離不開大家的支持。
查看最新版演示：http://xheditor.com/demo
更多官方在線演示：
1. 默認(rèn)模式：http://xheditor.com/demos/demo01.html
2. 自定義按鈕：http://xheditor.com/demos/demo02.html
3. 皮膚選擇：http://xheditor.com/demos/demo03.html
4. 其它選項(xiàng)：http://xheditor.com/demos/demo04.html
5. Javascript交互：http://xheditor.com/demos/demo05.html
6. 非utf-8編碼網(wǎng)頁調(diào)用：http://xheditor.com/demos/demo06.html
7. UBB可視化編輯：http://xheditor.com/demos/demo07.html
8. Ajax文件上傳：http://xheditor.com/demos/demo08.html
9. 插件擴(kuò)展：http://xheditor.com/demos/demo09.html
10.iframe調(diào)用文件上傳：http://xheditor.com/demos/demo10.html
11.異步加載：http://xheditor.com/demos/demo11.html
v1.1.3 Change (2011-1-1)
- 調(diào)整：取消刪除線的快捷鍵：Ctrl+S
- 修正：IE瀏覽器下無邊框的table沒有顯示輔助的虛線邊框問題的修正
- 修正：IE瀏覽器下光標(biāo)定位在編輯器中，xheditor(false)卸載編輯器會造成當(dāng)前頁面光標(biāo)被鎖死問題的修正
- 修正：®和©被瀏覽器強(qiáng)制轉(zhuǎn)為字符問題的修正
- 修正：從其它網(wǎng)站復(fù)制粘貼WORD文檔和普通HTML混合的內(nèi)容時(shí)，會導(dǎo)致圖片丟失問題的修正
- 修正：urlType參數(shù)開啟情況下，mailto:地址被轉(zhuǎn)絕對地址問題的進(jìn)一步修正
- 修正：Flash和視頻不支持輸入百分比數(shù)值問題的修正
- 優(yōu)化：優(yōu)化Word自動文檔清理功能，進(jìn)一步提高代碼處理效率并且兼容Excel文檔粘貼
- 優(yōu)化：優(yōu)化formatXHTML函數(shù)，極大提高代碼格式化效率
官方下載：
- xhEditor v1.1.3 (簡體,繁體,English) (zip) [670KB] ( 更新：2011年1月1日 )
MD5: 14F4437E9D3D48D4217D09AFF817B83B - xhEditor v1.1.3 (簡體,繁體,English) (tar.gz) [567KB] ( 更新：2011年1月1日 )
MD5: B57FC85A2EFEFA44D8F447B7D8BA6510
]]>
本次v1.1.0版本主要變化如下：
1，可自定義表情根路徑(emotPath參數(shù))
2，提供本地圖片等資源文件的前后臺路徑不一致問題的解決方案(urlBase參數(shù))
3，雙擊鏈接、圖片等直接打開修改界面
4，Word代碼粘貼過濾功能由原先的IE only改為跨瀏覽器兼容
5，強(qiáng)制粘貼為文本功能(forcePasteText參數(shù))
6，將本地電腦直接拖入編輯區(qū)域即可上傳在當(dāng)前光標(biāo)處，此功能需要HTML5上傳支持(Firefox,Chrome)
完整更新列表如下：
ver 1.1.0 (2010-9-1)
1. 添加：添加由網(wǎng)友shiny原創(chuàng)設(shè)計(jì)的皮膚NoStyle
2. 添加：demo07 UBB演示頁面添加Google地圖插件，也作為不定寬按鈕的演示
3. 添加：添加urlType轉(zhuǎn)非相對路徑中合并“..”到上一級路徑的功能
4. 添加：添加emotPath初始化參數(shù)，以將表情指向其它自定義URL路徑下，注意路徑必需以“/”結(jié)尾
5. 添加：添加urlBase初始化參數(shù)，用來定義超鏈接、圖片及Flash等文件的相對根路徑，同時(shí)也是urlType參數(shù)的參考根路徑
6. 添加：經(jīng)用戶反饋意見，重新添加“預(yù)覽”功能按鈕
7. 添加：添加雙擊超鏈接、圖片、Flash和多媒體可直接打開相應(yīng)修改界面的功能，注：某些瀏覽器雙擊Flash和多媒體會有問題
8. 添加：打開面板時(shí)可按Esc鍵隱藏當(dāng)前的面板
9. 添加：初始化參數(shù)添加disableContextmenu，用以禁用瀏覽器在編輯區(qū)域的默認(rèn)右鍵菜單，設(shè)置為true禁用，默認(rèn)不禁用
10.添加：Word粘貼自動過濾功能由原先的IE only增加為跨瀏覽器兼容
11.添加：添加強(qiáng)制粘貼為文本功能，初始化參數(shù)forcePasteText設(shè)置為true開啟此功能，默認(rèn)不強(qiáng)制文本
12.添加：添加Pidgin和IPB兩套表情，并在demo05和demo07中添加相應(yīng)的配置演示
13.添加：初始化參數(shù)添加editorRoot，在某些特殊情況下定位編輯器的根路徑
14.添加：將本地電腦中的多個(gè)文件拖放至編輯器的編輯區(qū)即可上傳并插入，此功能需要瀏覽器支持HTML5上傳(Firefox,Chrome)
1. 修正：showIframeModal上傳模式下onUpload接口無效問題的修正
2. 修正：使用無效按鈕名稱會導(dǎo)致JS出錯(cuò)問題的修正
3. 修正：IE6,IE7在iframe框架中使用xhEditor會在頁面中出現(xiàn)_xhe_cursor問題的修正
4. 修正：IE瀏覽器在圖片、FLASH等控件上按Backspace會導(dǎo)致整個(gè)頁面后退問題的修正
5. 修正：回車BR模式在IE瀏覽器下，按下回車只顯示一個(gè)空格不換行問題的修正
6. 修正：IE瀏覽器中會造成內(nèi)存泄漏問題的修正
7. 修正：WebKit內(nèi)核瀏覽器回車換行在切換一次源代碼后會丟失問題的修正
1. 調(diào)整：皮膚框架進(jìn)行了調(diào)整，支持不定寬按鈕，需要的用戶可自行設(shè)計(jì)修改
2. 調(diào)整：為使按鈕配置更直觀簡便，原按鈕分隔符Separator變更為“|”，原按鈕換行符BtnBr變更為“/”
3. 調(diào)整：原localUrl參數(shù)名變更為urlType
查看最新版演示：http://xheditor.com/demo
更多官方在線演示：
1. 默認(rèn)模式：http://xheditor.com/demos/demo01.html
2. 自定義按鈕：http://xheditor.com/demos/demo02.html
3. 皮膚選擇：http://xheditor.com/demos/demo03.html
4. 其它選項(xiàng)：http://xheditor.com/demos/demo04.html
5. Javascript交互：http://xheditor.com/demos/demo05.html
6. 非utf-8編碼網(wǎng)頁調(diào)用：http://xheditor.com/demos/demo06.html
7. UBB可視化編輯：http://xheditor.com/demos/demo07.html
8. Ajax文件上傳：http://xheditor.com/demos/demo08.html
9. 插件擴(kuò)展：http://xheditor.com/demos/demo09.html
10.iframe調(diào)用文件上傳：http://xheditor.com/demos/demo10.html
11.異步加載：http://xheditor.com/demos/demo11.html
最新v1.1.0下載地址：
http://xheditor.com/download
]]>
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService] //令WebService成功傳入Json參數(shù)，并以Json形式返回結(jié)果
[GenerateScriptType(typeof(Person))] //不是必要，但推薦添加(如果Person里面再嵌套另一個(gè)復(fù)雜類型，則必要聲明)
[ToolboxItem(false)]
public class WebService1 : System.Web.Services.WebService
{
///
/// 無任何參數(shù)
///
///
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
///
/// 傳入?yún)?shù)
///
///
///
[WebMethod]
public string Hello(string name)
{
return string.Format("Hello {0}", name);
}
///
/// 返回泛型列表
///
///
///
[WebMethod]
public List<int> CreateArray(int i)
{
List<int> list = new List<int>();
while (i >= 0)
{
list.Add(i--);
}
return list;
}
///
/// 返回復(fù)雜類型
///
///
///
///
[WebMethod]
public Person GetPerson(string name, int age)
{
return new Person()
{
Name = name,
Age = age
};
}
}
///
/// 復(fù)雜類型
///
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}
2、編寫js調(diào)用以上方法
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 runat="server">
<title>無標(biāo)題頁title>
<style type="text/css">
input
{
width:200px;
}
<style>
<script type="text/javascript" src="jquery-1[1].2.6.min.js"></script>
<script type="text/javascript">
$(function(){
/*
1、WebService請求類型都為Post，WebService的Url為“[WebServiceUrl]/[WebMethod]”
2、contentType聲明為Json
3、data要用Json的字符串格式傳入
4、設(shè)置了dataType為json后，result就直接為返回的Json對象。
*/
//調(diào)用無參數(shù)方法
$("#btnHelloWorld").click(function(){
$.ajax({
type: "POST",
contentType:"application/json",
url:"WebService1.asmx/HelloWorld",
data:"{}",
dataType:'json',
success:function(result){
alert(result.d);
}
});
});
//傳入1個(gè)參數(shù)
$("#btnHello").click(function(){
$.ajax({
type: "POST",
contentType:"application/json",
url:"WebService1.asmx/Hello",
data:"{name:'KiMoGiGi'}",
dataType:'json',
success:function(result){
alert(result.d);
}
});
});
//返回泛型列表
$("#btnArray").click(function(){
$.ajax({
type: "POST",
contentType:"application/json",
url:"WebService1.asmx/CreateArray",
data:"{i:10}",
dataType:'json',
success:function(result){
alert(result.d.join(" | "));
}
});
});
//返回復(fù)雜類型
$("#btnPerson").click(function(){
$.ajax({
type: "POST",
contentType:"application/json",
url:"WebService1.asmx/GetPerson",
data:"{name:'KiMoGiGi',age:26}",
dataType:'json',
success:function(result){
var person = result.d;
var showText = [];
for(var p in person){
showText.push(p + ":" + person[p]);
}
alert(showText.join("\r\n"));
}
});
});
});
</script>
<head>
<body>
<form id="form1" runat="server">
<p>
<input type="button" id="btnHelloWorld" value="HelloWorld" />
<p>
<p>
<input type="button" id="btnHello" value="Hello" />
<p>
<p>
<input type="button" id="btnArray" value="CreateArray" />
<p>
<p>
<input type="button" id="btnPerson" value="GetPerson" />
<p>
<form>
<body>
<html>
]]>
]]>
這里給出代碼，希望對Ajax跨域感到棘手的朋友有所幫助:
代碼
<html>
<head>
<title>JQuery學(xué)習(xí)</title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var oBtnTest = $("#btnTest");
oBtnTest.click(function(){
oBtnTest.disabled = true;
var oResult = $("#result");
oResult.html("loading").css("color","red");
jQuery.getScript("http://app.cntvs.com/test/js.txt",
function(){
oResult.html("name:" + jimmy.name + "<br/>email:" + jimmy.email).css("color","black");
oBtnTest.disabled = false;
});
});
});
</script>
</head>
<body>
<button id="btnTest">BtnTest</button>
<div id="result"></div>
</body>
</html>
遠(yuǎn)程服務(wù)器端js.txt的內(nèi)容為:
var jimmy = {name:"jimmy.yang",email:jimmy.yang@163.com}
感覺是不是比ExtJs的ScriptTagProxy還要簡潔? 個(gè)人感覺Jquery簡單明了，短小精干，ExtJs功能強(qiáng)大，組件豐富！
]]>
1. jFlow
官方網(wǎng)站 | 演示
一個(gè)漂亮而整潔的圖片幻燈，被nettut推薦，如果你想自己做一個(gè)圖片幻燈效果，就去看看吧。
2. 使用jQuery UI實(shí)現(xiàn)推薦內(nèi)容的幻燈展示
]]>
通過jquery的$()引用元素包括通過id、class、元素名以及元素的層級關(guān)系及dom或者xpath條件等方法，且返回的對象為jquery對象（集合對象），不能直接調(diào)用dom定義的方法。
2、jQuery對象與dom對象的轉(zhuǎn)換
只有jquery對象才能使用jquery定義的方法。注意dom對象和jquery對象是有區(qū)別的，調(diào)用方法時(shí)要注意操作的是dom對象還是jquery對象。
普通的dom對象一般可以通過$()轉(zhuǎn)換成jquery對象。
如：$(document.getElementById(”msg”))則為jquery對象，可以使用jquery的方法。
由于jquery對象本身是一個(gè)集合。所以如果jquery對象要轉(zhuǎn)換為dom對象則必須取出其中的某一項(xiàng)，一般可通過索引取出。
如：$(”#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集合的某一項(xiàng)
對于獲取的元素集合，獲取其中的某一項(xiàng)（通過索引指定）可以使用eq或get(n)方法或者索引號獲取，要注意，eq返回的是jquery對象，而get(n)和索引返回的是dom元素對象。對于jquery對象只能使用jquery的方法，而dom對象只能使用dom的方法，如要獲取第三個(gè)<div>元素的內(nèi)容。有如下兩種方法：
$(”div”).eq(2).html(); //調(diào)用jquery對象的方法
$(”div”).get(2).innerHTML; //調(diào)用dom的方法屬性
4、同一函數(shù)實(shí)現(xiàn)set和get
jQuery中的很多方法都是如此，主要包括如下幾個(gè)：
$(”#msg”).html(); //返回id為msg的元素節(jié)點(diǎn)的html內(nèi)容。
$(”#msg”).html(”<b>new content</b>”);
//將“<b>new content</b>” 作為html串寫入id為msg的元素節(jié)點(diǎn)內(nèi)容中,頁面顯示粗體的new content
$(”#msg”).text(); //返回id為msg的元素節(jié)點(diǎn)的文本內(nèi)容。
$(”#msg”).text(”<b>new content</b>”);
//將“<b>new content</b>” 作為普通文本串寫入id為msg的元素節(jié)點(diǎn)內(nèi)容中,頁面顯示<b>new content</b>
$(”#msg”).height(); //返回id為msg的元素的高度
$(”#msg”).height(”300″); //將id為msg的元素的高度設(shè)為300
$(”#msg”).width(); //返回id為msg的元素的寬度
$(”#msg”).width(”300″); //將id為msg的元素的寬度設(shè)為300
$(”input”).val(”); //返回表單輸入框的value值
$(”input”).val(”test”); //將表單輸入框的value值設(shè)為test
$(”#msg”).click(); //觸發(fā)id為msg的元素的單擊事件
$(”#msg”).click(fn); //為id為msg的元素單擊事件添加函數(shù)
同樣blur,focus,select,submit事件都可以有著兩種調(diào)用方法。
5、集合處理功能
對于jquery返回的集合內(nèi)容無需我們自己循環(huán)遍歷并對每個(gè)對象分別做處理，jquery已經(jīng)為我們提供的很方便的方法進(jìn)行集合的處理。
包括兩種形式：
$(”p”).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//為索引分別為0，1，2的p元素分別設(shè)定不同的字體顏色。
$(”tr”).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//實(shí)現(xiàn)表格的隔行換色效果
$(”p”).click(function(){alert($(this).html())})
//為每個(gè)p元素增加了click事件，單擊某個(gè)p元素則彈出其內(nèi)容
6、擴(kuò)展我們需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //為jquery擴(kuò)展了min,max兩個(gè)方法
使用擴(kuò)展的方法（通過“$.方法名”調(diào)用）：
alert(”a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));
7、支持方法的連寫
所謂連寫，即可以對一個(gè)jquery對象連續(xù)調(diào)用各種不同的方法。例如：
$(”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”) //設(shè)定元素背景為灰色
$(”#msg”).height(300); $(”#msg”).width(”200″); //設(shè)定寬高
$(”#msg”).css({ color: “red”, background: “blue” });//以名值對的形式設(shè)定樣式
$(”#msg”).addClass(”select”); //為元素增加名稱為select的class
$(”#msg”).removeClass(”select”); //刪除元素名稱為select的class
$(”#msg”).toggleClass(”select”); //如果存在（不存在）就刪除（添加）名稱為select的class
9、完善的事件處理功能
jQuery已經(jīng)為我們提供了各種事件處理方法，我們無需在html元素上直接寫事件，而可以直接為通過jquery獲取的對象添加事件。
$(”#msg”).click(function(){alert(”good”)}) //為元素添加了單擊事件
$(”p”).click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//為三個(gè)不同的p元素單擊事件分別設(shè)定不同的處理
jQuery中幾個(gè)自定義的事件：
(1)hover(fn1,fn2)：一個(gè)模仿懸停事件（鼠標(biāo)移動到一個(gè)對象上面及移出這個(gè)對象）的方法。當(dāng)鼠標(biāo)移動到一個(gè)匹配的元素上面時(shí)，會觸發(fā)指定的第一個(gè)函數(shù)。當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會觸發(fā)指定的第二個(gè)函數(shù)。
//當(dāng)鼠標(biāo)放在表格的某行上時(shí)將class置為over，離開時(shí)置為out。
$(”tr”).hover(function(){
$(this).addClass(”over”);
},
function(){
$(this).addClass(”out”);
});
（2）ready(fn):當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)。
$(document).ready(function(){alert(”Load Success”)})
//頁面加載完畢提示“Load Success”,相當(dāng)于onload事件。與$(fn)等價(jià)
（3）toggle(evenFn,oddFn): 每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù)。如果點(diǎn)擊了一個(gè)匹配的元素，則觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)再次點(diǎn)擊同一元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)。隨后的每次點(diǎn)擊都重復(fù)對這兩個(gè)函數(shù)的輪番調(diào)用。
//每次點(diǎn)擊時(shí)輪換添加和刪除名為selected的class。
$(”p”).toggle(function(){
$(this).addClass(”selected”);
},function(){
$(this).removeClass(”selected”);
});
（4）trigger(eventtype): 在每一個(gè)匹配的元素上觸發(fā)某類事件。
例如：
$(”p”).trigger(”click”); //觸發(fā)所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype): 事件的綁定與反綁定
從每一個(gè)匹配的元素中（添加）刪除綁定的事件。例如：
$(”p”).bind(”click”, function(){alert($(this).text());}); //為每個(gè)p元素添加單擊事件
$(”p”).unbind(); //刪除所有p元素上的所有事件
$(”p”).unbind(”click”) //刪除所有p元素上的單擊事件
10、幾個(gè)實(shí)用特效功能
其中toggle()和slidetoggle()方法提供了狀態(tài)切換功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
11、幾個(gè)有用的jQuery方法
$.browser.瀏覽器類型：檢測瀏覽器類型。有效參數(shù)：safari, opera, msie, mozilla。如檢測是否ie：$.browser.isie，是ie瀏覽器則返回true。
$.each(obj, fn)：通用的迭代函數(shù)。可用于近似地迭代對象和數(shù)組（代替循環(huán)）。如
$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: ” + n ); });
等價(jià)于：
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
alert(”Item #”+i+”: “+tempArr[ i ]);
}
也可以處理json數(shù)據(jù)，如
$.each( { name: “John”, lang: “JS” }, function(i, n){ alert( “Name: ” + i + “, Value: ”
+ n ); });
結(jié)果為：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一個(gè)或多個(gè)其他對象來擴(kuò)展一個(gè)對象，返回這個(gè)被擴(kuò)展的對象。這是jquery實(shí)現(xiàn)的繼承方式。
如：
代碼
$.extend(settings, options);
//合并settings和options，并將合并結(jié)果返回settings中，相當(dāng)于options繼承setting并將繼承結(jié)果保存在
setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并將合并結(jié)果返回到setting中而不覆蓋default內(nèi)容。
可以有多個(gè)參數(shù)（合并多項(xiàng)并返回）
$.map(array, fn)：數(shù)組映射。把一個(gè)數(shù)組中的項(xiàng)目(處理轉(zhuǎn)換后)保存到到另一個(gè)新數(shù)組中，并返回生成的新數(shù)組。
如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr內(nèi)容為：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr內(nèi)容為：[2,3]
$.merge(arr1,arr2):合并兩個(gè)數(shù)組并刪除其中重復(fù)的項(xiàng)目。
如：$.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的沖突
很多時(shí)候我們自己定義了$(id)方法來獲取一個(gè)元素，或者其他的一些js類庫如prototype也都定義了$方法，如果同時(shí)把這些內(nèi)容放在一起就會引起變量方法定義沖突，Jquery對此專門提供了方法用于解決此問題。
使用jquery中的jQuery.noConflict();方法即可把變量$的控制權(quán)讓渡給第一個(gè)實(shí)現(xiàn)它的那個(gè)庫或之前自定義的$方法。之后應(yīng)用Jquery的時(shí)候只要將所有的$換成jQuery即可，如原來引用對象方法$(”#msg”)改為jQuery(”#msg”)。
如：
jQuery.noConflict();
// 開始使用jQuery
jQuery(”div p”).hide();
// 使用其他庫的 $()
$(”content”).style.display = ‘none’;
]]>
John Resig
John Resig, 這位是 JQuery JavaScript腳本庫的創(chuàng)建者, 同時(shí)也是Mozilla公司的技術(shù)人員.
進(jìn)一步了解John Resig
- How jQuery Works - 這是一基礎(chǔ)jquery教程, 教你如何使用 jQuery.
- Expandable Sidebar Menu ()- (jQuery 在線視頻教程l) 關(guān)于jQuery的一個(gè)基礎(chǔ)概念說明視頻. Live Demo is here.
15 Days Of jQuery
15 Days Of jQuery-15天內(nèi)從零到精通的 jQuery教程.
進(jìn)一步查看這個(gè)教程15 Days Of jQuery
- jQuery Online Movie Tutorial by John Resig
- Draggable, Droppables, Selectables… Oh My!
- Multiple File Upload Magic With Unobtrusive Javascript
- Rounded Corners with Javascript (jQuery)
學(xué)習(xí)jQuery
進(jìn)一步查看 LearningjQuery.com里面的教程
- Working with Events, part 1
- Animated Scrolling with jQuery 1.2
- Automatic Page Contents
- More Showing, More Hiding
Bassistance
Bassistance- 這個(gè)教程向你展示如何通過jQuery創(chuàng)建插件.
進(jìn)一步查看Bassistance教程
- Getting Started with jQuery- 本指南介紹了該jquery庫。它一步一步的解釋jQuery的細(xì)節(jié)，包括一個(gè)簡單的Hello World舉例演示，選擇和活動的基本知識，Ajax， FX和使用情況以及如何創(chuàng)建插件。
Cody Lindley
Cody Lindley- ThickBox 和 jTip plugins的創(chuàng)建人
Featured Tutorials on Cody Lindley
- JQuery To The Rescue- 一個(gè)使用jQuery的互動示范教程.
Remy sharp’s Blog
Remy sharp- 在 他的博客里面, 有許多關(guān)于jQuery的教程和插件,.
PS. 越翻越深奧, 有的看不懂, 無法翻譯. 這jQuery的基礎(chǔ)還真不好懂. 沒精神翻了, 大家自己看看英文吧. 改天有精神再翻譯剩下的.
Featured Tutorials on Remy sharp’s Blog
- Text box hints-You will see a lot of web sites with search boxes have text alreadypopulated inside of the field and when you select the input text box itdisappears and reappears when it’s not selected. This tutorial willshow you how can add a small amount of jQuery to add this feature toany of your web sites.
- Auto-populating Select Boxes using jQuery & AJAX-Allow the user to select a top level category from one select box andto automatically populate the sub-category using jQuery and Ajax.
Featured Tutorials on jQueryForDesigners
- Using Ajax to Validate Forms-With this tutorial you will be able to have your first forms that dothe following: 1) Live username checking, 2) Password confirmation andstrength, 3) Checking if an email address is already registered, 4) URLvalidation
- Image Cross Fade Transition- How to fade one image in to another?
Web Designer Wall
- jQuery Tutorials for Designers-This article contains 10 visual tutorials intended for web designersand newbies on how to apply Javascript effects with jQuery. Effectsinclude: Simple slide panel, Simple disappearing effect, Chain-abletransition effects, Accordion, Animated hover effect, Entire blockclickable, Collapsible panels.
CSS-Tricks
CSS-Tricks is a home forexamples, tutorials, tips, tricks, and news regarding Cascading StyleSheets. Chris Coyer is getting into jQuery lately and postinginteresting jQuery tutorials in his journey to learn jQuery.
Featured Tutorials on CSS-Tricks
- Fading Menu - Replacing Content- Chris Coyer shows us a nice menu effect emphasizing the designer’s perspective: “When I do this, make the CSS do this”.
- Improved Current Field Highlighting in Forms- How to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field.
- Fade-in Spoiler Revealer- Exploiting some of the “fading in” and “fading out” different page elements functions for a really simple Spoiler Revealer.
Getting started with jQuery
- The jSkinny on jQuery- A tutorial on the jQuery javascript library (from a Ruby/Rails perspective).
- How to Get Anything You Want- An introduction to jQuery selectors and traversal methods, and their use in navigating the DOM.
- It’s all about CSS- If you’ve got a good understand of CSS selectors, then you’re already familiar with how to query the DOM.
- jQuery Crash Course-For those who’d like to learn more about jQuery, one of the morepopular libraries, here’s a crash course written with code-savvy webdesigners in mind.
- jQuery in 15 minutes- A short introduction to jQuery.
- jQuery Basics- This section covers basic usage of jQuery from getting started to finding elements and working with CSS.
- Easy JavaScript for Designers-A nice little writeup for the jQuery Java Script Library. Designersneed all of the coding shortcuts they can and jQuery seems to deliver.
jQuery Cheat Sheets
- jQuery Cheatsheet-The cheat sheet comes in two flavors: 1) Made for iPhone and iPodTouch, and any other mobile device with internet access. 2) Old-schoolprintable A4 cheat sheet
- jQuery 1.2 Cheat Sheet
Building jQuery Plugins
- A Plugin Development Pattern- This article is meant to share a useful pattern for plugin authoring.
- Developing a jQuery Plugin- Sometimes the most difficult part is just taking the first step!
- Building Your First jQuery Plugin- This tutorial will take you step by step through creating your very own truncation plugin.
jQuery Effects and Techniques
- JQuery Pop-up Menu Tutorial- Pop-up link menu (mouse over menu)
- jQuery For Designers- Examples of writing Unobtrusive JavaScript to add simple behavior to a web page.
- AutoCompleter Tutorial - jQuery(Ajax)/PHP/MySQL
- SlideViewer- A jQuery image slider built on a single unordered list
- LavaLamp for jQuery lovers!- A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library.
- Auto-Complete Field with jQuery - Code Explained- An explanation of the code behind the auto-complete field in this post.
- Photo Slider Tutorial- It’s worth noting that you can easily use the photo slider to query a server script to load the images.
- Ajax will_paginate, jq-style- Using jQuery, to easily rock some gracefully degrading Ajax pagination.
- Rounded Corners- Adding rounded corners to an element, using no extra markup.
- Efficient Tag Cloud Algorithm- A post about a tag cloud algorithm , very useful.
- AutoCompleter Tutorial-This tutorial because will tell you how and why AutoCompleter works,knowing about this enables you to customise it a lot more.
- Creating a fading header- A tutorial explaining how to create the fading header graphic for Bits and Pixels.
Ajax development with jQuery
- Easy Ajax with jQuery-Akash Mehta will show us how to simplify the process of adding Ajax tothe application even further with the help of jQuery, a popularJavaScript library.
- Simplify Ajax development with jQuery- Discover how easy Ajax and DOM scripting can be
- Quick and Dirty AJAX- A walk through tutorial showing some of the basic ways you could use jQuery to add AJAX functionality to your site.
- A Quick Code Igniter and JQuery Ajax Tutorial- A step-by-step tutorial will show you how to combine the power of jQuery with Code Igniter(a PHP framework based on the MVC design pattern) to quickly andpainlessly pass a record ID through the javascript and over to theserver, where it will be passed to a mysql database, used to retrievesome data, and sent back to the page for display.
jQuery Fixing common Browser Issues
- Fixing IE overflow problem-IE has a different implementation of overflow compared to Firefox orSafari. This is a detailed account of the problem, and it’s fix.
- Using jQuery to align column heights- This tutorial will show you how to use the popular jQuery library to match the height of 2 columns in your layout.
- Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery- How to enable transparent PNG support in IE6
]]>