1.jQuery概述
1.1JavaScript庫
JavaScript庫：即library，是一個封裝好的特定的的集合（方法和函數）。從封裝一大堆函數的角度理解庫，就是在這個庫中，封裝了很多預先定義好的函數在裏面，比如動畫animate、hide、show、，比如獲取元素等。
常見的JavaScript庫
- jQuery
- Prototype
- YUI
- Dojo
- Ext JS
- 移動端的zepto
1.2jQuery的概念
jQuery是一個快速、簡潔的JavaScript庫，其設計宗旨是“write Less , Do More”,即倡導寫更少的代碼，做更多的事情。
j就是JavaScript；Query意思就是查詢，把js中的DOM操作做了封裝，我們可以快速查詢使用裏面的功能。
jQuery封裝了JavaScript常用的功能代碼，優化了DOM操作、事件處理、動畫設計和Ajax交互。
1.2.jQuery的優點
- 輕量級。 核心文件才幾+kb ,不會影響頁面加載速度
- 跨瀏覽器兼容。基本兼容了現在主流的瀏覽器
- 鏈式編程、隱式迭代
- 對事件、樣式、動畫支持,大大簡化了DOM操作
- 支持插件擴展開發。有着豐富的第三方的插件,例如:
樹形榮單、日期控件、輪播圖等 - 免費、開源
2.jQuery的基本使用
2.1jQuery的入口函數
1.等看DOM結構渲染完畢即可執行內部代碼,不必等到所有外部資源加載完成,
2.相當於原生js中的DOMContentLoaded.
3.不同於原生is中的load事件是等頁面文檔、外部的js文件. css文件、圖片加載完畢才執行內部代碼。
4.更推薦第一種方式
2.2jQuery的頂級對象$
1.$是jQuery的別稱，在代碼中可以使用jQuery代替,一般爲了方便，通常直接使用。
2.$ 是jQuery的頂級對象，相當於原生JavaScript中的window,把元索利用$包裝成Query對象，就可以調用jQuery的方法。
2.3jQuery對象和DOM對象
1.用原生js獲取來的對象就是DOM對象
2.用jQuery方式獲取過來的對象是jQuery對象 本質：通過$把DOM元素進行了包裝
3.jQuery對象本質是：利用$對DOM對象包裝後產生的對象（僞數組形式存儲）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.mini.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<span></span>
<script>
//1.DOM對象：用原生js獲取過來的對象就是DOM對象
var myDiv = document.querySelector('div');
var mySpan = document.querySelector('span');
console.dir(myDiv);
//2.jQuery對象：用jQuery方式獲取過來的對象是jQuery對象 本質：通過$把DOM元素進行了包裝
$('div'); // $('div')是一個jQuery對象
$('span');
console.dir($('div'));
//3.jQuery對象只能使用jQuery方法 DOM對象則使用原生的JavaScript屬性和方法
// myDiv.style.display = 'none';
$('div').hide();
</script>
</body>
</html>
DOM對象與jQuery對象之間可以相互轉換的，因爲原生js比jQuery更大，原生的一些屬性和方法jQuery沒有給我們封裝，想要使用這些屬性和方法需要把jQuery對象轉換爲DOM對象才能使用
1.DOM對象轉換爲jQuery對象：$(DOM對象)
2.jQuery對象轉換爲DOM對象（兩種方式）
$(‘div’)[index] index是索引
$(‘div’).get(index) index是索引