前端基礎-jQuery的優點以及用法
阿新 • • 發佈：2018-06-04
高度 優勢 動畫效果 不兼容 PE ima 綁定 獲取 減少 
一、jQuery介紹
- jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
- jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，能夠極大地簡化JavaScript編程。它的宗旨就是：“Write less, do more.“
二、jQuery的優勢
- 一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面加載速度。
- 豐富的DOM選擇器,jQuery的選擇器用起來很方便，比如要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定了，再比如要將一個表格的隔行變色，jQuery也是一行代碼搞定。
- 鏈式表達式。jQuery的鏈式操作可以把多個操作寫在一行代碼裏，更加簡潔。
- 事件、樣式、動畫支持。jQuery還簡化了js操作css的代碼，並且代碼的可讀性也比js要強。
- Ajax操作支持。jQuery簡化了AJAX操作，後端只需返回一個JSON格式的字符串就能完成與前端的通信。
- 跨瀏覽器兼容。jQuery基本兼容了現在主流的瀏覽器，不用再為瀏覽器的兼容問題而傷透腦筋。
- 插件擴展開發。jQuery有著豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件，並且用jQuery插件做出來的效果很炫，並且可以根據自己需要去改寫和封裝插件，簡單實用。
三、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對象
jQuery對象就是通過jQuery包裝DOM對象後產生的對象。jQuery對象是 jQuery獨有的。如果一個對象是 jQuery對象，那麽它就可以使用jQuery裏的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：獲取id值為 i1的元素的html代碼。其中 html()是jQuery裏的方法。
相當於： document.getElementById("i1").innerHTML;
雖然 jQuery對象是包裝 DOM對象後產生的，但是 jQuery對象無法使用 DOM對象的任何方法，同理 DOM對象也沒不能使用 jQuery裏的方法。
一個約定，我們在聲明一個jQuery對象變量的時候在變量名前面加上$：
var $variable = jQuery對像 var variable = DOM對象 $variable[0]//jQuery對象轉成DOM對象
拿上面那個例子舉例，jQuery對象和DOM對象的使用：
$("#i1").html();//jQuery對象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM對象使用DOM的方法
五、jQuery內容：
- 選擇器
- 篩選器
- 樣式操作
下載鏈接：jQuery官網
中文文檔：jQuery AP中文文檔
1、選擇器
id選擇器：
$("#id")
標簽選擇器：
$("tagName")
class選擇器：
$(".className")
配合使用：
$("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
可見性篩選選擇器：
元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴展了可見性篩選選擇器:visible與:hidden
描述如下：
這2個選擇器都是 jQuery 延伸出來的，看起來比較簡單，但是元素可見性依賴於適用的樣式
:hidden選擇器，不僅僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等
我們有幾種方式可以隱藏一個元素：
- CSS display的值是none。
- type="hidden"的表單元素。
- 寬度和高度都顯式設置為0。
- 一個祖先元素是隱藏的，該元素是不會在頁面上顯示
- CSS visibility的值是hidden
- CSS opacity的指是0
如果元素中占據文檔中一定的空間,元素被認為是可見的。 可見元素的寬度或高度，是大於零。 元素的visibility: hidden 或 opacity: 0被認為是可見的，因為他們仍然占用空間布局。
不在文檔中的元素是被認為是不可見的，如果當他們被插入到文檔中，jQuery沒有辦法知道他們是否是可見的，因為元素可見性依賴於適用的樣式
基本篩選器：
:first // 第一個 :last // 最後一個 :eq(index)// 索引等於index的那個元素 :even // 匹配所有索引值為偶數的元素，從 0 開始計數 :odd // 匹配所有索引值為奇數的元素，從 0 開始計數 :gt(index)// 匹配所有大於給定索引值的元素 :lt(index)// 匹配所有小於給定索引值的元素 :not(元素選擇器)// 移除所有滿足not條件的標簽 :has(元素選擇器)// 選取所有包含一個或多個標簽在其內的標簽(指的是從後代元素找)
例子：
$("div:has(h1)")// 找到所有後代中有h1標簽的div標簽
$("div:has(.c1)")// 找到所有後代中有c1樣式類的div標簽
$("li:not(.c1)")// 找到所有不包含c1樣式類的li標簽
$("li:not(:has(a))")// 找到所有後代中不含a標簽的li標簽
自定義模態框，使用jQuery實現彈出和隱藏功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery版模態框</title> <style> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.4); z-index: 999; } .modal { background-color: white; height: 300px; width: 500px; position: absolute; top: 50%; left: 50%; z-index:1000; margin-top: -150px; margin-left: -250px; } .hide { display: none; } </style> </head> <body> <div> <h1>海燕</h1> <p>在蒼茫的大海上，狂風卷積著烏雲，在烏雲和大海之間，海燕像黑色的閃電，在高傲的飛翔。</p> </div> <button id="b1">點我登錄</button> <div class="cover hide"></div> <div class="modal hide"> <form action=""> <p> <label>用戶名 <input type="text"> </label> </p> <p><label>密碼 <input type="password"> </label></p> <p> <input type="submit"> <input type="button" id="cancel" value="取消"> </p> </form> </div> <script src="jquery-3.3.1.min.js"></script> #沒有文件請下載文件 <script> // 找到按鈕，給它綁定事件 var b1Ele = $("#b1")[0]; b1Ele.onclick = function () { // 事件觸發後，找到那兩個div,移除它們的hide 樣式類 $(".cover,.modal").removeClass("hide"); }; var cancelButton = $("#cancel")[0]; cancelButton.onclick = ()=>{ // 事件觸發後，找到那兩個div,給它們添加hide 樣式類 $(".cover,.modal").addClass("hide"); } </script> </body> </html>實例
屬性選擇器：
例子：
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type=‘checkbox‘]");// 取到checkbox類型的input標簽
$("input[type!=‘text‘]");// 取到類型不是text的input標簽
表單常用篩選：
表單對象屬性:
註意事項：
- 選擇器適用於復選框和單選框，對於下拉框元素, 使用 :selected 選擇器
- 在某些瀏覽器中，選擇器:checked可能會錯誤選取到<option>元素，所以保險起見換用選擇器input:checked，確保只會選取<input>元素
例子：
找到可用的input標簽
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input標簽
找到被選中的option：
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">廣州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被選中的option
2、篩選器
下一個元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一個元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父親元素：
$("#id").parent()
$("#id").parents() // 查找當前元素的所有的父輩元素
$("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。
兒子和兄弟元素：
$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們
查找
搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。
$("div").find("p")
等價於$("div p")
篩選
篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式。
$("div").filter(".c1") // 從結果集中過濾出有c1樣式類的
等價於 $("div.c1")
補充：
.first() // 獲取匹配的第一個元素 .last() // 獲取匹配的最後一個元素 .not() // 從匹配元素的集合中刪除與指定表達式匹配的元素 .has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。 .eq() // 索引值等於指定值的元素
示例：左側菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>左側菜單示例</title>
<style>
.left {
position: fixed;
left: 0;
top: 0;
width: 20%;
height: 100%;
background-color: rgb(47, 53, 61);
}
.right {
width: 80%;
height: 100%;
}
.menu {
color: white;
}
.title {
text-align: center;
padding: 10px 15px;
border-bottom: 1px solid #23282e;
}
.items {
background-color: #181c20;
}
.item {
padding: 5px 10px;
border-bottom: 1px solid #23282e;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="title">菜單一</div>
<div class="items">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
<div class="title">菜單二</div>
<div class="items hide">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
<div class="title">菜單三</div>
<div class="items hide">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(".title").click(function (){ // jQuery綁定事件
// 隱藏所有class裏有.items的標簽
$(".items").addClass("hide"); //批量操作
$(this).next().removeClass("hide");
});
</script>
3、操作標簽
樣式操作
樣式類
addClass();// 添加指定的CSS類名。 removeClass();// 移除指定的CSS類名。 hasClass();// 判斷樣式存不存在 toggleClass();// 切換CSS類名，如果有就移除，如果沒有就添加。
CSS
css("color","red")//DOM操作：tag.style.color="red"
示例：
$("p").css("color", "red"); //將所有p標簽的字體設置為紅色
位置：
offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置 position()// 獲取匹配元素相對父元素的偏移 scrollTop()// 獲取匹配元素相對滾動條頂部的偏移 scrollLeft()// 獲取匹配元素相對滾動條左側的偏移
.offset()方法允許我們檢索一個元素相對於文檔（document）的當前位置。
和 .position()的差別在於： .position()是相對於相對於父級元素的位移。
未完待續！！！
前端基礎-jQuery的優點以及用法