1、jQuery的位置信息javascript
jQuery的位置信是JS的client系列、offset系列、scroll系列封裝好的一些簡便api。css
一、寬度和高度html
a、獲取寬度和高度,例如: java
.width() // 獲取匹配元素集合中的第一個元素的寬度值,內容寬度,不含padding .height() // 獲取匹配元素集合中的第一個元素的高度值,內容高度,不含padding
注意:這個方法不接受任何參數。.css(‘width’)(或.css(‘height’))和 .width()(或.height())之間的區別是後者返回一個沒有單位的數值(例如,400),前者是返回帶有完整單位的字符串(例如,400px)。當一個元素的寬度(或高度)須要數學計算的時候推薦使用.width()(或.height()) 方法。jquery
b、設置寬度和高度,例如: api
.width(value) // 給每一個匹配的元素設置寬度,value爲數字,不帶單位 .height(value) //給每一個匹配的元素設置高度,value爲數字,不帶單位
二、innerWidth()和innerHeight()瀏覽器
a、獲取內部寬和高,例如: app
.innerWidth() // 獲取匹配元素集合中第一個元素的寬度值,含padding,不含border .innerHeight() // 獲取匹配元素集合中第一個元素的高度值,含padding,不含border
注意:這種方法不適用於window 和 document對象,對於這些對象可使用.width()和.height()代替。函數
b、設置內部寬和高,例如:性能
.innerWidth(value) // 給每一個匹配的元素設置內部寬度,value爲數字,不帶單位 .innerHeight(value) //給每一個匹配的元素設置內部高度,value爲數字,不帶單位
三、outerWidth()和outerHeight()
a、獲取外部寬和高
// 獲取匹配元素集合中第一個元素的外部寬度(包括padding,border和可選的margin) .outerWidth([includeMargin]) // 獲取匹配元素集合中第一個元素的外部高度(包括padding,border和可選的margin) .outerHeight([includeMargin])
參數includeMargin:類型是布爾值,默認爲false,表示不包含margin值。
注意:這個方法不適用於window 和 document對象,對於這些對象可使用.width()和.height()代替。
b、設置外部寬和高
.outerWidth(value) // 給每一個匹配的元素設置內部寬度,value爲數字,不帶單位 .outerHeight(value) //給每一個匹配的元素設置內部高度,value爲數字,不帶單位
四、偏移
a、獲取偏移量,例如:
.offset() // 返回一個包含top和left屬性的Object對象
描述:在匹配的元素集合中,獲取的第一個元素的當前座標,座標相對於文檔,與父相子絕無關。
注意:jQuery不支持獲取經過display:none隱藏元素的偏移座標。一樣的,也沒法取得隱藏元素的 border, margin, 或 padding 信息。若元素的屬性設置的是 visibility:hidden,那麼咱們依然能夠取得它的座標。
b、設置偏移量,例如:
.offset({ top: 10, left: 30}); // 設置匹配的元素集合中每個元素的座標,座標相對於文檔
五、元素座標
.position() // 返回一個包含top和left屬性的Object對象
描述:描述獲取匹配元素中第一個元素的當前座標,相對於offset parent的座標 (offset parent指離該元素最近的並且被定位過的祖先元素 )。
注意:當把一個新元素放在同一個容器裏面另外一個元素附近時,用.position()更好用。
六、滾動距離
a、獲取水平方向滾動距離和垂直方向滾動距離,例如:
.scrollLeft() // 獲取匹配元素集合中第一個元素的當前水平滾動條的位置(頁面捲走的寬度) .scrollTop() // 獲取匹配的元素集合中第一個元素的當前遲滯滾動條的位置(頁面捲走的高度)
b、設置水平方向滾動距離和垂直方向滾動距離,例如:
.scrollLeft(value) // 設置每一個匹配元素的水平方向滾動條位置 .scrollLeft(value) // 設置每一個匹配元素的垂直方向滾動條位置
2、JS的事件流的概念
一、事件的概念
HTML中與javascript交互是經過事件驅動來實現的,例如鼠標點擊事件onclick、頁面的滾動事件onscroll等等,能夠向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在何時進行調用的,就須要瞭解一下「事件流」的概念。
二、什麼是事件流
事件流描述的是從頁面中接收事件的順序。
三、事件流的由來(瞭解)
因爲微軟和網景亂搞,後來必需要爲事件傳播機制,制定一個標準,由於事件捕獲是網景公司開發出來的,而事件冒泡是由微軟公司開發出來的,它們都想要本身的技術成爲標準,因此致使這兩個公司總是幹架,制定標準的人爲了避免讓它們幹架,因此研發了事件流。
四、」DOM2級事件」規定的事件流包括三個階段:
①事件捕獲階段:事件捕獲和事件冒泡是相反的,也就是說,當用戶觸發了一個事件的時候,這個事件是從DOM樹的最上層開始觸發一直到捕獲到事件源;
②處於目標階段:事件在目標元素上發生並處理,可是事件處理會被當作是冒泡階段的一部分;
③事件冒泡階段:官方的定義就是從最特定的事件目標到最不特定的事件目標,意思就是說,加入用戶單擊了一個元素,,該元素擁有一個click事件,那麼一樣的事件也將會被它的祖先觸發,這個事件從該元素開始一直冒泡到DOM樹的最上層,這一過程稱爲事件冒泡;
五、事件流的寫法以及實現方式
a、標準實現方式是使用關鍵詞addEventListener,假如你想給某元素添加/刪除事件,能夠這樣寫:
element.addEventListener(eventType, fn, false); element.removeEventListener(eventType, fn, false);
參數解釋:
eventType:表示要使用哪一種事件類型,好比click;
fn:回調函數,裏面寫觸發此事件你要作什麼事情;
false:事件機制,分爲冒泡和捕獲,false表示事件冒泡,true表示事件捕獲;
b、既然有標準的實現方式,那麼確定也存在着非標準的寫法,以下:
element.attachEvent(eventType, fn); // 這種寫法兼容IE, IE沒有實現事件捕獲 element.detachEvent(eventType, fn);
參數解釋:
eventType:事件類型;
fn:回調函數;
c、冒泡和捕獲的示例,以下:
<button id="btn">按鈕</button> <script> window.onload = function(){ var oBtn = document.getElementById('btn'); document.addEventListener('click',function(){ console.log('document處於事件捕獲階段'); }, true); document.documentElement.addEventListener('click',function(){ console.log('html處於事件捕獲階段'); }, true); document.body.addEventListener('click',function(){ console.log('body處於事件捕獲階段'); }, true); oBtn.addEventListener('click',function(){ console.log('btn處於事件捕獲階段'); }, true); oBtn.addEventListener('click',function(){ console.log('btn處於事件冒泡階段'); }, false); document.body.addEventListener('click',function(){ console.log('body處於事件冒泡階段'); }, false); document.documentElement.addEventListener('click',function(){ console.log('html處於事件冒泡階段'); }, false); document.addEventListener('click',function(){ console.log('document處於事件冒泡階段'); }, false); }; </script> <!-- 控制檯輸出結果以下: document處於事件捕獲階段 html處於事件捕獲階段 body處於事件捕獲階段 btn處於事件捕獲階段 btn處於事件冒泡階段 body處於事件冒泡階段 html處於事件冒泡階段 document處於事件冒泡階段 -->
3、事件對象
什麼是事件對象?在觸發DOM上的事件時都會產生一個對象。
一、認識事件對象
事件在瀏覽器中是以對象的形式存在的,即event。觸發一個事件,就會產生一個事件對象event,該對象包含着全部與事件有關的信息。包括致使事件的元素、事件的類型以及其餘與特定事件相關的信息。
例如:鼠標操做產生的event中會包含鼠標位置的信息;鍵盤操做產生的event中會包含與按下的鍵有關的信息。
全部瀏覽器都支持event對象,但支持方式不一樣,在DOM中event對象必須做爲惟一的參數傳給事件處理函數,在IE中event是window對象的一個屬性。
二、何時產生事件對象?
當觸發某個事件的時候,這個事件的回調函數的形參會默認接收一個event事件對象。
三、DOM中的事件對象
DOM0級和DOM2級事件處理程序都會把event做爲參數傳入。
根據習慣:能夠用e,或者ev或者event。
DOM中事件對象重要屬性和方法:
屬性 |
描述 |
type |
用於獲取事件類型 |
target |
用於獲取事件目標,即事件加在哪一個元素上 |
方法 |
描述 |
stopPropagation() |
用於阻止事件冒泡 |
preventDefault() |
阻止事件的默認行爲(移動端用的多) |
四、IE中的事件對象
第一種狀況: 經過DOM0級方法添加事件處理程序時,event對象做爲window對象的一個屬性存在。
第二種狀況:經過attachEvent()添加的事件處理程序,event對象做爲參數傳入。
IE中事件對象重要屬性和方法:
屬性 |
描述 |
type |
用於獲取事件類型 |
srcElement |
用於獲取事件目標,即事件加在哪一個元素上 |
cancelBubble |
用於阻止事件冒泡,是屬性(true表示阻止) |
returnValue |
用於阻止事件的默認行爲,是屬性(false表示阻止) |
五、Event對象的一些兼容性寫法(瞭解)
a、得到event對象兼容性寫法,以下:
event || (event = window.event);
b、得到target兼容型寫法,以下:
event.target||event.srcElement;
d、阻止冒泡兼容性寫法,以下:
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble =true);
c、阻止瀏覽器默認行爲兼容性寫法,以下:
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
4、事件委託(事件代理)
通俗的講,onclick、onmouseover、onmouseout等就是事件,委託,就是讓別人來作,這個事件原本是加在某些元素上的,然而咱們能夠加到別人身上,來完成這個事件。
一、原理
利用冒泡的原理,把事件加到父級上,觸發執行效果。
二、做用
a、性能要好;
b、針對新建立的元素,直接能夠擁有事件;
三、事件源
跟this做用同樣(他不用看指向問題,誰操做的就是誰),event對象下的。
四、使用情景
a、爲DOM中的不少元素綁定相同事件;
b、爲DOM中尚不存在的元素綁定事件;
五、語法:.on( events [, selector ] [, data ], handler(eventObject))
參數解釋:
events:String類型,一個或多個空格分隔的事件類型;
selector:String類型,選擇器字符串,用於過濾出被選中的元素中能觸發事件的後代元素;
data:任意類型,當一個事件被觸發時,要傳遞給事件處理函數的event.data;
handler(eventObject):Function類型,事件被觸發時,執行的函數;
描述:在選定的元素上綁定一個或多個事件處理函數。
示例:
<ul> <li>第一項</li> <li>第二項</li> </ul> <script> $(function () { // 現有的li和將來添加的li都能作事件操做 $('ul').on('click','li',function () { alert(this.innerText); }); $('ul').append('<li>第三項</li>'); }) </script>
5、jquery經常使用的事件
jquery經常使用的事件,你們必定要熟記在心,以下:
事件 |
描述 |
click() |
鼠標單擊觸發事件 |
dblclick() |
鼠標雙擊觸發事件 |
mousedown()/mouseup() |
鼠標按下/彈起觸發事件 |
mousemove() |
鼠標移動 |
mouseover()/mouseout() |
鼠標移入/移出觸發(包含被選元素和其子元素) |
mouseenter()/mouseleave() |
鼠標移入/移出觸發(只在穿過/離開被選元素時觸發) |
hover() |
hover(fn1,fn2)分別當鼠標指針進入和離開元素時執行 |
focus()/blur() |
表單控件聚焦/失去焦點時觸發 |
keydown()/keyup() |
鍵盤按下/彈起時觸發 |
change() |
表單元素髮生改變時觸發 |
select() |
文本元素髮生改變時觸發事件 |
submit() |
表單提交時觸發 |
6、解決單雙擊衝突問題
知識鋪墊:兩次點擊間隔小於300ms爲雙擊,因此考慮利用定時器解決,以下:
<button>按鈕</button> <script> var timer = null; $('button').click(function () { clearTimeout(timer); // 開定時器以前先關定時器 timer = setTimeout(function () { console.log('單擊了'); },300) }); $('button').dblclick(function () { clearTimeout(timer); console.log('雙擊了'); }); </script>
7、應用:回到頂部代碼示例:
<div class="fixTop">回到頂部</div> <script> $(function () { $('.fixTop').click(function(event) { $('html,body').animate({ 'scrollTop':0 },1000) }); }); </script>