jQuery筆記

第二章 jQuery基礎選擇器

#id選擇器 $(“#my_id”)

element選擇器 $(“div”)

.class選擇器$(“.class”)

*選擇器 $(“div *”)

選擇任意多個指定元素，逗號隔開 $(“div, p”)

某一層次的一個或多個元素,空格隔開 $(“ancestor descendant”)

選擇子集元素 $(“parent>child”)

相鄰的下一個元素 $(“prev+next”)

全部相鄰的元素 $(“prev~siblings”)

 

第三章 jQuery過濾性選擇器

:first獲取第一個元素 $(“li:first”)

:eq(index)獲取任一個元素 $(“li:eq(3)”)

:contains(text)按照文本內容選擇 $(“li:contains(‘123’)”)

:has()selector按包含的元素名稱 $(“li:has(‘p’)”)

:hidden獲取全部不可見的元素 $(p:hidden)

:visible

[attribute=value]獲取與屬性名和屬性值完全相同的全部元素 $(“li[title=‘123’]”)

[attribute!=value]

[attribute*=value]獲取屬性之中包含指定內容的全部元素 $(“li[title*=’123’]”)

:first-child獲取每個父元素中返回的首個子元素 $(“li:first-child”)

:last-child

 

第四章 jQuery表單選擇器

