原以為 jQuery 不需要學習，但是接觸了一些 VUE 框架，發現用到了好多 jQuery 的知識，于是回傳來重新學習，本系列筆記大概分為三篇，陸續更新，
參考：W3school —— jQuery 教程；黑馬 pink 老師前端入門

文章目錄

「一」jQuery 概述
- 1. JavaScript 庫
- 2. jQuery 概念
- 3. jQuery 優點
「二」jQuery 基本使用
- 1. jQuery 下載
- 2. jQuery 的使用步驟
- 3. jQuery 的入口函式
- 4. jQuery 頂級物件 $
- 5. jQuery 物件和 DOM 物件
「三」jQuery 選擇器
- 1. jQuery 基本選擇器
- 2. jQuery 層級選擇器
- 3. 隱式迭代
- 4. jQuery 篩選選擇器
- 5. jQuery 篩選方法
- 6. jQuery 排他思想
- 7. 鏈式編程
「四」jQuery 樣式操作
- 1. 操作 css 方法
- 2. 設定類樣式方法
- 3. 類操作與 className 區別
「五」jQuery 效果
- 1. 顯示隱藏效果
- 2. 滑動效果
- 3. 事件切換
- 4. 影片佇列及其停止排隊方法
- 5. 淡入淡出效果
- 6. 自定義影片

「一」jQuery 概述

1. JavaScript 庫

JavaScript 庫：即 library，是一個封裝好的特定集合（包含方法和函式），也就是說，在這個庫中，對原生的 JS 代碼進行了封裝，封裝好了很多預先定義好的函式在里面，比如 animate(影片)、hide、show 等，這樣我們就可以快速高效的使用這些功能，

這些 JavaScript 庫常被稱為 JavaScript 框架，如：

jQuery
Prototype
YUI
Dojo

它們都是對原生 JavaScript 的封裝，內部都是用 JavaScript 實作的，下面主要學習 jQuery，

2. jQuery 概念

jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是 Write Less, Do More，提倡寫更少代碼，做更多事情，

j ： JavaScript
Query：查詢，意思就是查詢 JS，我們可以快速查找使用里面封裝好的功能

jQuery 封裝了 JavaScript 常用的功能代碼，優化了 DOM 操作、事件處理、影片設計和 AJAX 互動，

jQuery 出現的目的是加快前端人員的開發速度，我們可以非常方便的呼叫和使用它，從而提高開發效率，

3. jQuery 優點

輕量級，核心檔案幾十kb，不會影響頁面加載速度，
跨瀏覽器兼容，基本兼容了現在主流的瀏覽器，
鏈式編程、隱式迭代，
對事件、樣式、影片支持，大大簡化了 DOM 操作，
支持插件擴展開發，有著豐富的第三方插件，如：樹形選單、日期控制元件、輪播圖等，
免費、開源，

「二」jQuery 基本使用

1. jQuery 下載

網址：https://jquery.com/
在這里插入圖片描述
將代碼全選復制后保存為 JS 檔案，用到時引入此檔案即可，

2. jQuery 的使用步驟

例如，將上面下載所得的 JS 檔案保存為 jquery.min.js，只需使用下面代碼參考后即可使用，

	<script src="jquery.min.js"></script>

示例

利用 $('div').hide() 將盒子隱藏

<head>
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        $('div').hide();
    </script>
</body>

3. jQuery 的入口函式

第一種方式

    $ (document).ready(function (){
		// 頁面 DOM 加載完成入口
    });

更簡潔的方式（推薦使用）

	$(function () {
        // 頁面 DOM 加載完成入口
    });

等待 DOM 解構渲染完畢即可執行內部代碼，不必等到所有外部資源加載完成
相當于原生 JS 中 DOMContentLoaded
不同于原生 JS 中的 load 事件，load 事件是等待頁面檔案、外部 JS 檔案、CSS 檔案、圖片加載完成才執行的代碼

