jQuery下載

去jQuery網站下載文件包，點擊主頁的“Download”之后，進入下載頁面，可以選擇production版本的進行下載，但是點擊進去之后，瀏覽器并不會直接下載相關的文件，而是跳轉到一個“密密麻麻”都是jQuery代碼的頁面，仔細查看瀏覽器地址欄中的url便可知，該頁面其實就是jQuery的min版的文件，可以使用下面這種方法，下載jQuery文件：

右鍵點擊該頁面，在彈出的菜單中選擇另存為，在另存為的菜單中默認保存的后綴名為".js"，如果不是，可以在下拉菜單中選擇該類型的選項，然后保存即可下載jQuery文件了。鄙人下載的是最新版本的jquery-3.7.1.min.js

提示：jQuery的文件的擴展名是".js"，下載完之后，無需安裝，使用直接引入即可使用jQuery。

jQuery引入HTML的方法

jQuery是js文件，引入HTML的方法與引入JavaScript文件的方法一樣，在HTML的head標簽內使用script標簽引入，比如：

<script src="../../static/js/jquery-3.7.1.min.js"></script>

CDN引入jQuery的方法

如果不想下載jQuery，也可以通過CDN的方式，將jQuery引入HTML，比如：

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" rel="external nofollow" >
</script>

jQuery引入實例代碼，及在線編輯器

下面實例將通過一個點擊按鈕添加文本的實例來展示jQuery的用法，如下：

<script src="../../static/js/jquery-3.7.1.min.js"></script>
<p id="p1"></p>
<button id="btn" class="btn">jQuery</button>

<script>
  $('#btn').click(function(){
    $('#p1').text("jQuery添加段落文本");
  })
</script>

來源：笨鳥工具-璞玉天成，大器晚成

原文：jQuery下載及引入HTML | jQuery教程

免責聲明：內容僅供參考，不保證正確性！

.JQuery

JQuery 是將 JS 的一些代碼塊進行封裝，方便使用。

1.JQ的引入

（1）link 導入

先進入 https://www.bootcdn.cn/ 網站進行查找，找到后復制到一個 js 中，進行引用。

（2）直接復制標簽

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

二.JQ JS 相互轉換

1. JQ 獲取元素

$('.p1').eq(1).text('今天天氣真好')
    $('.p1').html('<h>天氣真熱</h>')

2.JS 轉 JQ

$(ap1).text('天好冷')

3. JQ 轉 JS

	var ap3 = $('.p1')
    ap3[0].innerText = '金地是'
    ap3.get(1).innerText = '多少金幣' //get() 傳下標

4. JQ JS 都可用

$('ul li').each(function (){
        console.log($(this).text());
        // console.log(this.innerText);
        console.log($(this).index()); //jq 獲取下標

    })

三.JQ 操作 HTML 屬性

<button>添加</button>
<button>刪除</button>

1. 添加 class

//添加class
    $("button").eq(0).click(function (){
        $("div").addClass("div1")
    })

2. 刪除 class

（1）removeClass

//刪除class
    $("button").eq(1).click(function (){
        $("div").removeClass("div1")
    })

（2）removeAttr

//刪除屬性和屬性值
    $("button").eq(1).click(function (){
$("div").removeAttr("class")

3. 修改 class

（1）toggleclass

//無則增 有則增
 $("button").eq(0).click(function (){
 	$("div").toggleClass("div1")

（2）attr

//無則增 有則改
$("button").eq(0).click(function (){
        $("div").attr("class","div1")
        $("div").attr("class","div2")
    })

4.獲取 value

$("input").eq(0).val('666');

四.JQ 操作 CSS 樣式

1. 獲取盒子寬高

（1）獲取寬

console.log($("div").width());

（2）獲取內邊框加寬

$("div").innerWidth()

（3）獲取內邊框，邊框外邊距和寬的寬度

$("div").outerWidth()

2. JQ 修改 CSS

// jq修改css
   $("div").css("background","blue")
   $("div").css({
       "background":"pink",
       "width":"150px"
   })

3.定位元素（父級元素一定要有定位）

$(".div2").position()

4.定位瀏覽器窗口

$(".div2").offset()

五. JQ 事件

1.單擊事件

$("div").click(function (){
        console.log(1);
    })

2.雙擊事件

$("div").dblclick(function (){
        console.log(2);
    })

3.劃入事件

$("div").mouseenter(function (){
        console.log(3);
    })

4.劃出事件

$("div").mouseout(function (){
        console.log(4);
    })

5.劃入劃出事件

$("div").hover(
        function (){
            console.log(3);
        },function (){
            console.log(5);
        }
    )

6.綁定事件

$("button").click(function (){
        $("p").on("click",function (){
            $("p").css('background','red')
        })
    })

7.綁定多個事件

$("p").on({
         "mouseenter":function (){
             $(this).css('background','yellow')
         },
         "mouseout":function (){
             $(this).css('background','blue')
         }
     })

8.清除事件

$("button").click(function (){
        $("p").off()
    })

六. JQ 動畫

1. 隱藏

$("button").eq(0).click(function (){
        // $("div").hide(1000)
        $("div").slideUp(1000)

    })

2.顯示

$("button").eq(1).click(function (){
        $("div").show(1000)
        // $("div").slideDown(1000)
    })

3.取反

$("button").eq(2).click(function (){
        $("div").slideToggle(1000)
        // $("div").slideDown(1000)
    })

4.淡出事件

$("button").eq(3).click(function (){
        $("div").fadeOut(1000)
    })

5.淡入事件

$("button").eq(4).click(function (){
        $("div").fadeIn(1000)
    })

6.淡入淡出取反事件

$("button").eq(5).click(function (){
        $("div").fadeToggle(1000)
    })

7.動畫效果

$("button").eq(6).click(function (){
        $("div").delay(100).animate({
            "width":"130px",
            "height":"130px",
            "top":"50px",
            "left":"20px",
        })
    })

8.停止

$("button").eq(7).click(function (){
        $("div").stop(1000)
    })

附（今日份學習）：