From：https://www.cnblogs.com/zengjie123/p/4893546.html

jQuery 參考手冊 - 選擇器：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

選擇器：https://www.runoob.com/jquery/jquery-ref-selectors.html

一、核心

$ 是 jquery 類的一個別名，$() 構造一個 jquery 對象，jQuery 的核心功能都是通過這個函數實現的。 jQuery 中的一切都基于這個函數，或者說都是在以某種方式使用這個函數。

1、 $(表達式)

根據這個表達式來查找所有匹配的元素。

$("div>p");? ? ?查找所有p元素，且這些p元素都是div的子元素.?
$("input:radio", document.forms[0]);? ? 查找文檔第一個表單中，所有的單選按鈕。?
$("div",xml.responseXML);? ?在一個由ajax返回的xml文檔中，查找所有的div元素。?

注意：jQuery() 的第二個參數是 DOM 節點內容。如果沒有指定那么 context 指向當前的文檔 (document) 。?

2、$(html標記字符串)

根據提供的 html 字符串，創建 jquery 對象包裝的dom元素。

$("<div><p>Hello</p></div>").appendTo("body");??
$("<input type='text'>"); ? ? 創建一個 <input> 元素必須同時設定 type 屬性

3、$(dom元素)

將一個或多個dom元素轉換為 jquery 對象。

$(document.body).css( "background", "black" ); 設置頁面背景色??
$(document).ready(function(){})==$(function(){})；在頁面加載完成后自動執行的代碼。

二、jquery 對象訪問

返回的是 jquery 對象，只能使用 jquery 方法，get 返回的是 dom 元素對象，只能使用 dom 方法.?

• 1、$(dom元素).each(function(){});??以每一個匹配的元素作為上下文來執行一個函數?
• 2、$(dom元素).size()==$(dom元素).length;? 對象中元素的個數。示例：<img src="test1.jpg"/> <img src="test2.jpg"/>，jquery代碼：$("img").size(); 返回2?
• 3、context：傳給 jQuery() 的原始的 DOM 節點內容，即 jQuery() 的第二個參數。如果沒有指定，那么 context 指向當前的文檔 (document) 。?
• 4、$(dom元素).get()：取得所有匹配的dom元素的集合。如果你想要直接操作 DOM 對象而不是 jQuery 對象，這個函數非常有用。?
• 5、$(dom元素).get(index)：取得其中一個匹配的元素.?
• 6、$(dom元素).index(): 搜索與參數表示的對象匹配的元素，并返回相應元素的索引值。?

三、插件機制

1、jQuery.fn.extend(object);

擴展 jQuery 元素集來提供新的方法,針對某一個dom元素。?

jQuery.fn.extend({?
? ? check: function() { return this.each(function() { this.checked = true; });},?
? ? uncheck: function() { return this.each(function() { this.checked = false; });}?
});?
調用：?
$("input[type=checkbox]").check();?
$("input[type=radio]").uncheck();?

2、$.extend(object);

用來在 jQuery 命名空間上增加新函數,針對所有dom元素。?

$.extend({?
? ? min:function(a,b){return a<b?a:b;},?
??? max:function(a,b){return a>b?a;b;}?
});?
調用：$.max(10,20);?

四、選擇器?

基本 選擇器：

$("#id") ? ? ? ? ? ?//ID選擇器, 根據給定的ID匹配一個元素
$("div") ? ? ? ? ? ?//元素選擇器, 選擇所有div
$(".classname") ? ? //類選擇器, 根據給定的類匹配元素。?
$("*") ? ? ? ? ? ? ?//匹配所有元素。
$(".classname,.classname1,#id1") ? //組合選擇器

層次 選擇器：

$("ancestor descendant"):在給定的祖先元素下匹配所有的后代元素?
$("parent > child"):在給定的父元素下匹配所有的子元素?
$("prev + next"):匹配所有緊接在 prev 元素后的 next 元素?
$("prev ~ siblings"):匹配 prev 元素之后的所有 siblings(同級) 元素

$("#id>.classname ") ? ? // 子元素選擇器
$("#id .classname ") ? ? // 后代元素選擇器
$("#id + .classname ") ? // 緊鄰下一個元素選擇器
$("#id ~ .classname ") ? // 兄弟元素選擇器

過濾 選擇器(重點)：

