jQuery學習
十一月 02, 2018
-
惡毒的期中考試hade passed by了哈哈哈，於是乎想記錄一下這幾天學習的新技術
-
傳說中火了很多年的Js庫–jQuery😱
-
你可能會心生疑問(一臉懵逼)了，這tm什麼鬼？能有啥用啊？
-
打個比方，很久很久以前有兩個農民，小王&小李，爲了抵抗不久就要到來的冰河世紀，他們拼命地拿着鏟子種地，這天，他們又在種地，豔陽高照，小李問小王~嗨，傻子，咱們買個播種機吧！小王蔑視一笑，敗家玩意！那玩意貴死！種你地去！小李憤憤而去，硬是買來了播種機，從此以後種地速度一日千畝！甩了小王八條街！最後悽慘的小王凍死在了門邊上。。
-
以上純屬扯皮🙃，當然jQuery就像是小李買的播種機，可以提高前端開發寫代碼的效率，和原生js代碼結合編寫，會有出其不意的驚豔效果。
-
GitHub真的是個好東西嘻嘻嘻，於是我先扒了一下 jQuery的官方文檔😃
-
好吧這個是英文的。又一次下定決心要好好學英語。。
-
不甘心啊~來看中文的！👉地址
-
文檔有困難？上視頻👉地址
-
我真的是拼了老命了😂
-
以下是我的總結各種知識點，各種大深坑😏
-
寫js代碼的時候，jQuery提供了一個神奇的函數，文檔就緒函數
$(function(){})，它是在DOM結構加載完成以後才執行的函數，因此w3school推薦所有代碼寫在這個函數的大括號裏面，方便後續的js操作。 -
js是jQuery他爹，js對象穿的衣服(函數/方法)和jQuery對象穿的衣服(函數/方法)不一樣的哈，人言Every thing is object(萬物皆對象)，jQuery又給補了一句A kind of object can transfer to another kind of object. 直譯過來就是原生js對象和jQuery對象是可以相互轉化的，即
$(obj)和$obj.get(0) -
jQuery可以進行函數調用的鏈式操作，返回值如果是布爾類型的就不能鏈式操作了😭。
-
$(‘選擇器:target’)的意思是當選擇器選擇的元素作爲目標的時候被選中，並且！！返回了一個jQuery對象！！ -
❤Tips: 元素被選中是需要時間的，代碼執行速度太快了，根本來不及反應緊接着本應執行的函數(方法)，解決方法可以是利用設置定時器setTimeout(function(){},1000)，或者因爲css本身執行速度超級快，也可以通過把:target寫在css樣式裏面就可以忽略這個反應時間了。
-
js表達式不能直接放在
$(“”)裏面，會被識別爲字符串，應使用字符串拼接的方式。 -
如果把多次使用到的對象放到自定義的變量裏面，變量命名以$開頭，這樣代碼簡潔速度快。
-
元素被認爲是隱藏或顯示的情況
- css-display值是none。
- type=“hidden”的表單(form)元素。
- 寬度和高度都顯式設置爲0。
- 一個祖先元素是隱藏的，則該元素不會在界面上顯示。
- 而visibility:hidden或opacity:0被認爲是可見的，因爲他們仍然佔據佈局空間。
-
:first-child是第一個孩子👶，而:first-of-type是🧑父元素的孩子中第一次出現的元素。 -
:nth-child(數/表達式eg:2n就是偶數的意思)整個表達式索引值是從1開始，:eq()的索引值是從0開始，:nth-child()多用於找規律地選中元素。 -
對象自定義屬性 : jQuery中，
$(“#div”).attr(“aa”,123)就相當於原生js中的obj.setAttribute(“屬性名”,“屬性值”)。取值就在使用attr時傳一個參數，設置值傳兩個參數。同樣的，prop()方法相當於原生js的對象.屬性(屬性不會顯示在DOM元素中)，設置值和獲取值的方法同上。 -
我們知道form表單的checkbox(複選框)中只要有checked屬性(默認勾選的屬性)，無論值是什麼都會被默認選中，但是在jQuery中通過對象.attr(“checked”,false);就不會被選中。。
-
有eq選擇器也有一個eq()方法，功能都一樣🙆♂️
-
forEach(function(elem, index, array){})循環是原生js的寫法，對應jQuery中的each(index, elem, array)函數，二者都返回原生對象
-
若要檢索和更改DOM屬性，比如元素的checked，selected或disabled屬性，請使用
.prop()方法！！！ -
jQuery中創建元素—-eg.var $div4 = $(‘’)
-
jQuery中子元素
appendTo父元素，原生js中父元素appendChild子元素 -
jQuery中的
.text()和.html()取值都是元素的content，但是設置值的時候，如果將元素的內容寫成標籤，.text()直接以字符串的形式輸出，.html()則以元素的形式輸出。 -
jQuery的樹遍歷中，.closest()開始於當前元素，在DOM樹中向上遍歷，直到找到與提供的選擇器相匹配的元素爲止，返回0或1個jQuery對象；.parents()開始於父元素，向上遍歷DOM樹到文檔的根元素，每個祖先元素祖先元素加入到臨時集合，如果提供一個選擇器，則會使用該選擇器在集合中進行過濾，返回0或1或多個jQuery對象。
-
jQuery封裝的mouseenter()事件和原生的mouseover()事件的區別在於前者解決了鼠標從元素外層向裏層移入的時候發生的內層元素事件冒泡；同樣的原生的mouseout()也有事件冒泡，相應的jquery解決方法是封裝了mouseleave()事件
-
.fouse()獲取焦點問題默認不會冒泡，但是jquery封裝了.fousein()方法就會冒泡；同樣的，.blur()在元素失去焦點的時候觸發，默認不會事件冒泡，但是jquery封裝的.fouseout()方法就支持事件冒泡/
-
$(“#div”).hover(function(){鼠標劃入觸發事件}, function(){鼠標劃出觸發事件});.hover()同時綁定的是mouseenter()和mouseleave()事件，不支持事件冒泡，和寫mouseenter()和mouseleave()`的鏈式操作是一樣的。
-
event.stopProppagation()防止事件冒泡到DOM樹上，不觸發任何祖先元素的事件處理函數，這個方法不接受任何參數。
-
jQuery封裝的動畫函數中，.hide()和.show()都可以傳參數設置動畫時間(以毫秒爲單位)，.toggle()是這兩個函數的綜合；fadeIn()和fadeOut()是元素淡入和淡出(底層js是用定時器改變的透明度opacity)，設置的延遲時間duration可以用字符串‘fast’和‘slow’分別代表200和600毫秒的延時，不設置則默認400毫秒的延時；.fadeToggle()就是綜合…in和…out啦~；slideDown()和slideUp()分別是向下展開和向上收起動畫效果，同樣可以設置延遲時間，slideToggle()綜合…，toggle即切換。
-
.not()會讓代碼更加易讀，而:not()會構造一個比較複雜的選擇器(尤其傳的參數需要拼接字符串的時候)，推薦用前者進行篩選元素。
-
:parent和:empty是正好相反的，前者選中內容不是空的元素，後者選中內容是空的元素。
-
jq對象.val()方法可以返回input的value屬性值。
-
🎄樹遍歷中，.children()找滿足條件的親子代元素，.find()找子孫後代👌所有滿足條件的元素，.children()不返回文本節點，讓所有子元素包括使用文字和註釋節點，建議使用.contents()。
-
.trigger()扳機函數有事件冒泡，在事件處理程序中返回false或調用事件對象中的.stopPropgation()方法可以使事件停止冒泡。triggerHandler()沒有事件冒泡，並且如果要觸發jquery綁定的事件處理函數而不觸發原生的事件(瀏覽器的默認行爲eg—表單的默認提交)，使用triggerHandler()。e.preventDefault()默認事件行爲將不再被觸發，triggerHandler()與普通的方法返回jquery對象(這樣可以鏈式操作)相反，triggerHandler()返回最後一個處理的事件的返回值，如果沒有觸發任何事件，會返回undefined，triggerHandler()不能進行鏈式操作。
-
點擊事件: a)click點擊事件; b)dblclick雙擊事件。
-
detach()和remove()都可以移除DOM元素，remove()有返回值是刪除掉的jQuery對象，如果把返回的jq對象再append()進來，綁定的事件就失效了👉給後插入的元素綁定事件: a)通過事件冒泡將事件委託給父元素，當點擊子元素時，由於事件冒泡，會觸發父元素綁定的事件(on方法的第二個參數option會指明真正綁定事件的是哪個元素) b)還可以不加第二個參數，給click事件的事件處理函數傳入參數event(e), e.target返回原生對象。
-
.siblings()可以結合.end()使用，來返回當前的對象(this),因爲.siblings()以後當前對象就是this的兄弟們了，如果要接着操作this，就要使用.end()來返回。
-
🎈remove()同時移除元素上的事件及jQuery數據