【JavaWeb jQuery 03】

阿新 • • 發佈：2021-06-10

一、何為jQuery？

就是JavaScript和查詢（Query）,是JavaScript開發的js類庫

二、案例演示：初步使用jQuery

需求：使用jQuery給一個按鈕繫結單擊事件？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title 
>Insert title here</title>
    <!--用jQuery方式繫結 引入jquery庫-->
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>

    <!--先用js原生的方式繫結-->
    <script type="text/javascript">
       /* window.onload=function () { //表示頁面載入完成
            var btnObj =document.getElementById("btnId"); //dom獲取id物件

            btnObj.onclick=function () { //繫結單擊事件
                alert("Js原生單擊事件！");
            }
        } 
*/

       $(function () { //同樣是表示頁面載入完成，相當於window.onload=function(){}
           var $btnObj =$("#btnId");//表示獲取id物件
           $btnObj.click(function () { //繫結單擊事件
               alert("jQuery單擊事件！！")
           });
       })
    </script>
</head>
<body>

    <button id="btnId">SayHello</ 
button>

</body>
</html>

常見問題？

1、使用jQuery一定要引入jQuery庫嗎？是，一定要引入

2、jQuery中的$到底是什麼？它是一個函式

3、怎麼為按鈕新增點選響應函式？

載入頁面-->$(function(){});
使用jQuery查詢到標籤物件 -->$("#id")
使用標籤物件.click(function(){})

三、jQuery核心函式

$是jQuery的核心函式，能完成jQuery的很多功能。$()就是呼叫這個$函式

-->$()函式能幹的事情（核心函式的4個作用）：

1、$()傳入引數為[函式]時：表示頁面載入完成之後。相當於window.onload=function(){}

2、傳入引數為[HTML字串]時：會建立這個html標籤物件　　

$(function () {
        $("<div>\n" +
            "        <span>dev_span1</span>\n" +
            "        <span>dev_span2</span>\n" +
            "        </div>").appendTo("body");
    })

//$()內放div這樣的標籤，直接可以給html頁面賦值

3、傳入引數為[選擇器字串]時：

$("#id屬性值"); id選擇器，根據id查詢標籤物件 -->相當於：var idObj =document.getElementById("id屬性名");
$("標籤名"); 標籤名選擇器，根據指定的標籤名查詢標籤物件
$(".class屬性名"); 型別選擇器，根據class屬性查詢標籤物件

4、傳入的引數為[DOM物件]時，會把dom物件轉換成jQuery物件

四、jQuery物件和dom物件區分

dom物件：

通過getElementById()，getElementByName()，getElementByTagName()查詢出來的物件就是dom物件，通過createElement()方法建立的物件就是dom物件

　　DOM物件Alert出來的效果是：[object HTMLButtonElement]

jQuery物件：

通過jQuery提供的API建立的物件，包裝的Dom物件，提供的API查詢到的物件，都是jQuery物件

　　jQuery物件Alert出來的效果是：[object Object]

五、jQuery物件的本質：dom物件的陣列+jQuery提供的一些列功能函式

六、jQuery物件和Dom物件使用區別

jQuery物件不能使用Dom物件的屬性和方法
Dom物件也不能使用jQuery物件的屬性和方法

七、Dom物件和jQuery物件互轉

   // dom物件轉換成jQuery物件 -->  直接把dom物件放到$()內
        var btnObj =document.getElementById("btnId");
        alert($(btnObj)); //[object Object]

        // jQuery物件轉換成dom物件 -->直接通過下標獲取
        var btn = $(btnObj)[0];
        alert(btn);