95_JavaWeb_Jquery1_對象_核心函數_選擇器_過濾器

jQuery JavaScript 和查詢（Query）,它就是輔助 JavaScript 開發的類庫

1 ?引入jQuery庫

2 ?$ 是 jQuery 的核心函數，能完成 jQuery 的很多功

1) 傳入參數為 [ 函數 ] 時： 表示頁面加載完成之后。相當于 window.onload = function(){}

2) 傳入參數為 [ HTML 字符串 ] 時：會對我們創建這個 html 標簽對象

3) 傳入參數為 [ 選擇器字符串 ] 時：

$(“#id 屬性值”); id 選擇器，根據 id 查詢標簽對象

$(“標簽名”); 標簽名選擇器，根據指定的標簽名查詢標簽對象

$(“.class 屬性值”); 類型選擇器，可以根據 class 屬性查詢標簽對象

4) 傳入參數為 [ DOM 對象 ] 時：會把這個 dom 對象轉換為 jQuery 對象

jquery 使用$()代替window.onload

核心函數 &? Jquery本質

選擇器

1 基本選擇器

#ID 選擇器： 根據 id 查找標簽對象 .class 選擇器： 根據 class 查找標簽對象 element 選擇器：根據標簽名查找標簽對象 * 選擇器： 表示任意/所有的元素 selector1，selector2 組合選擇器： 合并選擇器1，選擇器2 的結果集返回 ($("span,#two"))

2 層級選擇器

ancestor descendant 后代選擇器 ：在給定的祖先元素下匹配所有的后代元素 parent > child 子元素選擇器：在給定的父元素下匹配所有的子元素 prev + next 相鄰元素選擇器：匹配所有緊接在 prev 元素后的 next 元素 prev ~ sibings 之后的兄弟 平級元素選擇器：匹配 prev 元素之后的所有 siblings 元素

3 過濾選擇器- 基本過濾器

:first 獲取第一個元素 :last 獲取最后個元素 :not(selector) 去除所有與給定選擇器匹配的元素 :even 匹配所有索引值為偶數的元素，從 0 開始計數 :odd 匹配所有索引值為奇數的元素，從 0 開始計數 :eq(index) 匹配一個給定索引值的元素 :gt(index) 匹配所有大于給定索引值的元素 :lt(index) 匹配所有小于給定索引值的元素 :header 匹配如 h1, h2, h3 之類的標題元素 :animated 匹配所有正在執行動畫效果的元素

4 內容過濾器-屬性過濾選擇器:

:contains(text) 匹配包含給定文本的元素 :empty 匹配所有不包含子元素或者文本的空元素 :parent 匹配含有子元素或者文本的元素 :has(selector) 匹配含有選擇器所匹配的元素的元素 [attribute] 匹配包含給定屬性的元素。 [attribute=value] 匹配給定的屬性是某個特定值的元素 [attribute!=value] 匹配所有不含有指定的屬性，或者屬性不等于特定值的元素 [attribute^=value] 匹配給定的屬性是以某些值開始的元素 [attribute$=value] 匹配給定的屬性是以某些值結尾的元素 [attribute*=value] 匹配給定的屬性是以包含某些值的元素 [attrSel1][attrSel2][attrSelN] 復合屬性選擇器，需要同時滿足多個條件時使用

$(function() { //1.選取含有 屬性title 的div元素 $("#btn1").click(function() { $("div[title]").css("background", "#bbffaa"); }); //2.選取 屬性title值等于'test'的div元素 $("#btn2").click(function() { $("div[title='test']").css("background", "#bbffaa"); }); //3.選取 屬性title值不等于'test'的div元素(*沒有屬性title的也將被選中) $("#btn3").click(function() { $("div[title!='test']").css("background", "#bbffaa"); }); //4.選取 屬性title值 以'te'開始 的div元素 $("#btn4").click(function() { $("div[title^='te']").css("background", "#bbffaa"); }); //5.選取 屬性title值 以'est'結束 的div元素 $("#btn5").click(function() { $("div[title$='est']").css("background", "#bbffaa"); }); //6.選取 屬性title值 含有'es'的div元素 $("#btn6").click(function() { $("div[title*='es']").css("background", "#bbffaa"); }); //7.首先選取有屬性id的div元素，然后在結果中選取屬性title值 含有'es'的 div 元素 $("#btn7").click(function() { $("div[id][title*='es']").css("background", "#bbffaa"); }); //8.選取 含有 title 屬性值, 且title 屬性值不等于 test 的 div 元素 $("#btn8").click(function() { $("div[title][title!='test']").css("background", "#bbffaa"); }); });

5 表單過濾器

:input 匹配所有input, textarea, select 和 button 元素 (使用頻率較低) :text 匹配所有文本輸入框 :password 匹配所有的密碼輸入框 :radio 匹配所有的單選框 :checkbox 匹配所有的復選框 :submit 匹配所有提交按鈕 :image 匹配所有 img 標簽 :reset 匹配所有重置按鈕 :button 匹配所有 input type=button 按鈕 :file 匹配所有 input type=file 文件上傳 :hidden 匹配所有不可見元素 display:none 或 input type=hidde

6 表單對象屬性過濾器

:enabled 匹配所有可用元素 :disabled 匹配所有不可用元素 :checked 匹配所有選中的單選，復選，和下拉列表中選中的 option 標簽對象 :selected 匹配所有選中的 option

//1.對表單內 可用input 賦值操作 $("#btn1").click(function(){ // val()可以操作表單項的value屬性值 // 它可以設置和獲取, 傳入參數就是賦值，空參就是獲取 $(":text:enabled").val("我是萬能的程序員"); }); //2.對表單內 不可用input 賦值操作 $("#btn2").click(function(){ $(":text:disabled").val("管你可用不可用，反正我是萬能的程序員"); }); //3.獲取多選框選中的個數 使用size()方法獲取選取到的元素集合的元素個數 $("#btn3").click(function(){ alert( $(":checkbox:checked").length ); }); //4.獲取多選框，每個選中的value值 $("#btn4").click(function(){ // 獲取全部選中的復選框標簽對象 var $checkboies = $(":checkbox:checked"); // 老式遍歷 // for (var i = 0; i < $checkboies.length; i++){ // alert( $checkboies[i].value ); // } // each方法是jQuery對象提供用來遍歷元素的方法 // 在遍歷的function函數中，有一個this對象，這個this對象，就是當前遍歷到的dom對象 $checkboies.each(function () { alert( this.value ); }); }); //5.獲取下拉框選中的內容 $("#btn5").click(function(){ // 獲取選中的option標簽對象 var $options = $("select option:selected"); // 遍歷，獲取option標簽中的文本內容 $options.each(function () { // 在each遍歷的function函數中，有一個this對象。這個this對象是當前正在遍歷到的dom對象 alert(this.innerHTML); }); }); })

HTML web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。