當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

《锋利的jQuery》再次阅读及摘要

發布時間：2023/12/20 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了《锋利的jQuery》再次阅读及摘要小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

在如今的前端框架潮流中，毫無疑問React，Vue已經走在了第一線，越來越多前端開發者加入其中，但是昔日的霸主jQuery依然不可小視，在過去一年的調研中（原文：https://yq.aliyun.com/articles/716657?spm=a2c4e.11163080.searchblog.9.9a0f2ec1Ks6owj）jQuery依然位列前茅，加之最近在維護老的項目，因此再次閱讀《鋒利的jQuery》，希望有更多的理解。

優勢

優勢實在是太多了，個人覺得其中的：選擇器，DOM操作封裝，鏈式操作等真的是非常優秀；

安裝

通過script標簽直接引入jQuery文件即可正常使用

jQuery對象和DOM對象

先說結論，jQuery對象是jQuery對DOM對象進行了一次的封裝，以供在jQuery中使用，這兩個某種程度上說不是一回事；

DOM對象：文檔對象模型，可以這么理解，這是瀏覽器提供的原生對象，JS能直接進行操作的是DOM對象，比如通過document.getELementById(‘my’)這個方法，找到了頁面上的一個id名為my的元素；

jQuery對象：jQuery將DOM對象進行了一次包裝后產生的對象，為什么要包裝，因為包裝后的DOM對象（也就是jQuery對象）可以使用jQuery里的方法，這些方法極大的簡化了JS的書寫規則，比如：

//jQuery中，這樣便已經選擇了id名為my的元素節點 $('#my')//js中，需要這樣才是選擇了id名為my的元素節點 document.getELementById('my')

jQuery對象因為和DOM對象某種程度上說不是一回事，因此這兩個里面的方法是不能相互使用的，比如：

//獲取id為my的元素的文檔內容 $('#my').html()；//下面這種使用是錯誤的，html()這個方法是jQuery提供的， //因此能使用html()這個方法的對象必須是jQuery對象 document.getELementById('my').html()//在DOM對象中獲取相同的內容，比如使用DOM提供的方法 document.getELementById('my').innerHTML

DOM對象轉成jQuery對象：將DOM對象轉成jQuery對象只需要使用 $() 方法將 D O M 對象包裹起來，比如$ (document.getELementById(‘my’))；

jQuery對象轉成DOM對象：在jQuery對象的實現中，是將獲取到的所有元素節點放在了一個類數組中，因此可以通過下標的方式獲取到DOM對象，比如：

$('.my') //獲取到頁面上所有class中帶有my的元素節點，此時所有的元素節點是存放在一個類數組中的 //因此，假如需要獲取的是第一個class中帶有my的元素節點，可以通過$('.my')[0]獲取到

選擇器

毫無疑問，在我個人心中，jQuery中的選擇器功能絕對是在所有功能排行中數一數二的...沒辦法，實在太好用了，它完全繼承了CSS選擇器的風格，可以快速，便捷的找出特地的DOM元素，進行處理，并且到遇到錯誤時，避免瀏覽器報錯而阻塞了進程；

基本選擇器

選擇器描述返回示例

