jQuery基礎--學習記錄(一)

時間 2021-04-14

標籤 javascript css 前端 java jquery 編程數組瀏覽器 dom ide 欄目 JQuery 简体版

原文原文鏈接

day01 - jQuery

學習目標：javascript

可以說出什麼是 jQuery
可以說出 jQuery 的優勢
可以簡單使用 jQuery
可以說出 DOM 對象和 jQuery 對象的區別
可以寫出經常使用的 jQuery 選擇器
可以操做 jQuery 樣式
可以寫出經常使用的 jQuery 動畫css

1.1. jQuery 介紹

1.1.1 JavaScript 庫

JavaScript庫：即 library，是一個封裝好的特定的集合（方法和函數）。從封裝一大堆函數的角度理解庫，就是在這個庫中，封裝了不少預先定義好的函數在裏面，好比動畫animate、hide、show，好比獲取元素等。前端

簡單理解：就是一個JS 文件，裏面對咱們原生js代碼進行了封裝，存放到裏面。這樣咱們能夠快速高效的使用這些封裝好的功能了。java

好比 jQuery，就是爲了快速方便的操做DOM，裏面基本都是函數（方法）。jquery

常見的JavaScript 庫：jQuery、Prototype、YUI、Dojo、Ext JS、移動端的zepto等，這些庫都是對原生 JavaScript 的封裝，內部都是用 JavaScript 實現的，咱們主要學習的是 jQuery。編程

1.1.2 jQuery的概念

jQuery整體概況以下 :數組

jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。
j 就是 JavaScript； Query 查詢；意思就是查詢js，把js中的DOM操做作了封裝，咱們能夠快速的查詢使用裏面的功能。
jQuery 封裝了 JavaScript 經常使用的功能代碼，優化了 DOM 操做、事件處理、動畫設計和 Ajax 交互。
學習jQuery本質：就是學習調用這些函數（方法）。
jQuery 出現的目的是加快前端人員的開發速度，咱們能夠很是方便的調用和使用它，從而提升開發效率。瀏覽器

1.1.3 jQuery的優勢

輕量級。核心文件才幾十kb，不會影響頁面加載速度。
跨瀏覽器兼容，基本兼容瞭如今主流的瀏覽器。
鏈式編程、隱式迭代。
對事件、樣式、動畫支持，大大簡化了DOM操做。
支持插件擴展開發。有着豐富的第三方的插件，例如：樹形菜單、日期控件、輪播圖等。
免費、開源。

1.2. jQuery 的基本使用

1.2.1 jQuery 的下載

jQuery的官網地址： https://jquery.com/，官網便可...dom

各個版本的下載： https://code.jquery.com/

版本介紹：ide

1x ：兼容 IE 678 等低版本瀏覽器，官網再也不更新

2x ：不兼容 IE 678 等低版本瀏覽器，官網再也不更新

3x ：不兼容 IE 678 等低版本瀏覽器，是官方主要更新維護的版本

1.2.2. 體驗jQuery

步驟：

引入jQuery文件。
在文檔最末尾插入 script 標籤，書寫體驗代碼。
$('div').hide() 能夠隱藏盒子。

1.2.3. jQuery的入口函數

jQuery中常見的兩種入口函數：

// 第一種: 簡單易用。
$(function () {   
    ...  // 此處是頁面 DOM 加載完成的入口
}) ; 

// 第二種: 繁瑣，可是也能夠實現
$(document).ready(function(){
   ...  //  此處是頁面DOM加載完成的入口
});

總結：

等着 DOM 結構渲染完畢便可執行內部代碼，沒必要等到全部外部資源加載完成，jQuery 幫咱們完成了封裝。
至關於原生 js 中的 DOMContentLoaded。
不一樣於原生 js 中的 load 事件是等頁面文檔、外部的 js 文件、css文件、圖片加載完畢才執行內部代碼。
更推薦使用第一種方式。

1.2.4. jQuery中的頂級對象$

&dollar;是 jQuery 的別稱，在代碼中可使用 jQuery 代替，但通常爲了方便，一般都直接使用 $ 。
&dollar;是jQuery的頂級對象，至關於原生JavaScript中的 window。把元素利用$包裝成jQuery對象，就能夠調用jQuery 的方法。

1.2.5. jQuery 對象和 DOM 對象