$("li:first") ???????// 第一個li
$("li:last") ????????// 最后一個li
$("li:even") ????????// 挑選下標為偶數的li
$("li:odd") ?????????// 挑選下標為奇數的li
$("li:eq(4)") ???????// 下標等于 4 的li(第五個 li 元素)
$("li:gt(2)") ???????// 下標大于 2 的li
$("li:lt(2)") ???????// 下標小于 2 的li
$("li:not(#runoob)") // 挑選除 id="runoob" 以外的所有li

內容 過濾 選擇器：

$("div:contains('Runob')") ? ?// 包含 Runob文本的元素
$("td:empty") ? ? ? ? ? ? ? ? // 不包含子元素或者文本的空元素
$("div:has(p)") ? ? ? ? ? ? ? // 匹配所有包含 p 元素的 div 元素?
$("td:parent") ? ? ? ? ? ? ? ?//含有子元素或者文本的元素

可見性 過濾 選擇器：

$("tr:visible") 查找所有可見的 tr 元素?
$("tr:hidden") 匹配所有的不可見元素，input 元素的 type 屬性為 "hidden" 的話也會被匹配到?

屬性 過濾 選擇器：

$("div[id]") 查找所有含有 id 屬性的 div 元素?
$("input[name='newsletter']") 查找所有 name 屬性是 newsletter 的 input 元素?
$("input[name!='newsletter']") 查找所有 name 屬性不是 newsletter 的 input 元素?
$("input[name^='news']") 查找所有 name 以 'news' 開始的 input 元素?
$("input[name$='letter']") 查找所有 name 以 'letter' 結尾的 input 元素?
$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素?
$("input[id][name$='man']") 找到所有含有 id 屬性，并且它的 name 屬性是以 man 結尾的?

$("div[id]") ? ? ? ? ?// 所有含有 id 屬性的 div 元素
$("div[id='123']") ? ?// id屬性值為123的div 元素
$("div[id!='123']") ? // id屬性值不等于123的div 元素
$("div[id^='qq']") ? ?// id屬性值以qq開頭的div 元素
$("div[id$='zz']") ? ?// id屬性值以zz結尾的div 元素
$("div[id*='bb']") ? ?// id屬性值包含bb的div 元素
$("input[id][name$='man']") //多屬性選過濾，同時滿足兩個屬性的條件的元素

狀態 過濾 選擇器：

$("input:enabled") ? ?// 匹配可用的 input
$("input:disabled") ? // 匹配不可用的 input
$("input:checked") ? ?// 匹配選中的 input
$("option:selected") ?// 匹配選中的 option

子元素：?

匹配其父元素下的第N個子或奇偶元素?
:nth-child(even)? ?偶數元素
:nth-child(odd)? ? ?奇數元素
:nth-child(3n)? ? ?
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)?

$("ul li:first-child") ?在每個 ul 中查找第一個 li?
$("ul li:last-child") ? 在每個 ul 中查找最后一個 li?
$("ul li:only-child") ? 在 ul 中查找是唯一子元素的 li

表單 選擇器：

$(":input") ???查找所有的input元素?
$("text") ?????匹配所有的單行文本框, 等價于 $("[type=text]")

推薦使用 $("input:text") 效率更高，下同

$(":password") 匹配所有密碼框?
$("radio") ????匹配所有單選按鈕?
$("checkbox") ?匹配所有復選框?
$("submit") ???匹配所有提交按鈕?
$("image") ????匹配所有圖像域?
$("button") ???匹配所有按鈕?
$("file") ?????匹配所有文件域?
$("hidden") ???匹配所有不可見元素，或者type為hidden的元素?

表單 對象 屬性

$("input:checked") ?匹配所有選中的被選中元素(復選框、單選框等，不包括select中的option)?
$("input:enabled") ?匹配所有可用元素?
$("input:disabled") 匹配所有不可用元素?
$("select option:selected") 匹配所有選中的option元素?

jQuery 常用的元素查找方法總結