:input返回全部的表單元素  $("#frmTest :input") 注意:前有空格

 :text全部單行的文本輸入框元素 $(“#frmTest :text”)

 :password全部的數碼輸入文本框元素 $(“#frmTest :password”)

 :radio全部單選按鈕元素 $(“#frmTest :radio”)

 :checkbox

:submit獲取”type”屬性值爲”submit”的<input>元素 $("#frmTestinput:submit") 注意:前無空格

 :image獲取”type”屬性值爲”image”的<input>元素 $("#frmTest :image")

 :button獲取”type”屬性值爲”image”的<input>元素和<button>元素 $("#frmTest :button")

:checked獲取處於選中狀態的全部元素 $(“$frmTest :checked”)

:selected 獲取<select>下拉列表框中處於選中狀態的全部<option>元素$("#frmTest :selected")

 

第五章jQuery操作DOM元素

attr(屬性名)返回元素的屬性，attr(屬性名，屬性值)設置屬性值 $(“#a1”).attr(“href”)

html()和text()返回元素內容，包含參數則設置元素內容，text()不包含HTML格式代碼

addClass()參數爲增加元素的樣式名稱，css()直接將樣式的屬性值寫在空號中 $("#content").css({"background-color":"red","color":"white"})

removeAttr(name)和removeClass(class)移除元素的屬性和樣式 $("#content").removeClass("blue white")

append(content)向指定元素中追加元素，可以是字符、HTML元素標記或返回字符串的函數 $("body").append(rethtml())

appendTo()向指定的元素內插入內容 $(content).appendTo(selector)

    var$html = "<span class='red'>小青蛙</span>"

   $($html).appendTo("div");

before()和after()在元素前後插入內容 $(selector).before(content) $(".green").after($html)

clone()生成一個被選中元素的的副本$(selector).clone()

replaceWith()和replaceAll()替換元素或元素中的內容

wrap()包裹元素本身，wrapInner()包裹元素中的內容 $(".red").wrapInner("<i><i>")

each()遍歷指定的元素集合 $(selector).each(function(index))

$("span").each(function (index) {

       if (index == 1) {

           $(this).attr("class", "red");

       }

});

remove()刪除所選元素和子元素，通過添加過濾參數選定元素，empty只刪除所選元素的子元素 $(“span”).remove(“.red”)

 

第六章 jQuery事件與應用

ready()類似於onLoad()，但前者只要頁面的DOM結構加載後便觸發，而後者必須在頁面全部元素加載成功才觸發。 $(document).ready(function(){})等價於$(function(){})

bind()綁定元素的事件 $(selector).bind(event, [data] function)，多個時間名稱用空格隔開

    $("#btntest").bind("clickmouseout", function () {$(this).attr("disabled","true"); });

hover()當鼠標移到元素上是執行第一個函數，移出時第二個函數 $(selector).hover(over, out);

toggle()可以在元素的click事件綁定兩個或兩個以上的函數，還可以實現元素的隱藏與顯示的切換。$(selector).toggle(fun1(), fun2(), funN(), …); $("div").toggle();

unbind()移除已綁定的事件 $(selector).unbind(event, fun); $("div").unbind("clickdblclick");

one()方法綁定的事件只會觸發一次 $(selector).one(event, [data], fun);

trigger()手動觸發元素指定的事件 $(selector).trigger(event)

focus事件在元素獲取焦點時觸發，blur在元素失去焦點時觸發

change事件在一個元素的值變化時觸發

live()與bind()相同，還可以綁定動態元素

 

第七章 jQuery動畫特效

show()和hide()方法顯示和隱藏元素 $(selector).hide([speed[,callback]]);

toggle()實現動畫切換

slideUp()和slideDown()滑動效果 $(selector).slideUp([speed[, callback]]);

slideToggle()

fadeIn()與fadeOut()實現淡入淡出

fadeTo()設置淡入淡出效果的不透明度

animate()簡單的動畫 $(selector).animate({params},speed,[callback])，在移動位置之前，必須將被移元素的’position’屬性值設爲’absolute’或’relative’

stop()方法停止所有動畫 $(selector).stop([clearQueue],[goToEnd])clearQueue是否停止正在執行的動畫，goToEnd是否完成正在執行的動畫

delay()設置一個延時推遲動畫 $(selector).delay(duration)

 

第八章 jQuery實現Ajax應用

load()異步請求數據load(url,[data],[callback])

getJson()異步加載JSON格式數據 $.getJSON(url,[data],[callback])

getScript()異步加載並執行js文件$.getScript(url,[callback])

get()以GET方式從服務器獲取數據 $.get(url,[callback])

post()

serialize()序列化表單元素值,生成標準URL編碼文本字符串 $(selector).serialize()

ajax()加載服務器數據$.ajax([settings])

ajaxSetup()設置全局Ajax默認選項

ajaxStart()，ajaxStop()綁定Ajax事件，在Ajax請求發出前、後觸發函數$(selector).ajaxStart(function())

 

第九章 jQuery常用插件

validate表單驗證插件自帶包含必填、數字、URL在內容的驗證規則，即時顯示異常信息。

$(form).validate({options})

ajaxForm表單插件，實現ajax方式向服務器提交表單數據，並通過options對象獲取服務器返回數據。$(form).ajaxForm ({options})

lightbox圖片燈箱插件，可以用圓角的方式展示選中的圖片，使用按鈕查看上下張圖片，在加載圖片時自帶進度條，還能以自動播放的方式瀏覽圖片。$(linkimage).lightBox({options})

jqzoom圖片放大鏡插件。$(linkimage).jqzoom({options})

cookie插件，保存：$.cookie(key，value)；讀取：$.cookie(key)，刪除：$.cookie(key，null)

autocomplete搜索插件，當文本框輸入字符時，綁定後的插件將返回與字符相近的字符串提示選擇$(textbox).autocomplete(urlData,[options]);

contextmenu右鍵菜單插件。$(selector).contextMenu(menuId,{options});

lifocuscolor自定義<li>選中時的背景色 $(Id).focusColor(color)

twoaddresult可以實現對兩個數值進行相加和相減的運算，$.addNum(p1,p2) 和 $.subNum(p1,p2)

 

第10章 jQuery UI型插件

draggable拖拽插件，實現各種拖拽元素的效果$(selector).draggable({options})

droppable放置插件，將拖曳後的任意元素放置在指定區域中$(selector).droppable({options})

sortable拖拽排序 $(selector).sortable({options});

accordion面板摺疊$(selector).accordion({options});

tabs選項卡$(selector).tabs({options});

dialog 對話框$(selector).dialog({options});

menu菜單工具，創建多級內聯或彈出式菜單， $(selector).menu({options});

spinner微調按鈕，$(selector).spinner({options});

tooltip工具提示，$(selector).tooltip({options});

 

第11章 jQuery工具類函數

$.browser獲取瀏覽器的名稱和版本信息

$.support.boxModel顯示當前瀏覽器是否屬於標準的w3c盒子模型

$.isEmptyObject(obj);檢測一個對象的內容是否爲空

$.isPlainObject檢測對象是否爲通過{}或new Object()關鍵字創建的原始對象

$.contains (container, contained);能檢測在一個DOM節點中是否包含另外一個DOM節點

$.trim (str);

$. param的工具函數，能使對象或數組按照key/value格式進行序列化編碼$. param(obj);

$. extend的工具函數，可以對原有的工具函數進行擴展，自定義類級別的jQuery插件，還可以擴展原有的Object對象，在擴展對象時，兩個對象將進行合併，當存在相同屬性名時，後者將覆蓋前者