4. jQuery 頂級物件 $

$ 是 jQuery 的別稱，在代碼中可以使用 jQuery 代替 $，但一般為了方便，通常都直接使用 $ ，也就是說，下述兩種方式是等價的：

   jQuery(function () {
       ...
   })
   
   $(function () {
       ...
   })

$ 是 jQuery 的頂級物件，相等于原生 JS 中的 window，把元素利用 $ 包裝成 jQuery 物件，就可以呼叫 jQuery 的方法，如下，把 div 元素包裝起來，利用 jQuery 方法 hide() 來將元素隱藏：

	$('div').hide()

5. jQuery 物件和 DOM 物件

利用原生 JS 獲取來的物件就是 DOM 物件

	var div = document.querySelector('div');

利用 jQuery 方法獲取的元素就是 jQuery 物件

    var div = $('div');

jQuery 物件本質是：利用 $ 對 DOM 物件包裝后產生的物件，它是由偽陣列形式存盤的
jQuery 物件只能使用 jQuery 方法，DOM 物件則只能使用原生的 JS 屬性和方法

	div.hide();							// 報錯
    $('div').style.display = 'none';    // 報錯

相互轉換

DOM 物件和 jQuery 物件之間是可以進行相互轉換的，

因為原生 JS 有些屬性和方法 jQuery 并沒有對其封裝，而如果要使用這些方法，則需將 jQuery 物件轉換為 DOM 物件，

DOM 物件轉換為 jQuery 物件： ${ DOM 物件}

    var div = document.querySelector('div');
    $(div).hide();

jQuery 物件轉換為 DOM 物件，兩種方法：

	$('div')[index];		// index 是索引
	$('div')[0].style.display = 'none';

	$('div').get(index);
	$('div').get(0).style.display = 'none';

「三」jQuery 選擇器

1. jQuery 基本選擇器

原生 JS 獲取元素的方式有很多，但是比較雜亂，如 querySelector、getElementsByClassName、getElementById() 等等，因此，jQuery 對其進行了封裝，使得獲取元素統一標準，

	$("選擇器")

名稱	用法	描述
ID選擇器	`$('#d')`	獲取指定 ID 的元素
全選選擇器	`$('*')`	匹配所有元素
類選擇器	`$('.class')`	獲取同一類 class 的元素
標簽選擇器	`$('div')`	獲取同一類標簽的元素
并集選擇器	`$('div, p, li')`	選取多個元素
交集選擇器	`$('li.current')`	交集元素

2. jQuery 層級選擇器

名稱	用法	描述
子代選擇器	`$('ul>li')`	獲取新兒子元素
后代選擇器	`$('ul li')`	獲取后代元素，即 ul 下所有 li

3. 隱式迭代

遍歷內部 DOM 元素（偽陣列元素存盤）的程序就叫做隱式迭代，也就是說，對匹配到的所有元素 jQuery 自動進行回圈迭代，執行相應方法，而不需手動回圈，
在這里插入圖片描述
如上代碼，隱式迭代對匹配到的所有元素進行遍歷回圈，給每個元素添加 CSS 方法，而無需手動進行 for 回圈逐次設定，

4. jQuery 篩選選擇器

名稱	用法	描述
`:first`	`$('li:first')`	獲取第一個 li 元素
`:last`	`$('li:last')`	獲取最后一個 li 元素
`:eq(index)`	`$('li:eq(2)')`	獲取到的 li 中，選擇索引號為 2 的元素
`:odd`	`$('li:odd')`	獲取到的 li 中，選擇索引號為奇數的元素
`:even`	`$('li:even')`	獲取到的 li 中，選擇索引號為偶數的元素

5. jQuery 篩選方法