$("#myELement") 選擇id值等于myElement的元素 $("div") 選擇所有的div標簽元素，返回div元素數組 $(".myClass") 選擇使用myClass類的css的所有元素 $("*") 選擇文檔中的所有的元素，可以運用多種的選擇方式進行聯合選擇：例如 $("#myELement,div,.myclass") $("A B") 查找A元素下面的所有子節點，包括非直接子節點 $("A>B") 查找A元素下面的直接子節點 $("A+B") 查找A元素后面的兄弟節點，包括非直接子節點 $("A~B") 查找A元素后面的兄弟節點，不包括非直接子節點層疊選擇器：$("form input") 選擇所有的form元素中的input元素$("#main > *") 選擇id值為main的所有的子元素$("label + input") 選擇所有的label元素的下一個input元素節點，$("#prev ~ div") 同胞選擇器，該選擇器返回的為id為prev的標簽元素的所有的屬于同一個父元素的div標簽基本過濾選擇器：$("tr:first") 選擇所有tr元素的第一個$("tr:last") 選擇所有tr元素的最后一個$("input:not(:checked) + span") 過濾掉：checked 的選擇器的所有的input元素$("tr:even") 選擇所有的tr元素的第0，2，4... ...個元素（注意：數組序號是從0開始）$("tr:odd") 選擇所有的tr元素的第1，3，5... ...個元素$("td:eq(2)") 選擇所有的td元素中序號為2的那個td元素$("td:gt(4)") 選擇td元素中序號大于4的所有td元素$("td:ll(4)") 選擇td元素中序號小于4的所有的td元素$(":header")$("div:animated")內容過濾選擇器：$("div:contains('John')") 選擇所有div中含有John文本的元素$("td:empty") 選擇所有的為空（也不包括文本節點）的td元素的數組$("div:has(p)") 選擇所有含有p標簽的div元素$("td:parent") 選擇所有的以td為父節點的元素數組可視化過濾選擇器：$("div:hidden") 選擇所有的被hidden的div元素$("div:visible") 選擇所有的可視化的div元素屬性過濾選擇器：$("div[id]") 選擇所有含有id屬性的div元素$("input[name='newsletter']") 選擇所有的name屬性等于'newsletter'的input元素$("input[name!='newsletter']") 選擇所有的name屬性不等于'newsletter'的input元素$("input[name^='news']") 選擇所有的name屬性以'news'開頭的input元素$("input[name$='news']") 選擇所有的name屬性以'news'結尾的input元素$("input[name*='man']") 選擇所有的name屬性包含'news'的input元素$("input[id][name$='man']") 可以使用多個屬性進行聯合選擇該選擇器是得到所有的含有id屬性并且那么屬性以man結尾的元素子元素過濾選擇器：$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")$("div span:first-child") 返回所有的div元素的第一個子節點的數組$("div span:last-child") 返回所有的div元素的最后一個節點的數組$("div button:only-child") 返回所有的div中只有唯一一個子節點的所有子節點的數組表單元素選擇器：$(":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") 選擇所有的被checked的表單元素$("select option:selected") 選擇所有的select 的子元素中被selected的元素選取一個name 為 S_03_22 的 input text框的上一個td的text值$("input[@name =S_03_22]").parent().prev().text()名字以 S_ 開始，并且不是以 _R 結尾的$("input[@name ^='S_']").not("[@name $='_R']")一個名為 radio_01 的 radio 所選的值$("input[@name =radio_01][@checked]").val();

jQuery 快速查詢大全