#id	匹配一個指定id的元素	單個元素	$(’#my’)，獲取id名為my的元素
.class	匹配所有類名中包含class的元素	元素的集合	$(’.test’)，獲取所有類名中包含test的元素
element	匹配所有指定元素名的元素	元素的集合	$(‘p’)，獲取的是所有的p元素
*	匹配頁面上所有元素	元素的集合	$(’*’),獲取頁面上所有的元素
el1,el2,el3	將所有選擇器匹配到后一起返回	元素的集合	$(‘div,.test,#my’)，將所有div，類名中有test，id為my的元素一起獲取到返回

層次選擇器

選擇器描述返回示例

$(‘el div’)	匹配el元素里面的所有div元素（包括子元素，孫元素等等所有后代）	元素的集合	$(’#my div’)，獲取id名為my的元素里面的所有div元素
$(‘el>div’)	匹配el的子元素里所有的div元素（只有子元素，不包含孫元素等待）	元素的集合	$(’#my>div’)，獲取id名為my的子元素里的所有的div元素
$(‘el+div’)	匹配緊跟著el元素的div元素	元素的集合	$(‘p+div’)，獲取的是所有緊跟著p元素的div元素
$(‘el~div’)	匹配el元素之后的所有兄弟元素	元素的集合	$(‘p+div’)，獲取的是所有p元素后面的div元素

過濾選擇器(僅常用)

選擇器描述返回示例

:first	選取第一個元素	單個元素	$(‘div:first’)，選取所有div元素中的第一個元素
:last	選取最后一個元素	單個元素	$(‘div:last’)，選取所有div元素中的最后一個元素
:not(el)	除去指定元素外的元素	元素的集合	$(‘div:not(.test)’)，選取所有div元素，但是類名是test的div除外
:even	所有索引是偶數的元素，索引從0開始	元素的集合	$(‘div:even’)，獲取所有的div元素，選中其中所有索引是偶數的div
:odd	所有索引是奇數的元素，索引從0開始	元素的集合	$(‘div:odd’)，獲取所有的div元素，選中其中所有索引是奇數的div
:eq(index)	選取索引等于index的元素，索引從0開始	單個元素	$(‘div:eq(10)’)，獲取所有的div元素，選中其中索引等10的div
:gt(index)	選取索引大于index的元素，索引從0開始	元素的集合	$(‘div:gt(2)’)，獲取所有的div元素，選中其中索引等大于2的div
:lt(index)	選取索引小于index的元素，索引從0開始	元素的集合	$(‘div:lt(5)’)，獲取所有的div元素，選中其中索引等小于5的div
:header	選取所有的標題元素，例如h1,h2	元素的集合	$(’:header’)，選取網頁上所有的h1,h2…等等
:animated	選取正在執行動畫的所有元素	元素的集合	$(‘div:aninated’)，選中所有正在執行動畫的div元素
:hidden	選取所有不可見元素	元素的集合	$(^{'} : h i d d e n^{'}) 選取的是所有不可見的元素，其中包括了：如果僅僅是需要選中 i n p u t 中的不可見元素，那么可以使用$ (‘input:hidden’)
:visiable	選取所有可見元素	元素的集合	$(‘div:visible’)選中所有可見的div元素
[attr]	選中擁有此屬性的元素	元素的集合	$(‘div[id]’)選取擁有id屬性的元素
[attr=value]	選中屬性值為value的元素	元素的集合	$(‘div[title=test]’)，選取屬性title值為"test"的元素
[attr!=value]	選中屬性值不等于value的元素	元素的集合	$(‘div[title!=test]’)，選取屬性title值不為"test"的元素，注意:假如元素沒有title屬性，也會被選中
[attr^=value]	屬性值以value開頭	元素的集合	$(‘div[title^=test]’)，選取的元素有title屬性，并且title屬性的值是以test開頭的
[attr$=value]	屬性值以value結尾	元素的集合	$(‘div[title^=test]’)，選取的元素有title屬性，并且title屬性的值是以test結尾的
[attr*=value]	屬性值中包含value	元素的集合	$(‘div[title^=test]’)，選取的元素有title屬性，并且title屬性的值包含了test這個字符串
[attr1][attr2][attr3]	復合過濾器，將多個過濾組合在了一起，選中的元素必須同時滿足要求	元素的集合	$(‘div[id][title^=test]’)，選中的div，必須有id屬性，并且必須有title屬性，同時title屬性的值必須以test開頭
:nth-child(index/even/odd/eq)	選中每個父元素下的第index個子元素或者奇偶數	元素的集合	:eq(index)獲取的是單個元素，nth-child將為每一個父元素匹配子元素，并且nth-child是從1開始算的，eq(index)的index是從0開始算的:nth-child(even)，所有父元素下的索引值是偶數的元素:nth-child(odd)，所有父元素下的索引值是奇數的元素:nth-child(2n)，所有父元素下的索引值是2的倍數的元素:nth-child(3n)，所有父元素下的索引值是3的倍數的元素:nth-child(3n+1)，所有父元素下的索引值是3n+1的元素
:first-child	每個父元素的第一個子元素	元素的集合	$(‘ul li:first-child’)，選中頁面上每個ul元素下的第一個li元素
:last-child	每個父元素的最后一個子元素	元素的集合	$(‘ul li:last-child’)，選中頁面上每個ul元素下的最后一個li元素
:only-child	如果某個元素是它父元素中唯一的子元素，則被選中	元素的集合	$(‘ul li:only-child’)，選中頁面上每個ul元素下唯一的li元素，換句話說，這個li必須是ul中唯一的子元素
:enable	所有可用的元素	元素的集合	$(’#form:enable’)，選取id為form中所有可用的元素
:disabled	所有不可用的元素	元素的集合	$(’#form:disable’)，選取id為form中所有不可用的元素
:checked	所有被選中的元素，必須單選和多選	元素的集合	$(‘input:checked’)，選取所有被checked的input元素
:selected	所有被選中的選項元素，比如下拉菜單	元素的集合	$(‘select:selected’)，選取所有被selected的select元素
:input	選取所有的input,textarea,select,button	元素的集合	$(’:input’)
:text	選中所有的單行文本	元素的集合	$(’:text’)
:password	選中所有的密碼框	元素的集合	$(’:password’)
:radio	選中所有的單選框	元素的集合	$(’:radio’)
:checkbox	選中所有的復選框	元素的集合	$(’:checkbox’)
:submit	選中所有的提交按鈕	元素的集合	$(’:submit’)
:image	選中所有的圖像按鈕	元素的集合	$(’:image’)
:reset	選中所有的重置按鈕	元素的集合	$(’:reset’)
:button	選中所有的按鈕	元素的集合	$(’:button’)
:file	選中所有的上傳域	元素的集合	$(’:file’)
:hidden	選中所有的不可見元素	元素的集合	$(’:hidden’)

選擇器中的注意事項

特殊字符

假如選擇器中選擇的屬性值有特殊字符，比如#,[]等這些，那么就需要使用轉義，否則會報錯，比如：

$('#id#b') //這樣是會報錯的 $('#id\\#b') //需要的#轉義$('#id[1]') //這樣是會報錯的 $('#id\\[1\\]') //需要轉義

引號問題

$('#id[title="test"]')

空格問題

選擇器中空格是有自己的含義的，代表后代

$('.test :hidden') //選中的是類名中帶有test的元素的后代元素中隱藏的元素節點$('.test:hidden') //選中的是所有類名中帶有test并且被隱藏的元素

DOM操作

對DOM的操作流程就是兩步，第一步：找到要操作的元素節點；第二步：對元素節點進行修改編輯操作；

查找元素節點

通過上面的選擇器，就可以將所有需要的元素獲取到；

對元素節點的操作

元素節點的屬性

方法描述示例

.attr()	獲取元素節點的屬性或者對元素節點進行屬性設置	獲取： $(^{'} . c l a s s^{'}) . a t t r (^{'} t i t l e^{'}) ，獲取是所有類名中包含 c l a s s 的元素中的 ? ? 第一個元素 ? ? 的 t i t l e 值 ? ? 設置： ? ?$ (’.class’).attr(‘title’,‘10’)，將所有類名中包含class的元素的title值設置成10同樣，也可以通過attr()方法，對元素節點的class進行操作，比如：$(’.test’).attr(‘class’,‘title’)，注意：設置不是添加，并不會對class的值進行追加title，而是將class的值整體替換成title。
.removeArrt()	將元素節點的某個屬性刪除	$(’.class’).removeAttr(‘title’)，將所有類名中包含class的元素刪除上面的title屬性

元素節點操作

方法描述示例

$(’<li title=“10”></li>’)	使用$()方法，將一對HTML標記包裹起來就可以創建一個DOM對象，之后通過節點添加的方法將元素節點加入指定的dom中	let title = ‘<h1 title=“10”>標題</h1>‘let $title = $(t i t l e)$ (’.class’).append( $KaTeX parse error: Undefined control sequence: \< at position 71: …如：let title = '\?<?h1 title="10"\>…$ (’.class’).append(title)；
append()	向每個匹配的元素內部追加內容，追加的內容會被放在元素內部的最后面	$(’.class’).append(’<h1 title=“10”>)
appendTo()	將內容，添加在指定元素的內部的最后面，與append的區別在于，$(a).append(b)，是將b添加到a里面，appendTo則正好相反，是將a添加到b里面	$(’<h1 title=“10”>).append(’.class’)
prepend()	向每個匹配的元素內部追加內容，追加的內容會被放在元素內部的最前面	$(’.class’).prepend(’<h1 title=“10”>)
prependTo()	將內容，添加在指定元素的內部的最前面，與prepend的區別在于，$(a).prepend(b)，是將b添加到a里面，prependTo則正好相反，是將a添加到b里面	$(’<h1 title=“10”>).prepend(’.class’)
after()	向所有匹配的元素的后面添加指定內容，與append等不同的是，追加的位置不是內部，而是外部，是同級元素	$(’.class’).after(’<h1 title=“10”>)//添加后的示例<div class=‘class’></div><h1 title=‘10’></h1>
insertAfter()	將內容，添加在指定元素的后面，與after的區別在于，$(a).after(b)，是將b添加到后面，insertAfter則正好相反，是將a添加到b后面	$(’<h1 title=“10”>).insertAfter(’.class’)
before	向所有匹配的元素的前面添加指定內容，與append等不同的是，追加的位置不是內部，而是外部，是同級元素	$(’.class’).before(’<h1 title=“10”>)//添加后的示例<h1 title=‘10’></h1><div class=‘class’></div>
.remove()	將選擇的節點刪除（包括這個節點的子元素），這個方法會有一個返回值，返回值是被刪除節點元素，另外這個方法可以有參數，參數的方式和選擇器書寫規則一樣，可以進一步限定刪除元素的范圍	$(’.class’).remove()，將所有類名中有class的元素以及其子元素全部刪除，示例1：let li = (‘ul li:eq(2)’).remove()，先獲取ul li下第二個子元素，然后將其在DOM樹中刪除示例2:(‘ul li’).remove(‘li[title=菠蘿]’)，將所有ul下的li中title值等于“菠蘿”的li刪除
.empty()	與其說是刪除節點，不如說是清空指定節點里面的所有子元素	$(‘ul li’).empty()，將所有ul下li里面的所有子元素全部清空（不包含li本身，是li里面的所有子元素）
.clone()	這個方法有一個參數，是一個布爾值，當為true的時候，是進行深度拷貝，包括綁定在上面的事件等也會被一起拷貝，如果不寫參數，則僅僅是拷貝html結構	$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsick(function(){$ (this).clone().appendTo(’#test’)})為ul 下所有的li添加點擊事件，點擊后將本li以及其子元素添加到id為test的元素內
replaceWith()	將所有選定元素節點替換成指定內容	$(‘p’).replaceWith(<h1>你好</h1>’)，將所有p元素替換成<h1>你好</h1>
replaceAll()	將所有指定內容替換元素，與replaceWith()的區別在于， $(a) . r e p l a c e W i t c h (b) ，是將所有 b 替換掉 a ，而$ (a).replaceAll(b)則正好完全相反，是將a全部替換掉b	$(’<h1>你好</h1>’).replaceWith(‘p’)，將所有p元素替換成<h1>你好</h1>
.wrap()	將所有匹配的元素每一個單獨用指定的標簽包裹	$(‘strong’).wrap(’<b><b/>’)，將每一個strong標簽用b標簽包裹
.wrapAll()	將匹配到的元素統一包裹，區別在于，wrap是每一個都單獨包裹，而wrapAll則是如果有多個連續在一起，則統一打包	$(‘strong’).wrapAll(’<b><b/>’)示例，執行后：<b><strong>1</strong><strong>1</strong></b>
.wrapInner()	將匹配元素的內部的所有內容一起包裹	$(‘strong’).wrapInner(’<b><b/>’)示例：<strong><b>1</b></strong>

樣式操作

方法描述示例

adClass()	對選擇的jquery對象進行追加樣式，也就是在原來的class值上添加新的值，如果添加多個，那么就用空格間隔，比如addClass(‘test1 test2’)	<li class=‘title’></li>//對所有類名中包含title的元素節點追加類名test$(.title’’).addClass(‘test’)//追加后<li class=‘title test’></li>
removeClass()	對選擇的jquery對象進行刪除樣式，如果刪除多個，那么就用空格間隔，比如removeClass(‘test1 test2’)	<li class=‘title test’></li>//對所有類名中包含title的元素節點刪除類名test$(.title’’).addClass(‘test’)//刪除后<li class=‘title’></li>
toggleClass()	來回切換樣式，如果目標元素上的指定類名存在，就刪除，如果類名不存在，就添加	$(.title’’).toggleClass(‘test’)
hasClass()	判斷某個類名是否存在，返回值是一個布爾值，如果存在返回true，如果不存在返回false	//判斷.title上是否有類名test，如果有，返回true，如果沒有返回false$(.title’’).hasClass(‘test’)

設置和獲取HTML、文本和值

方法描述示例

html()	類似js中的innerHTML方法，可以設置某個元素的HTML內容，注意，該方法會將選中的元素節點內部的所有內容替換成指定的內容	//設置HTML $(^{'} . t e s t^{'}) . h t m l (^{'} 你好^{'}) / / 獲取 H T M L l e t h t m l =$ (’.test’).html()
text()	設置或獲取指定元素下的文本內容，和html()不同的是，html()獲取的內容包括HTML標記，而text()則只獲取文字內容，不會獲取HTML標記	//設置$(’.test’).text(‘你好’)//獲取let html = $(’.test’).text()
val()	設置或獲取元素的value值，比如下拉選擇，單選框，輸入框，多選框的value值	//設置$(‘input’).val(‘title’)//獲取let val = $(‘input’).val()

遍歷節點

方法描述示例

children()	遍歷指定元素節點下的所有子節點，可以設置參數增加限定條件，注意：僅僅是子節點，不包括孫節點以及再往下的后代元素節點	//找到所有類名中包含類名test的元素下的所有子節點，然后為其設置了一個title屬性，值為你好 $(^{'} . t e s t^{'}) . c h i l d r e n () . a t t r (^{'} t i t l e^{'},^{'} 你好^{'}) / / 找到所有類名中包含類名 t e s t 的元素下的所有子節點，只為其中的 d i v 元素設置了一個 t i t l e 屬性，值為你好$ (’.test’).children(‘div’).attr(‘title’,‘你好’)
next()	找到指定元素的下一個節點，注意是同級元素	//找到所有類名中包含類名test的元素下一個同級元素，然后為其設置了一個title屬性，值為你好$(’.test’).next().attr(‘title’,‘你好’)
prev()	找到指定元素的上一個節點，注意是同級元素	//找到所有類名中包含類名test的元素上一個同級元素，然后為其設置了一個title屬性，值為你好$(’.test’).prev().attr(‘title’,‘你好’)
siblings()	找到指定元素節點的所有其他同級元素（不包括選定節點）	//找到所有類名中包含test的元素的所有其他同級元素，為其設置title屬性，值為你好$(’.test’).siblings().attr(‘title’,‘你好’)

CSS-DOM

簡單的說就是獲取或者設置對象的CSS樣式

css()可以獲取或者設置指定元素的style樣式，假如設置的css樣式中帶有“-”，比如font-size，那么就使用駝峰寫法，將首字母大寫，比如寫成：fontSizelet color =

(^{'} . t e s t^{'}) . c s s (^{'} c o l o r^{'}),

(’.test’).css(‘fontSize’,‘18px’),$(’.test’).css({‘fontSize’:‘18px’,‘color’:’#888888’})

height()	可以獲取或者設置指定元素的高度	獲取let height = $(^{'} . t e s t^{'}) . h e i g h t () 設置，默認單位是 p x ，$ (’.test’).height(100)
width()	可以獲取或者設置指定元素的寬度	獲取let width = $(^{'} . t e s t^{'}) . w i d t h () 設置，默認單位是 p x,$ (’.test’).width(100)
offset()	這個方法有兩個屬性，可以獲取指定元素的相對于窗口的偏移量，也就是距離頂部多少距離，距離左側多少距離	//左側 $(^{'} . t e s t^{'}) . o f f s e t () . l e f t / / 頂部$ (’.test’).offset().top
position()	這個方法也有兩個屬性，獲取的是相對于最近一個position屬性是relative或者absolute屬性的左側和頂部距離	//左側 $(^{'} . t e s t^{'}) . p o s i t i o n () . l e f t / / 頂部$ (’.test’).position().top
scrollTop()	元素滾動條距離頂部的距離，常用在元素內容高度超出視窗內容時，出現滾動條，點擊按鈕按鈕后滾動到指定位置	//滾動條滾動到高度100px的位置$(’.test’).scrollTop(100)

jQuery中的事件和動畫

加載DOM

//javascript window.onload={... } //jq$(document).ready(function(){...})//簡寫$(function(){...})

區別：
window.onload會在這個文檔全部加載完成后執行，包括圖片加載，如果寫有多個window.onload，那么后面的會覆蓋前面的，前面先寫的將不再執行；

$(function())會在DOM加載結束后就會執行，不需要等到圖片全部下載完成，如果寫多個，將逐一執行，并不會產生后面的覆蓋前面的清空；

事件綁定

on()兩個參數，第一個是事件類型，第二個是事件觸發之后的回調函數；多個事件可以用空格隔開；第一個事件類型有：blur，focus，load，resize，scroll，unload，click，dblclick，mousedown，mouseup，mousemove，mouseover，mouseout，mouseenter，mouseleave，change，select，submit，keydown，keypress，keyup，error//綁定點擊事件，也就是元素點擊之后會觸發第二個函數

test').on('click',function(){})//多個事件

(’.test’).on(‘mouseover mouseout’,function(){})

off()	為綁定事件的對象解除綁定，可以有參數，參數是綁定的函數名，如果不傳函數名，那么會將對象上綁定的所有事件一起清除	//解綁所有綁定事件 $(^{'} . t e s t^{'}) . o f f () / / 解綁指定 t e s t 上的點擊事件，并且是上面名為 f n 1 的函數$ (’.test’).on(‘click’,fn1=function(){})$(’.test’).off(‘click’,‘fn1’)
one()	只能生效一次的事件	//.test的點擊事件只有第一次點擊有效，之后點擊無效$(’.test’).one(‘click’,fn1=function(){})
hover(enter,leave)	這是一個合成事件,模擬了鼠標的懸浮事件，有兩個參數，風別是兩個方法，第一個是鼠標移入時觸發的方法，第二個是鼠標移出時觸發的方法	$(’.test’).hover(function(){},function(){})
toggle(fn1,fn2,…funN)	這也是一個合成事件，每一次單擊元素會逐一觸發里面的函數，比如點擊一次觸發fn1，點擊第二次觸發fn2，第N次觸發fnN，之后再從fn1開始循環觸發	$(’.test’).toggle(function(){},function(){})
event.stopPropagation()	阻止事件冒泡	$(’.test’).on(‘click’,function(event){event.stopPropagation()})
event.preventDefault()	阻止默認事件	$(’.test’).on(‘click’,function(event){event.preventDefault()})
event.type	獲取當前事件類型	$(’.test’).on(‘click’,function(event){//返回的是clickevent.type;})
event.target	獲取當前觸發事件的元素	$(’.test’).on(‘click’,function(event){//返回的是當前.test這個元素event.target;})
event.pageX	當前光標處于頁面的x坐標	$(’.test’).on(‘click’,function(event){event.pageX;})
event.pageY	當前光標處于頁面的y坐標	$(’.test’).on(‘click’,function(event){event.pageY;})
trigger()	模擬事件，打開頁面后，模擬用的某個某個操作，當然模擬是指模擬操作，操作后執行的代碼還是要正常寫的，比如，模擬了一個點擊按鈕，點擊之后執行的函數要正常寫注意：該方法會執行瀏覽器的默認操作，比如$(‘input’).trigger(‘focus’)；input會執行focus事件，并且會得到焦點	//模擬用戶點擊了按鈕$(’.test’).trigger(‘click’)
triggerHandler()	執行事件，但是不會觸發默認操作。比如上面的input的focus事件，input會執行focus事件，但是不會得到焦點	$(‘input’).triggerHandler(‘focus’)

命名空間

為事件可以添加命名空間，這樣刪除事件時只需要刪除指定的命名空間即可

//這個.plugin就是命名空間 $('.test').on('click.plugin',function(event){})//.test上點擊事件的第二個命名空間 $('.test').on('click.aaa',function(event){})//.test上點擊事件沒有命名空間 $('.test').on('click',function(event){})

因此，刪除上面的某一個點擊事件，只需要

//只刪除了.aaa這個點擊事件,沒有命名的和不同命名的事件都不會被刪除 $('.test').off('.aaa')

因此模擬點擊事件的時候需要觸發指定的命名空間的點擊事件

//click后面的感嘆號!，就是匹配不包含在命名空間的click方法 $('.test').trigger('click!')//如果需要匹配所有的click，正常模擬就可以了 $('.test').trigger('click')

動畫

show()將對象的display的值改成block，參數一共有兩個，第一個可以是規定的關鍵字,slow，normal，fast也可以是具體的毫秒，第二個是回調函數，也就是當show()函數完全執行完畢后執行的函數$(’.test’).show(1500,function(){})

hide()	將對象的display的值改成none，參數一共有兩個，第一個可以是規定的關鍵字,slow，normal，fast也可以是具體的毫秒，第二個是回調函數，也就是當hide()函數完全執行完畢后執行的函數	$(’.test’).hide(1500,function(){})
fadeIn()	將對象的透明度opacity逐漸改變至完全顯示，參數一共有兩個，第一個可以是規定的關鍵字,slow，normal，fast也可以是具體的毫秒，第二個是回調函數，也就是當fadeIn()函數完全執行完畢后執行的函數	$(’.test’).fadeIn(1500,function(){})
fadeOut()	將對象的透明度opacity逐漸改變至完全隱藏，參數一共有兩個，第一個可以是規定的關鍵字,slow，normal，fast也可以是具體的毫秒，第二個是回調函數，也就是當fadeOut()函數完全執行完畢后執行的函數	$(’.test’).fadeOut(1500,function(){})
slideUp()	只會改變對象的高度，將對象的高度由下至上隱藏，參數一共有兩個，第一個可以是規定的關鍵字,slow，normal，fast也可以是具體的毫秒，第二個是回調函數，也就是當slideUp()函數完全執行完畢后執行的函數	$(’.test’).slideUp(1500,function(){})
slideDown()	只會改變對象的高度，將對象的高度由上至下顯示，參數一共有兩個，第一個可以是規定的關鍵字,slow，normal，fast也可以是具體的毫秒，第二個是回調函數，也就是當slideDown()函數完全執行完畢后執行的函數	$(’.test’).slideDown(1500,function(){})
animate()	自定義動畫這個函數最為強大，上面寫的三對都是改變單一屬性，而這個可以自定義多個屬性同時生效；語法結構：animate(params,speed,callback)params:是一個包含樣式屬性和值的對象，比如{height:‘show’,opacity:‘show’}speed：速度，可選callback：動畫執行完畢后執行的函數	$(’.test’).animate({{height:‘show’,opacity:‘show’},1500,function(){})//animate可以執行累加或者累減的計算，具體看例子
.stop()	停止正在執行的動畫，說到這個，就要先說到動畫的執行隊列，每一次jq在執行動畫的時候，都會將動畫放入一個隊列中，依次執行，很多時候動畫還沒有結束，但是事件以及結束了，比如：鼠標移入移出動畫，鼠標移入的時候觸發了一個動畫，但是動畫還沒有結束，鼠標就移出了，此時還要等到移入的動畫結束才可以執行移出的動畫，這顯然是很不科學的，因此可以通過.stop()方法，將正在執行的動畫結束掉，執行新的動畫	$(’.test’).stop().animate({left:‘300’},200)
is(’:animated’)	判斷元素是否處于動畫狀態，實際用處時，很多時候要避免動畫的累積，比如上例中說的鼠標移入移出，如果快速來回多次移入移出鼠標，那么動畫將會累積，如果不用stop()，那么可以判斷當前元素動畫是否正在執行，如果當前元素正在執行動畫，那么就不需要再添加動畫了	if(!$(element).is(’:animated’)){//如果沒有執行動畫，添加新動畫}
toggle()	切換元素的可見狀態，相當于把hide()和show()組合起來了	$(’.test’).toggle()
slideToggle()	切換元素的高度狀態，相當于將slideUp()和slideDown()組合起來了	$(’.test’).slideToggle()
fadeTo()	該方法可以將元素的不透明度切換至指定狀態	$(’.test’).fadeTo(600,0.2)

累加或者累減動畫

//每一次對.test元素進行點擊，它離左側的距離就增加500px $('.test').on('click',()=>{$(this).animate({left:'+=500'},300) })//每一次對.test元素進行點擊，它離左側的距離就減少200px $('.test').on('click',()=>{$(this).animate({left:'-=200'},300) })

jQuery對表單，表格的操作

.focus()這個方法其實和css選擇器中的：focus類似，但是ie6不支持除hover之外的選擇器，因此可以使用這個代替，具體功能就是當聚焦時觸發函數$(‘input’).focus(function(){})

復選框的全選，反選，和全不選

//全選 $('[name=item]:checkbox').attr('checked',true) //全不選 $('[name=item]:checkbox').attr('checked',false) //反選 $('[name=item]:checkbox').each(()=>{$(this).attr('ckecked',!$(this).attr('ckecked')) })

包含指定文本內容高亮

//通過選擇器:contains實現 $('tr:contain("王五")').addClass('selected')

本節實際上書上并沒有什么特殊的內容，只是講了一些表格中針對元素操作時會使用到的方法，而這些方法就是前文中說到的那些，只是做了一個組合，因此沒有實際的新內容，表格表單的部分會在后面只做一個實例：表單插件的篇幅中實際使用；

jQuery和Ajax

load(url [,data] [,callback])

url：請求的HTML頁面的URL地址；
data：可選，發送至服務器的key/value；
callback：可選，請求完成后執行的回調函數；

通常使用在將html頁面加載到指定位置，比如：后臺管理頁面，根據導航按鈕，在右側或右側加載指定的頁面，實現不刷新頁面的情況下加載不同的內容

如果第二個data，沒有參數，那么默認采用GET的方式，如果有會自動轉成POST方式
**

//點擊類名為btn的元素后，在id為test的元素內加載了testHtml頁面 $('.btn').on('click',function(){$('#test').load('testHtml.html') })//GET方式 $('#test').load('testHtml.html',function(){})//POST方式 $('#test').load('testHtml.html',{name:'rain',age:'22'},function(){})

$.get(url [,data] [,callback] [,type])

url：請求的URL地址；
data：可選，發送至服務器的key/value數據會作為QueryString附加到請求的URL中；
callback：可選，載入成功時回調函數（只有當Response的返回狀態是success才會調用該方法）自動將請求結果和狀態傳遞給該方法；
type：可選，服務器端返回內容的格式，默認不填jq會自行判斷內容的格式，比如：xml，html，script，json，text和_default；

//點擊類名為btn的元素后，在id為test的元素內加載了testHtml頁面 $('.btn').on('click',function(){$.get('服務器地址',{user:$('#userInput').val(),content:$('#content').val()},function(data,status){//data，請求結果后返回的數據//status，請求返回的狀態$('#div').html(data)}) })

$.post(url [,data] [,callback] [,type])

$. p o s t () 和$ .get()的用法基本一致，唯一的區別在于提交的方式，一個是GET一個是POST，題外話：

POST和GET的區別：

GET請求會講參數跟在URL后面發送至服務器，而POST的參數會放在HTTP的消息體中傳遞，相對而言，POST的參數要隱藏的好一點，但如果是有心人的話都不太可靠；
GET方式對傳輸的數據大小有限制，通常不能超過2KB，POST理論上沒有限制；
GET的方式請求的數據會被瀏覽器緩存起來，因此其他人可以從瀏覽器的歷史記錄中讀取這些數據，假如賬號密碼是用GET請求的，那么賬號密碼也會被緩存，而POST的請求數據不會被緩存，這一點上看如果數據對安全性有一定要求，那么要用POST發送請求；

//點擊類名為btn的元素后，在id為test的元素內加載了testHtml頁面 $('.btn').on('click',function(){$.post('服務器地址',{user:$('#userInput').val(),content:$('#content').val()},function(data,status){//data，請求結果后返回的數據//status，請求返回的狀態$('#div').html(data)}) })

$.getScript(url,success(response,status))

通過 AJAX 請求來獲得并運行一個 JavaScript 文件

url：url地址
success：回調函數，會在javaScript文件成功載入后運行，有兩個參數，第一個是返回的數據，第二個是返回的狀態

//點擊類名為btn的元素后，加載了一個test.js的js文件 $('.btn').on('click',function(){$.getScript('xxx/test.js',function(data,status){//data，請求結果后返回的數據//status，請求返回的狀態$('#div').html(data)}) })

$.getJSON(url,success(response,status))

getJSON() 方法使用 AJAX 的 HTTP GET 請求獲取 JSON 數據

url：url地址
data：可選，發送的數據
success：回調函數，會在javaScript文件成功載入后運行，有兩個參數，第一個是返回的數據，第二個是返回的狀態

//點擊類名為btn的元素后，加載了一個test.js的js文件 $('.btn').on('click',function(){$.getJson('xxx/test.json',function(data,status){//data，請求結果后返回的數據}) })

$.ajax(option)

這個是jq中最底層的Ajax方法，其他所有的方法都是用這個方法實現的，option一共有以下參數:

參數類型說明

url	String	請求數據的服務器地址
type	String	請求數據的方式，是用POST還是用GET，默認是GET
timeout	Number	請求的超時時間，單位毫秒
data	Object或者String	發送到服務器的數據，可以是一個對象也可以是個字符串，需要跟后臺開發人員協定
dataType	String	預期返回的數據類型，如果不指定，那么jQuery將自動根據Http包含的信息進行判斷類型有：xml：xml文檔html：html信息，如果是包含script的html，那么script會在插入DOM時運行script：返回的純文本javaScript代碼，不會自動緩存結果json：json數據jsonp：JSONP格式text：純文本字符串
beforeSend	Function	發送請求錢可以修改XMLHttpRequest對象的函數，比如可以添加自定義的請求頭
complete	Function	請求完成后調用的回調函數，無論請求成功還是請求失敗
success	Function	請求成功后的回調函數，這個函數默認有兩個參數：第一個：服務器返回的數據第二個：返回數據的狀態字符串
error	Function	請求失敗后的回調函數，這個函數有三個默認的參數：第一個：XMLHttpRequest對象第二個：錯誤信息第三個：可選，捕獲的錯誤對象
global	Boolean	默認是true，代表是否觸發全局的Ajax時間，具體事件看下一章節

//點擊類名為btn的元素后，發送了一個請求 $('.btn').on('click',function(){$.ajax({type:'POST', //指定方式是POST，否則默認是GETurl:'test.js', //服務器地址data:{ //數據name:'yzq',content:'測試'},success(data,status){//請求成功是觸發的函數},error(xml,status,error){//請求失敗是觸發的函數}}) })

jQuery中的Ajax全局事件

全局事件，個人理解就是當頁面上只要發生Ajax請求，就會根據情況觸發

方法描述示例

.ajaxStart()	任意ajax請求開始時觸發，比如請求開始時需要觸發加載中的加載動畫	$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsart(function(){$ (’#loading’).show()})
.ajaxStop()	任意ajax請求結束時觸發，比如結束時需要將加載框隱藏	$(document).ajaxStart(function(){ $(’#loading’).hide()})
.ajaxComplete()	任意ajax請求完成時觸發，這個和ajaxStop()基本類似	$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsete(function(){$ (’#loading’).hide()})
.ajaxError()	任意ajax請求發生錯誤時執行	$(document).ajaxComplete(function(){alert(‘請求錯誤了’)})
.ajaxSend()	任意ajax請求發送前執行必需。規定當請求成功時運行的函數。額外的參數：event包含 event 對象xhr - 包含 XMLHttpRequest 對象options - 包含 AJAX 請求中使用的選項	$(document).ajaxSend(function(e,xhr,opt){alert(‘請求錯誤了’)})
.ajaxSuccess()	任意ajax請求成功時執行的函數	$(document).ajaxComplete(function(){ alert(‘請求成功了’)})

插件的使用和寫法

插件也稱為擴展，是一種遵循一定規范的應用程序接口編寫的程序；

插件的種類

大致可以分為三種：

封裝對象方法的插件：這種就是將對象方法封裝起來，然后通過jQuery對象進行操作，比如jQuery自帶的parnet()，addClass()等等操作DOM的方法，都是此類；
封裝全局函數插件：可以將獨立的函數駕到jQuery命名空間下，比如常用的 $. a j a x () 方法，除去空格的$ .trim()方法等；
選擇器插件：個別情況下，會需要用到選擇器插件，雖然jQuery的選擇器十分強大，但還是需要擴展的；

基本要點

jQuery插件的文件命名規則為：jquery.自定義名字.js，比如：jq.color.js；
所有對象的方法都應該附加到jQuery.fn對象上，而所有的全局函數都應該附加到jQuery本身上；
在插件內部，this指向的是當前通過選擇器獲取的jQuery對象，而不像一般方法那樣指向的是DOM元素；
可以通過this.each遍歷所有元素；
所有的方法或函數插件，都應該以分號結尾，否則壓縮的時候可能出現問題，為了更穩妥寫，甚至可以在插件頭部頁加上一個封號；
插件應該返回一個jQuery對象，以保證插件可以鏈式操作，除非插件需要返回的是一些需要獲取的量，例如字符串或者數組等；
避免在插件內部使用$作為jQuery對象別名，而應該使用完整的jQuery來表示，這樣可以避免沖突。當然也可以利用必報這種技巧來回避這個問題；

模版格式

//書上推薦 ;(function($){//這里是插件代碼let foo;let bar = function(){}//將函數添加到$對象上$.BAR = bar; })(jQuery)

用一個立即執行函數，將真正的插件代碼分離在函數體內部，這樣就不用擔心變量污染的情況，寫在函數體內的變量外部訪問不到，然后通過給$對象也就是jQuery對象添加屬性BAR使得外界可以訪問函數bar；

插件的機制

jQuery提供了兩個用于擴展jQuery功能的方法，即**jQuery.fn.extend()方法和jQuery.extend()**方法，這兩個方法都接收一個Object對象作為參數；

jQuery.fn.extend()

用于擴展三種類型插件中的第一種，比如現在要做一個color()插件，該插件有兩個功能

為匹配元素設置顏色
獲取匹配元素中的第一個元素的顏色

;(function($){$.fn.extend({color:function(value){//插件代碼//判斷是否有value，如果有傳入value值，那么就代表是設置，如果沒有那么就代表是獲取if(!value){//此處的this，指向的是當前調用該方法的DOM元素return this.css('color');}else{return this.css('color',value);}}}) })(jQuery)

jQuery.extend()

用于擴展后兩種插件以及擁有一個十分強大的功能：擴展已有的Object對象；

//這個方法會講obj1，obj2等等對象合并到target對象上，如果有相同的屬性名，那么后面的就會覆蓋前面的 jQuery.extend(target,obj1,obj2,...,objN);

因此，jQuery.extend()經常用于設置插件方法的一系列默認參數，比如：

//.test上調用validata()方法，并傳遞過去了一個對象 $('.test').validate({name:'bar',length:5 }) //插件 ;(function($){let DEFAULT_OPTION={name:'BAR'}$.fn.extend({validate:function(option){//如果用戶有傳配置，那么配置中的配置項將覆蓋默認配置，如果沒有傳，那么就將啟用默認配置let newOption = jQuery.extend(DEFAULT_OPTION,option) })})(jQuery);

如果是需要對現有的全局方法進行擴展，那么就可以這樣

;(function($){$.extned({ltrim:function(text){return (text||'').replace(/^\s+/g,"");}})})(jQuery);//調用 jQuery.ltrim(' test ')

案例

制作一個輕量級表單驗證的插件，要求：

可以驗證不同類型的輸入框，至少要有以下幾種驗證：手機號，身份證號，郵箱，必填項；
可以自定義驗證規則，如果沒有自定義，那么將啟用默認驗證規則；

附錄

jQuery的性能優化

ID選擇器>標簽選擇器>類選擇器>屬性選擇器
使用緩存對象，盡量不要沒做一次DOM操作使用選擇器獲取一次DOM，當然如果使用的是鏈式操作那就沒有問題，比如:

let dom = $('#id'); dom.css('color','#333333'); dom.on('click',function(){}) //或者 dom.css('color','#333333').on('click'.function(){})

循環操作DOM時，可以等循環結束一次性插入DOM，比如：

//比如有數組的長度100，需要將每一項都制成li插入ul， //那么最好不要沒循環一次就插入一次DOM，這樣插入100次//可以這樣,先將數組遍歷一遍，將內容以字符串的方式存儲，之后一次性插入DOM let list = [...]; let strLi = ''; for(let i = 0;i<list.length;i++){strLi += '<li>'+list[i]+'</li>' } $('#id').html(strLi);

使用事件代理，而不是每一個元素綁定事件

$(table).on('click',function(e){let target = $(e.target);//... })

為了更好的重用，一個功能盡量打包成插件

jQuery技巧

禁用右擊

$(function(){$(document).on('contextmenu',function(e){return false;}) })

判斷元素是否存在

//通過length判斷是否存在 if($('#id').length){//do someing }

總結

以上是生活随笔為你收集整理的《锋利的jQuery》再次阅读及摘要的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： wget 命令下载网络文件到指定目录
下一篇： oracle 位移运算符,Oracle“

编程问答

《锋利的jQuery》再次阅读及摘要

前言

優勢

安裝

jQuery對象和DOM對象

選擇器

基本選擇器

層次選擇器

過濾選擇器(僅常用)

選擇器中的注意事項

特殊字符

引號問題

空格問題

DOM操作

查找元素節點

對元素節點的操作

元素節點的屬性

元素節點操作

樣式操作

設置和獲取HTML、文本和值

遍歷節點

CSS-DOM

jQuery中的事件和動畫

加載DOM

事件綁定

命名空間

動畫

累加或者累減動畫

jQuery對表單，表格的操作

jQuery和Ajax

load(url [,data] [,callback])

$.get(url [,data] [,callback] [,type])

$.post(url [,data] [,callback] [,type])

POST和GET的區別：

$.getScript(url,success(response,status))

$.getJSON(url,success(response,status))

$.ajax(option)

jQuery中的Ajax全局事件

插件的使用和寫法

插件的種類

基本要點

模版格式

插件的機制

jQuery.fn.extend()

jQuery.extend()

案例

附錄

jQuery的性能優化

jQuery技巧

總結

設置和獲取HTML、文本和值