「學習筆記」jQuery_1

時間  2021-08-13
標籤 css 前端 jquery 編程 數組 瀏覽器 dom ide 函數 學習 欄目 JQuery 简体版
原文   原文鏈接

jQuery_1

學習目標：

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

jQuery 介紹

JavaScript 庫

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

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

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

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

jQuery的概念

jQuery整體概況以下 :數組

  • jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。瀏覽器

  • j 就是 JavaScript；   Query 查詢； 意思就是查詢js，把js中的DOM操做作了封裝，咱們能夠快速的查詢使用裏面的功能。dom

  • jQuery 封裝了 JavaScript 經常使用的功能代碼，優化了 DOM 操做、事件處理、動畫設計和 Ajax 交互。ide

  • 學習jQuery本質： 就是學習調用這些函數（方法）。函數

  • jQuery 出現的目的是加快前端人員的開發速度，咱們能夠很是方便的調用和使用它，從而提升開發效率。學習

jQuery的優勢

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

jQuery 的基本使用

jQuery 的下載

jQuery的官網地址： https://jquery.com/，官網便可下載最新版本。

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

版本介紹：

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

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

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

jQuery的入口函數

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

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

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

總結：

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

jQuery中的頂級對象$

  1. 。
  2. 包裝成jQuery對象，就能夠調用jQuery的方法。

jQuery 對象和 DOM 對象

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

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

注意：

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

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中的方法。

jQuery 選擇器

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

基礎選擇器

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

層級選擇器

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

層級選擇器

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

<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>

篩選選擇器

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

案例代碼

<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中的經過一個節點找另一個節點，父、子、兄之外有所增強。

知識鋪墊

  • jQuery 設置樣式
$('div').css('屬性', '值')
  • jQuery 裏面的排他思想
// 想要多選一的效果，排他思想：當前元素設置樣式，其他的兄弟元素清除樣式。
$(this).css(「color」,」red」);
$(this).siblings(). css(「color」,」」);
  • 隱式迭代
// 遍歷內部 DOM 元素（僞數組形式存儲）的過程就叫作隱式迭代。
// 簡單理解：給匹配到的全部元素進行循環遍歷，執行相應的方法，而不用咱們再進行循環，簡化咱們的操做，方便咱們調用。
$('div').hide();  // 頁面中全部的div所有隱藏，不用循環操做
  • 鏈式編程
// 鏈式編程是爲了節省代碼量，看起來更優雅。
$(this).css('color', 'red').sibling().css('color', '');

案例：淘寶服飾精品案例

思路分析：

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

jQuery 樣式操做

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

方法1: 操做 css 方法

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

經常使用如下三種形式 :

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

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

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

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

方法2: 設置類樣式方法

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

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

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

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

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

注意：

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

案例：tab 欄切換

思路分析:

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

jQuery 效果

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

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

注意：

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

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

顯示隱藏

顯示隱藏動畫，常見有三個方法：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>

滑入滑出

滑入滑出動畫，常見有三個方法：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>

淡入淡出

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

語法規範以下:fadeIn

代碼演示

<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() ,在調用動畫。

事件切換

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>

案例：王者榮耀手風琴效果

思路分析:

  • 1.鼠標通過某個小li 有兩步操做：
  • 2.當前小li 寬度變爲 224px， 同時裏面的小圖片淡出，大圖片淡入
  • 3.其他兄弟小li寬度變爲69px， 小圖片淡入， 大圖片淡出

總結

- END -
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程