1.?????? jQuery核心函數

jQuery也可寫$,通常情況下$可能會與其他框架中的對象沖突（php有$的用法），所以如果所用的框架沒有$的用法，jQuery可用$代替

（1）$(document).ready() 一般縮寫為$(),參數為回調函數,文檔就緒時觸發,要優先于onload觸發

①????? $(document).ready(function () {});

②????? $( function () {});

（2）jQuery(elements) 將一個或多個dom對象轉換為jQuery對象

$(document.getElementById("txtName"))

???????? （3）根據提供的原始 HTML 標記字符串，動態創建由 jQuery 對象包裝的 DOM 元素。

①????? $("<input type='checkbox'>").appendTo("body")

②????? $("<input>", { type: 'textfield' }).appendTo("body")

???????? （4）檢索器（多個檢索條件同時滿足時，檢索表達式直接連接；滿足其中某個時，檢索表達式用", "連接。如[name="text"].divClass結果為樣式為divClass且name為text的元素）

???????? 以下結合例子分析檢索器的用法（為了簡單敘述，檢索結果用ID代替Dom元素）

?????????????????? Demo，有這樣一段html代碼，id從0-8，有div元素及span元素:

??????????? <div id="0" class="divClass">

??????????????? <span id="1" title="this is a span">

??????????????????? <div id="2">value2</div>

??????????????? </span>

??????????? </div>

??????????? <span id="3">3value</span>

??????????? <div id="4">

??????????????? <div id="5"></div>

??????????????? <div id="8"></div>

??????????????? <span id="6"></span>

??????????????? <div id="7"></div>

??????????? </div>

?????????????????? 普通檢索

①??? ?$("#id"): 根據給定的ID匹配一個元素。

和js的document.getElementById("")功能差不多，但也有區別：$獲取到的是i指定id的jQuery對象，后者獲取到的是dom對象 但$("#3")[0]與document.getElementById("3")指的都是id為3的dom對象

$("#3")獲取的結果即為 3

②??? $("dom元素名")：根據給定的元素名匹配所有元素

和js的document.getElementByTagName ("")功能類似

$("span")獲取的結果即為 1、3

③??? ?$(".class樣式名"): 根據給定的樣式匹配元素。

$(".divClass")獲取的結果即為 0

④??? ?$("*") ：匹配所有元素。結果為 0、1、2、3、4、5、6、7、8

層級

①??? ?$("div div"): 在給定的祖先元素下匹配所有的后代元素。

結果為 2、5、7、8

②??? $(" div>div ")：在給定的父元素下匹配所有的子元素啊

結果為 5、7、8

③??? $("div+div"):匹配所有緊接在 div 元素后的 div 元素。

結果為8

④??? $("div~div") ：匹配 div 元素之后的所有 div (同級) 元素。

結果為 4、7、8

簡單（該組檢索表達式中，用到索引的都不考慮是否同級，索引依據出現的先后順序）

①??? $("div:first") 匹配找到的第一個元素

結果為0

如果將例子該為：

??????????? <span id="1" title="this is a span">

??????????????? <div id="2">value2</div>

??????????? </span>

??????????? <div id="0" class="divClass">???????????????

??????????? </div>

??????????????????????????? 則修改后的例子結果為 2

②??? $("div:last") 匹配找到的最后一個元素

結果為 7

③??? $(" div:not(:first)") //返回除第一個div以外的所有div

not的用法：如$("div>:not(span)");該例子表示不含有span節點的div節點集合，因為0和4都包含span節點，所以結果為5,7,8

④??? $(" div:even") 匹配所有索引值為偶數的元素，從 0 開始計數

結果為0、4、8

⑤??? $(" div:odd") 匹配所有索引值為奇數的元素，從 0 開始計數

結果為 2、5、7

⑥??? $(" div:eq(3)") 匹配一個給定索引值的元素 eq: equal

結果為5

⑦??? $(" div:gt(3)") 匹配所有大于給定索引值的元素 gt:greater than

結果為8、7

⑧??? $(" div:lt(3)") 匹配所有小于給定索引值的元素 lt:less than

結果為0、2、4

內容：

①??? $("div:contains('value')") 匹配包含給定文本的元素

結果為0、2 ??innerText.indexOf("value")>=0及[title*="value"]類似，區別在于，*=只能檢索屬性，contains檢索元素包含的所有文本,注意檢索的范圍為元素的文本