使用 jQuery 方法和原生JS獲取的元素是不同的，總結以下 :

用原生 JS 獲取來的對象就是 DOM 對象
jQuery 方法獲取的元素就是 jQuery 對象。
jQuery 對象本質是：利用$對DOM 對象包裝後產生的對象（僞數組形式存儲）。

注意：

只有 jQuery 對象才能使用 jQuery 方法，DOM 對象則使用原生的 JavaScirpt 方法。

1.2.6. jQuery 對象和 DOM 對象轉換

DOM 對象與 jQuery 對象之間是能夠相互轉換的。由於原生js 比 jQuery 更大，原生的一些屬性和方法 jQuery沒有給咱們封裝. 要想使用這些屬性和方法須要把jQuery對象轉換爲DOM對象才能使用。

// 1.DOM對象轉換成jQuery對象，方法只有一種
var box = document.getElementById('box');  // 獲取DOM對象
var jQueryObject = $(box);  // 把DOM對象轉換爲 jQuery 對象

// 2.jQuery 對象轉換爲 DOM 對象有兩種方法：
//   2.1 jQuery對象[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery對象.get(索引值)
var domObject2 = $('div').get(0)

總結：實際開發比較經常使用的是把DOM對象轉換爲jQuery對象，這樣可以調用功能更增強大的jQuery中的方法。

1.3. jQuery 選擇器

原生 JS 獲取元素方式不少，很雜，並且兼容性狀況不一致，所以 jQuery 給咱們作了封裝，使獲取元素統一標準。

1.3.1. 基礎選擇器

$("選擇器")   //  裏面選擇器直接寫 CSS 選擇器便可，可是要加引號

1.3.2. 層級選擇器

層級選擇器最經常使用的兩個分別爲：後代選擇器和子代選擇器。

基礎選擇器和層級選擇器案例代碼

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>        
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            console.log($(".nav"));
            console.log($("ul li"));
        })
    </script>
</body>

1.3.3. 篩選選擇器

篩選選擇器，顧名思義就是在全部的選項中選擇知足條件的進行篩選選擇。常見以下 :

案例代碼

<body>
    <ul>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
    </ul>
    <ol>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
    </ol>
    <script>
        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })
    </script>
</body>

另: jQuery中還有一些篩選方法，相似DOM中的經過一個節點找另一個節點，父、子、兄之外有所增強。

偏重於記憶，演示代碼略。

1.3.4 知識鋪墊

jQuery 設置樣式

$('div').css('屬性', '值')

jQuery 裏面的排他思想

// 想要多選一的效果，排他思想：當前元素設置樣式，其他的兄弟元素清除樣式。
$(this).css(「color」,」red」);
$(this).siblings(). css(「color」,」」);

隱式迭代

// 遍歷內部 DOM 元素（僞數組形式存儲）的過程就叫作隱式迭代。
// 簡單理解：給匹配到的全部元素進行循環遍歷，執行相應的方法，而不用咱們再進行循環，簡化咱們的操做，方便咱們調用。
$('div').hide();  // 頁面中全部的div所有隱藏，不用循環操做

鏈式編程

// 鏈式編程是爲了節省代碼量，看起來更優雅。
$(this).css('color', 'red').sibling().css('color', '');

1.3.5 案例：淘寶服飾精品案例

思路分析:
1.核心原理：鼠標通過左側盒子某個小li，就讓內容區盒子相對應圖片顯示，其他的圖片隱藏。
2.須要獲得當前小li 的索引號，就能夠顯示對應索引號的圖片
3.jQuery 獲得當前元素索引號 $(this).index()
4.中間對應的圖片，能夠經過 eq(index) 方法去選擇
5.顯示元素 show() 隱藏元素 hide()

代碼實現略。(詳情參考源代碼)

1.4. jQuery 樣式操做

jQuery中經常使用的樣式操做有兩種：css() 和設置類樣式方法

1.4.1. 方法1: 操做 css 方法

jQuery 可使用 css 方法來修改簡單元素樣式；也能夠操做類，修改多個樣式。

經常使用如下三種形式 :

// 1.參數只寫屬性名，則是返回屬性值
var strColor = $(this).css('color');

// 2.  參數是屬性名，屬性值，逗號分隔，是設置一組樣式，屬性必須加引號，值若是是數字能夠不用跟單位和引號
$(this).css(''color'', ''red'');