常用的選擇器：#id 根據給定的id匹配.classname 根據給定的類名匹配name 根據給定的元素名匹配 * 匹配所有的元素select1,select2 將每一個匹配到的元素合并后一起返回s1 s2 選取s1元素里所有的s2元素 子孫parent>child 獲取parent元素下的child元素 兒子prev+next 選取緊接在prev元素后的next元素prev~siblings 選取prev之后所有的siblings元素常用的過濾選擇器：:first 選取第一個元素:last 選取最后一個元素:not(selector) 去除所有與給定選擇器匹配的元素:even 選取索引值為偶數的元素，從0開始:odd 選取索引值為奇數的元素:eq(index) 匹配一個給定索引值的元素:gt(index) 匹配大于給定索引值的元素:lt(index) 匹配小于給定索引值的元素:header 選擇h1，h2....一類的標簽:animated 匹配正執行動畫效果的元素常用的內容過濾選擇器：:contains(text) 匹配包含給定文本的元素:empty 匹配所有不包含子元素或者文本的空元素:has(selector) 匹配含有選擇器所匹配元素的元素:parent 選取含有子元素或文本的元素:hidden 選取所有不可見元素:visible 選取所有可見元素常用的屬性過濾選擇器(跟在元素后面用，過濾器)：[attr] 選取擁有此屬性的元素[arrt=val] 屬性等于val [arrt!=val] 屬性不等于val [arrt^=val] 屬性以val開始的[arrt$=val] 屬性以val結束的 [arrt*=val] 屬性包含val的 [arrt~=val] 屬性包含val且以空格隔開[attr1][attr2]... 多個屬性選擇器合并成一個復合屬性選擇器常用的表單選擇器(直接使用)：:input 選取所有<input>、<textarea>、<select>、<button>元素:text 選取所有的單行文本框:password 選取所有的密碼框:radio 選取所有的單選按鈕:checkbox 選取所有的復選框:submit 選取所有的提交按鈕:image 選取所有的圖像按鈕:reset 選取所有的重置按鈕:button 選取所有的按鈕:file 選取所有的上傳域常用的表單對象屬性過濾選擇器：:disabled 選取所有不可用元素:enabled 選取所有可用元素:checked 選取所有被選中的元素:selected 選取所有被選中的選項元素管理選擇器得到的結果：size() 獲取選擇器中元素的個數index(element) 查找元素在集合中的位置add() 給集合添加元素not() 去除元素集合中的某個元素filter() 篩選去除元素集合中的元素獲得新集合find() 通過查詢獲取新的元素集合each() 對選擇器中的元素進行遍歷end() 回到操作對象的上一個對象andself() 將前面的對象進行組合后共同處理創建元素節點：用 $() 來創建節點var $node = $('<p title="hello">hello</p>');插入元素節點：append() 向每個匹配的元素內部追加子元素內容 appendTo()prepend() 向每個匹配的元素內容前置子元素內容 prependTo()after() 在每個匹配元素后插入同輩內容 insertAfter()before() 在每個匹配元素之前插入內容 insertbefore()刪除元素節點：remove()var $remove_li = $("ul li:eq(1)").remove( ); 刪除ul第2個li，返回被刪除的li對象$("ul li").remove("li[ title='a']"); 通過參數來選擇性刪除detach()var $remove_li =$("ul li:eq(1)").detach( ); 和remove類似，但綁定的事件、附加的數據會保留下來empty()$("ul li:eq(1)").remove( ); 清空所選元素中所有的后代元素內容復制元素節點：clone()$("li:eq(1)").clone(true).appendTo("ul");復制第二個li元素插入到ul中，并傳遞了一個參數true代表復制元素同時復制元素中綁定的事件。替換元素節點：replaceWith()$("li:eq(1)").replaceWith("<li>c</li>"); 替換掉第二個li元素replaceAll() 和 replaceWith() 顛倒語法包裹元素節點：wrap() 用參數標簽把外面的標簽包裹起來$("li").wrap(<i></i>);wrapAll() 用參數標簽把多個標簽整體包裹起來，如其中有其他標簽則放到包裹元素后wrapInner() 把匹配到元素內部的內容用參數標簽包裹起來節點屬性操作：attr() 獲取前面元素的參數中的屬性，參數可以 kv 對用來設置屬性removeAttr() 刪除屬性節點樣式操作：addClass() 追加參數中的類選擇器，不同會疊加，相同會覆蓋removeClass() 刪除類選擇器toggleClass() 重復切換參數中的類選擇器，有就去除，沒有就使用hasClass() 判斷是否含有參數中的類選擇器樣式，返回boolean值設置獲取值：html() 設置內容會解析html語句，無參數時獲取text() 設置內容不會解析語句，無參數時獲取val() 設置input元素value值，下拉框選中項，下拉列表多選項(需要用[]括起來，逗號分開多個值)，復選框選中項，單選框選中項，無參數時獲取遍歷節點操作：children() 取得匹配元素的子元素集合next() 取得后面緊鄰的同輩元素prev() 取得前面緊鄰的同輩元素parent() 取得匹配元素的父級元素parents() 取得匹配元素的先輩元素的集合siblings() 取得匹配元素前后所有的同輩元素closest() 取得最近的匹配元素，先取自身如果自身不存在，則向父元素取最近的一個先輩CSS-DOM技術：$("p").css({"color":"#ff0000", "background":"blue"}); 不加參數是獲取css，加參數是修改cssscrollTop() 和 scrollLeft() 設置相對滾動條頂部和左側的偏移offset() 獲取和設置元素在當前視窗的相對偏移$("#dv").offset({top:10, left:30})；var $offset = $("#dv").offset();$("#dv").html("left:" + $offset.left + ",top:" + $offset.top);position() 獲取匹配元素相對父元素的偏移

