溫故而知新jQuery雜項

記錄一些jQuery中常見的function
html()---innerHTML;
text()----innerText
val() --多用於表單元素,用於讀寫值
each(function(index,obj){..}) ---常用語循環對象數組,如選擇器選中的元素組,注意第一個爲索引,且傳入的爲HTML對象,轉換成jQuery需要使用對應的$()進行包裝
使用[0]訪問一個$("a")返回的數組對象時,會將其轉換成一個HTML對象,所以如果需要訪問jQuery集合對象的第一個元素,需要使用$("a").slice(0, 1)....方法截取第一個元素或者$('a:first')...
attr('','') -- 一個參數爲讀取,二個參數爲修改
html('') -- 不帶參數爲讀取,帶參數爲替換
text("") --- 同上,區別是對標籤的處理
append("") -- 添加內容,也可以用於移動指定元素
width() //height() 跨平臺的寬高獲取方法,帶參數也可以用於設置寬高
a.wrap(b),用於將a元素嵌入b元素之內
before(),after() --在指定元素前後插入內容

常見的事件監聽方法
blur( ), focus( ), load( ), resize( ),
scroll( ), unload( ), beforeunload( ),
click( ), dblclick( ), mousedown( ),
mouseup( ), mousemove( ), mouseover( ),
mouseout( ), mouseenter( ), mouseleave( ),
change( ), select( ), submit( ), keydown( ),
keypress( ), keyup( ), and error( ).

事件綁定的方法
1:bind("event name",date,handler) ; 其中date爲可選的參數
2:.eventName(); 使用等同上面
3:one("event name",date,handler) ;區別第一種,該綁定方法只會執行一次

移除事件綁定
1:unbind('event name',handler) 用於移除事件綁定

event對象的使用--即事件觸發時,傳入給監聽函數的參數
常見的有pageX ,pageY screenX screenY //用於獲取鼠標觸發所在的位置
target,relatedTarget 用於獲取觸發的目標
type 用於獲取事件的類型
常見的方法
event.preventDefault( ) ;阻止瀏覽器對事件的默認行爲

判斷觸發事件的按鍵
String.fromCharCode(event.keyCode);

hover事件,用於彌補a:hover 選擇器的跨瀏覽器問題
hover(over, out)

特效和動畫部分
hide() / show() 常見的隱藏和顯示,可以帶1個參數控制動畫的時間,毫秒爲單位,包括常量slow,faster等
也可以帶兩個參數,用於在動畫執行完成後調用的回調函數
toggle() 包含上隱藏和顯示元素,參數同上
fadeOut() 漸漸消失,參數同上
fadeIn() 漸漸出現
slideUp() 向上收縮
slideDown() 向下收縮
slideToggle() 用於切換收縮效果
fadeTo() 可以帶三個參數,速度,透明度,回調,用於提供可控的漸變效果,其中透明度爲0-1
animate() 提供自定義的動畫變化效果,使用第一個參數的json對象,對需要變化的css值進行設置
$("#target").animate({
width: "80%",
opacity: 0.333,
fontSize: "26pt",
marginLeft: "0.5in",
borderWidth: "15px"
}, 2000 );

jQuery提供的工具方法,如$.trim()等
$.each(items,function(index,item){...}) //循環數組對象
$.brower.msie 用於判斷瀏覽器類型,還有其他的safari opera msie mozilla version等屬性
使用if($.browser.msie) { } 進行判斷
$.support的使用同上,使用一些內部屬性判斷瀏覽器支持的行爲 如$.support.boxModel
$.makeArray(objs) 用於將dom元素轉換成一個數組保存,js中常見的是集合,轉換成數組後更方便使用,提供了反轉等方法,如:
var array =$.makeArray(document.getElementsByTagName("p"));
array.reverse( );

在數組中搜索
$.inArray(searchTerm, array))

過濾數組
$.grep( array,function(n,i)),

移除重複的元素
$.unique( );

判斷對象是否爲一個數組
$.isArray( )

循環處理數組元素,並返回一個新數組
var newarray=$.map(array, function(n, i){return x})

去除多餘的空格
$.trim( )

使用Ajax

load方法,常用於加載部分的html代碼,如一個div元素,使用get的方式提交數據
load(url, parameters, callback) , 一般可以用訪問同域名下的文件.除了URL 其他參數都是可選的, parameters可以使用json的格式進行傳遞,對於中文也建議使用encodeUri()進行轉義

$("#targetForm").serializeArray( )); 方便的講一個表單轉換成json後提交...同樣中文問題需要解決

post() 方法,區別於load,使用post的提交方式,參數的順序一致,在回調函數中,會傳入返回的結果.
tip:如果返回的是一個json格式的字符串,可以使用eval進行轉義,注意eval("var jsondate=("+strdate+")")

上述的Ajax功能只是簡化版本的Ajax方法,如果需要提供異常處理,可以使用完整版的$.ajax方法,提供了大量可選的參數配置
$.ajax({
type: "GET",
url: "message.txt",
data: {data: 1},
success: callback
});

其他常見屬性:
datatype來指定返回的數據類型,如Json,就節省了使用eval轉化的步驟
error: err 用於設置錯誤監聽的function,傳入3個參數用於判斷錯誤信息
timeout: 10,設置超時時間

對XML返回結果的解析,可以對返回的數據使用document.getElementsByTagName(..) //進行簡單的選擇

使用jQuery UI,除了原有的jQuery核心庫外還需要
css
<link type="text/css" href="http://jqueryui.com/latest/themes/ base/ui.all.css" rel="stylesheet" />
js
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ ui.core.js"></script>
如果還保護使用其他的UI組件,也需要進行引入,如datepicker

百葉窗組件
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
$("#accordion").accordion( ); 進行填充

創建一個節點的方式
<div id="accordion">
<h3><a href="#">Section 1</a></h3> //節點標題
<div> //一個節點的內容區域
<p>This is the first section.</p> //內容
</div>
</div>

Dialog組件,使用的內容較多
<script type="text/javascript"src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript"src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
<script type="text/javascript"src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
調用方式
$("#dialog").dialog({
buttons: {"Ok": function( ) {
$(this).dialog("close"); } }
});
其中#dialog爲一個選項被彈出的div,可以在內部設置所需的輸入框

進度條組件
<script type="text/javascript"src="http://jqueryui.com/latest/ui/ui.progressbar.js"></script>

$("#progressbar").progressbar({value: 30 }); //將一個div填充爲進度條,並且設置初始值

$("#progressbar").progressbar("value", 80); //調整進度條的值

tab組件
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

$(“#tabs").tabs( ); //將制定的div指定爲div的容器
數據格式如下
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Item one</span></a></li>
<li><a href="#fragment-2"><span>Item two</span></a></li>
<li><a href="#fragment-3"><span>Item three</span></a></li>
</ul>
<div id="fragment-1">
<p>This is tab one.</p></div>
<div id="fragment-2">
<p>This is tab two.</p></div>
<div id="fragment-3">
<p>This is tab three.</p></div>
</div>

詳細的可以查看相關的API