// 3.  參數能夠是對象形式，方便設置多組樣式。屬性名和屬性值用冒號隔開， 屬性能夠不用加引號
$(this).css({ "color":"white","font-size":"20px"});

注意：css() 多用於樣式少時操做，多了則不太方便。

1.4.2. 方法2: 設置類樣式方法

做用等同於之前的 classList，能夠操做類樣式，注意操做類裏面的參數不要加點。

經常使用的三種設置類樣式方法：

// 1.添加類
$("div").addClass("current");

// 2.刪除類
$("div").removeClass("current");

// 3.切換類
$("div").toggleClass("current");

注意：

設置類樣式方法比較適合樣式多時操做，能夠彌補css()的不足。
原生 JS 中 className 會覆蓋元素原先裏面的類名，jQuery 裏面類操做只是對指定類進行操做，不影響原先的類名。

1.4.3. 案例：tab 欄切換

思路分析:
1.點擊上部的li，當前li 添加current類，其他兄弟移除類。
2.點擊的同時，獲得當前li 的索引號
3.讓下部裏面相應索引號的item顯示，其他的item隱藏

代碼實現略。(詳情參考源代碼)

1.5. jQuery 效果

jQuery 給咱們封裝了不少動畫效果，最爲常見的以下：

顯示隱藏：show() / hide() / toggle() ;
劃入畫出：slideDown() / slideUp() / slideToggle() ;
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
自定義動畫：animate() ;

注意：

動畫或者效果一旦觸發就會執行，若是屢次觸發，就形成多個動畫或者效果排隊執行。

jQuery爲咱們提供另外一個方法，能夠中止動畫排隊：stop() ;

1.5.1. 顯示隱藏

顯示隱藏動畫，常見有三個方法：show() / hide() / toggle() ;

語法規範以下:

代碼演示

<body>
    <button>顯示</button>
    <button>隱藏</button>
    <button>切換</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
              $("div").toggle(1000);
            })
            // 通常狀況下，咱們都不加參數直接顯示隱藏就能夠了
        });
    </script>
</body>

1.5.2. 滑入滑出

滑入滑出動畫，常見有三個方法：slideDown() / slideUp() / slideToggle() ;

語法規範以下:

代碼演示

<body>
    <button>下拉滑動</button>
    <button>上拉滑動</button>
    <button>切換滑動</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑動 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑動 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                // 滑動切換 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>

小案例：下拉菜單略（詳情參看源碼）。

1.5.3 淡入淡出

淡入淡出動畫，常見有四個方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

語法規範以下:

代碼演示

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切換</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function() {
                // 淡入淡出切換 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 這個速度和透明度要必須寫
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>

1.5.4 自定義動畫

自定義動畫很是強大，經過參數的傳遞能夠模擬以上全部動畫，方法爲：animate() ;

語法規範以下:

代碼演示

<body>
    <button>動起來</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

1.5.5 中止動畫排隊

動畫或者效果一旦觸發就會執行，若是屢次觸發，就形成多個動畫或者效果排隊執行。

中止動畫排隊的方法爲：stop() ;

stop() 方法用於中止動畫或效果。
stop() 寫到動畫或者效果的前面，至關於中止結束上一次的動畫。

總結: 每次使用動畫以前，先調用 stop() ,在調用動畫。

1.5.6. 事件切換

jQuery中爲咱們添加了一個新事件 hover() ; 功能相似 css 中的僞類 :hover 。介紹以下

語法

hover([over,]out)     // 其中over和out爲兩個函數

over:鼠標移到元素上要觸發的函數（至關於mouseenter）
out:鼠標移出元素要觸發的函數（至關於mouseleave）
若是隻寫一個函數，則鼠標通過和離開都會觸發它

hover事件和中止動畫排列案例

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠標通過
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 當前元素  this不要加引號
            //     // show() 顯示元素  hide() 隱藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠標離開
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切換 hover 就是鼠標通過和離開的複合寫法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切換 hover  若是隻寫一個函數，那麼鼠標通過和鼠標離開都會觸發這個函數
            $(".nav>li").hover(function() {
                // stop 方法必須寫到動畫的前面
                $(this).children("ul").stop().slideToggle();
            });
        })
    </script>
</body>