五、屬性操作

操作屬性：?

$("img").attr("src"); 返回文檔中第一個圖像的src屬性值。?
$("img").attr("src","test.jpg"); 為所有匹配的元素設置一個屬性值?
$("img").attr("title", function() { return this.src }); 為所有匹配的元素設置一個計算的屬性值?
$("img").removeAttr("src"); 從每一個匹配的元素中刪除一個屬性?
$("img").attr({ src: "test.jpg", alt: "Test Image" }); 將一個“名/值”形式的對象設置為所有匹配元素的屬性。

操作 CSS

$("p").addClass("selected"); ? ?為每個匹配的元素添加指定的類名?
$("p").removeClass("selected"); 從所有匹配的元素中刪除全部或者指定的類。一個或多個要刪除的CSS類名，請用空格分開?
$("p").removeClass(); ? ? ? ? ? 刪除匹配元素的所有類?
$("p").toggleClass("selected"); 如果存在（不存在）就刪除（添加）一個類?

var count = 0;?
$("p").click(function(){?
? ? $(this).toggleClass("highlight", count++ % 3 == 0);?
}); ?//每點擊三下加上一次 'selected' 類?

HTML代碼:?

$("div").html();? ? 取得第一個匹配元素的html內容?
$("div").html("<p>Hello Again</p>");? ? 設置每一個匹配元素的html內容?

文本：?

$("p").text();? ? 取得所有匹配元素的內容?
$("p").text("<b>Some</b> new text.");? ? 設置所有匹配元素的文本內容?

值：

$("#single").val()? ? 獲得第一個匹配元素的當前值。?
$("input").val("hello world!");? ? 設置每一個匹配元素的值?

六、篩選?

過濾：?

? ?1、$("p").eq(1) 獲取第N個元素，這個元素的位置是從0算起?
? ?2、 if ( $(this).hasClass("protected") ) 檢查當前的元素是否含有某個特定的類，如果有，則返回true。?
? ?3、$("p").filter(".selected") 篩選出與指定表達式匹配的元素集合?
? ?4、is(expr) 用一個表達式來檢查當前選擇的元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。?
? ?5、$("p").not( $("#selected")[0] ) 刪除與指定表達式匹配的元素?

查找：

? ?1、$("div").children();取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。?
? ?2、$("p").find("span");搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。?
? ?3、$("p").next();取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合?
? ?4、$("p").prev();取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。?
? ?5、$("div").parent;取得一個包含著所有匹配元素的唯一父元素的元素集合。?
? ?6、$("span").parents;找到每個span元素的所有祖先元素?
? ?7、$("div").siblings();取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合?

七、文檔處理

內部插入：?

? ? ? ? 1、$("p").append("<b>Hello</b>"); 向每個匹配的元素內部尾部追加內容?
? ? ? ? 2、$("p").prepend("<b>Hello</b>"); 向每個匹配的元素內部前部追加內容?
? ? ? ? 2、$("p").appendTo("#foo"); 把所有段落追加到ID值為foo的元素中。?

外部插入：?

? ? ? ? 1、$("p").after("<b>Hello</b>"); 在每個匹配的元素之后插入內容?
? ? ? ? 2、$("p").before("<b>Hello</b>"); 在每個匹配的元素之前插入內容?

包裹?

? ? ? ? 1、$("p").wrap("<div class='wrap'></div>"); 把所有匹配的元素用其他元素的結構化標記包裹起來。?

替換：?

? ? ? ? 1、$("p").replaceWith("<b>Paragraph. </b>"); 將所有匹配的元素替換成指定的HTML或DOM元素。?

刪除：?

? ? ? ? 1、$("p").empty(); 刪除匹配的元素集合中所有的子節點。?
? ? ? ? 2、$("p").remove(); 從DOM中刪除所有匹配的元素?

八、CSS 操作?

CSS:?

? ? ? ? 1、$("p").css("color"); 取得第一個段落的color樣式屬性的值?
? ? ? ? 2、$("p").css({ color: "#ff0011", background: "blue" }); 把一個“名/值對”對象設置為所有匹配元素的樣式屬性。?
? ? ? ? 3、$("p").css("color","red"); 在所有匹配的元素中，設置一個樣式屬性的值?

位置：?

? ? ? ? 1、var offset = p.offset();獲取匹配元素在當前視口的相對偏移，返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。?
? ? ? ? 2、var position = p.position();獲取匹配元素相對父元素的偏移?

