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