前端視訊學習（七、JQuery）
阿新 • • 發佈：2018-12-19
目錄
- 1. 第一個jquery
- 2. jQuery版本問題
- 3. jQuery入口函式
- 4. ★jsDom物件和JQ物件
- 5. $的本質
- 6. jQuery基本選擇器
- 7. mouseenter vs. mouseover
- 8. 獲取索引——index()
- 9. 設定CSS樣式——`css`
- 10. 操作class
- 10.1 新增class——addClass
- 10.2 移除class——removeClass
- 10.3 判斷是否含有class—— hasClass
- 10.4 切換class——toggleClass
- 11. 操作屬性——attr、prop
- 12. 動畫
- 12.1 show 和 slide
- 12.2 slideDown 和 slideUp
- 12.3 fadeIn 和 fadeOut
- 12.4 自定義動畫——animate
- 12.5 動畫佇列和停止當前動畫
- 13. 節點操作
- 14. 特殊屬性操作——val,html,text等等
- 14.1 `val`
- 14.2 html 和 text
- 14.3 width, height及其衍生
- 14.4 scrollTop, scrollLeft
- 14.5 offset 和 position
- 15. ★jQuery事件
- 15.1 事件發展歷程
- 15.2 on方法繫結事件
- 15.3 事件的執行順序
- 15.4 解綁事件——unbind, undelegate, off
- 15.5 觸發事件——trigger、 事件名函式
- 15.6 jQuery事件物件
- 16. 鏈式程式設計和 `end`
- 17. each 方法
- 18. `$`的多庫共存
- 19. jQuery外掛
- 案例
使用原生js操作dom的麻煩：
- 程式碼比較麻煩，需要遍歷，可能還需要巢狀。
- 找物件麻煩，方法少，還長
- 會有相容性問題。
- 如果想要實現簡單的動畫效果 animate
- js註冊事件，會被覆蓋，addEventListener
1. 第一個jquery
- 入口載入函式：
$(document).ready() - 註冊時間： 把on去掉，是一個方法
- 隱式迭代： jquery會自動去遍歷
$(function () {
$("#btn1").click(function(){
$("div").show(1000);
});
$("#btn2").click(function(){
$("div").text("內容");
});
});
2. jQuery版本問題
1.x版本是相容IE678的， 2.x版本是不相容 IE6,7,8, 早期的版本更新，都會兩個大版本同步進行，分別有相容與不相容的。 等到後來 全部整合為3.X版本，並且宣佈放棄 IE6,7,8。
- 1.x版本：能夠相容IE678瀏覽器
- 2.x版本：不相容IE678瀏覽器
- 1.x和2.x版本jquery都不再更新版本了，現在只更新3.x版本。
- 3.x版本：不相容IE678，更加的精簡（在國內不流行，因為國內使用jQuery的主要目的就是相容IE678）
3. jQuery入口函式
3.1 寫法
寫法1：
$(document).ready(function(){
});
寫法2：
$().ready(function(){
});
寫法3
$(function){
});
3.2 和js入口函式的區別
-
原生Js和jQuery入口函式載入模式不同。
- 原生Js會等到DOM元素載入完畢，並且圖片也載入完畢才會執行；
- jQuery會等到DOM元素載入完畢，但不會等到圖片載入完畢就會執行。
-
編寫多個入口函式的區別。
- 原生Js如果編寫多個入口函式，後面編寫的會覆蓋前面編寫的；
- JQuery中編寫多個入口函式，後面的不會覆蓋前面的。
window.onload = function () {
console.log("我是js的入口函式");
};
//認識
$(document).ready(function () {
console.log("這是jQuery入口函式的第一種寫法");
});
$(function () {
console.log("這是jQuery入口函式的第二種寫法");
});
結果：
這是jQuery入口函式的第一種寫法
這是jQuery入口函式的第二種寫法
我是js的入口函式
4. ★jsDom物件和JQ物件
4.1 JS偽陣列
特點:
- 具有length屬性；
- 按索引方式儲存資料；
- 不具有陣列的push()、pop()等方法；
例子：
var fakeArray01 = {0:'a',1:'b',length:2};//這是一個標準的偽陣列物件
轉換成真陣列:
使用Array.prototype.slice.call方法轉換：
alert(arr01[0]);//a
var arr02 = [].slice.call(fakeArray01);
alert(arr02[0]);//a
4.2 JQuery物件和JS物件的關係
1. 什麼是DOM物件(js物件):
使用js的方式獲取到的元素就是js物件（DOM物件）使用js的方式獲取到的元素就是js物件（DOM物件）
var cloth = document.getElementById("cloth");
cloth.style.backgroundColor = "pink";
2. 什麼是jq物件：
使用jq的方式獲取到的元素就是jq物件
var $li = $("li");
console.log($li);
$li.text("我改了內容");
3. JS和JQ物件的方法不能互相呼叫
4. 本質區別：
jq物件其實就是js物件的一個集合，偽陣列，裡面存放了一大堆的js物件
在jq中註冊事件時，使用this，這個還是JS物件；需要使用$(this)轉換
5. 互相轉換
JS物件轉換成JQ物件
使用$():
var cloth = document.getElementById("cloth");
$(cloth).text("呵呵");
JQ物件轉換成 JS物件：
- 使用
jqobj[index] - 使用
jqobj.get(index)
$li[1].style.backgroundColor = "red";
$li.get(2).style.backgroundColor = "yellow";
5. $的本質
5.1 $是什麼
$實際上是一個函式，就是 jQuery的意思。
console.log(typeof $);
// function
5.2 ★$的作用
1. 引數是個函式
代表是入口函式
$(function(){
});
2. 引數是一個js物件
代表將這個JS物件轉換成JQ物件
$(divObj).text("哈哈");
3. 引數是一個選擇器字串
代表選擇器來獲取JQ物件
$("#btn1");
4. 引數是一個標籤字串
代表建立一個HTML標籤
$('<a href="#" target="_blank">點我點我</a>');
6. jQuery基本選擇器
jQuery選擇器返回的是jQuery物件。jQuery選擇器有很多，基本相容了CSS1到CSS3所有的選擇器，並且jQuery還添加了很多更加複雜的選擇器。
基本選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| ID選擇器 | $(“#id”); | 獲取指定ID的元素 |
| 類選擇器 | $(“.class”); | 獲取同一類class的元素 |
| 標籤選擇器 | $(“div”); | 獲取同一類標籤的所有元素 |
| 並集選擇器 | $(“div,p,li”); | 使用逗號分隔，只要符合條件之一就可。 |
| 交集選擇器 | $(“div.redClass”); | 獲取class為redClass的div元素 |
總結：跟css的選擇器用法一模一樣。
層級選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| 子代選擇器 | $(“ul>li”); | 使用>號，獲取兒子層級的元素，注意，並不會獲取孫子層級的元素 |
| 後代選擇器 | $(“ul li”); | 使用空格，代表後代選擇器，獲取ul下的所有li元素，包括孫子等 |
跟CSS的選擇器一模一樣。
過濾選擇器
這類選擇器都帶冒號:
| 名稱 | 用法 | 描述 |
|---|---|---|
| :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元素中，選擇索引號為偶數的元素 |
| :lt(index) | ||
| :gt(index) | ||
| :first | ||
| :last | ||
| :animated |
【案例：隔行變色】
表單選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| :input | ||
| :text | ||
| :password | ||
| :radio | ||
| :checkbox | ||
| :submit | ||
| :image | ||
| :reset | ||
| :button | ||
| :file | ||
| :hidden | ||
| :enabled | ||
| :disabled | ||
| :checked | ||
| :selected |
篩選選擇器(方法)
篩選選擇器的功能與過濾選擇器有點類似，但是用法不一樣，篩選選擇器主要是方法。
| 名稱 | 用法 | 描述 |
|---|---|---|
| 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() | 找上一次兄弟 |
【案例：下拉選單】this+children+mouseenter+mouseleave
var $li = $(".wrap>ul>li");
//給li註冊滑鼠經過事件，讓自己的ul顯示出來
$li.mouseenter(function () {
//找到所有的兒子，並且還得是ul
$(this).children("ul").show();
});
$li.mouseleave(function () {
$(this).children("ul").hide();
});
【案例：突出展示】siblings+find
$(function(){
var $lis = $(".wrap li");
$lis.mouseenter(function(){
$(this).siblings("li").css("opacity",0.4);
$(this).css("opacity", 1);
});
$lis.mouseleave(function(){
$lis.css("opacity", 1);
});
});
【案例：手風琴】next+parent
$(function () {
$(".menuGroup").mouseenter(function(){
$(this).children("div").slideDown(); //.css("display","block");
}).mouseleave(function(){
$(this).children("div").slideUp(); //css("display","none");
});
});
或者
$(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
jquery中可以鏈式程式設計
7. mouseenter vs. mouseover
mouseenter和mouseleave是一組mouseover和mouseout是一組
區別：
- 無論滑鼠指標穿過被選元素或者是其子元素，都會觸發
mouseover - 只有在滑鼠指標穿過被選元素時，才會觸發
mouseenter
mouseenter效率更高
8. 獲取索引——index()
作用：獲取元素在其兄弟元素中的索引值
<li></li>
<li></li>
<li></li>
<li></li>
<script>
$("li").click(function(){
console.log($(this).index());
// li 返回 0 1 2 3
});
</script>
<li></li>
<li></li>
<li></li>
<li></li>
<script>
$("li").click(function(){
console.log($(this).index());
// li 返回 0 1 2 3
});
</script>
第一天覆習：
//jquery:簡單、粗暴
//jq和js的關係
//js是什麼？ js是一門程式語言
//jq僅僅是基於js的一個庫，jq可理解為就是開發js的一個工具。
//概念
//1. 為什麼要學jquery ？ 簡單，粗暴 沒有相容性問題
//2. 什麼是jquery？js庫，說白了就是js檔案，裡面有一大堆的方法
//3. 使用jquery的步驟： 1. 引入jquery檔案 2. 入口函式 功能實現
//4. 版本：1.x 2.x 3.x 1.x 壓縮版和未壓縮版
//5. 入口函式： $(document).ready(function) $(function(){})
//6. jQuery物件與DOM物件
//區別：方法不能混用
//聯絡： DOM-->jq 花錢 jq-->dom [0] get(0)
//$的實質：function
// console.log($ === jQuery);
// $(function () {
//
// });
//選擇器
//基本選擇器 標籤 類 id選擇器 交集 並集
//層級選擇器： 子代 後代
//過濾選擇器：
//:odd:奇數 even:偶數 :eq：指定下標
//:first :last :gt :lt
//篩選選擇器
//children():找兒子
//find():找後代
//parent():找爹
//siblings():找兄弟，不包括自己
//next:下一個兄弟
//prev:上一次兄弟
//eq:指定下標
//index()：返回的當前元素在所有兄弟裡面的索引。
9. 設定CSS樣式——css
9.1 設定單個樣式
| 設定方法 |
|---|
css(name, value) |
$("#four").css("backgroundColor", "red");
$("#four").css("font-size","20px");
設定css樣式時，可以使用js寫法，也可以使用css寫法， 最終jquery都會翻譯成 js寫法
9.2 設定多個樣式
| 設定方法 |
|---|
css( obj) |
$("li").css({
backgroundColor:"pink",
color: "red",
fontSize:"32px",
border: "1px solid black"
});
9.3 獲取樣式
| 獲取方法 |
|---|
css( name) |
console.log($("li").css("fontSize"));//16px
獲取的時候：只會返回第一個元素對應的值。
特點——隱式迭代
-
隱式迭代：
- 設定操作的時候：會給jq內部的所有物件都設定上相同的值。
- 獲取的時候：只會返回第一個元素對應的值。
-
jquery獲取屬性值的時候，無論是style屬性還是樣式表設定的屬性，都可以直接獲取
-
jquery獲取的屬性，都是帶單位的
10. 操作class
10.1 新增class——addClass
| 寫法 |
|---|
addClass( className) |
$("li").addClass("basic");
10.2 移除class——removeClass
| 寫法 |
|---|
removeClass( className) |
$("li").removeClass("basic");
10.3 判斷是否含有class—— hasClass
| 寫法 |
|---|
hasClass( className) |
console.log($("li").hasClass("bigger"));;
10.4 切換class——toggleClass
| 寫法 |
|---|
toggleClass( className) |
$("li").toggleClass("basic");
11. 操作屬性——attr、prop
- 樣式：在style裡面寫的，用
css來操作。 - 屬性：在裡面裡面寫的，用
attr方法操作。
既可以獲取/設定正常屬性，也可以獲取/設定自定義屬性
11.1 設定單個屬性
| 寫法 |
|---|
attr(name, value) |
$("div").attr("nihao","haha");
$("div").attr("id","haha23")
11.2 設定多個屬性
| 寫法 |
|---|
attr( obj ) |
$("img").attr({
alt:"圖破了",
title:"錯錯錯",
aa:"bb"
})
11.3 獲取屬性
| 寫法 |
|---|
attr(name) |
console.log($("div").attr("hello"));
console.log($("div").attr("title"));
11.4 prop
As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.
對於值是true/false的，應該用prop而不是attr， 用法和 attr一樣。
.prop( 'checked' ): false
.is( ':checked' ): false
12. 動畫
12.1 show 和 slide
show([speed], [callback]) |
hide([speed], [callback]) |
引數說明:
callback： 回撥函式，當動畫結束的時候呼叫- speed： 速度，可以為數字（毫秒值），也可以為字串：fast:200ms normal:400ms slow:600|
- 不傳引數，則會瞬間顯示
12.2 slideDown 和 slideUp
slideDown([speed], [callback]) |
slideUp([speed], [callback]) |
12.3 fadeIn 和 fadeOut
fadeIn([sp
|