今天弄了一天的Ajax中文亂碼問題，Ajax的亂碼問題分為兩種：
1. JavaScript輸出的中文亂碼，
比如：alert("中文亂碼測試");
2. 這第二種就是Ajax從服務器端獲得的數據出現亂碼的問題。（我搜了n個小時試了n中方法才找到答案）
現在將我搜集的比較有效的方法都與大家分享：（我使用的開發環境是Eclipse，相信其他語言和開發環境都差不太多。）
比如
var message = xmlHttp.responseText;
alert("message: "+message);
獲得這個message輸出就是亂碼
解決辦法有兩種：
（1）在jsp文件里引入js文件時可以這樣寫：<script Charset="UTF-8" type="text/javascript" src="jslib/jquery-1.4.2.min.js"></script>，該方法具有移植性
（2）（該方法可能會導致換一臺電腦導入項目后js文件里中文會亂碼）. 修改編碼。切記要將代碼備份一下，改了編碼之后中文會變為亂碼。
在js文件上右鍵點擊Properties，最好是在菜單欄欄里選擇Window-->Perferences(以絕后患)，修改Text file encode 為UTF-8（這里應當與jsp中的編碼相同）
同樣的將JavaScript source file和JSP的Default encoding設置為UTF-8（這里應當與jsp中的編碼相同，這樣以后的項目就都是utf-8的編碼了，推薦使用這個）
（2）. 注意response.setContentType("text/html;charset=utf-8");和PrintWriter out = response.getWriter();的位置關系，切記要將PrintWriter out = response.getWriter();放在response.setContentType("text/html;charset=utf-8");的后面，否則設置的編碼將無效，這也是我弄了n久都搞不定的原因！！！
3. 客戶端發給服務器端得中文數據為亂碼
解決辦法：示例：客戶端的javaScript腳本
function verify(){
$.get("AJAXServer?name="+encodeURI(encodeURI($("#userName").val())),null,function callback(data){$("#result").html(data);});
}
?注意：encodeURI需要使用兩次！
服務器端代碼:
//1.取參數
String str = request.getParameter("name");
str = java.net.URIDecode.decode(str,"UTF-8")
]]>
]]>
我們不是最好的，但是我們會努力做的更好，我們愿意傾聽和接受所有用戶的心聲。最后，大家在使用過程中若發現任何的問題，或者有比較好的創意和想法，可以隨時向我們反饋(yanis.wang@gmail.com)，我們會隨時傾聽大家的意見，xhEditor的發展離不開大家的支持。
查看最新版演示：http://xheditor.com/demo
更多官方在線演示：
1. 默認模式：http://xheditor.com/demos/demo01.html
2. 自定義按鈕：http://xheditor.com/demos/demo02.html
3. 皮膚選擇：http://xheditor.com/demos/demo03.html
4. 其它選項：http://xheditor.com/demos/demo04.html
5. Javascript交互：http://xheditor.com/demos/demo05.html
6. 非utf-8編碼網頁調用：http://xheditor.com/demos/demo06.html
7. UBB可視化編輯：http://xheditor.com/demos/demo07.html
8. Ajax文件上傳：http://xheditor.com/demos/demo08.html
9. 插件擴展：http://xheditor.com/demos/demo09.html
10.iframe調用文件上傳：http://xheditor.com/demos/demo10.html
11.異步加載：http://xheditor.com/demos/demo11.html
v1.1.3 Change (2011-1-1)
- 調整：取消刪除線的快捷鍵：Ctrl+S
- 修正：IE瀏覽器下無邊框的table沒有顯示輔助的虛線邊框問題的修正
- 修正：IE瀏覽器下光標定位在編輯器中，xheditor(false)卸載編輯器會造成當前頁面光標被鎖死問題的修正
- 修正：®和©被瀏覽器強制轉為字符問題的修正
- 修正：從其它網站復制粘貼WORD文檔和普通HTML混合的內容時，會導致圖片丟失問題的修正
- 修正：urlType參數開啟情況下，mailto:地址被轉絕對地址問題的進一步修正
- 修正：Flash和視頻不支持輸入百分比數值問題的修正
- 優化：優化Word自動文檔清理功能，進一步提高代碼處理效率并且兼容Excel文檔粘貼
- 優化：優化formatXHTML函數，極大提高代碼格式化效率
官方下載：
- 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
4
]]>
本次v1.1.0版本主要變化如下：
1，可自定義表情根路徑(emotPath參數)
2，提供本地圖片等資源文件的前后臺路徑不一致問題的解決方案(urlBase參數)
3，雙擊鏈接、圖片等直接打開修改界面
4，Word代碼粘貼過濾功能由原先的IE only改為跨瀏覽器兼容
5，強制粘貼為文本功能(forcePasteText參數)
6，將本地電腦直接拖入編輯區域即可上傳在當前光標處，此功能需要HTML5上傳支持(Firefox,Chrome)
完整更新列表如下：
ver 1.1.0 (2010-9-1)
1. 添加：添加由網友shiny原創設計的皮膚NoStyle
2. 添加：demo07 UBB演示頁面添加Google地圖插件，也作為不定寬按鈕的演示
3. 添加：添加urlType轉非相對路徑中合并“..”到上一級路徑的功能
4. 添加：添加emotPath初始化參數，以將表情指向其它自定義URL路徑下，注意路徑必需以“/”結尾
5. 添加：添加urlBase初始化參數，用來定義超鏈接、圖片及Flash等文件的相對根路徑，同時也是urlType參數的參考根路徑
6. 添加：經用戶反饋意見，重新添加“預覽”功能按鈕
7. 添加：添加雙擊超鏈接、圖片、Flash和多媒體可直接打開相應修改界面的功能，注：某些瀏覽器雙擊Flash和多媒體會有問題
8. 添加：打開面板時可按Esc鍵隱藏當前的面板
9. 添加：初始化參數添加disableContextmenu，用以禁用瀏覽器在編輯區域的默認右鍵菜單，設置為true禁用，默認不禁用
10.添加：Word粘貼自動過濾功能由原先的IE only增加為跨瀏覽器兼容
11.添加：添加強制粘貼為文本功能，初始化參數forcePasteText設置為true開啟此功能，默認不強制文本
12.添加：添加Pidgin和IPB兩套表情，并在demo05和demo07中添加相應的配置演示
13.添加：初始化參數添加editorRoot，在某些特殊情況下定位編輯器的根路徑
14.添加：將本地電腦中的多個文件拖放至編輯器的編輯區即可上傳并插入，此功能需要瀏覽器支持HTML5上傳(Firefox,Chrome)
1. 修正：showIframeModal上傳模式下onUpload接口無效問題的修正
2. 修正：使用無效按鈕名稱會導致JS出錯問題的修正
3. 修正：IE6,IE7在iframe框架中使用xhEditor會在頁面中出現_xhe_cursor問題的修正
4. 修正：IE瀏覽器在圖片、FLASH等控件上按Backspace會導致整個頁面后退問題的修正
5. 修正：回車BR模式在IE瀏覽器下，按下回車只顯示一個空格不換行問題的修正
6. 修正：IE瀏覽器中會造成內存泄漏問題的修正
7. 修正：WebKit內核瀏覽器回車換行在切換一次源代碼后會丟失問題的修正
1. 調整：皮膚框架進行了調整，支持不定寬按鈕，需要的用戶可自行設計修改
2. 調整：為使按鈕配置更直觀簡便，原按鈕分隔符Separator變更為“|”，原按鈕換行符BtnBr變更為“/”
3. 調整：原localUrl參數名變更為urlType
查看最新版演示：http://xheditor.com/demo
更多官方在線演示：
1. 默認模式：http://xheditor.com/demos/demo01.html
2. 自定義按鈕：http://xheditor.com/demos/demo02.html
3. 皮膚選擇：http://xheditor.com/demos/demo03.html
4. 其它選項：http://xheditor.com/demos/demo04.html
5. Javascript交互：http://xheditor.com/demos/demo05.html
6. 非utf-8編碼網頁調用：http://xheditor.com/demos/demo06.html
7. UBB可視化編輯：http://xheditor.com/demos/demo07.html
8. Ajax文件上傳：http://xheditor.com/demos/demo08.html
9. 插件擴展：http://xheditor.com/demos/demo09.html
10.iframe調用文件上傳：http://xheditor.com/demos/demo10.html
11.異步加載：http://xheditor.com/demos/demo11.html
最新v1.1.0下載地址：
http://xheditor.com/download
]]>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService] //令WebService成功傳入Json參數，并以Json形式返回結果
[GenerateScriptType(typeof(Person))] //不是必要，但推薦添加(如果Person里面再嵌套另一個復雜類型，則必要聲明)
[ToolboxItem(false)]
public class WebService1 : System.Web.Services.WebService
{
///
/// 無任何參數
///
///
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
///
/// 傳入參數
///
///
///
[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;
}
///
/// 返回復雜類型
///
///
///
///
[WebMethod]
public Person GetPerson(string name, int age)
{
return new Person()
{
Name = name,
Age = age
};
}
}
///
/// 復雜類型
///
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService] //令WebService成功傳入Json參數，并以Json形式返回結果
[GenerateScriptType(typeof(Person))] //不是必要，但推薦添加(如果Person里面再嵌套另一個復雜類型，則必要聲明)
[ToolboxItem(false)]
public class WebService1 : System.Web.Services.WebService
{
///
/// 無任何參數
///
///
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
///
/// 傳入參數
///
///
///
[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;
}
///
/// 返回復雜類型
///
///
///
///
[WebMethod]
public Person GetPerson(string name, int age)
{
return new Person()
{
Name = name,
Age = age
};
}
}
///
/// 復雜類型
///
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}
2、編寫js調用以上方法
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
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>無標題頁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、設置了dataType為json后，result就直接為返回的Json對象。
*/
//調用無參數方法
$("#btnHelloWorld").click(function(){
$.ajax({
type: "POST",
contentType:"application/json",
url:"WebService1.asmx/HelloWorld",
data:"{}",
dataType:'json',
success:function(result){
alert(result.d);
}
});
});
//傳入1個參數
$("#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(" | "));
}
});
});
//返回復雜類型
$("#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>
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>無標題頁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、設置了dataType為json后，result就直接為返回的Json對象。
*/
//調用無參數方法
$("#btnHelloWorld").click(function(){
$.ajax({
type: "POST",
contentType:"application/json",
url:"WebService1.asmx/HelloWorld",
data:"{}",
dataType:'json',
success:function(result){
alert(result.d);
}
});
});
//傳入1個參數
$("#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(" | "));
}
});
});
//返回復雜類型
$("#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學習</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>
遠程服務器端js.txt的內容為:
var jimmy = {name:"jimmy.yang",email:jimmy.yang@163.com}
感覺是不是比ExtJs的ScriptTagProxy還要簡潔? 個人感覺Jquery簡單明了，短小精干，ExtJs功能強大，組件豐富！
]]>
1. jFlow
一個漂亮而整潔的圖片幻燈，被nettut推薦，如果你想自己做一個圖片幻燈效果，就去看看吧。
2. 使用jQuery UI實現推薦內容的幻燈展示
]]>
通過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’;
]]>
John Resig
John Resig, 這位是 JQuery JavaScript腳本庫的創建者, 同時也是Mozilla公司的技術人員.
進一步了解John Resig
- How jQuery Works - 這是一基礎jquery教程, 教你如何使用 jQuery.
- Expandable Sidebar Menu ()- (jQuery 在線視頻教程l) 關于jQuery的一個基礎概念說明視頻. Live Demo is here.
15 Days Of jQuery
15 Days Of jQuery-15天內從零到精通的 jQuery教程.
進一步查看這個教程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)
學習jQuery
進一步查看 LearningjQuery.com里面的教程
- Working with Events, part 1
- Animated Scrolling with jQuery 1.2
- Automatic Page Contents
- More Showing, More Hiding
Bassistance
Bassistance- 這個教程向你展示如何通過jQuery創建插件.
進一步查看Bassistance教程
- Getting Started with jQuery- 本指南介紹了該jquery庫。它一步一步的解釋jQuery的細節，包括一個簡單的Hello World舉例演示，選擇和活動的基本知識，Ajax， FX和使用情況以及如何創建插件。
Cody Lindley
Cody Lindley- ThickBox 和 jTip plugins的創建人
Featured Tutorials on Cody Lindley
- JQuery To The Rescue- 一個使用jQuery的互動示范教程.
Remy sharp’s Blog
Remy sharp- 在 他的博客里面, 有許多關于jQuery的教程和插件,.
PS. 越翻越深奧, 有的看不懂, 無法翻譯. 這jQuery的基礎還真不好懂. 沒精神翻了, 大家自己看看英文吧. 改天有精神再翻譯剩下的.
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
]]>