語法	用法	說明
`parent()`	`$('li').parent();`	查找父級
`children(selector)`	`$('ul').children('li');`	相當于 `&('ul>li')`，最近一級
`find(selector)`	`$('ul').find('i);`	相當于 `$('ul li')`，后代選擇器
`siblings(selector)`	`$('.first').siblings('li');`	查找兄弟節點，不包括自己本身
`nextAll([expr])`	`$('.first').nextAll();`	查找當前元素之后的同輩元素
`prevtAll([expr])`	`$('.last').prevAll();`	查找當前元素之前的同輩元素
`hasClass(class)`	`$('div').hasClass('protected');`	檢查當前的元素是否含有某個特定類，如有，回傳 `true`
`eq(index)`	`$('li').eq(2);`	相當于 `$('li:eq(2)')`

案例：新浪下拉選單

請添加圖片描述
原生 JS 寫法

	var nav = document.querySelector('.nav');
	var lis = nav.children;
	for (var i = 0; i < lis.length; i++) {
	    lis[i].onmouseover = function () {
	        this.children[1].style.display = 'block';
	    }
	    lis[i].onmouseout = function () {
	        this.children[1].style.display = 'none';
	    }
	}

jQuery 寫法，隱式迭代，不用采取 for 回圈，更加簡便

    $(function () {
        $('.nav>li').mouseover(function () {
            $(this).children('ul').show();
        })
        $('.nav>li').mouseout(function () {
            $(this).children('ul').hide();
        })
    })

注意，jQuery 中當前元素用 ${this} 表示；show() 是顯示元素，hide() 是隱藏元素，

6. jQuery 排他思想

請添加圖片描述
原生 JS 寫法

    var btns = document.getElementsByTagName('button');

    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            for (var i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
            }
            this.style.backgroundColor = 'tomato';
        }
    }

jQuery 寫法

    $(function () {
        $('button').click(function () {
            $(this).css('background', 'tomato');
            $(this).siblings('button').css('background', '');
        })
    })

案例：淘寶精品服飾

    $(function () {
        $('#left li').mouseover(function () {
            // 獲取索引號
            var index = $(this).index();
            // console.log(index);
            
        	// 排他思想：將對應索引的元素顯示，其他隱藏
            $('#content div').eq(index).show();
            $('#content div').eq(index).siblings().hide();
        })
    })

注意：這里利用 $(this).index() 得到當前元素索引號

7. 鏈式編程

鏈式編程是為了節省代碼量，看起來更優雅，如下代碼：

	$('#content div').eq(index).show();
	$('#content div').eq(index).siblings().hide();

采取鏈式編程的方法，可以寫為：

	$("#content div").eq(index).show().siblings().hide();

「四」jQuery 樣式操作

1. 操作 css 方法

jQuery 可以使用 css 方法來修改簡單元素樣式；也可以操作類，修改多個樣式，

引數只寫屬性名，則是回傳屬性值

	$(this).css('color');

如果要修改樣式，則需要 ('屬性名','屬性值')，注意屬性名一定加引號，屬性值如果是數字可以省略引號及單位

	$(this).css('color','red');

引數可以是物件形式，方便設定多組樣式，屬性名和屬性值用冒號隔開，屬性可以不用加引號

	$(this).css({ 'color': 'red', 'font-size': '20px' });

    $('div').css({
        width: 300,
        backgroundColor: 'purple'
    });

2. 設定類樣式方法

作用等同于之前的 classList，可以操作類樣式，注意操作類里面的引數不要加點，

添加類

	$('div').addClass('current');

移除類

	$('div').removeClass('current');

切換類，該方法檢查每個元素中指定的類，如果不存在則添加類，如果已設定則洗掉之，這就是所謂的切換效果

	$('div').toggleClass('current');

Look here

jQuery 代碼

    $(function () {
        $('div').click(function () {
            $(this).toggleClass('current');
        })
    })

current 類

    .current {
        background-color: tomato;
        /* 旋轉效果 */
        transform: rotate(360deg);
    }

案例：Tab 欄切換

