jquery知識點總結（2）--- CSS模組+篩選模組+文件處理(CUD)模組+事件模組
阿新 • • 發佈：2018-12-13
- CSS模組
- style樣式
- css(styleName): 根據樣式名得到對應的值
- css(styleName, value): 設定一個樣式
- css({多個樣式對}): 設定多個樣式
- 位置座標
- offset(): 讀/寫當前元素座標(原點是頁面左上角)
- position(): 讀當前元素座標(原點是父元素左上角)
- scrollTop()/scrollLeft(): 讀/寫元素/頁面的滾動條座標
- 尺寸
- width()/height(): width/height
- innerWidth()/innerHeight(): width + padding
- outerWidth()/outerHeight(): width + padding + border
- 篩選模組
- 過濾
- 在jQuery物件內部的元素中找出部分匹配的元素, 並封裝成新的jQuery物件返回
- first()
- last()
- eq(index)
- filter(selector): 對當前元素提要求
- not(selector): 對當前元素提要求, 並取反
- has(selector): 對子孫元素提要求
- 查詢
- 查詢jQuery物件內部的元素的子孫/兄弟/父母元素, 並封裝成新的jQuery物件返回
- children(selector): 子元素
- find(selector): 後代元素
- preAll(selector): 前的所有兄弟
- siblings(selector): 所有兄弟
- parent(): 父元素
- 文件處理(CUD)模組
- 增加
- append() / appendTo(): 插入後部
- preppend() / preppendTo(): 插入前部
- before(): 插到前面
- after(): 插到後面
- 刪除
- remove(): 將自己及內部的孩子都刪除
- empty(): 掏空(自己還在)
- 更新
- replaceWith()
- 事件模組
- 繫結事件
- eventName(function(){})
- on(‘eventName’, function(){})
- 常用: click, mouseenter/mouseleave mouseover/mouseout focus/blur
- hover(function(){}, function(){})
- 解綁事件
- off(‘eventName’)
- 事件委託
- 理解: 將子元素的事件委託給父輩元素處理
- 事件監聽繫結在父元素上, 但事件發生在子元素上 * 事件會冒泡到父元素
- 但最終呼叫的事件回撥函式的是子元素: event.target
- 好處
- 新增的元素沒有事件監聽
- 減少監聽的數量(n==>1)
- 編碼
- delegate(selector, ‘eventName’, function(event){}) // 回撥函式中的this是子元素
- undelegate(‘eventName’)
- 理解: 將子元素的事件委託給父輩元素處理
- 事件座標
- event.offsetX: 原點是當前元素左上角
- event.clientX: 原點是視窗左上角
- event.pageX: 原點是頁面左上角
- 事件相關
- 停止事件冒泡: event.stopPropagation()
- 阻止事件的預設行為: event.preventDefault()