標籤:簽名 round 個數 htm 關係 rip spl pre char
1.為什麼要使用jQuery
在用js寫代碼時,會遇到一些問題:
jQuery的出現,可以解決以上問題。
什麼是 jQuery
jQuery 是 js 的一個庫,封裝了我們開發過程中常用的一些功能,方便我們調用,提高開發效率。
js庫是把我們常用的功能放到一個單獨的檔案中,我們用的時候,直接引用到頁面裡即可。
關於jQuery的相關資料:
學習jQuery,主要是學什麼
初期,主要學習如何使用jQuery操作DOM,其實就是學習jQuery封裝好的那些功API。
這些API的共同特點是:幾乎全都是方法。所以,在使用jQuery的API時,都是方法調用,也就是說要加小括弧(),小括弧裡面是相應的參數,參數不同,功能不同。
jQuery的第一個代碼
用原生js來實現下面代碼效果:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: green; margin-top: 20px; display: none; } </style> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementsByTagName(‘button‘)[0]; var divArr = document.getElementsByTagName(‘div‘); oBtn.onclick = function () { for (var i = 0; i < divArr.length; i++) { divArr[i].style.display = "block"; divArr[i].innerHTML = "趙雲"; } } } </script> </head><body> <button>操作</button> <div></div> <div></div> <div></div> </body></html>
如果用 jQuery 來寫,保持其他的代碼不變,<script>
部分的代碼修改為:(需要提前引入 )
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: green; margin-top: 20px; display: none; } </style></head><body> <button>操作</button> <div></div> <div></div> <div></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ // 擷取dom元素 var oBtn = $(‘button‘); //根據標籤名擷取元素 var oDiv = $(‘div‘); //根據標籤名擷取元素 oBtn.click(function(){ oDiv.show(1000);//顯示盒子 oDiv.html(‘趙雲‘); // 設定內容 });//事件是通過方法綁定的 }) </script> </body></html>
jQuery 的兩大特點
jQuery 的使用使用 jQuery 的基本步驟
(1)引包
(2)入口函數
(3)功能實現代碼(事件處理)
主要:入口函數(重要)
原生 js 的入口函數指的是:window.onload = function() {};
如下:
//原生 js 的入口函數。頁面上所有內容載入完畢,才執行。 //不僅要等文本載入完畢,而且要等圖片也要載入完畢,才執行函數。 window.onload = function () { alert(1); }
而 jQuery的入口函數,有以下幾種寫法:
寫法一:
//1.文檔載入完畢,圖片不載入的時候,就可以執行這個函數。 $(document).ready(function () { alert(1); })
寫法二:(寫法一的簡潔版)
//2.文檔載入完畢,圖片不載入的時候,就可以執行這個函數。 $(function () { alert(1); });
寫法三:
//3.文檔載入完畢,圖片也載入完畢的時候,在執行這個函數。 $(window).ready(function () { alert(1); })
jQuery入口函數與js入口函數的區別:
區別一:書寫個數不同:
區別二:執行時機不同:
文檔載入的順序:從上往下,邊解析邊執行。
jQuery的
$
符號
jQuery 使用 $
符號原因:書寫簡潔、相對於其他字元與眾不同、容易被記住。
jQuery佔用了我們兩個變數:$
和 jQuery。當我們在代碼中列印它們倆的時候:
<script src="jquery-3.3.1.js"></script> <script> console.log($); console.log(jQuery); console.log($===jQuery); </script>
列印結果:
從列印結果可以看出,$ 代表的就是 jQuery。
那怎麼理解jQuery裡面的 $
符號呢?
$
實際上表示的是一個函數名 如下:
$(); // 調用上面我們自訂的函數$ $(document).ready(function(){}); // 調用入口函數 $(function(){}); // 調用入口函數 $(“#btnShow”) // 擷取id屬性為btnShow的元素 $(“div”) // 擷取所有的div標籤元素
如上方所示,jQuery 裡面的 $
函數,根據傳入參數的不同,進行不同的調用,實現不同的功能。返回的是jQuery對象。
jQuery這個js庫,除了$
之外,還提供了另外一個函數:jQuery。jQuery函數跟 $
函數的關係:jQuery === $
。
js中的DOM對象 和 jQuery對象 比較(重點,痛點)二者的區別
通過 jQuery 擷取的元素是一個數組,數組中包含著原生JS中的DOM對象。舉例:
針對下面這樣一個div結構:
<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div
通過原生 js 擷取這些元素節點的方式是:
var myBox = document.getElementById("app"); //通過 id 擷取單個元素 var boxArr = document.getElementsByClassName("box"); //通過 class 擷取的是偽數組 var divArr = document.getElementsByTagName("div"); //通過標籤擷取的是偽數組
通過 jQuery 擷取這些元素節點的方式是:(擷取的都是數組)
//擷取的是數組,裡麵包含著原生 JS 中的DOM對象。
console.log($(‘#app‘));
console.log($(‘.box‘));
console.log($(‘div‘));
設定當前4個div的樣式:
$(‘div‘).css({ ‘width‘: ‘200px‘, ‘height‘: ‘200px‘, "background-color":‘red‘, ‘margin-top‘:‘20px‘ })
由於JQuery 內建了 css()方法,我們還可以直接在代碼中給 div 設定 css 屬性。
總結:jQuery 就是把 DOM 對象重新封裝了一下,讓其具有了 jQuery 方法。
二者的相互轉換
1、 DOM 對象 轉為 jQuery對象:
$(js對象);
2、jQuery對象 轉為 DOM 對象:
jquery對象[index]; //方式1(推薦) jquery對象.get(index); //方式2
jQuery對象轉換成了 DOM 對象之後,可以直接調用 DOM 提供的一些功能。如:
$(‘div‘)[1].style.backgroundColor = ‘yellow‘;$(‘div‘)[3].style.backgroundColor = ‘green‘;
總結:如果想要用哪種方式設定屬性或方法,必須轉換成該類型。
舉例:
隔行換色
代碼如下:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.3.1.js"></script> <script> //入口函數 jQuery(function () { var jqLi = $("li"); for (var i = 0; i < jqLi.length; i++) { if (i % 2 === 0) { //jquery對象,轉換成了js對象 jqLi[i].style.backgroundColor = "pink"; } else { jqLi[i].style.backgroundColor = "yellow"; } } }); </script></head><body><ul> <li>小馬哥</li> <li>小馬哥</li> <li>小馬哥</li> <li>小馬哥</li> <li>小馬哥</li> <li>小馬哥</li></ul></body></html>
效果如下:
01-jQuery的介紹