jQuery基礎與常用方法學習筆記

標籤：

JQ與JS的關係：可以共存，不可混用。jq源碼，源生JS物件導向寫的  JQ寫法鏈式操作 $(‘#div’).html(‘hello’).css().click()賦值取值合體 .html(‘hello’)賦值，html()取值  當一組元素的時候，取值是一組當中的第一個，賦值是一組中的所有元素 $() 可以選擇元素，充當window.onload JQ的寫法$(document).ready()，還可以建立節點$(‘<div>‘)$() 等dom載入完就執行，效能好些，相等於$(document).ready(function(){})window.onload = function(){} 原生頁面載入完  JQ中的方法分為兩派$().css $().html() 只能給JQ對象用$.xxx() $.yyy() 不僅可以給JQ用，也可以給原生JS用，叫做工具方法   $()下的常用方法has() 包含filter() not() 不過濾attr() 設定屬性next() 下一個兄弟節點prev() 上一個兄弟節點find()  尋找當前元素集合中的每個後代元素:eq() 尋找座標 $(‘li:eq(2)’).css()index() 一組元素的索引，當前元素在所有兄弟節點中的位置addClass(‘box’) 添加樣式removeClass(‘box’) 刪除width() 實際的寬innerWidth() 寬加paddingouterWidth() 寬加padding加borderouterWidth(true) 寬加padding加border加margin 注:也有關於高的這些方法，以上方法可以擷取到隱藏的寬，但原生JS不能insertBefore()  找到一個元素，然後移動到前面 $(’span’).insertBefore( $(‘div‘) )before() 在被選元素前插入指定的內容   區別 後續操作變了insertAfter() 把一個節點添加到指定節點的後面after() appendTo() 被選元素的結尾插入內容，剪下操作 $(‘div’).appendTo( $(’span‘) );append() 被選元素的節尾插入指定內容prependTo() 添加到兄弟元素的前面remove() 刪除節點on() 好處，可以寫自訂事件，可以添加多個方法$(‘div’).on(‘click mouseover’,function(){     alert(123)})$(‘div’).on({     ‘click’ : function(){     alert(‘123‘);     },     ‘mouseover’,function(){     alert(‘456’);     }})off() 取消事件$(window).scrollTop() 滾動距離ev —原生event對象ev.pageX（相對於文檔）—原生clientX（相對於可視區）ev.which  鍵盤的索引值ev.preventDefault() 阻止預設事件ev.stopPropagation() 阻止冒泡事件return false 以上兩者都阻止one() 事件只執行一次offset() 擷取到螢幕的左或上距離 offset().left/offset().topposition() 相對於父元素的位置（位移）parent()  擷取低級offsetParent() 擷取有定位的父級val() 擷取元素的value值size() 擷取一組元素的長度each() 迴圈，接受一個回呼函數，接受兩個參數，1下標，2每個元素hover() 滑鼠移入移出結合，接受兩個函數show() hide() 顯示隱藏 可以接受一個參數時間，有運動效果fadeIn() fadeOut() 淡入淡出 也可以指定時間，預設400fadeTo() 指定範圍 兩個參數（時間，透明值）slideUp() slideDown() 向上展開，向下收合get() 把Jq轉成原生JS  註： get()不加下標是一組元素的集合 例：$(‘#div1’).get(0).innerHTML 反集合的對象轉在原生的，$(‘li’)[i]這樣也可以轉成原生，不過jq手冊裡沒有。jq下面有length屬性html() 擷取第一個內容包括標籤 $(‘div’).html();text() 擷取到所有的文本remove()和detach() 刪除一個節點remove會把之前的元素所有操作都刪除，可以存在變數裡重新插入detach會保留這個元素的操作行為例：$(function(){     $(‘div’).click(function(){     alert(‘12’);     })    var oDiv =  $(‘div’).remove();     $(‘body’).append( oDiv );})parents() 擷取所有的袓先節點，參數是篩選功能closest() 擷取最近的袓先節點（包括當前元素自身）必需要寫篩選的參數，只能找到一個元素siblings() 找所有的兄弟節點，參數是篩選功能nextAll() 下面所有的兄弟節點prevAll() 上面所有的兄弟節點parentsUntil() 袓先截止的節點nextUnitil() 加參數可以設定到XX截止prevUntil() 上面截止的節點clone() 複製節點，複製節點的操作 $(‘div’).clone().appendTo( $(’span‘) ); 參數設定true可以將事件也複製到新節點當中wrap() 封裝 $(’span’).wrap(‘<div>’) 給每一個span加一個divwrapAll() 整體封裝wrapInner() 內部封裝unwrap() 刪除封裝（刪除父級：不包括body）add() 讓兩個標籤組合進行其它操作slice() 參數起點座標-結束 JQ:把匹配元素集合縮減為指定的指數範圍的子集 JS解釋：數組中返回指定的元素serialize() 串聯成字串serializeArray() 串聯成數組animate() 第一個參數：{ 運動的屬性和值 }，第二個參數：時間（預設400），第三個參數：運動形式，只有兩種（預設：慢快慢swing，勻速linear），第四個參數：回呼函數stop() 停止運動 // 預設：只會阻止當前運動 ，加個參數true可以阻止所有操作，第二個參數設為true可以立即停止到指定的目標點finish() 完成現在正在啟動並執行效果。會立即停止到所有指定的目標點delay() 延遲方法，停頓一下delegate() 事件委託方法 省掉迴圈操作，對後續添加的內容直接有了事件操作，提高效能。$(‘ul’).delegate(‘li’,’click’,function(){})undelegate() 阻止事件委託trigger() 主動觸發被選元素的指定事件類型。適合自訂事件ev下其它屬性 ev.data 事件中的資料 $(‘.a’).on(‘click’’,{name:1}’,function(ev){alert(ev.data.name)}) ev.target 事件來源(操作的是誰) ev.type事件類型odd()偶數行even()奇數行charAt() 從某個字串取得具體的字元，參數座標substring() 字串中提取一些字元，參數座標  $下的工具方法$.type() 判斷類型$.trim() 去前後空格$.inArray() 類似於indexOf  var arr = [‘a’,’b’]; alert( $inArray(‘b’,arr) )$.proxy() 改變this指向 第一個參數函數名，第二個指向，第三個可以寫傳參，這樣如果是事件調用的時候不會執行。加上()執行，相當於調用函數，還可以在裡面傳參，也可以在前面或後面混著傳 ）function show(n1,n2){alert(this)}$.proxy(show, document,3)(4);$.noConflict() 防止衝突 var miaov = $.noCoflict(); miaov(function())$.parseJSON() 轉對象$.makeAarry() 轉數組$.ajax({ }) 裡面是個對象 抽象出來的方法有三個：$.get() $.get(‘xx.php’,{},function(){})      $.post()        $.getJSON() 請求json或JSONP的形式擴充外掛程式$.extend 擴充工具方法下的外掛程式形式 $.xxx() $.yyy()$.fn.extend 擴充到jq對象下的外掛程式形式 $().xxx() $().yyy() 形參：全稱為“形式參數”是在定義函數名和函數體的時候使用的參數，目的是用來接收調用該函數時傳遞的參數。實參：可以是常量、變數、運算式、函數等， 無論實參是何種類型的量，在進行函數調用時，它們都必須具有確定的值， 以便把這些值傳送給形參。

jQuery基礎與常用方法學習筆記