②??? $("div:has(div)") 匹配所有包含 p 元素的 div 元素

查找方式類似于層次查找的"div div"，區別在于，"div div"結果是子節點，has結果是父節點，例子結果為0、4

$("div:has(span[title$='span'])~div>div");選擇器也可以像xpath一樣方便

上述例子可翻譯為：含有span子元素且子span節點的title屬性文本為"span"結尾的div元素之后（同級）的div元素的div子元素

猛一看，羅里吧嗦的描述那么長，感覺用處不是很大，其實頁面html內容龐大的情況下，查找符合某些條件的集合會很方便

③??? $("div:empty") 查找所有不包含子元素或者文本的空元素

結果：5、8、7

?????????????????? 可見性

①??? $("input:visible") 查找所有可見的input元素

②??? $("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 結尾的

子元素

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

②??? $("div:first-child") 查找屬于父節點的第一個子節點的div元素

結果為 0、2、5

③??? $("div:last-child")?? 查找屬于父節點的最后子節點的div元素

結果為2、4、7

④??? $("div:only-child")?? 查找屬于父節點的唯一子節點的div元素

表單

①??? $(":input") 查找所有的input元素?

$(":input")與$("input")的區別：

//:input表示選擇表單中的input,select,textarea,button元素，input僅僅選擇input元素

②??? $("text")??? 匹配所有的單行文本框

③??? $(":password") 匹配所有密碼框

④??? $("radio")?? 匹配所有單選按鈕

⑤??? $("checkbox") 匹配所有復選框

⑥??? $("submit")?? 匹配所有提交按鈕

⑦??? $("image")??? 匹配所有圖像域

⑧??? $("button")?? 匹配所有按鈕

⑨??? $("file")???? 匹配所有文件域

⑩??? $("hidden") 匹配所有不可見元素，或者type為hidden的元素

表單對象屬性

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

②??? $("input:enabled") 匹配所有可用元素

③??? $("input:disabled") 匹配所有不可用元素

④??? $("select option:selected") 匹配所有選中的option元素

（5）屬性操作

①????? 操作樣式(class)

方法名addClass,removeClass,toggleClass

特殊用法toggleClass：如果存在（不存在）就刪除（添加）一個樣式

當方法傳遞兩個參數的時候，第二個參數為布爾表達式，布爾表達式為true時添加樣式，布爾表達式為false時刪除樣式，如：

var b = true;

??????????? ??? $("input").click(function () {

??????????? ???????????? //情況一：$(this).toggleClass("ccc");

??????????????? ???? //情況二：

???????? ??????????????????????????? b = !b;

??????????????? ???? $(this).toggleClass("ccc", b);

??????????? ??? });

②????? 樣式操作2（style）

方法名css，參數分為3種情況

?? 傳遞一個參數，且為string類型，這樣會返回該樣式值，如

$("input").css("background-color")

?? 傳遞兩個參數，分別為key\value，為dom元素樣式賦值，如

$("input").css("color","blue")

?? 傳遞一個參數，為json對象，會對json的鍵逐一賦值，如

$("input").css({color:"blue",background:"red"})

③????? 操作屬性

屬性操作方法名：attr，removeAttr

方法attr參數有4種情況：

?? 只傳屬性名，返回該jQuery元素的屬性值（注意如果查找到多個元素，則返回第一個元素的屬性），如$("input").attr("title")返回的是第一個input的title

?? 傳遞兩個參數，且第二個參數為值時，為dom元素屬性賦值，如

$("input").attr("title", "這是一個文本框")

?? 傳遞兩個參數，且第二個參數為function，為dom元素屬性賦函數計算值，如

$("input").attr("title", function () { return "這是一個文本框"})

?? 傳遞一個參數，且為json對象時，會對json的鍵逐一賦值，如

$("input").attr({ title: "this the title",value:"this the value" })

④????? html 文本 值

這三類操作一致

獲取內容為$("input").html/text/val()

設置時為$(" input ").html/text/val("內容")

$("input").val 等于input.attr("value")

轉載于:https://www.cnblogs.com/softxu/archive/2012/01/29/2330800.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的jQuery基础（未完待续）的全部內容，希望文章能夠幫你解決所遇到的問題。

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