Web前端學習筆記—— jQuery之簡介、物件、選擇器
阿新 • • 發佈：2018-12-11
jQuery簡介
JavaScript庫的概念
JavaScript開發的過程中，處理瀏覽器的相容很複雜而且很耗時，於是一些封裝了這些操作的庫應運而生。這些庫還會把一些常用的程式碼進行封裝。
把一些常用到的方法寫到一個單獨的js檔案，使用的時候直接去引用這js檔案就可以了。（animate.js、common.js）
常見的JavaScript 庫 - jQuery、Prototype、MooTools。其中jQuery是最常用的一個
jQuery其實就是一個js檔案，裡面封裝了一大堆的方法方便我們的開發，其實就是一個加強版的common.js，因此我們學習jQuery，其實就是學習jQuery這個js檔案中封裝的一大堆方法。
jQuery的優點好處
jQuery設計的宗旨是'Write Less，Do More'，即倡導寫更少的程式碼，做更多的事情。它封裝JavaScript常用的功能程式碼，提供一種簡便的操作，優化HTML文件操作、事件處理、動畫設計和Ajax互動。
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴充套件；擁有便捷的外掛擴充套件機制和豐富的外掛。jQuery相容各種主流瀏覽器。
極大地簡化了 JavaScript 程式設計。
jQuery的版本
jQuery版本有很多，分為1.x 2.x 3.x 1.x版本：能夠相容IE678瀏覽器 2.x版本：不相容IE678瀏覽器 1.x和2.x版本jquery都不再更新版本了，現在只更新3.x版本。 3.x版本：不相容IE678，更加的精簡（在國內不流行，因為國內使用jQuery的主要目的就是相容IE678） 國內多數網站還在使用1.x的版本
體驗jQuery
案例：讓div顯示與設定內容
使用JavaScript開發過程中，有許多不便之處
-查詢元素的方法太少，麻煩。
-遍歷偽陣列很麻煩，通常要巢狀一大堆的for迴圈。
-有相容性問題。
-想要實現簡單的動畫效果，也很麻煩
-程式碼冗餘。
$(document).ready(function () {
$('#btn1').click(function () {
// 隱式迭代：偷偷的遍歷，在jQuery中，不需要手動寫for迴圈了，會自動進行遍歷。
$('div').show(200);
});
$('#btn2').click 優點總結：
-查詢元素的方法多種多樣，非常靈活
-擁有隱式迭代特性，因此不再需要手寫for迴圈了。
-完全沒有相容性問題。
-實現動畫非常簡單，而且功能更加的強大。
-程式碼簡單、粗暴。
jQuery中頂級物件
jQuery中的頂級物件是$或jQuery
獲取jQuery物件
入口函式
高階功能
注意：jQuery中的$和JQuery關鍵字本身為同一物件；
jQuery中頁面載入事件
使用jQuery的三個步驟：
引入jQuery檔案
入口函式
功能實現
關於jQuery的入口函式：
// 第一種寫法
$(document).ready(function() {
});
// 第二種寫法
$(function() {
});
jQuery入口函式與window.onload的對比
JavaScript的入口函式要等到頁面中所有資源（包括圖片、檔案）載入完成才開始執行。
jQuery的入口函式只會等待文件樹載入完成就開始執行，並不會等待圖片、檔案的載入。
jQuery物件和DOM物件
jQuery物件和DOM物件的區別
DOM物件
用原生JavaScript獲取的DOM物件
通過document.getElementById() 反饋的是元素(DOM物件)
通過document.getElementsByTagName()獲取到的是什麼？
偽陣列(集合)，集合中的每一個物件是DOM物件
jQuery物件
jQuery物件用$()的方式獲取的物件
jQuery物件又可以叫做包裝集(包裝的DOM物件的集合)
區別
jQuery物件不能使用DOM物件的成員，DOM物件不能使用jQuery物件的成員
// DOM物件
var box = document.getElementById('box');
// 錯誤
box.text('hello');
// 正確
box.innerText = 'hello';
// jQuery物件，jQuery物件加字首$，用以區分DOM物件
var $box = $('#box');
// 錯誤
$box.innerText = 'hello';
// 正確
$box.text('hello');
jQuery物件和DOM物件的相互轉換
jQuery物件轉換成DOM物件：
jQuery物件.get(索引值);
jQuery物件[索引值]
jQuery物件是包裝集(集合)，從集合中取資料可以使用索引的方式
DOM物件轉換成jQuery物件：
$(DOM物件) 只有這一種方法;
案例
- 開關燈 [01-開關燈.html]
// 僅僅演示物件之間的轉換，程式碼不推薦這麼寫
jQuery(document).ready(function () {
// 獲取元素；
var inpArr = document.getElementsByTagName('input');
// 獲取第一個按鈕，然後繫結事件；
$(inpArr[0]).click(function () {
// 設定body的背景色
$('body')[0].style.background = '#fff';
});
// 獲取第二個按鈕，然後繫結事件；
$(inpArr[1]).click(function () {
// 設定body的背景色
$('body').get(0).style.background = '#000';
});
});
選擇器
jQuery選擇器是jQuery為我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。注意：jQuery選擇器返回的是jQuery物件。
jQuery選擇器有很多，基本相容了CSS1到CSS3所有的選擇器，並且jQuery還添加了很多更加複雜的選擇器。（檢視jQuery文件）
jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個元素，你會有很多種方法獲取到。所以我們平時真正能用到的只是少數的最常用的選擇器。
jQuery基本選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| ID選擇器 | $(’#id’); | 獲取指定ID的元素 |
| 類選擇器 | $(’.class’); | 獲取同一類class的元素 |
| 標籤選擇器 | $(‘div’); | 獲取同一類標籤的所有元素 |
| 並集選擇器 | $(‘div,p,li’); | 使用逗號分隔，只要符合條件之一就可。 |
| 交集選擇器 | $(‘div.redClass’); | 獲取class為redClass的div元素 |
- 總結：跟css的選擇器用法一模一樣。
jQuery層級選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| 子代選擇器 | $(‘ul > li’); | 使用-號，獲取兒子層級的元素，注意，並不會獲取孫子層級的元素 |
| 後代選擇器 | $(‘ul li’); | 使用空格，代表後代選擇器，獲取ul下的所有li元素，包括孫子等 |
- 跟CSS的選擇器一模一樣。
jQuery過濾選擇器
- 這類選擇器都帶冒號:
| 名稱 | 用法 | 描述 |
|---|---|---|
| :eq（index） | $(‘li:eq(2)’).css(‘color’, ‘red’); | 獲取到的li元素中，選擇索引號為2的元素，索引號index從0開始。 |
| :odd | $(‘li:odd’).css(‘color’, ‘red’); | 獲取到的li元素中，選擇索引號為奇數的元素 |
| :even | $(‘li:even’).css(‘color’, ‘red’); | 獲取到的li元素中，選擇索引號為偶數的元素 |
jQuery篩選選擇器(方法)
- 篩選選擇器的功能與過濾選擇器有點類似，但是用法不一樣，篩選選擇器主要是方法。
| 名稱 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(‘ul’).children(‘li’) | 相當於$(‘ul-li’)，子類選擇器 |
| find(selector) | $(‘ul’).find(‘li’); | 相當於$(‘ul li’),後代選擇器 |
| siblings(selector) | $(’#first’).siblings(‘li’); | 查詢兄弟節點，不包括自己本身。 |
| parent() | $(’#first’).parent(); | 查詢父親 |
| eq(index) | $(‘li’).eq(2); | 相當於$(‘li:eq(2)’),index從0開始 |
| next() | $(‘li’).next() | 找下一個兄弟 |
| prev() | $(‘li’).prev() | 找上一次兄弟 |
案例
- 滑鼠放上突出展示 [02-突出展示.html]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
//獲取所有的li,新增滑鼠進入事件
$(".wrap>ul>li").mouseenter(function () {
//設定當前的li的透明度的同時修改當前的li的所有的兄弟元素li的透明度
$(this).css("opacity",1).siblings("li").css("opacity",0.5);
});
//滑鼠離開事件
$(".wrap").mouseleave(function () {
//從當前的div中所有的li,設定透明度
$(this).find("li").css("opacity",1);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
</ul>
</div>
</body>
</html>
- 好友列表切換
<!DOCTYPE html>
<html>
<head lang="en">
<title></title>
<meta charset="UTF-8">
<style type="text/css">
#u1 li {
margin-bottom: 10px;
background-color: Orange;
font-size: 20px;
font-weight: bolder;
cursor: pointer;
}
#u1 li ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#u1 li ul li {
background-color: pink;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//頁面載入後,隱藏所有的li
$(function () {
$("#u1>li>ul").hide();
//找到id為u1下面的直接的子元素li新增點選事件
$("#u1>li").click(function () {
//當前點選的li裡面的ul顯示
$(this).children("ul").show(500);
//隱藏當前被點選的li的兄弟元素的li中的ul
$(this).siblings("li").find("ul").hide(500);
});
});
</script>
</head>
<body>
<div style=" width:200px; height:500px; border:1px solid red;">
<ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
<li>
幼兒園同學
<ul>
<li>鼻涕蟲</li>
<li>愛哭鬼</li>
<li>張大膽</li>
<li>班主任</li>
</ul>
</li>
<li>小學同學
<ul>
<li>張三丰</li>
<li>張無忌</li>
<li>喬布斯</li>
<li>助教</li>
</ul>
</li>
<li>
初中同學
<ul>
<li>蓋茨</li>
<li>川普</li>
<li>奧巴馬</li>
<li>鳳姐</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
- 下拉選單 [04-下拉選單.html]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(images/bg.jpg);
}
.wrap li{
background-image: url(images/libg.jpg);
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="vendor/jquery.js"></script>
<script>
jQuery(document).ready(function () {
//需求1：滑鼠進入ul中的子元素li，讓該li的子元素ul顯示；
//需求2：滑鼠移開ul中的子元素li，讓該li的子元素ul隱藏；
//需求1：滑鼠進入ul中的子元素li，讓該li的子元素ul顯示；
$(".wrap>ul>li").mouseover(function () {
//獲取滑鼠進入的li，是原生dom物件；
//轉換成jquery物件
$(this).children("ul").show();
});
//需求2：滑鼠移開ul中的子元素li，讓該li的子元素ul隱藏；
$(".wrap>ul>li").mouseout(function () {
$(this).children("ul").hide();
});
});
</script>
</head>
<body>