請添加圖片描述

    $('.tab_list li').click(function () {
        $('.tab_list ul li').removeClass('current').eq($(this).index()).addClass('current');
        $('.tab_con .item').hide().eq($(this).index()).show();
    })

3. 類操作與 className 區別

原生 JS 中 className 會覆寫元素之前的類名；jQuery 則與之不同，它的類操作只是對指定類進行操作，不影響原來的類名，相當于在原來的類名基礎上，去追加新的類名，

在這里插入圖片描述

「五」jQuery 效果

jQuery 給我們封裝了很多影片效果，最為常見的如下：

在這里插入圖片描述

1. 顯示隱藏效果

語法規范

	show([speed,[easing],[fn]])

引數都可以省略，無影片直接顯示
speed: 三種預定速度之一的字串（'slow'；'normal'；'fast'）或表示影片時長的毫秒數值（如 1000)
easing：用來指定切換效果，默認 swing，可用引數 linear
fn：回呼函式，在影片完成時執行的函式，每個元素執行一次

一般情況下，都不加引數，而是直接隱藏，

2. 滑動效果

下滑效果

	slideDown([speed,[easing],[fn]])

上滑效果

	slideUp([speed,[easing],[fn]])

切換效果

	slideToggle([speed,[easing],[fn]])

引數都可以省略，無影片直接顯示
speed: 三種預定速度之一的字串（'slow'；'normal'；'fast'）或表示影片時長的毫秒數值（如 1000)
easing：用來指定切換效果，默認 swing，可用引數 linear
fn：回呼函式，在影片完成時執行的函式，每個元素執行一次

示例

    $(function () {
        $("button").eq(0).click(function () {
            $("div").slideDown();
        })

        $("button").eq(1).click(function () {
            $("div").slideUp(200);
        })

        $("button").eq(2).click(function () {
            $("div").slideToggle(200);
        });
    });

3. 事件切換

	hover([over,]out)

over：滑鼠經過元素要觸發的函式，相當于 mouseenter
out：滑鼠移出元素要觸發的函式，相當于 mouseleave
如果只寫一個函式，那么滑鼠經過和離開時都會觸發

對于此前的案例，我們可以進行改進

請添加圖片描述

可以利用 hover 進行滑鼠經過和離開的符合寫法

     $(".nav>li").hover(function() {
         $(this).children("ul").slideDown(200);
     }, function() {
         $(this).children("ul").slideUp(200);
     });

更簡單的，可以利用事件切換 hover 的特性，當只有一個函式時滑鼠經過和離開都會觸發此函式

    $(".nav>li").hover(function() {
        $(this).children("ul").slideToggle();
    });

4. 影片佇列及其停止排隊方法

影片或效果佇列

影片或者效果一旦觸發就會執行，如果多次觸發，就造成多個影片效果排隊進行，比如：
請添加圖片描述

停止排隊

	stop()

stop() 方法用于停止影片或效果
stop() 寫到影片或者效果的前面，相當于停止結束上一次的影片

請添加圖片描述

   $(".nav>li").hover(function () {
       $(this).children("ul").stop().slideToggle();
   });

5. 淡入淡出效果

淡入效果：fadeIn() 方法使用淡入效果來顯示被選元素，假如該元素是隱藏的，如果元素已經顯示，則該效果不產生任何變化，除非規定了 callback 函式，

	fadeIn([speed,[easing],[fn]])

淡出效果：fadeOut() 方法使用淡入效果來隱藏被選元素，假如該元素是顯示的，如果元素已經隱藏，則該效果不產生任何變化，除非規定了 callback 函式，

	fadeOut([speed,[easing],[fn]])

淡入淡出相互切換

	fadeToggle([speed,[easing],[fn]])

引數都可以省略，無影片直接顯示
speed: 三種預定速度之一的字串（'slow'；'normal'；'fast'）或表示影片時長的毫秒數值（如 1000)
easing：用來指定切換效果，默認 swing，可用引數 linear
fn：回呼函式，在影片完成時執行的函式，每個元素執行一次

