關(guān)于JQuery引用及基本用法

在JQuery文件中下載，并將其引入html文件。在使用jQuery之前，我們需要到j(luò)Query的官方網(wǎng)站：“https://jquery.com/download/”

把下載好的文件放到工程根目錄下，然后在這個根目錄下創(chuàng)建index.html文件。最后，將下載的JQuery文件引入index.html文件，其代碼如下：

<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

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

</head>



<body>

</body>



</html>

1234567891011121314151617181920212223242526272829復(fù)制代碼類型：[html]

通過引入script標簽，JQuery被引入到subject的subject中，subject是：

接下來，我們將研究JQuery的基本語法，并對其進行一些介紹。

示例1:$("div").hide()；此行表示隱藏div元素；

例子2:$(".box1").hide()；這行代碼意味著class屬性隱藏在box1的元素中；

示例3:$("#wrap").hide()；這行代碼表示隱藏元素id的值為wrap；

示例4:$("hide.box1").hide()；這一行代碼意味著，隱藏帶有box1的cycle屬性的hv元素；

從上面的例子中可以看出，JQuery語法非常簡單，只需要一個美元符號$，后面跟著一個html的元素選擇符(與我們之前學(xué)到的css選擇符高度一致)，然后在后面加上JQuery的方法，例如hide(show等等)。

無論顯示或隱藏元素時，都需要一個事件來觸發(fā)該動作，我們常用的觸發(fā)方式是鼠標點擊，比如你用鼠標點擊一個按鈕，然后頁面上就會彈出一個提示框，通過點擊來觸發(fā)效果，我們稱之為“事件”。點擊JQuery中事件的書寫方式為：$("div").click(function(){...})，此代碼意味著在div標簽被點擊之后觸發(fā)事件，具體事件內(nèi)容以函數(shù)形式寫入。除單擊事件外，JQuery還可以通過鼠標移動事件、雙擊事件、元素獲取焦點事件等方式進行學(xué)習(xí)，后面我們將一一介紹，并查看JQuery如何使用。

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

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

</head>

<style>

.box1 {

width: 100px;

height: 100px;

background-color: red;

}

</style>



<body>

<button id="btn1">點我隱藏元素</button>

<div class="box1"></div>

</body>

<script>

$(document).ready(function(){

$("#btn1").click(function(){

$(".box1").hide();

})

})

</script>

</html>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253復(fù)制代碼類型：[html]

在以上代碼中，我們定義了一個button元素，一個div元素，然后點擊按鈕button，這個div元素就會被隱藏起來，各位同學(xué)可以嘗試一下。在代碼的最后一部分，包含了一段script標簽，這段是JavaScript代碼，所有的JavaScript代碼都將被放置在script標簽中以執(zhí)行。

接下來是代碼的第一句話：$(document).ready(function){...}，這是JQuery的固定寫法，意思是頁面加載后立即執(zhí)行，執(zhí)行代碼被寫入function函數(shù)的方法中(即{}內(nèi))。我們已經(jīng)看到了這一方法。

$("#btn1").click(函數(shù)){

$(".box1").hide()；

})

這個代碼就是我們前面提到的click事件，當單擊id值為btn1的按鈕時，會引發(fā)一個click元素的隱藏事件，click元素的名字叫做box1。

.JQuery

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

1.JQ的引入

（1）link 導(dǎo)入

先進入 https://www.bootcdn.cn/ 網(wǎng)站進行查找，找到后復(fù)制到一個 js 中，進行引用。

（2）直接復(fù)制標簽

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

二.JQ JS 相互轉(zhuǎn)換

1. JQ 獲取元素

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

2.JS 轉(zhuǎn) JQ

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

3. JQ 轉(zhuǎn) 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）獲取內(nèi)邊框加寬

$("div").innerWidth()

（3）獲取內(nèi)邊框，邊框外邊距和寬的寬度

$("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)
    })

附（今日份學(xué)習(xí)）：

了執(zhí)行Javascript，需要在HTML文件內(nèi)以特定的方式書寫JavaScript的代碼，JavaScript的書寫方法有多種，其執(zhí)行的流程也各不相同：

1 <script>標簽嵌入

此種嵌入方法無法操作<script>之后的DOM元素。因為<script>之后的DOM元素還未構(gòu)造，因此在<script>標簽內(nèi)就無法取得位于其后的DOM元素。

2 讀取外部JavaScript文件

此種嵌入方法可以指定defer、async屬性。defer可以推遲執(zhí)行，async可以異步執(zhí)行。

3 onload嵌入

此種嵌入方法在頁面讀取完后再對其執(zhí)行，所以可以對所有的DOM元素操作。

<body onload="alert('hello')">
window.onload=function(){alert('hello');};

當window.onload事件觸發(fā)時，頁面上所有的DOM、樣式表、腳本、圖片、flash都已經(jīng)加載完成了。

//window.onload不能同時編寫多個。
//以下代碼無法正確執(zhí)行，結(jié)果只輸出第二個。
window.onload=function(){
  alert("test1");
};

window.onload=function(){
  alert("test2");
};

//$(document).ready()能同時編寫多個
//結(jié)果兩次都輸出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
});

window.onload和body中onload也有些許區(qū)別：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload=haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，結(jié)果為：

"DOMContentLoaded"
"bodyonload"

說明body中的onload會覆蓋window.onload

在chrome下，結(jié)果為：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代碼移到最下面，結(jié)果又會是什么樣呢？

chrome和IE10、FireFox的結(jié)果竟然是一樣的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 誰在下面就是誰覆蓋誰，只會執(zhí)行后面的那個。

4 DOM ContentLoaded嵌入

onload方法可能需要等待時間，而本方法可以在完成HTML解析后發(fā)生的事件，減少等待時間。

在chrome、IE10和FireFox中，執(zhí)行結(jié)果是：DOMContentLoaded然后才是onload的輸出。所以說一般情況下，DOMContentLoaded事件要在window.onload之前執(zhí)行，當DOM樹構(gòu)建完成的時候就會執(zhí)行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload=haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是個jQuery使用者，你可能會經(jīng)常使用$(document).ready();或者$(function(){})，這都是使用了DOMContentLoaded事件

5 動態(tài)載入JavaScript文件

5.1 使用原生js方法

動態(tài)創(chuàng)建script標簽，并指定script的src屬性

function loadJs(url, callback) {
    var script=document.createElement('script');
    script.type="text/javascript";
    if (typeof(callback) !="undefined") {
        if (script.readyState) {
            script.onreadystatechange=function() {
                if (script.readyState=="loaded" || script.readyState=="complete") {
                    script.onreadystatechange=null;
                    callback();
                }
            }
        } else {
            script.onload=function() {
                callback();
            }
        }
    }
    script.src=url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

還可以使用同樣的原理動態(tài)加載css文件，只不過插入的的父節(jié)點是head標簽。

5.2 使用document.write/writeln(）方式

該種方式可以實現(xiàn)js文件的動態(tài)加載，原理就是在重寫文檔流，這種方式會導(dǎo)致整個頁面重繪。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的轉(zhuǎn)義。

5.3 使用jQuery

使用getScript(url,callback)方法實現(xiàn)動態(tài)加載js文件

$.getScript('test.js',function(){
    alert('done');
});

－End－

在線咨詢

上一篇：自己動手，豐衣足食：從零開始寫個 IDEA 插件，要
下一篇：HTML 面試題：說一說 title 與 alt 屬

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商