1. jQuery概述
1.1 為什么要使用jQuery
在用js寫代碼時，會遇到一些問題：
window.onload 事件有事件覆寫的問題，因此只能寫一個事件，
代碼容錯性差，
瀏覽器兼容性問題，
書寫很繁瑣，代碼量多，
代碼很亂，各個頁面到處都是，
影片效果很難實作，
jQuery的出現，可以解決以上問題，
1.2 什么是jQuery
jQuery是一個JavaScript框架，它兼容CSS3，還兼容各種瀏覽器，檔案說明很全，應用詳細，成熟插件多，
jQuery2.0及后續版本不再支持IE6/7/8瀏覽器
核心概念是write less，do more(寫的更少，做的更多)，
1.3 jQuery相關資料
關于jQuery的相關資料：
官網：http://jquery.com/
官網API檔案：http://api.jquery.com/
漢化API檔案：http://www.css88.com/jqapi-1.9/
1.4 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="https://www.cnblogs.com/liuhui0308/p/jquery-3.3.1.js"></script> //引入jQuery
<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>
1.5 jQuery的兩大特點
鏈式編程：比如.show()和.html()可以連寫成.show().html()，
隱式迭代：隱式 對應的是 顯式，隱式迭代的意思是：在方法的內部進行回圈遍歷，而不用我們自己再進行回圈，簡化我們的操作，方便我們呼叫，
2. jQuery的使用
2.1 使用jQuery的基本步驟
（1）引包
（2）入口函式
（3）功能實作代碼（事件處理）
如圖：
主要：導包的代碼一定要放在js代碼的最上面，
2.2 jQuery的版本
jQuery 有兩個大版本：
1.x版本：最新版為 v1.11.3，
2.x版本：最新版為 v2.1.4（不再支持IE6、7、8），
3.x版本，最新版為 v3.4.1
我使用的是老版本 v2.1.0，你們下載的是最新版本，下載jQuery包之后里面會有兩個檔案，一個是jquery-3.4.1.js，一個是jquery-3.4.1.min.js
它們的區別是：
第一個是未壓縮版，第二個是壓縮版，
平時開發程序中，可以使用任意一個版本；但是，專案上線的時候，推薦使用壓縮版，
3. jQuery的入口函式和$符號
3.1 入口函式
原生 js 的入口函式指的是：window.onload = function() {}; 如下：
//原生 js 的入口函式，頁面上所有內容加載完畢，才執行， //不僅要等文本加載完畢，而且要等圖片也要加載完畢，才執行函式， window.onload = function () { alert(1); }
而 jQuery的入口函式，有以下幾種寫法：
寫法1：
//1.檔案加載完畢，圖片不加載的時候，就可以執行這個函式， $(document).ready(function () { alert(1); })
寫法2：
//2.檔案加載完畢，圖片不加載的時候，就可以執行這個函式， $(function () { alert(1); });
寫法3：
//3.檔案加載完畢，圖片也加載完畢的時候，在執行這個函式， $(window).ready(function () { alert(1); })
jQuery入口函式與js入口函式的區別：
區別一：書寫個數不同：
Js 的入口函式只能出現一次，出現多次會存在事件覆寫的問題，
jQuery 的入口函式，可以出現任意多次，并不存在事件覆寫問題，
區別二：執行時機不同：
Js的入口函式是在所有的檔案資源加載完成后，才執行，這些檔案資源包括：頁面檔案、外部的js檔案、外部的css檔案、圖片等，
jQuery的入口函式，是在檔案加載完成后，就執行，檔案加載完成指的是：DOM樹加載完成后，就可以操作DOM了，不用等到所有的外部資源都加載完成，
檔案加載的順序：從上往下，邊決議邊執行，
3.2 jQuery的$符號
jQuery 使用 $ 符號原因：書寫簡潔、相對于其他字符與眾不同、容易被記住，
jQuery占用了我們兩個變數：$ 和 jQuery，當我們在代碼中列印它們倆的時候：
<script src="https://www.cnblogs.com/liuhui0308/p/jquery-2.1.0.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 === $，
4. js的DOM物件和jQuery物件比較
4.1 二者的區別
通過 jQuery 獲取的元素是一個陣列，陣列中包含著原生JS中的DOM物件，舉例：
針對下面這樣一個div結構：
<div></div> <div id="app"></div> <div ></div> <div ></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 方法，
4.2 二者的相互轉換
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';
總結：如果想要用哪種方式設定屬性或方法，必須轉換成該型別，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31441.html
標籤：jQuery