jQuery初識之選擇器、樣式操作和篩選器(模態框和選單示例)
阿新 • • 發佈：2018-11-10
一、jQuery 1、介紹 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫（或JavaScript框架）。 jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。 它封裝JavaScript常用的功能程式碼，提供一種簡便的JavaScript設計模式，優化HTML文件操作、事件處理、動畫設計和Ajax互動。 2、優勢 1.一款輕量級的JS框架。jQuery核心js檔案才幾十kb，不會影響頁面載入速度。 2.豐富的DOM選擇器,jQuery的選擇器用起來很方便，比如要找到某個DOM物件的相鄰元素，JS可能要寫好幾行程式碼，而jQuery一行程式碼就搞定了，
再比如要將一個表格的隔行變色，jQuery也是一行程式碼搞定。 3.鏈式表示式。jQuery的鏈式操作可以把多個操作寫在一行程式碼裡，更加簡潔。 4.事件、樣式、動畫支援。jQuery還簡化了js操作css的程式碼，並且程式碼的可讀性也比js要強。 5.Ajax操作支援。jQuery簡化了AJAX操作，後端只需返回一個JSON格式的字串就能完成與前端的通訊。 6.跨瀏覽器相容。jQuery基本相容了現在主流的瀏覽器，不用再為瀏覽器的相容問題而傷透腦筋。 7.外掛擴充套件開發。jQuery有著豐富的第三方的外掛，例如：樹形選單、日期控制元件、圖片切換外掛、彈出視窗等等基本前端頁面上的元件都有對應外掛， 並且用jQuery外掛做出來的效果很炫，並且可以根據自己需要去改寫和封裝外掛，簡單實用。 3、內容 1.選擇器 2.篩選器 3.樣式操作 4.文字操作 5.屬性操作 6.文件處理 7.事件 8.動畫效果 9.外掛 10.each、data、Ajax 小提示： 1.jQuery官網：https://jquery.com/ 2.jQuery中文文件：http://jquery.cuishifeng.cn/ 4、jQuery版本 1.x：相容IE678,使用最為廣泛的，官方只做BUG維護，功能不再新增。因此一般專案來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日) 2.x：不相容IE678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮相容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日) 3.x：不相容IE678，只支援最新的瀏覽器。需要注意的是很多老的jQuery外掛不支援3.x版。目前該版本是官方主要更新維護的版本。 維護IE678是一件讓人頭疼的事情，一般我們都會額外載入一個CSS和JS單獨處理。值得慶幸的是使用這些瀏覽器的人也逐步減少，PC端使用者已經逐步被移動端使用者所取代， 如果沒有特殊要求的話，一般都會選擇放棄對678的支援。 5、jQuery物件 1.概述 jQuery物件就是通過jQuery包裝DOM物件後產生的物件。jQuery物件是 jQuery獨有的。如果一個物件是 jQuery物件，那麼它就可以使用jQuery裡的方法。 例如： $("#i1").html()的意思是：獲取id值為 i1的元素的html程式碼。其中 html()是jQuery裡的方法。 相當於： document.getElementById("i1").innerHTML; 雖然 jQuery物件是包裝 DOM物件後產生的，但是 jQuery物件無法使用 DOM物件的任何方法，同理 DOM物件也沒不能使用 jQuery裡的方法。 2.約定 一般情況下我們在宣告一個jQuery物件變數的時候在變數名前面加上$： var $variable = jQuery對像 var variable = DOM物件 3.jquery物件和dom物件轉換 3-1、jQuery物件轉成DOM物件：jQuery物件可以通過[index]方法獲得相應的DOM物件。 var $divEle = $("#d1"); //得到jQuery物件 var divEle = $divEle[0]; //轉換成DOM物件 var divEle = $("#d1")[0]; //轉換成DOM物件 jQuery還可以通過.get(index)方法得到相應的DOM物件 var divEle = $divEle.get(0); //轉換成DOM物件 3-2、DOM物件轉成jQuery物件：用$()將DOM物件包裝起來，就能獲得jQuery物件了 var divEle = document.getElementById("d"); //得到DOM物件 var $divEle = $(divEle); //轉成jQuery物件 二、jQuery之查詢標籤 基礎寫法：$(selector).action() 1、基本選擇器 id選擇器：$("#id") class選擇器：$(".className") 標籤選擇器：$("tagName") 配合使用：$("div.c1") // 找到有c1 class類的div標籤 所有元素選擇器：$("*") 組合選擇器：$("#id, .className, tagName") 2、層級選擇器 x和y可以為任意選擇器 $("x y"); // x的所有後代y（子子孫孫） $("x > y"); // x的所有兒子y（兒子） $("x + y") // 找到在x後面的第一個y(毗鄰) $("x ~ y") // 找到x的所有的弟弟y 3、屬性選擇器 [attribute] [attribute=value] // 屬性等於 [attribute!=value] // 屬性不等於 例子：<input type="text"> <input type="password"> <input type="checkbox"> $("input[type]") // 找到有type屬性的input標籤 $("input[type='checkbox']"); // 找到type屬性等於checkbox的input標籤 $("input[type!='text']"); // 找到type屬性不是text的input標籤 4、基本篩選器 :first // 第一個 :last // 最後一個 :gt(index)// 匹配所有大於給定索引值的元素 :lt(index)// 匹配所有小於給定索引值的元素 :eq(index)// 索引等於index的那個元素 :even // 匹配所有索引值為偶數的元素，從 0 開始計數 :odd // 匹配所有索引值為奇數的元素，從 0 開始計數 :has(元素選擇器) // 選取所有包含一個或多個標籤在其內的標籤(指的是從後代元素找) :not(元素選擇器) // 移除所有滿足not條件的標籤 例1： $("div:has(h1)") // 找到所有後代中有h1標籤的div標籤 $("div:has(.c1)") // 找到所有後代中有c1樣式類的div標籤 $("li:not(.c1)") // 找到所有不包含c1樣式類的li標籤(即沒有c1樣式的li標籤) $("li:not(:has(a))") // 找到所有後代中不含a標籤的li標籤 區別：
$("div:has(h1)")：先找到所有div標籤，然後看div標籤的子子孫孫(後代)中是否有h1標籤，有則符合條件，選擇到的是div標籤 比如： <div> <h1>符合條件</h1> </div> <div> 不符合條件 </div> $("div:not(.c1)")：先找到所有div標籤，然後看div標籤的class屬性，沒有class="c1"的div標籤才符合條件，選擇到的是div標籤 比如： <div> 符合條件has和not</div> <div class="c1"> 不符合條件 </div>
例2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> </head> <body> <ul> <li>1</li> <li>2</li> <li id="l3">3</li> <li>4</li> <li>5</li> </ul> <hr> <div><p>div>p</p></div> <div class="c1"><span>div>span</span></div> <div class="c1"> <p> <span>div>p>span</span> </p> </div> </body> </html>HTML程式碼
詳解： // 找到ul標籤下的所有子標籤li $("ul li"); // 找到ul標籤下的第一個子標籤li $("ul li:first"); // 找到ul標籤下的最後一個子標籤li $("ul li:last"); // 找到ul標籤下的索引為1的子標籤li $("ul li:eq(1)"); // 找到第一個li標籤 $("li:first"); // 找到最後一個li標籤 $("li:last"); // 找到索引大於1的li標籤 $("li:gt(1)"); // 找到索引小於1的li標籤 $("li:lt(1)"); // 找到索引等於1的li標籤 $("li:eq(1)"); // 找到索引為偶數的li標籤 $("li:even"); // 找到索引為奇數的li標籤 $("li:odd"); 5、表單篩選器(僅用於篩選表單) 1.表單type型別 :text :password :file :radio :checkbox :submit :reset :button 例如：找到所有的checkbox 用屬性選擇器：$("input[type='checkbox']") 用表單篩選器：$(":checkbox") 2.表單物件屬性: :enabled :disabled :checked :selected 例如： <!--HTML程式碼--> <form action=""> <input type="checkbox" value="a"> <input type="checkbox" value="b"> <input type="radio" value="c"> <select id=""> <option value="1">1</option> <option value="2">2</option> </select> </form> 找到被選中的複選框 $(":checked"); 注意： 當表單中只有一種選擇按鈕的時候，上面這樣寫是可以的， 但是表單中同時有複選按鈕(checkbox)、單選按鈕(radio)和下拉框(select)的時候， 上面這樣寫$(":checked");會把所有選中的標籤都找到，即不分是單選還是複選還是下拉框。 因此一般要找到被選中的那個標籤，可以指定$("input:checked");是input標籤中選中的按鈕。 或者$("option:selected");是option標籤中選中的下拉框。 二、篩選器方法 1.下一個元素： $("#id").next() // 查詢id的下一個元素(是同級的元素，不是子孫) $("#id").nextAll() // 查詢id下面的所有元素 $("#id").nextUntil("#i2") // 查詢id下面的元素一直找到i2就停止(不包括i2的元素) 2.上一個元素： $("#id").prev() // 查詢id的上一個元素 $("#id").prevAll() // 查詢id上面的所有元素 $("#id").prevUntil("#i2") // 查詢id上面的元素一直找到i2就停止(不包括i2的元素) 3.父親元素： $("#id").parent() // 查詢當前元素的第一個父元素 $("#id").parents() // 查詢當前元素的所有的父輩元素 $("#id").parentsUntil("body") // 查詢當前元素的所有的父輩元素，一直找到body就停止(不包括body) 4.兒子和兄弟元素： $("#id").children();// 查詢id的所有兒子 $("#id").siblings();// 查詢id的所有兄弟 5.查詢 搜尋所有與指定表示式匹配的元素。這個函式是找出正在處理的元素的後代元素的好方法。 $("div").find("p") // find是在子子孫孫中找，在div下找子孫p 等價於$("div p") 6.篩選 篩選出與指定表示式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表示式。 $("div").filter(".c1") // filter是從結果中過濾出有c1樣式類的 等價於 $("div.c1") 7.補充(跟篩選器一樣的(是子孫裡面找)，不過改寫成了方法而已) .first() // 獲取匹配的第一個元素 .last() // 獲取匹配的最後一個元素 .not() // 從匹配元素的集合中刪除與指定表示式匹配的元素 .has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。 .eq() // 索引值等於指定值的元素 例如： $("li:first"); //找到第一個li標籤 等價於 $("li").first(); //找到第一個li標籤 三、綜合例子 例1：自定義模態框，使用jQuery實現彈出和隱藏功能。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JQ模態框示例</title> <style type="text/css"> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 199; } .model { width: 400px; height: 300px; background-color: white; position: fixed; top: 50%; left: 50%; margin-top:-150px; margin-left:-200px; z-index:1999; } .hide { display:none; } .close { position: absolute; right:15px; top:15px; cursor:pointer; } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div> <p>渡遠荊門外，來從楚國遊。</p> <p>山隨平野盡，江入大荒流。</p> <p>月下飛天鏡，雲生結海樓。</p> <p>仍憐故鄉水，萬里送行舟。</p> </div> <button type="button" id="login">登入</button> <!--蓋板--> <div class="cover hide"></div> <!--點選登入後彈出的頁面--> <div class="model hide"> <form action=""> <p> <label>使用者名稱： <input type="text" name="username"> </label> </p> <p> <label>密碼： <input type="password" name="password"> </label> </p> </form> <!--關閉鍵--> <div class="close">x</div> </div> <script type="text/javascript"> $("#login")[0].onclick=function () { // 去掉cover和modal的hide樣式類 $(".cover,.model").removeClass("hide"); } $(".close")[0].onclick=function () { // 新增cover和modal的hide樣式類 $(".cover,.model").addClass('hide'); } </script> </body> </html>模態框
例2、左側選單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu { width: 234px; } .item { border-bottom: 1px solid white; } .title { background-color: #2b99ff; height: 50px; line-height: 50px; color: white; text-align: center; } .hide { display: none; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title">選單一</div> <div class="body hide"> <div>內容一</div> <div>內容二</div> <div>內容三</div> </div> </div> <div class="item"> <div class="title">選單二</div> <div class="body hide"> <div>內容一</div> <div>內容二</div> <div>內容三</div> </div> </div> <div class="item"> <div class="title">選單三</div> <div class="body hide"> <div>內容一</div> <div>內容二</div> <div>內容三</div> </div> </div> </div> </body> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> // 1. 找到所有有title樣式的標籤，給他們繫結點選事件 var $titleEles = $(".title"); for (var i=0;i<$titleEles.length;i++){ $titleEles[i].onclick=function () { // 如果被點選要做的事兒 // 1. 把我這個標籤下面的有body樣式類的標籤 移除hide類 console.log(this); // this指的是：觸發事件的當前標籤; // 注意this是一個DOM物件 $(this).next().removeClass('hide'); // 2. 把其他的title標籤下面的有body樣式類的那個標籤加上hide 類 $(this).parent().siblings().find('.body').addClass('hide') } } </script> </html>左側選單