倉庫 : 可以把很多東西放到這個倉庫裡面 , 找東西隻需要到倉庫裡面查找到就可以了
JavaScript庫: 即 library , 是一個封裝好的特定的集合 ( 方法 和函數).
簡單了解 : 就是一個JS檔案 , 裡面對我們原生js代碼進行了封裝 , 存放到裡面 , 這樣我們就可以快速高效的使用這些封裝好的功能了
比如 : jQuery , 就是為了快速友善的操作DOM, 裡面基本都是函數 ( 方法 )
從封裝一大堆函數的角度了解庫，就是在這個庫中，封裝了很多預先定義好的函數在裡面，比如動畫animate、 hide、show，比如擷取元素等。
jQuery 的概念jquery 是一個快速 , 簡介的JavaScript庫 , 其設計的宗旨是 " write Less , Do More" , 即倡導寫更少的代碼 , 做更多的事情
jQuery 的優點
優點 :
1, 輕量級 . 核心檔案才十幾kb, 不會影響頁面加載速度
2, 跨浏覽器相容 , 基本相容了現在主流的浏覽器
3, 鍊式程式設計 , 隐式疊代
4, 對事件 , 樣式 , 動畫支援 , 大大簡化了DOM操作
5, 支援插件擴充開發 , 有着豐富的第三方的插件 , 列 :
樹形菜單 . 日期控件 , 輪播圖等
6, 免費 , 開源
jQuery 的下載下傳
官網位址： jQuery
版本 :
1x ：相容 IE 678 等低版本浏覽器，官網不再更新
2x ：不相容 IE 678 等低版本浏覽器，官網不再更新
3x ：不相容 IE 678 等低版本浏覽器，是官方主要更新維護的版本
各個版本的下載下傳：jQuery CDN
jQuery的使用步驟
1, 引入jQuery檔案
2 , 使用jQuery文法即可
jQuery的入口函數
- $( function ( ) {
-------此處是頁面DOM加載完成的入口
} );
- $ ( document ) . ready ( function ( ) {
------- 此處是頁面DOM加載完成的入口
} );
1. 等着 DOM 結構渲染完畢即可執行内部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。
2. 相當于原生 js 中的 DOMContentLoaded。
3. 不同于原生 js 中的 load 事件是等頁面文檔、外部的js 檔案、css檔案、圖檔加載完畢才執行内部代碼。
4. 更推薦使用第一種方式。
jQuery 的頂級對象$
1, $ 是jQuery的别稱 , 在代碼中可以使用jQuery代替$ , 但一般為了友善 , 通常都直接使用$
2, $ 是jQuery的頂級對象 , 相當于原生JavaScript中的window . 把元素利用$包裝成jQuery對象 , 就可以調用jQuery的方法
jQuery對象和DOM對象轉換
1, 用原生JS擷取來的對象就是DOM對象
2 , jQuery方法擷取來的元素就是jQuery對象
3 , jQuery對象本質是 : 利用$ 對 DOM 對象包裝後産生的對象 ( 僞數組形式存儲)
注意 :
隻有jQuery對象才能使用jQuery方法 , DOM對象則使用原生的JavaScript方法
DOM對象與jQuery對象之間是可以互相轉換的
因為原生js比jQuery更大
jQuery選擇器
基礎選擇器$ ( "選擇器" ) ---裡面選擇器直接寫 css 選擇器即可, 但是要加引号
- 名稱 -------------------用法---------------描述
- ID選擇器-------------$ ( " #id" )---------擷取指定id元素
- 全選選擇器---------$ ( " * " )------------比對所有的元素
- 類選擇器 ------------$( " . class " )------擷取同一類class的元素
- 标簽選擇器----------$ ( " div " )---------擷取同一類的标簽的所有元素
- 并集選擇器 --------$ ( "div , p , li " )-----擷取多個元素
- 交集選擇器 ---------$ ( " li . current " )-----交集元素
層級選擇器最常用的兩個分别為 , 後代選擇器 和 子代選擇器
--名稱 -------------用法---------描述
- 自帶選擇器-----$ ( " ul > li " ); ----使用>号, 擷取親兒子層級的元素 , 注意, 并不會擷取孫子層級的元素
- 後代選擇器器------$ ( "ul li " );---使用空格 , 代表後代選擇器 , 擷取ul下的所有li元素, 包括孫子等
文法------用法-------------描述
- :first-----$( ' li : first ' )---擷取第一個li元素
- :last ----$ ( ' li : last ' )---擷取最後一個li元素
- :eq ( index ) --$ ( ' li : eq ( 2 ) ' ) --擷取到的li元素中, 選擇索引号為2的元素, ----------------------------------索引号index從0開始
- :odd------$ ( ' li : odd ' ) ------擷取到的li元素中, 選擇索引号為奇數的元素
- :even-----$ ( ' li : even ' )-----擷取到的li元素中, 選擇索引号為偶數的元素
隐式疊代（重要）
周遊内部 DOM 元素（僞數組形式存儲）的過程就叫做隐式疊代。
1.3 隐式疊代（重要）
簡單了解：給比對到的所有元素進行循環周遊，執行相應的方法，
而不用我們再進行循環，簡化我們的操作， 友善我們調用。
$
通過一個節點找另外一個節點
文法------------------用法--------------------------------------說明----
- parent ( )--$ ( " li " ) . parent ( ); ---------查找父級
- children ( selector ) ----$ ( " ul " ) . children ( li );----查找兒子, 最親的兒子
- siblings ( selector )-----$ ( ".first" ) . siblings ('' li '' );-----除了自己本身以外的所有親兄弟
- nextAll ( [ expr ] )---$ ( " .first " ) . nextAll ( );----查找目前元素之後的所有的同輩元素
- prevtAll ( [ expr ] )---$ ( " .first " ) . prevtAll ( );-----查找目前元素之前的所有的同輩元素
- hasClass ( class )-----$ ( " div" ) . hasClass ("protected" );---檢查目前的元素是否含有某個特定的類, 如果有, 則傳回true
- eq ( index )---- $ ( " li " ) . eq ( 2 );----相當于 $ ( " li : eq ( 2 )" ) , index從0 開始
jQuery設定樣式
$
jQuery 裡面的排他思想
// 想要多選一的效果，排他思想：目前元素設定樣式，其餘的兄弟元素清除樣式
$
鍊式程式設計是為了節省代碼量，看起來更優雅
$
jQuery中常用的樣式操作有兩種：css() 和 設定類樣式方法
方法1: 操作 css 方法 jQuery 可以使用 css 方法來修改簡單元素樣式； 也可以操作類，修改多個樣式。
常用以下三種形式 :
// 1.參數隻寫屬性名，則是傳回屬性值
var
// 2. 參數是屬性名，屬性值，逗号分隔，是設定一組樣式，屬性必須加引号，值如果是 數字可以不用跟機關和引号
$
// 3. 參數可以是對象形式，友善設定多組樣式。屬性名和屬性值用冒号隔開， 屬性可以 不用加引号
$
注意：css() 多用于樣式少時操作，多了則不太友善。
方法2: 設定類樣式方法 作用等同于以前的 classList，可以操作類樣式， 注意操作類裡面的參數不要加點。
常用的三種設定類樣式方法：
//1, 添加類 ---
注意：
1. 設定類樣式方法比較适合樣式多時操作，可以彌補css()的不足。
2. 原生 JS 中 className 會覆寫元素原先裡面的類名，jQuery 裡面類操作隻是對指定 類進行操作，不影響原先的類名。
jQuery效果
1.5. jQuery 效果
jQuery 給我們封裝了很多動畫效果，為常見的如下：
//顯示隐藏：
注意：
動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行,
jQuery為我們提供另一個方法，可以停止動畫排隊：stop()
顯示隐藏動畫，常見有三個方法：show() / hide() / toggle() ;
1, 顯示文法規範 :
show
2 , 顯示參數
1, 參數都可以省略 , 無動畫直接顯示
2, speed : 三種預定速度之一的字元串 ( " slow ", " normal " , " fast "), 或表示動畫時長的毫秒數值 (如 : 1000)
3, easing : ( Optional ) 用來指定切換效果 , 預設是 " swing ", 可用參數 " linear ";
4 , fn : 回調函數 , 在動畫完成是執行的函數 , 每個元素執行一次
隐藏文法規範
hide
2 隐藏參數 :
1, 參數都可以省略 , 無動畫直接顯示
2, speed : 三種預定速度之一的字元串 ( " slow ", " normal " , " fast "), 或表示動畫時長的毫秒數值 (如 : 1000)
3, easing : ( Optional ) 用來指定切換效果 , 預設是 " swing ", 可用參數 " linear ";
4 , fn : 回調函數 , 在動畫完成是執行的函數 , 每個元素執行一次
切換文法規範
toggle
2 隐藏參數 :
1, 參數都可以省略 , 無動畫直接顯示
2, speed : 三種預定速度之一的字元串 ( " slow ", " normal " , " fast "), 或表示動畫時長的毫秒數值 (如 : 1000)
3, easing : ( Optional ) 用來指定切換效果 , 預設是 " swing ", 可用參數 " linear ";
4 , fn : 回調函數 , 在動畫完成是執行的函數 , 每個元素執行一次
平時一般不帶參數 , 直接顯示隐藏即可
滑入滑出
滑入滑出動畫，常見有三個方法：slideDown() / slideUp() / slideToggle()
1 下滑效果文法規範
slideDown
2, 下滑效果參數
同上
上滑效果文法規範
slideUp
效果參數 --同上
淡入淡出
fadeIn -同上淡入
fadeOut- 淡出同上
fadeToggle-淡入淡出切換-同上
自定義動畫 animate
animate
參數 :
（1）params: 想要更改的樣式屬性，以對象形式傳遞，必須寫。屬性名可以不用帶引号，如果是複合屬性則需要采 取駝峰命名法 borderLeft。其餘參數都可以省略。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次
jQuery 屬性操作
- 設定或擷取元素固有屬性值 prop()
所謂元素固有屬性就是元素本身自帶的屬性，比如<a> 元素裡面的 href ，比如 <input> 元素裡面的type
//1, 擷取屬性文法----
- 設定或擷取元素自定義屬性值 attr()
使用者自己給元素添加的屬性，我們稱為自定義屬性。比如給 div 添加 index =“1”。
1. 擷取屬性文法
attr
設定屬性文法
attr
改方法也可以擷取H5 自定義屬性
資料緩存 data()data() 方法可以在指定的元素上存取資料，并不會修改DOM 元素結構。一旦頁面重新整理，之前存放的資料都将被移除
1. 附加資料文法
data
擷取資料文法
date(''name'') // 向被選元素擷取資料
同時，還可以讀取HTML5 自定義屬性 data-index ，得到的是數字型
jQuery 内容文本值主要針對元素的内容還有表單的值操作。
1. 普通元素内容 html()（ 相當于原生inner HTML)
html
2. 普通元素文本内容 text() (相當與原生 innerText)
text
3. 表單的值 val()（ 相當于原生value)
val
jQuery 隐式疊代是對同一類元素做了同樣的操作。如果想要給同一類元素做不同操作，就需要用到周遊
- 文法1：
$
1. each() 方法周遊比對的每一個元素。主要用DOM處理。each 每一個
2. 裡面的回調函數有2個參數： index 是每個元素的索引号; demEle 是每個DOM元素對象，不是jquery對象
3. 是以要想使用jquery方法，需要給這個dom元素轉換為jquery對象 $(domEle)
- 文法2
$
1. $.each()方法可用于周遊任何對象。主要用于資料處理，比如數組，對象
2. 裡面的函數有2個參數： index 是每個元素的索引号; element 周遊内容
建立元素$
1. 内部添加
element
2. 外部添加
element
① 内部添加元素，生成之後，它們是父子關系。
② 外部添加元素，生成之後，他們是兄弟關系。
删除元素element
① remove 删除元素本身。
② empt() 和 html('''') 作用等價，都可以删除元素裡面的内容，隻不過html 還可以設定内容。
jQuery 尺寸
以上參數為空，則是擷取相應值，傳回的是數字型
如果參數為數字，則是修改相應值
參數可以不必寫機關。
jQuery 位置
位置主要有三個：offset()、position()、scrollTop()/scrollLeft()
1. offset() 設定或擷取元素偏移
① offset() 方法設定或傳回被選元素相對于文檔的偏移坐标，跟父級沒有關系。
② 該方法有2個屬性left、top 。offset().top 用于擷取距離文檔頂部的距離，offset().left 用于擷取距離文檔左側的距離。
③ 可以設定元素的偏移：offset({ top: 10, left: 30 });
2. position() 擷取元素偏移
① position() 方法用于傳回被選元素相對于帶有定位的父級偏移坐标，如果父級都沒有定位，則以文檔為準。
② 該方法有2個屬性left、top。position().top 用于擷取距離定位父級頂部的距離，position().left 用于擷取距離定位父級左側的距離。
③ 該方法隻能擷取。
3. scrollTop()/scrollLeft() 設定或擷取元素被卷去的頭部和左側
① scrollTop() 方法設定或傳回被選元素被卷去的頭部。
② 不跟參數是擷取，參數為不帶機關的數字則是設定被卷去的頭部。
![jquery 當頁面圖檔加載之後_jquery筆記[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)