jQuery(一)——認識
技術標籤：JavaWebjavascriptjsjquery
jQuery(一)——認識
1. 認識jQuery
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src 對比之前學過的Document物件，第9至第14行：
window.onload = function () {
var btnObj = document.getElementById("btnId" 注意事項：
-
使用 jQuery 一定要引入 jQuery 庫：第7行處，需要有js檔案。
-
jQuery 中的 $ 它是一個函式，根據傳入引數的不同執行不同的函式。
$(function(){ … }); 等價於
$(document).ready(function(){ … });
一般jQuery物件的變數名都加一個$便於區分。
-
怎麼為按鈕新增點選響應函式的？
1、使用 jQuery 查詢到標籤物件 2、使用標籤物件.click( function(){ … } );
在jQuery中，通過id方式：$(“# ”).click( function(){ … } );
在Dom中，通過id方式：document.getElementById(" ").onclick =function () { … }
2. jQuery核心函式
$是 jQuery 的核心函式，能完成 jQuery 的很多功能。
“ $() ”就是呼叫這個函式的操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-01-28</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
······裡面填充內容
</script>
</head>
<body>
</body>
</html>
1、傳入引數為 [ 函式 ] 時： 表示頁面載入完成之後。相當於 window.onload = function(){}
<script type="text/javascript">
$(function () {
alert("頁面載入完成之後，自動呼叫");
});
</script>
2、傳入引數為 [ HTML 字串 ] 時： 會對我們建立這個 html 標籤物件
<script type="text/javascript">
$(function () {
$("<div> <span> div-span-1</span></div>" +
"<div> <span> div-span-2</span></div>").appendTo("body");
});
</script>
$(“……”)裡面寫上標籤，通過appendTo加入body語句，相當於直接在body標籤中寫入：
<div> <span> div-span-1</span></div>
<div> <span> div-span-2</span></div>
3、傳入引數為 [ 選擇器字串 ] 時：
$(“# id 屬性值”); id 選擇器，根據 id 查詢標籤物件
$(“標籤名”); 標籤名選擇器，根據指定的標籤名查詢標籤物件
$(“**.**class 屬性值”); 型別選擇器，可以根據 class 屬性查詢標籤物件
$("button").length //查詢button標籤的個數
4、傳入引數為 [ DOM 物件 ] 時： 會把這個 Dom 物件轉換為 jQuery 物件
(後面介紹jQuery物件和Dom物件的轉換具體看)
3. jQuery 物件和dom 物件區分
Dom 物件
DOM 物件 Alert 出來的效果是：[object HTML 標籤名 Element]
1.通過 getElementById()查詢出來的標籤物件是 Dom 物件
2.通過 getElementsByName()查詢出來的標籤物件是 Dom 物件
3.通過 getElementsByTagName()查詢出來的標籤物件是 Dom 物件
4.通過 createElement() 方法建立的物件，是 Dom 物件
jQuery 物件
jQuery 物件 Alert 出來的效果是：[object Object]
5.通過 JQuery 提供的 API 建立的物件，是 JQuery 物件
即，傳入 HTML字串
alert($("<h1> </h1>"))
6.通過 JQuery 包裝的 Dom 物件，也是 JQuery 物件
var btn=document.getElementById("btn01"); //Dom物件
var $btn=$(btn); //jQuery物件
alert($btn);
7.通過 JQuery 提供的 API查詢到的物件，是 JQuery 物件
即，通過選擇器字串：#id 、 .class 、標籤名
4. jQuery物件和Dom物件轉化
-
dom 物件轉化為 jQuery物件
1、先有 DOM 物件 2、$( DOM 物件 ) 就可以轉換成為 jQuery 物件
如上面3.6所示！ 傳入**$函式**即可轉換
-
jQuery 物件轉化為dom物件
1、先有 jQuery 物件 2、==jQuery 物件[下標]==取出相應的 DOM 物件
var $btns = $("button");
for (var i = 0; i < $btns.length; i++){
alert($btns[i]);
}
//$btns是個jQuery物件，但裡面每個元素$btns[i]是個dom物件
當jQuery物件$btns只有一個元素時，
只需 $btns[0]即可轉換。
dom物件：document.getElementById(“btn01”)
jQuery物件：$( document.getElementById(“testDiv”) )
dom物件：$(document.getElementById(“testDiv”))[0]
5. jQuery物件的本質
jQuery 物件是 dom 物件的陣列 + jQuery 提供的一系列功能函式。
如果只有一個dom物件，也可以封裝入jQuery物件中
jQuery 物件不能使用 DOM 物件的屬性和方法
DOM 物件也不能使用 jQuery 物件的屬性和方法