JQuery- jq概念、jq選擇器、jq樣式操作、jq動畫效果、

**JQuery是什麼**

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

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

jQuery的概念

jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。

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

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

Jquery的核心原理

- `隱式迭代` 隱式迭代就是把所獲取的元素進行遍歷、添加相應的方法
- `鏈式編程` 鏈式編程的原理就是返回一個this對象，就是返回本身，達到鏈式效果。

jQuery中的頂級對象$

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

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

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

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

總結：

等着 DOM 結構渲染完畢即可執行內部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。

相當於原生 js 中的 DOMContentLoaded。

不同於原生 js 中的 load 事件是等頁面文檔、外部的 js 文件、css文件、圖片加載完畢才執行內部代碼。

更推薦使用第一種方式。

jQuery 對象和 DOM 對象

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

用原生 JS 獲取來的對象就是 DOM 對象

jQuery 方法獲取的元素就是 jQuery 對象。

jQuery 對象本質是：利用$對DOM 對象包裝後產生的對象（僞數組形式存儲）。

注意：

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

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')[0]

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 設置樣式

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

jQuery 裏面的排他思想

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

隱式迭代

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

鏈式編程

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

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

方法1: 操作 css 方法
jQuery 可以使用 css 方法來修改簡單元素樣式；也可以操作類，修改多個樣式。
注意：css() 多用於樣式少時操作，多了則不太方便。

//常用以下三種形式 : 
// 1.參數只寫屬性名，則是返回屬性值
var strColor = $(this).css('color');

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

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

方法2: 設置類樣式方法
-作用等同於以前的 classList，可以操作類樣式，注意操作類裏面的參數不要加點。

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

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

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

注意：

設置類樣式方法比較適合樣式多時操作，可以彌補css()的不足。

原生 JS 中 className 會覆蓋元素原先裏面的類名，jQuery 裏面類操作只是對指定類進行操作，不影響原先的類名。

案例：tab 欄切換

思路分析: 

1.點擊上部的li，當前li 添加current類，其餘兄弟移除類。

2.點擊的同時，得到當前li 的索引號

3.讓下部裏面相應索引號的item顯示，其餘的item隱藏
 $(function () {
            $(".tab_list li").click(function (param) {
                //排他思想
                $(this).addClass('current').siblings().removeClass('current');
                 //獲取當前的索引值eq($(this).index())
                $(".tab_con .item").eq($(this).index()).show().siblings().hide();

            })
        })

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() ;

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

自定義動畫

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

停止動畫排隊

	動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。

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

- stop() 方法用於停止動畫或效果。
- stop() 寫到動畫或者效果的前面， 相當於停止結束上一次的動畫。

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

事件切換

 hover()事件 ; 功能類似 css 中的僞類 :hover 。介紹如下

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

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

<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， 小圖片淡入， 大圖片淡出
  $(function () {
            $(".king li").mouseenter(function () {
                // 1.當前小li 寬度變爲 224px， 同時裏面的小圖片淡出，大圖片淡入
                $(this).stop().animate({
                    width:"224px"
                }).find('.small').stop().fadeOut().siblings(".big").stop().fadeIn();

                // 2.其餘兄弟小li寬度變爲69px， 小圖片淡入， 大圖片淡出
                $(this).siblings("li").stop().animate({
                    width:"69px"
                }).find('.small').stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        })

JQuery- jq概念、jq選擇器、jq樣式操作、jq動畫效果、

詐騙（殺豬盤）網站進行滲透測試

Python 潮流週刊#50：我最喜歡的 Python 3.13 新特性！

【Python】保存gym截圖

【譯】使用 GitHub Copilot 作爲你的編碼 GPS

Linux 服務器配置-安裝portainer-ce社區版

外行也能讀懂的網絡硬件設備功能原理速成

安裝Auto-GPT

Vue-基本使用、模板語法(插值表達式、指令、事件綁定、屬性綁定、樣式綁定、分支循環結構)

git與gitHub的使用

JS高級-類與對象

Javascript-API-DOM-操作元素對象的屬性、文本內容、子元素、樣式、事件

JS高級-函數定義與調用、函數內的this指向、改變this指向方法、閉包、遞歸、嚴格模式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結