尺寸：?

? ? ? ? 1、$("p").height(); 取得第一個匹配元素當前計算的高度值（px）。?
? ? ? ? 2、$("p").height(20); 為每個匹配的元素設置CSS高度(hidth)屬性的值?
? ? ? ? 3、$("p").width(); 取得第一個匹配元素當前計算的寬度值（px）。$(window).width(); 獲取當前窗口的寬?
? ? ? ? 4、$("p").width(20); 為每個匹配的元素設置CSS寬度(width)屬性的值?

九、效果?

基本：?

1、$("p").show() 顯示隱藏的匹配元素?
2、$("p").hide() 隱藏顯示的元素?
3、$("p").show("slow"); 以優雅的動畫顯示所有匹配的元素，并在顯示完成后可選地觸發一個回調函數。?
speed(String,Number) : 三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)?
callback (Function) ?: (Optional) 在動畫完成時執行的函數，每個元素執行一次。

示例：用迅速的動畫將隱藏的段落顯示出來，歷時200毫秒。并在之后執行反饋！?

<p style="display: none">Hello</p> //jQuery 代碼: $("p").show("fast",function(){ $(this).text("Animation Done!"); });

4、$("p").hide("slow"); 以優雅的動畫隱藏所有匹配的元素，并在顯示完成后可選地觸發一個回調函數。?
5、$("p").toggle() 切換元素的可見狀態?
6、$("p").toggle("slow"); 以優雅的動畫切換所有匹配的元素，并在顯示完成后可選地觸發一個回調函數?

淡入淡出:?

1、$("p").fadeIn("slow"); 通過不透明度的變化來實現所有匹配元素的淡入效果，并在動畫完成后可選地觸發一個回調函數?
2、$("p").fadeOut("slow"); 通過不透明度的變化來實現所有匹配元素的淡出效果，并在動畫完成后可選地觸發一個回調函數。?
3、$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，并在動畫完成后可選地觸發一個回調函數?

自定義：?
1、$("#block").animate({?
? ? width: "90%",?
? ? height: "100%",?
? ? fontSize: "20em",?
? ? borderWidth: 10?
}, 1000 ); ? ?用于創建自定義動畫的函數。

十、事件

事件處理：?

1、$("p").bind("click", function(){ alert( $(this).text() );}); 為每一個匹配元素的特定事件（像click）綁定一個事件處理器函數?
2、$("p").one("click",function(){alert(${this}.text());}) 當所有段落被第一次點擊的時候，顯示所有其文本?
3、trigger(type,[data])在每一個匹配的元素上觸發某類事件?

事件委派

$("p").live("click", function(){$(this).after("<p>Another paragraph!</p>");});?
給所有當前以及將來會匹配的元素綁定一個事件處理函數（比如click事件）。
也能綁定自定義事件。與bind()不同的是，live()一次只能綁定一個事件?

事件切換:

一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法?
$("td").hover(?
function () {?
?? ?$(this).addClass("hover");?
},?
function () {?
?? ?$(this).removeClass("hover");?
}?
); 鼠標懸停的表格加上特定的類?

每次點擊后依次調用函數。?
$("td").toggle(?
function () {?
?? ?$(this).addClass("selected");?
},?
function () {?
? ?$(this).removeClass("selected");?
}?
);

事件 示例

$("p").blur(); 觸發每一個匹配元素的blur事件?
$("p").blur( function () { alert("Hello World!"); } ); 在每一個匹配元素的blur事件中綁定一個處理函數?
change()；change事件會在元素失去焦點的時候觸發，也會當其值在獲得焦點后改變時觸?
change(fn);在每一個匹配元素的change事件中綁定一個處理函數。?
$("p").click(); 觸發每一個匹配元素的click事件?
$("p").click(function(){});在每一個匹配元素的click事件中綁定一個處理函數?
dblclick()；dblclick事件會在元素的同一點雙擊時觸發。?
$("p").dblclick( function () { alert("Hello World!"); }); 在每一個匹配元素的dblclick事件中綁定一個處理函數。?
$(document).ready(function(){ $("#login").focus();}); 觸發每一個匹配元素的focus事件。?
$("input[type=text]").focus(function(){this.blur();}); 在每一個匹配元素的focus事件中綁定一個處理函數。?
keydown()；keydown事件會在鍵盤按下時觸發。?
keydown(fn)；在每一個匹配元素的keydown事件中綁定一個處理函數。?
keypress()；觸發每一個匹配元素的keypress事件?
keypress(fn)；在每一個匹配元素的keypress事件中綁定一個處理函數。?
keyup()；觸發每一個匹配元素的keyup事件?
keyup(fn)；在每一個匹配元素的keyup事件中綁定一個處理函數。?
mousedown();?
mouseup();?
mousemove();?
mouseover();?
mouseout();?
$("form:first").submit();提交本頁的第一個表單。?
$("form").submit(function(){return false;});阻止頁面提交。

