jQuery基础(未完待续)
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基础(未完待续)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Java统计文件夹中文件总行数
- 下一篇: 基于VC的OPC客户端软件研究与实现