目錄
Hello！你好呀，我是灰小猿，一個超會寫bug的程序猿！
在瞭解jQuery對象和JS對象之間的區別和轉換前，我們先對jQuery框架進行一個簡單的入門。
jQuery的概念
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨 是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。其使用的目的是爲了簡化JS開發
而對於JavaScript框架，其本質上就是一些js文件，封裝了js的原生代碼而已。
jQuery快速入門
1、下載jQuery
目前jQuery有三個大版本：
1.x版本：兼容ie678,使用最爲廣泛的，目前官方只做BUG維護，功能不再新增。因此一般項目來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
2.x版本：不兼容ie678，很少有人使用，目前官方只做BUG維護，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
3.x版本：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。關於最新版本可以到官方網站查看，直達官網。
我們在下載使用jQuery時會發現，一般會有兩個js文件，一個是帶.min的，另一個是不帶.min的。
jquery-xxx.js 與 jquery-xxx.min.js區別：
1. jquery-xxx.js：開發版本。給程序員看的，有良好的縮進和註釋。體積大一些
2. jquery-xxx.min.js：生產版本。程序中使用，沒有縮進。體積小一些。程序加載更快
所以我們一般在使用時導入的是第二個jquery-xxx.min.js的生產版本
2、導入JQuery的js文件
即導入min.js文件
之後在html文件的頭部導入對該js文件的鏈接，如下所示：
<head>
<meta charset="UTF-8">
<title>jquery快速入門</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>3、jQuery的使用
我們使用jQuery獲取元素對象時，可以使用“$()”來作爲一個選擇器，對標籤體中的內容進行獲取。下面分別使用jQuery和不使用jQuery獲取標籤內容，作一個實際的對比。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery快速入門</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
//通過jQuery對象獲取指定ID對象
var div1 = $("#div1");
var div2 = $("#div2");
//通過alert將結果輸出（以jQuery形式獲取值）
alert(div1.html());
alert(div2.html());
/**
* 以下是不使用jQuery的方法
* */
//不使用jQuery獲取指定ID對象
var div3 = document.getElementById("div1");
var div4 = document.getElementById("div2");
//不使用jQuery獲取元素內容
alert(div3.innerHTML);
alert(div4.innerHTML);
</script>
</body>
</html>
jQuery對象和JS對象區別與轉換
相比於JS對象，jQuery對象在操作時更加方便，代碼更加簡潔
但是需要注意的是：jQuery對象和JS對象的方法是不通用的，那麼我們如果想在jQuery中使用js方法，或在js中使用jQuery方法該怎麼辦呢？
因此，在這裏和大家分享一下jQuery對象和JS對象之間的相互轉換
jQuery轉爲js
使用jQuery對象[索引] 或者 jQuery對象.get(索引)將jQuery對象轉化爲js對象，即可使用js的方法。
詳細使用如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery和js對象的相互轉換</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
/**
* jQuery 轉爲 js
* */
//1、通過js方式獲取名叫div的所有html元素對象
var divs = document.getElementsByTagName("div");
alert(divs.length); //可以將其當成數組來使用
//對divs中所有div讓其標籤體內容變爲“aaa”
for (var i = 0;i<divs.length;i++){
// divs[i].innerHTML = "aaa"
$(divs[i]).html("ccc") //將js對象divs[i]轉化爲jQuery對象
}
</script>
</body>
</html>js轉爲jQuery
使用“$”符的括號中包含js對象，如：$(js對象)
之後就可以使用jQuery的方法了，
詳細使用如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery和js對象的相互轉換</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
/**
* js 轉化爲 jQuery
* */
//2、通過jQuery方式獲取所有名叫div的所有html對象
var $divs2 = $("div");
alert($divs2);
//對divs中所有div讓其標籤體內容變爲“aaa”
// $divs2.html("bbb");
$divs2[0].innerHTML = "ddd"; //將jQuery對象對象轉化爲js
$divs2.get(1).innerHTML = "eee" //將jQuery對象對象轉化爲js
</script>
</body>
</html>好了，關於jQuery對象和JS對象區別與轉換的相關內容就先和小夥伴們分享到這裏，之後還會繼續和小夥伴們分享jQuery的選擇器、DOM操作以及jQuery的高級進階內容。
覺得有用記得點贊關注喲！
灰小猿陪你一起進步！
