笔记：全网最详细jQuery教程
申明：本篇博客是學習舟炬教育課程：全網最詳細jQuery講解的課程筆記。
前言：在華為實習的兩個月時間中，接觸了jQuery，因為所做的前端工作是基于Angular框架的，本身有許多需求在實現的時候都會比較復雜，在這個過程中，如果遇到比較難實現的需求，就會使用jQuery。這時候的jQuery仿佛是個消防員一樣的存在。所以在現在vue等框架盛行的情況下，覺得還是有學習了解jQuery的必要，畢竟它提供了許多實現需求的方式方法，所以可以作為儲備來學習。
目錄
一、jQuery基礎
1、獲取jQuery
2、jQuery版本介紹
3、jQuery的兼容性引用方式
4、jQuery的使用
5、jQuery的特點
6、jQuery? DOM對象
7、jQuery全局對象
二、jQuery選擇器
三、jQuery屬性與樣式操作
1、屬性操作：兩個方法：attr()和prop()
2、CSS類操作
3、HTML代碼/文本/值
四、jQuery樣式操作
1、CSS操作
2、位置
3、尺寸
五、jQuery中的篩選操作
1、過濾操作
2、查找
3、串聯
4、jQuery DOM對象的方法
六、jQuery DOM操作
1、創建元素
2、內部插入
3、外部插入
4、包裹
5、替換
6、刪除
7、克隆
七、jQuery事件
1、事件綁定
2、解除事件綁定
3、事件委派
4、控制事件觸發
5、事件列表（新增）
6、事件對象（event對象）屬性
八、jQuery動畫
九、jQuery ajax
1、快速請求方法
2、ajax方法
3、表單方法
4、處理json數據
十、jQuery 工具方法
1、數組對象方法
2、函數方法
3、類型判斷
4、字符串
5、版本
十一、jQuery插件
1、jQuery插件的網站
2、經典jQuery插件
2.1 select2 下拉框搜索插件推薦
2.2 經典datetimepicker時間日期插件?
2.3 fullpage全屏滾動插件
2.4 lazyload圖片懶加載
2.5 layer彈窗
2.6 nice valldator表單驗證
2.7 jQuery-easing
3、自定義jQuery插件
4、jQuery UI
5、jQuery Mobile
6、Sizzle
一、jQuery基礎
1、獲取jQuery
方式一：官網下載
<script src="../jquery-3.3.1.min.js"></script>方式二：npm下載安裝
方式三：CDN引用（推薦），使用第三方服務器上的jQuery文件，加載速度快。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>2、jQuery版本介紹
jQuery2.0以上的版本，不兼容IE8及以下版本。
3、jQuery的兼容性引用方式
<body><!-- chrome firefox Safari opera IE9+ --><!-- [if gt IE 8]> --><script src="../jquery-3.3.1.min.js"></script><!-- <![endif]--><!-- IE8以及以下--><!-- [if lte IE 8]><script src="../jquery-1.12.4.min.js"></script><![endif]--> </body>4、jQuery的使用
//jQuery入口 $(document).ready(function(){//自己的代碼 }) //jQuery入口簡寫 $(function(){//自己的代碼 })$(document).ready(function(){})事件和window.οnlοad=function(){}的區別：
ready表示頁面中DOM加載完畢后觸發；
onload表示頁面中所有一切加載完畢后觸發，包括一些圖片資源。所以實際應用中ready更合理實用一些。
5、jQuery的特點
便捷的DOM操作；強大的選擇器；鏈式操作；可靠的事件機制；封裝了簡單易用的Ajax操作；兼容性處理；豐富的插件。
6、jQuery? DOM對象
對于原生方法如：var box = document.querySelector("#app")取得的DOM對象，稱為原生DOM對象；
對于jQuery方法如：var $box = $("#app")取得的DOM對象，稱為jQuery DOM對象；
jQuery DOM本質上是由該選擇器下的所有原生DOM組成的類數組集合（類數組是我自己加的，不知道準不準確）。所以可以通過索引值，將jQuery DOM轉換成原生DOM。如：如果該選擇器下只有一個原生DOM的話，$box[0]即可。（$box是前面選擇到的jQuery DOM對象）。
原生DOM對象轉換為jQuery DOM對象：$(原生DOM對象)，如$(box)，用$方法，傳入原生DOM對象，即可轉換為jQuery DOM對象。
7、jQuery全局對象
引入jQuery之后，即存在了一個全局變量，這個變量的名字叫jQuery，別名是$.所以 $ === jQuery（！！！終于知道$到底是個啥了）
$的作用到底有哪些？根據參數形式不同，$可以實現不同的功能。
===>1、參數是字符串時充當選擇器。 如：$("#app").width(100)等
2、參數是對象時，充當方法。將原生DOM對象轉換為jQuery DOM對象。其實$(document)本身就是把原生DOM對象document轉換成了jQuery DOM對象。
3、參數是字符串，里面是元素標簽。可以創建一個DOM元素。如：$("<p>").html("xxx").appendTo("#app").
二、jQuery選擇器
特性：js中的選擇器與CSS選擇器不同，沒有優先級之分，誰寫在后面，誰就顯示；覆蓋前面的相同屬性。
1、基本選擇器
id選擇器#Idname、類選擇器.className、標簽選擇器tagName、全局選擇器、組合選擇器
2、層級選擇器
后代元素：selector selector
子元素：selector>selector
并列元素：selectorselector
相鄰兄弟元素：selector+selector（后面緊鄰的一個兄弟元素）
兄弟元素：selector~selector（后面所有的兄弟元素）
3、篩選選擇器
在選擇器后加冒號，之后選擇第一個:first/最后一個:last/第奇數個:odd/第偶數個:even/第N個:eq(index)索引從零開始/大于某個數:gt/小于某個數:lt/排除:not(選擇器)/指定語言:lang(語言)/過濾出錨點正在指向的元素:target/過濾出根元素:root/過濾獲取焦點的元素:focus/所有的標題標簽:header/:animated正在執行動畫（jQuery動畫）的元素
4、內容選擇器
.contains(text)包含指定文本
.has(selector) 包含滿足條件的后代元素的元素
.empty 沒有內容也沒有子元素
.parent 跟empty相反，有內容或者有子元素
5、可見性選擇器
:hidden? 不可見元素
:visible? ?可見元素? 感覺還挺有用的，可以把頁面里所有的元素圈出來，方便布局和debug
6、屬性選擇器
可以選擇包含某些屬性以及滿足特定屬性正則匹配條件的標簽
如：$("img[src*='d'][alter]")表示包含src和alter屬性，并且src屬性名中包含'd'字符。
[attrName]表示包含該屬性；
[attrName=value]等于/[attrName!=value]不等于/[attrName^=value]以。。。開頭/[attrName$=value]以。。。結尾/[attrName*=value]包含。。。
7、子元素選擇器
$("li:first-child")取所有的li元素的第一個子元素。:last-child和nth-child(index)與之類似。不過此時的index從1開始。此外還有nth-last-child(index)，這里是從后往前索引。:only-child表示唯一的子元素。
此外，子元素選擇器還有first-of-type/last-of-type/nth-of-type(index)/nth-last-of-type(index)/only-of-type，這一類型的選擇器與-child不同的地方在于，-child選擇的是所有子元素排序里的某一個，而-of-type選擇的是所有子元素里相同元素的排序里的某一個。所以，-child有可能會存在滿足排序順序但是不是滿足的元素類型，導致沒有元素被選中的結果。而-of-type則不會。
8、表單選擇器
:input 表示選擇所有的表單控件。有：input/textarea/button/select/form/label/fieldset/legend/optgroup/option/datalist/keygen/output
:text/:password/:radio/:checkbox/:file/:reset 根據input的type值選擇
:submit? 所有有提交功能的按鈕，包括button和input type="submit"
:button? 表示選擇button元素和input=button
9、表單對象選擇器
:disabled/:enabled/:checked/:selected表示選擇有相應屬性的標簽
10、混淆選擇器
$.escapeSelector(selector) 當className或者idName有特殊符號時，用混淆選擇器完成轉義，之后進行字符串拼接，從而完成選擇。
三、jQuery屬性與樣式操作
1、屬性操作：兩個方法：attr()和prop()
使用方法：$("img").attr("alt")、$("img").prop('alt')
兩者的區別在于：attr獲取的是所有的屬性，包括內置屬性和自定義屬性，且得到的屬性值與設置的屬性值完全一致。而prop獲取的只有HTML內置屬性。如果獲取的是一組jQuery對象，則獲取的值是第一個對象的屬性值。
原生js在操作DOM屬性的時候，也有兩種方法：對于內置屬性，可以直接使用‘.’+屬性名的方法，但是對于自定義屬性，需要使用getAttribute或者setAttribute。
修改屬性值：$("img").attr("title","你好")? 可以修改內置屬性和自定義屬性。$("img").prop("title","我好")? 只能修改內置屬性。
添加屬性值：同上，如果第一個參數不存在，就會添加屬性值，同樣的，attr可以添加內置屬性和自定義屬性，而prop只能添加內置屬性。（如果使用prop添加自定義屬性，則添加不到DOM對象去，但是如果查看該對象的這個屬性卻還是可以打印得出來。。。。。很神奇，不知道這個點存在的意義是什么。。。。而且removeProp也只能刪除這一類由prop添加的自定義屬性，并不能刪除內置屬性。。。。。很神奇）
刪除屬性值：上面說了removeProp。另外還有removeAttr，這個方法可以刪除內置屬性和自定義屬性。比較靠譜，嗯。
2、CSS類操作
$(document).ready(function(){//$(this)表示當前點擊的元素//判斷該元素中有沒有current classif($(this).hasClass("current")){//刪除class值$(this).removeClass("current");} else {//添加上class值$(this).addClass("current");}//使用toggleClass方法可以切換current類的有無，代替上面判斷和操作過程$(this).toggleClass("current"); })3、HTML代碼/文本/值
獲取元素內的內容（包含標簽元素文本元素等）：.html([html])方法，該方法相當于原生js里的innerHTML方法。該方法傳入一個參數時是設置其內容。當添加的內容里有標簽的時候，就會顯示出該標簽。
獲取元素內的文本（文本元素）：.text([text])方法，該方法相當于原生js里的innerText方法。該方法傳入一個參數時是設置其文本內容。如果內容中含有標簽，也不會顯示標簽，而是顯示純文本。
val([val])方法：設置或獲取表單控件里的值
四、jQuery樣式操作
1、CSS操作
css(attr[,value])獲取的是css計算屬性，當傳入兩個參數的時候，可以實現賦值。其參數還可以是一個對象，方便賦值多個屬性。
2、位置
offset()方法，返回一個對象，有.left屬性和.top屬性，獲取的是元素的坐標。可以用來設置位置，屬性為left/top。
position()方法，返回一個對象，有.left屬性和.top屬性，獲取的是相對于第一個定位的祖先元素的坐標。只能獲取位置，不能改變位置。
3、尺寸
width/height：內容的尺寸
innerWidth/innerHeight：內容的尺寸+padding
outerWidth/outerHeight：盒子的尺寸。
五、jQuery中的篩選操作
1、過濾操作
first()/last()/eq()/not()/filter()選取，與not相反/slice()截取/has()包含某個子元素
以上方法的返回值，都是jQuery DOM對象。
2、查找
children([selector])? 獲取子元素
find(selector)? 獲取后代元素
parent([selector])? 獲取父元素
parents([selector])? 獲取所有的祖先元素（滿足條件）
parentsUntil([selector])? 獲取祖先元素集合（從父元素到選擇器指定的祖先元素（不包括祖先元素自身））
offsetParent()? 獲取第一個定位的祖先元素
next([selector])? 緊鄰在后面的兄弟元素
nextALL([selector])? 后面所有的兄弟元素
nextUntil([selector])
prev([selector])? 緊鄰在前面的兄弟元素
prevAll([selector])? 前面所有的兄弟元素
prevUntil([selector])
siblings([selector])? 所有的兄弟元素
closest(selector)? 從所有的祖先元素和本身里面找出第一個滿足條件
3、串聯
add()? 把選中的元素加入當前集合
addBack()? 把調用該方法的元素加入當前的集合
end()? 返回最后一次破壞性操作之前的DOM
contents()? 返回所有子節點的集合（包括元素節點、文本節點、注釋節點、屬性節點）
4、jQuery DOM對象的方法
each() 遍歷
map()? 返回新的集合
length? ?不是方法，是屬性，表示集合中的元素數量
index()? 返回該元素在父元素中的索引位置
get([index])? 返回集合指定索引的dom 對象，還可以把jquery dom集合轉為純數組（不傳入參數的時候）
is(selector)? 判斷該jqdom對象是否滿足某個條件，返回的是布爾值。
六、jQuery DOM操作
1、創建元素
$("<tagName>")
2、內部插入
append()
appendTo()
prepend()
prepentTo()
3、外部插入
after()
insertAfter()
before()
insertBefore()
4、包裹
wrap()
wrapAll()
wrapInner()
unwrap()
5、替換
replaceWith()? 傳入的參數需要是jquery dom，所以需要用$轉換。
replaceAll()? 其余replaceWith的關系相當于append和appendTo的關系。主語和賓語相反。
6、刪除
empty()? 清空。
remove()? 移除。使用該方法返回的jq dom對象再重新添加到原來的集合時，不具有之前的方法和屬性。
detach()? 移除。使用該方法返回的jq dom對象再重新添加到原來的集合時，仍然具有之前的方法和屬性。
7、克隆
clone()
七、jQuery事件
1、事件綁定
on(event,fn)? 標準的綁定方式；
one(event,fn)? 只能綁定一次；
on({"event",fn})? 傳入對象參數，可以綁定多個事件；
此外，可以將事件作為dom對象的方法連續綁定多個事件，連貫操作。dom.event(fn).event(fn)...
2、解除事件綁定
off()方法
3、事件委派
selector集合.on(event,selector,fn)
4、控制事件觸發
selector.trigger("event")? ?觸發selector的event事件。其中，event可以是單擊雙擊等事件。
selector.triggerHandler("event")? ?
trigger和triggerHandler的區別：
1、trigger返回的是jquery dom，可以進行連貫操作，而triggerHandler不行。
2、trigger可以觸發元素自帶的事件，比如輸入框的focus事件，表單按鈕的submit事件，而triggerHandler不行。
3、trigger會觸發集合中所有元素的事件，而triggerHandler只觸發集合中第一個元素的事件。
5、事件列表（新增）
blur([[data],fn])? 失去焦點
focus([[data],fn])?獲取焦點
ready(fn)? ?頁面加載完畢
focusin([data],fn)? 獲取焦點，綁定給輸入框的父元素
focusout([data],fn)? ??失去焦點，綁定給輸入框的父元素
mouseenter([[data],fn])?? ?代替mouseover（鼠標經過其子元素的時候也會觸發），鼠標在該元素里只觸發一次，不會受子元素影響。
mouseleave([[data],fn])?? 代替mouseout，同上。
hover? ?鼠標進入和離開時都會觸發。mouseenter和mouseleave的集合。
6、事件對象（event對象）屬性
event.pageX? 鼠標箭頭的x坐標（相對于文檔，而不是窗口）
event.pageY? 鼠標箭頭的y坐標（相對于文檔，而不是窗口）
target? 當前觸發事件的元素
which? 鍵盤按鍵的ascII碼
type? 事件類型（事件名稱，如：keypress? click）
preventDefault()? 阻止默認事件
stopPropagation() 阻止事件冒泡
在事件執行函數中，使用“return false”，可以同時阻止事件冒泡和默認事件。
八、jQuery動畫
這里的jquery動畫部分沒有學習，主要是因為目前普遍使用CSS3動畫。后期在需要的話再考慮學習。
九、jQuery ajax
1、快速請求方法
get() 發起get請求
$.get(url,callback[,dataType])post()? 發起post請求
$.post(url[,data],callback[,dataType])服務器環境工具：xampp lite控制面板? apache? 。。。這個好像是用來連接服務器用的。。。
打開html文件本身就是一次服務器請求
$("#btm00").ready(function(){$.get("http://localhost/get-content.php?name=Lili&message=hello",function(data){alert(data);}) })這里不需要創建XML Ajax對象，只需要調用jquery里的get()和post()函數。傳遞的第一個參數是地址，地址的后面用?連接的是傳給服務器的參數，第二個參數是回調函數，data是回調函數返回的數據。
post()方法的第一個參數也是地址，第二個參數是傳遞給服務器的數據，格式是對象{name:"Jack",message:"nihao"}或者字符串"name=Bob&message=Hello World"或者從表單中讀取的內容，如果不需要傳遞的話這個參數可以省略，第三個參數是回調函數。
發起post請求，傳遞參數 $.post("http://localhost/post-content.php",$("#myForm").serialize(),function(data){alert(data); })2、ajax方法
ajax()? 既可以發起get請求，又可以發起post請求。傳參是一個對象，對象里面分別為各個關鍵參數和取值。async:true，表示異步。如果是發起post請求的話，就將type值改成post。data的格式可以是對象，也可以是字符串，所以可以是取自表單的元素。
$.ajax({url://請求的地址,type://請求的方式 GET/POST,async://是否異步,data://發送的數據，對象或字符串（序列化）dataType://相應的內容格式,success://相應成功的回調函數,error://相應失敗的回調函數 }) ("#btn01").click(function(){$.ajax({url:"http://localhost/get-content.php",type:"get",data:{name:"Jim",message:"lala"},async:true,success:function(data){alert(data);}}) })這里的data是傳遞給服務器的內容，即自動拼接到url后面的內容。其格式可以是對象，也可以是字符串，data:"name=BOB&&message=I LOVE YOU"? 或? data:$("#myForm").serialize()
3、表單方法
serialize()? 便捷獲取有name屬性的表單元素的name屬性拼接結果（序列化表單）。拼接結果是一個字符串。用來提交。
這樣就不需要手動地在訪問地址后面拼接傳遞的內容了。
$.get("http://localhost/get-content.php?"+$("#myForm").serialize(),function(data){alert(data); })4、處理json數據
使用ajax方法，指定dataType值為"json"即可：
$.ajax({url:"http://localhost/data.json",type:"get",async:true,dataType:"json",success:function(data){console.log(data);//這里打印輸出的是對象processData(data);},error:function(err){alert("請求失敗");} }); function processData(data){$.each(data,function(index,item){...}) }使用get方法，只需要指定第三個參數"json"，就可以。不需要做其他的處理。post方法類似。：
$.get("http://localhost/data.json",processData,"json"); function processData(data){... }十、jQuery 工具方法
1、數組對象方法
$.each(Array,fn(index,item))? 用于遍歷數組或類數組對象（如jquery對象、原生dom對象）
$.grep(Array,fn(item,index))? 過濾操作，該方法返回一個新的數組。
var list=[1,2,3,4,5,6,7,8]; //$.grep() 對數組進行過濾 var res=$.grep(list,function(item,index){return item % 2 === 0; });console.log(res);//[2,4,6,8]$.map(Array,fn(item,index)) 用于遍歷數組或類數組對象，與each方法不同的是，map方法會返回一個新的數組，不改變原來的數組。
var res=$.map(list,function(item,index){return item+4; }) console.log(res);//[5,6,7,8,9,10,11,12]$.makeArray(likeArray) 把類數組對象轉換為一個純數組，返回一個新的數組。
var newArr = $.makeArray($("#myList li"));$.inArray(ele,Array) 返回一個元素在數組中的位置。如果該元素在數組中不存在，則返回-1.
$.merge(Array1,Array2[,Array3...])? 合并數組
沒有加$.的方法都是jquery dom的方法
toArray(jquerydom)? 把jquerydom轉為純數組，功能與makeArray類似，用法不同。
2、函數方法
$.proxy()? 改變函數內的上下文環境（this指向）。類似于原生jquery中的bind方法。
3、類型判斷
$.type()? 返回參數的類型，如果是數組的話，不會像原生jquery那樣返回對象，而是返回array數組。
$.isFunction() 判斷參數是不是函數，是則返回true，不是則返回false。
$.isEmptyObject()? 判斷是不是空的對象。
$.isPlainObject()? 判斷是不是純的對象（構造函數是object）。
$.isWindow() 判斷是不是window對象。
$.isNumeric() 判斷是不是數字，如果是小數也返回true。如果是NaN，返回false。
4、字符串
$.trim()? ?去除兩邊的空格。傳入的參數是要去除兩邊空格的字符串。
$.param()? 序列化成字符串。傳入的參數是對象（包含jquery 對象），將對象序列化成字符串。
console.log($.param({name:"lili",age:100})); //name:lili&age:1005、版本
$.fn.jquery? 返回當前使用的Jquery版本。
十一、jQuery插件
1、jQuery插件的網站
http://plugins.jquery.com/ 官網? ?這個是英文的，感覺不是很好用。
http://www.jq22.com/? ? ?jQuery插件庫? 這個是中文的，感覺不錯
http://www.htmleaf.com/ jQuery之家? 這個比較棒，中文
http://www.jq-school.com/ jQuery-school
2、經典jQuery插件
插件其實就是封裝好的特效代碼。如何選擇插件：1、要有官方網站；2、要定期維護；3、使用數量多。
2.1 select2 下拉框搜索插件推薦
官網 http://select2.org/
github http://github.com/select2/select2
$(dom).select2() $(dom).select2({width:,data:,ajax:,... }) //插件的使用 <head><link rel="stylesheet" href="./select2/css/select2.min.css">//這里引用插件中的css壓縮文件 </head> <body><select id="mySelect01"><option value="1">北京市</option><option value="2">上海市</option>//等等等選擇</select><select id="mySelect02"></select><select id="mySelect03"></select><script src="../jquery/jquery-3.3.1.min.js"></script><script src="./select2/js/select2.min.js"></script>//這里引用插件中的js壓縮文件<script>$(document).ready(function(){$("#mySelect01").select2({width:150//這里可以配置函數的一些屬性，具體有哪些配置，在插件介紹里有});//這里直接調用插件中編輯好的函數即可，非常方便$("mySelect02").select2({width:150,data:[{id:1,text:"小明"}，{id:2,text:"小紅"}，//等等選擇。這里通過配置插件屬性中的data屬性完成選項內容的填寫。這里的id值就充當了選項的value值。具體開發中，還是需要讀懂相關源代碼。]});$("mySelect03").select2({width:150,ajax:{url:"http://localhost/address.php",//這里會發起ajax請求dataType:"json",processResults:function(data){//對響應內容進行處理var resList=[];$.each(data,function(index,item){resList.push({id:item.id,text:item.name})})//返回結果return{results:resList}}}})})</script> </body>2.2 經典datetimepicker時間日期插件?
github? ?https://github.com/xdan/datetimepicker
文檔? ? ?https://xdsoft.net/jqplugins/datetimepicker/
//設置語言 $.datetimepicker.setLocale('zh'); //調用插件 $(dom).datetimepicker({datepicker:true/false,timepicker:true/false,format:"Y-m-d H:i",value:默認值,... }) <h1>datetimepicker時間日期插件</h1> <hr> <input type="text" id="datetime"> <input type="text" id="dateInput"> <script src="../jquery/jquery-3.3.1.min.js"></script> <script src="./datetimepicker/jquery.datetimepicker.full.min.js"></script> <script>$(document).ready(function(){//設置插件的語言$.datetimepicker.setLocale("zh");//調用插件$("#datetime").datetimepicker();//調用插件，只要日期不要時間$("datetime").datetimepicker({timepicker:false,format:"Y-m-d H:i"//小寫h代表12進制的小時，如果把時分的格式刪掉的話，就只顯示日期。沒有時間})}) </script>2.3 fullpage全屏滾動插件
官網 https://alvarotrigo.com/fullpage/zh/? 這個網頁中使用了谷歌的插件，所以需要配置vpn才能正常訪問
github? ?https://github.com/alvarotrigo/fullpage.js/
自定義的導航，需要寫在包裹fullpage的外面。
<head> <link rel="stylesheet" href="./fullpage/jquery.fullpage.min.css"> <style>#fullpage{text-align:center;color:#fff;}h1{font-size:80px;}h2{font-size:60px;}#nav{position:fixed;top:20px;left:20px;z-index:1000;//置于頂層}#nav a{color:#fff;text-decoration:none;padding:0 20px;}.page01{background:url("../images/10.jpge") no-repeat center/cover; //將第一頁的背景換成一張圖片} </style> </head> <body><div id="nav"><a href="#firstPage">首頁</a><a href="#secondPage">介紹</a><a href="#thirdPage">功能</a><a href="#forthPage">演示</a>//這里的每一個類都與插件屬性anchors中的每一個錨點對應，實現跳轉</div><div id="fullpage"><div class="section page01">//默認的幻燈片類名需要是section，不過也可以更改<h1>歡迎使用fullpage</h1></div><div class="section page02"><div class="slide"><h2>第二頁 第一張</h2></div>//默認的子幻燈片類名需要是slide，不過也可以更改<div class="slide"><h2>第二頁 第二張</h2></div><div class="slide"><h2>第二頁 第三張</h2></div><div class="slide"><h2>第二頁 最后 一張</h2></div></div><div class="section page03"><h2>第三頁</h2></div><div class="section page04"><h2>最后一頁</h2></div></div><script src="../jquery/jquery-3.3.1.min.js"></script><script src="./fullpage/jquery.fullpage.min.js"></script><script>$(document).ready(function(){//調用插件$("#fullpage").fullpage({navigation:true,//側邊的導航欄顯示sectionsColor:["orange","skyblue","pink","#369"],//設置四張幻燈片的背景顏色navigationTooltips:['第一頁','第二頁','第三頁','第四頁'];//導航欄提示anchors:["firstPage","secondPage","thirdPage","forthPage"];//設置錨點名稱，將四張幻燈片與相應的a元素綁定}); })局限：風格不一定與自身開發的網頁風格一致。有可能會導致代碼冗余。
2.4 lazyload圖片懶加載
圖片懶加載：鼠標滾動到相應位置之前，不加載該位置的圖片。當鼠標滾動到相應位置時，才加載圖片。緩解服務器壓力。
官網? https://appelsiini.net/projects/lazyload/
github https://github.com/tuupola/jquery lazyload/tree/2.x
<head>body{background-color:#ccc;}.container{margin:0 auto;width:920px;}.img-wrapper:{font-size:0; }.img-item{display:inline-block;margin-right:20px;margin-bottom:20px;width:400px;padding:20px;background-color:#fff;}.img-item img{width:400px;height:300px;background:url("../images/loading.gif") no-repeat;} </head><body><div class="container"><h1>圖集</h1><hr><div class="img-wrapper"><div class="img-item"><img data-src="../images/1.jpeg"></div><div class="img-item"><img data-src="../images/2.jpeg"></div><div class="img-item"><img data-src="../images/3.jpeg"></div><div class="img-item"><img data-src="../images/4.jpeg"></div><div class="img-item"><img data-src="../images/5.jpeg"></div><div class="img-item"><img data-src="../images/6.jpeg"></div>...</div><script src="../jquery/jquery-3.3.1.min.js"></script><script src="./lazyload/lazyload.min.js"></script><script>$(document).ready(function(){$(".img-wrapper img").lazyload(); }) </body>2.5 layer彈窗
官網 http://layer.layui.com/?alone
github https://github.com/sentsin/layer
<body><button id="btn00">alert</button><button id="btn01">confirm</button><button id="btn02">msg提示</button><button id="btn03">tips</button><button id="btn04">load</button><button id="btn05">自定義彈框</button><button id="btn06">網頁</button><script src="../jquery/jquery-3.3.1.min.js"></script><script src="./layer/layer.js"></script><script>$(document).ready(function(){$("#btn00").click(function(){//調用插件layer.alert("警告，失敗");});$("#btn01").click(function(){layer.confirm("你確定嗎");});$("#btn02").click(function(){layer.msg("提示");});$("#btn03").click(function(){layer.tips("小貼士","#btn03");});$("#btn04").click(function(){var loadEle = layer.load();//等待兩秒后關閉加載效果setTimeout(function(){layer.close(loadEle);},2000)});$("#btn05").click(function(){layer.open({title:"個人信息",area:["500px","400px"],content:"<p>Hello</p>" //這里的content還可以是jquery dom對象，該對象可以在上文先編輯好。這時屬性type需要取除默認值以外的值，其默認值是0，取1時可以正常顯示jquery dom對象。 //0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）})})；$("#btn06").click(function(){layer.open({type:2,title:"網頁",content:"http://www.itxdl.cn",area:["600px","500px"],//彈框最大最小化按鈕是否顯示maxin:true,})})}) </body>2.6 nice valldator表單驗證
官網? https://validator.niceue.com/
github? https://github.com/niceue/nice-validator
<form action="1.php" method="post" id="loginForm"><table><tr><td>郵箱：</td><td><input type="text" name="email"></td></tr><tr><td>密碼：</td><td><input type="password" name="pwd"></td></tr><tr><td>確認密碼：</td><td><input type="password" name="repwd"></td></tr><tr><td></td><td><button>注冊</button></td></tr> </form> <script>$(function(){$("#regForm").validator({fields:{//表單驗證：驗證輸入的內容是否符合要求，required參數表示必須驗證。另外不同的驗證需求可以在官網上查詢實現email:{rule:"required,email",ok:"郵箱可用",tip:"請輸入郵箱"},pwd:{rule:"length(6~18)",msg:"密碼必須6-18位",ok:"密碼可用",tip:"請輸入6-18位密碼"},repwd:{rule:"match(pwd)",msg:"兩次密碼不一致",ok:"密碼確認成功",tip:"請確認密碼"}}})}) </script>2.7 jQuery-easing
官網 http://gsgd.co.uk/sandbox/jquery/easing/
github https://github.com/gdsmith/jquery.easing
$(dom).hide(speed,easing,fn) //hide表示某個jquery動畫函數，easing表示的是插件中的某個效果3、自定義jQuery插件
jQuery.fn.extend()? ?給 jqueryDom 對象擴展方法（大部分插件）
$.fn.extend({方法名:function(){} }) //或者 $.fn.方法名=function(){ }jQuery.extend()? ? 給jquery對象本身擴展方法
$.extend({方法名:function(){} })?
//封裝自己的插件 消息滾動插件 <head><style>.wrapper{margin:100px auto;padding:800px;overflow:hidden;}.wrapper li{margin-bottom:10px;padding:20px;background-color:#ccc;}</style> </head> <body><ul class="wrapper" id="wrapList"><li>1 xxxxxxxx xxx xx x x x x x x x .</li><li>2 xxxxxxxx xxx xx x x x x x x x .</li><li>3 xxxxxxxx xxx xx x x x x x x x .</li><li>4 xxxxxxxx xxx xx x x x x x x x .</li> <li>5 xxxxxxxx xxx xx x x x x x x x .</li><li>6 xxxxxxxx xxx xx x x x x x x x .</li><li>7 xxxxxxxx xxx xx x x x x x x x .</li><li>8 xxxxxxxx xxx xx x x x x x x x .</li><li>9 xxxxxxxx xxx xx x x x x x x x .</li><li>10 xxxxxxxx xxx xx x x x x x x x .</li><li>11 xxxxxxxx xxx xx x x x x x x x .</li><li>12 xxxxxxxx xxx xx x x x x x x x .</li></ul><script src="../jquery/jquery.3.3.1.min.js"></script><script>//定義插件$.fn.scrollList=function(options){var obj=options?options:{};var limit = obj.limit ? obj.limit :4;//默認值 頁面中顯示幾個項目var speed = obj.speed ? obj.speed : 3000;//默認值 滾動的速度var type = obj.type ? obj.type : 0;//滾動的形式 默認是0//獲取其中一個項目的元素對象var itemEle = $(this).children().first();//獲取項目元素的高度var itemHeight = itemEle.outerHeight()+parseFloat(itemEle.css("margin-top"))+parseFloat(itemEle.css("margin-bottom"));//設置包裹元素的高度$(this).height(itemHeight*limit);//包裹的元素var that = $(this);//判斷滾動的動畫形式switch(type){case 1:setInterval(function(){that.children().last().fadeTo(0,0).hide().prependTo(that).slideDown(400).fadeTo(600,1);},speed);break;case 2:that.children().slice(limit).hide();//隱藏后面setInterval(function(){that.children().eq(limit-1).fadeOut(600,function({that.children().last().prependTo(that).delay(200).slideDown(400);})},speed);break;default://定時動起來setInterval(function(){that.children().last().hide().prependTo(that).slideDown(500);},speed)break;}}//調用插件$(document).ready(function(){$("#wrapList").scrollList({limit:4,speed:3000,type:0,//代表不同滾動形式})}) </body> (function($){ //定義插件$.fn.scrollList=function(options){var obj=options?options:{};var limit = obj.limit ? obj.limit :4;//默認值 頁面中顯示幾個項目var speed = obj.speed ? obj.speed : 3000;//默認值 滾動的速度var type = obj.type ? obj.type : 0;//滾動的形式 默認是0//獲取其中一個項目的元素對象var itemEle = $(this).children().first();//獲取項目元素的高度var itemHeight = itemEle.outerHeight()+parseFloat(itemEle.css("margin-top"))+parseFloat(itemEle.css("margin-bottom"));//設置包裹元素的高度$(this).height(itemHeight*limit);//包裹的元素var that = $(this);//判斷滾動的動畫形式switch(type){case 1:setInterval(function(){that.children().last().fadeTo(0,0).hide().prependTo(that).slideDown(400).fadeTo(600,1);},speed);break;case 2:that.children().slice(limit).hide();//隱藏后面setInterval(function(){that.children().eq(limit-1).fadeOut(600,function({that.children().last().prependTo(that).delay(200).slideDown(400);})},speed);break;default://定時動起來setInterval(function(){that.children().last().hide().prependTo(that).slideDown(500);},speed)break;}} })(jQuery)4、jQuery UI
官網 https://jqueryui.com/? ? ?版本很久沒更新了，使用得越來越少。
5、jQuery Mobile
官網 https://jquerymobile.com? 針對移動端? 設計上有些過時，官網很久沒有更新。
6、Sizzle
官網 https://sizzlejs.com
獨立出來的jquery選擇器
7、Zepto
官網 http://zeptojs.com
與jQuery區別：https://www.zhihu.com/question/25379207
由于不做兼容性處理（只針對IE9以上及其他主流瀏覽器）而且刪除了jquery動畫部分，所以相對于jquery來說體積很小。
使用時，可以直接在引用處代替jquery路徑，使用方法與jquery基本一致。
注意：最好使用CSS3的選擇器。
?
總結
以上是生活随笔為你收集整理的笔记：全网最详细jQuery教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机网络设置中的网关是什么设备,网关是
- 下一篇： 群面