目錄
jQuery的概念
jQuery快速入門
1、下載jQuery
2、匯入JQuery的js檔案
3、jQuery的使用
jQuery物件和JS物件區別與轉換
jQuery轉為js
js轉為jQuery
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的高級進階內容，
覺得有用記得點贊關注喲！
灰小猿陪你一起進步！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/253500.html
標籤：其他