初識 jQuery基礎Day1——筆記整理（總結）+ 課後練習 ×1

文章目錄
一. jQuery的概念
二. jQuery 的基本使用
1 . jQuery 的下載
2. jQuery的入口函數
3. jQuery中的頂級對象$
4. jQuery 對象和 DOM 對象轉換
5. jQuery 選擇器- 基礎選擇器
6. jQuery 效果
    1 . 顯示隱藏
    2. 滑入滑出
    3. 淡入淡出
7. 事件切換

一. jQuery的概念

• jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是"write Less，Do More”，即倡導寫更少的代碼，做更多的事情。
• j 就是 JavaScript； Query 查詢； 意思就是查詢js，把js中的DOM操作做了封裝，我們可以快速的查詢使用裏面的功能。
• jQuery 封裝了 JavaScript 常用的功能代碼，優化了 DOM 操作、事件處理、動畫設計和 Ajax 交互。

二. jQuery 的基本使用

1. jQuery 的下載

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

2. jQuery的入口函數

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

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

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

總結：
1 . 相當於原生 js 中的 DOMContentLoaded。
2. 不同於原生 js 中的 load 事件是等頁面文檔、外部的 js 文件、css文件、圖片加載完畢才執行內部代碼。

3. jQuery中的頂級對象$

1 . $ 是 jQuery 的別稱，在代碼中可以使用 jQuery 代替，但一般爲了方便，通常都直接使用 $ 。
2. $ 是jQuery的頂級對象，相當於原生JavaScript中的 window。把元素利用$包裝成jQuery對象，就可以調用jQuery 的方法。

4. 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)
 

5. jQuery 選擇器- 基礎選擇器

層級選擇器

篩選選擇器

其它選擇器

6. jQuery 樣式操作

css:

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

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

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

類樣式方法:

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

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

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

6. jQuery 效果

jQuery 給我們封裝了很多動畫效果，最爲常見的如下：

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

注意：
動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。
jQuery爲我們提供另一個方法，可以停止動畫排隊：stop() ;

1. 顯示隱藏

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

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

2. 滑入滑出

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

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

3. 淡入淡出

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

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

7. 事件切換

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

語法

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

• over:鼠標移到元素上要觸發的函數（相當於mouseenter）
• out:鼠標移出元素要觸發的函數（相當於mouseleave）
• 如果只寫一個函數，則鼠標經過和離開都會觸發它

---

---

練習部分：

<script>
        $(document).ready(function () {
            //需求1：鼠標進入哪個li，當前透明度爲1，其他的爲0.4;
            //需求2：鼠標移開wrap，所有li透明度爲1;

            //需求1：鼠標進入哪個li，當前透明度爲1，其他的爲0.4;
            $("li").mouseenter(function () {
                //當前的透明度爲1，其他的爲0.4;
                $(this).css("opacity",1);
                $(this).siblings("li").css("opacity", 0.4);
                //優化
//                $(this).css("opacity",1).siblings("li").css("opacity", .4);
            });
            //需求2：鼠標移開wrap，所有li透明度爲1;
            $(".wrap").mouseleave(function () {
                //所有的li，opacity都變爲1；
                $("li").css("opacity",1);
            });
        });
    </script>

---

整理