十一、ajax?

ajax 請求

1、通用方式：

? ? $.ajax(prop); prop是一個hash表，它可以傳遞的key/value有以下幾種:?
? ? (String)type：數據傳遞方式(get或post)。?
? ? ((String)url：數據請求頁面的url?
? ? ((String)data：傳遞數據的參數字符串，只適合post方式?
? ? ((String)dataType：期待數據返回的數據格式(例如 "xml", "html", "script",或 "json")?
? ? ((Boolean)ifModified： 當最后一次請求的相應有變化是才成功返回，默認值是false?
? ? ((Number)timeout:設置時間延遲請求的時間。可以參考$.ajaxTimeout?
? ? ((Boolean)global：是否為當前請求觸發ajax全局事件，默認為true?
? ? ((Function)error：當請求失敗時觸發的函數。?
? ? ((Function)success：當請求成功時觸發函數?
? ? ((Function)complete：當請求完成后出發函數?

2、$.get(url, params, callback)?

? ? 用 get 方式向遠程頁面傳遞參數，請求完成后處理函數，除了url外，其它參數任意選擇！?
? ? $.get("ajax.asp",?
?? ? ? ?{name:"young", age:"25"},?
?? ? ? ?function(data){ alert("Data Loaded: " + data); }?
? ? )?

3、$.getJSON(url, params, callback)

? ? ? ? 用 get 方式向遠程 json 對象傳遞參數，請求完成后處理函數 callback?

4、$.post(url, params, callback)

? ? ? ? 用 post 方式向遠程頁面傳遞參數，請求完成后處理函數 callback?

十二、工具類

數組 和 對象操作

1、$.each(obj,callback); 通用例遍方法，可用于例遍對象和數組。
? ? 回調函數擁有兩個參數：
? ? ? ? 第一個為對象的成員或數組的索引，
? ? ? ? 第二個為對應變量或內容。?
? ?$.each( [0,1,2], function(i, n){alert( "Item #" + i + ": " + n );});?
2、jQuery.grep(array,callback,[invert])；使用過濾函數過濾數組元素，此函數至少傳遞兩個參數：待過濾數組和過濾函數?
3、$.map(array,callback);將一個數組中的元素轉換到另一個數組中?
4、$.inArray(value,array);確定第一個參數在數組中的位置(如果沒有找到則返回 -1 ),從0開始。?
5、$.merge( [0,1,2], [2,3,4] )?
? ? 合并兩個數組。返回的結果會修改第一個數組的內容，
? ? 第一個數組的元素后面跟著第二個數組的元素，不去掉重復項。?
6、$.unique(array);刪除數組中重復元素?
7、$.trim(" hello, how are you? "); 去掉字符串起始和結尾的空格?
8、$.isArray(obj);測試對象是否為數組。?
9、$.isFunction(obj); 測試對象是否為函數?

URL

1、$.param(obj); 將表單元素數組或者對象序列化。是.serialize()的核心方法。?
? ? var params = { width:1680, height:1050 }; var str = jQuery.param(params);?

2、$("form").serialize() ；序列表單內容為字符串，用于 Ajax 請求?

十三、jquery 操作 單選框?

? ? if($("input[type='radio']:checked")){?
? ? ? ? var tt=$("input[name='chk']:checked").val();?
? ? }?

十四、jquery 操作 復選框?

? ? var chkArr="";?
? ? $(".cc:checked").each(function(){?
? ? ? ? ? ?chkArr+=$(this).val()+"|";?
? ? });?

十五、jquery 實現 復選框 全選

? ? var checked=$("#allchk").attr("checked");?
? ? $(".ww").each(function(){?
? ? ? ?if($(this).attr("checked")!=checked){$(this).click();}?
? ? 316});

總結

以上是生活随笔為你收集整理的JQuery 方法查询大全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。