利用漸進方式調整到指定的不透明度

	fadeTo([speed],opacity,[easing],[fn])

opacity 透明度必須寫，取值 0 ~ 1
speed: 三種預定速度之一的字串（'slow'；'normal'；'fast'）或表示影片時長的毫秒數值（如 1000)
easing：用來指定切換效果，默認 swing，可用引數 linear

示例

   $(function () {
       $("button").eq(0).click(function () {
           $("div").fadeIn(1000);
       })
       $("button").eq(1).click(function () {
           $("div").fadeOut(1000);
       })
       $("button").eq(2).click(function () {
           $("div").fadeToggle(1000);
       });
       $("button").eq(3).click(function () {
           $("div").fadeTo(1000, 0.5);
       });
   });

案例：高亮顯示

請添加圖片描述
注意：為防止影片排隊問題，要添加 stop()

    $(function () {
        $(".wrap li").hover(function () {
            // 滑鼠進入，其他的 li 標簽透明度：0.5
            $(this).siblings().stop().fadeTo(400, 0.5);
        }, function () {
            // 滑鼠離開，其他 li 透明度改為 1
            $(this).siblings().stop().fadeTo(400, 1);
        })
    });

6. 自定義影片

	animate(params,[speed],[easing],[fn])

params：必須寫，想要更改的樣式屬性，以物件形式傳遞，其余引數可省略，
speed: 三種預定速度之一的字串（'slow'；'normal'；'fast'）或表示影片時長的毫秒數值（如 1000)
easing：用來指定切換效果，默認 swing，可用引數 linear
fn：回呼函式，在影片完成時執行的函式，每個元素執行一次

示例

    $(function () {
        $("button").click(function () {
            $("div").animate({
                left: 100,
                borderRadius: 25,
            }, 500);
        })
    })

案例：王者容易手風琴效果

請添加圖片描述
簡單分析一下，原本每個 li 中，兩個圖片疊放在一起，小圖片采用定位，如下圖
在這里插入圖片描述
當滑鼠經過當前元素時，增大寬度，小圖片淡出，大圖片淡入，因此可以看到大圖片；其他元素寬度變小，小圖片淡入，大圖片淡出，顯示出小圖片，

	$(function() {
        $(".king li").mouseenter(function() {
            
            // 當前 li 寬度改變，小圖片淡出，大圖片淡入
            $(this).stop().animate({
                width: 224
            }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
            
            // 其余兄弟 li 寬度也改變，小圖片淡入，大圖片淡出
            $(this).siblings("li").stop().animate({
                width: 69
            }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
        })
    });

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/336258.html

標籤：其他

上一篇：vue簡單的store

下一篇：vue讀取外部組態檔

jQuery（一）—— jQuery 概述 / jQuery 選擇器 / jQuery 樣式操作 / jQuery 效果

文章目錄

「一」jQuery 概述

1. JavaScript 庫

2. jQuery 概念

3. jQuery 優點

「二」jQuery 基本使用

1. jQuery 下載

2. jQuery 的使用步驟

3. jQuery 的入口函式

4. jQuery 頂級物件 $

5. jQuery 物件和 DOM 物件

「三」jQuery 選擇器

1. jQuery 基本選擇器

2. jQuery 層級選擇器

3. 隱式迭代

4. jQuery 篩選選擇器

5. jQuery 篩選方法

6. jQuery 排他思想

7. 鏈式編程

「四」jQuery 樣式操作

1. 操作 css 方法

2. 設定類樣式方法

3. 類操作與 className 區別

「五」jQuery 效果

1. 顯示隱藏效果

2. 滑動效果

3. 事件切換

4. 影片佇列及其停止排隊方法

5. 淡入淡出效果

6. 自定義影片