1、jQuery 一、介紹 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（或JavaScript框架）。 jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。 它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。 二、優點 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插件作出來的效果很炫，而且能夠根據本身須要去改寫和封裝插件，簡單實用。 三、內容 1.選擇器 2.篩選器 3.樣式操做 4.文本操做 5.屬性操做 6.文檔處理 7.事件 8.動畫效果 9.插件 10.each、data、Ajax 小提示： 1.jQuery官網：https://jquery.com/ 2.jQuery中文文檔：http://jquery.cuishifeng.cn/ 四、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的支持。 五、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-一、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-二、DOM對象轉成jQuery對象：用$()將DOM對象包裝起來，就能得到jQuery對象了 var divEle = document.getElementById("d"); //獲得DOM對象 var $divEle = $(divEle); //轉成jQuery對象 2、jQuery之查找標籤 基礎寫法：$(selector).action() 一、基本選擇器 id選擇器：$("#id") class選擇器：$(".className") 標籤選擇器：$("tagName") 配合使用：$("div.c1") // 找到有c1 class類的div標籤 全部元素選擇器：$("*") 組合選擇器：$("#id, .className, tagName") 二、層級選擇器 x和y能夠爲任意選擇器 $("x y"); // x的全部後代y（子子孫孫） $("x > y"); // x的全部兒子y（兒子） $("x + y") // 找到在x後面的第一個y(毗鄰) $("x ~ y") // 找到x的全部的弟弟y 三、屬性選擇器 [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標籤 四、基本篩選器 :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> 符合條件 </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>
詳解： // 找到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"); 五、表單篩選器(僅用於篩選表單) 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標籤中選中的下拉框。 2、篩選器方法 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的全部兄弟(弟弟哥哥都是兄弟)
somenode.parentElement 父節點標籤元素
somenode.children 全部子標籤
somenode.firstElementChild 第一個子標籤元素
somenode.lastElementChild 最後一個子標籤元素
somenode.nextElementSibling 下一個兄弟標籤元素
somenode.previousElementSibling 上一個兄弟標籤元素
5.查找(子孫)
搜索全部與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。
$("div").find("p") // find是在子子孫孫中找，找到的是p標籤
等價於$("div p")
6.篩選
篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式。
$("div").filter(".c1") // filter是從結果中過濾出有c1樣式類的
等價於 $("div.c1")
7.補充(跟篩選器同樣的，不過改寫成了方法而已)
.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最後一個元素
.not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
.has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
.eq() // 索引值等於指定值的元素
例如： $("li:first"); //找到第一個li標籤 等價於 $("li").first(); //找到第一個li標籤
3、綜合例子
例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>
例二、左側菜單
<!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>