jquery重點筆記

jquery特性

消除瀏覽器差異,簡潔的操作DOM的語法$('#'),輕松實現動畫,修改css等操作。

var jq= jQuery.noConflict() //可以修改$標識。


juqery核心

選擇器? ? id tag class attribute

按屬性查找: var a = $('[items="A B"]'); // 當屬性中有空格或特殊標識符,需要用”“號隔開。

前綴查找:$('[class^="icon-"]')? ? ? ?后綴查找:$('[name$=with]')

組合查找:$('input[name=email]')? 多項選擇器:$('p.red,p.green')

>標識符僅用于直屬父子關系的層級選擇中:$('div ul li>span')


過濾器

新增nth-child(與數組下標index不同,起點從1開始)

odd:奇數下標 偶數位? ? even:偶數下標 奇數位


針對表單的特殊選擇器

:input????<input> <textarea> <select> <button>

:file? ? <input type="file"> / input[type=file]?

:radio? ? :checkbox? ? 單復選框? ? :checked? ? 選擇當前勾上的單復選框? ??

:focus? ? 選擇當前輸入焦點元素

:enable? ? :disable? ? 選擇能和不能輸入

:visible? ? :hidden? ? 選擇可見和隱藏元素


常見接口方法

$(xxx).find(接收任意選擇器為參數)

$(xxx).parent(參數可選)? ? //從當前節點的上層查找? ??

$(xxx).next(參數可選)? ? //同層下一個兄弟節點? ??

$(xxx).prev(參數可選)? ? //同層上一個兄弟節點

$(xxx)/filter(接受任意選擇器為參數)? ? //return true 拿到符合條件的節點

fist()? ? last() slice(index,index)? ? 返回一個新DOM對象


操作DOM節點

修改Text和Html

text()和html()分別獲取文本和html

修改css

使用css默認的類似"background-color"或js規定的駝峰命名法"backgroundColor"都可以設置css的屬性名稱

修改class屬性

$(xxx).hasClass(xxx)????$(xxx).addClass(xxx)????//通過addClass可以創建css樣式? ? ? ? ? ? ? $(xxx).removeClass(xxx)


顯示或隱藏DOM

$(xxx).show()? ? $(xxx).hide()

操作DOM節點屬性

attr("屬性名","屬性值")? ?removeAttr("屬性名")

prop()與attr() 但在處理隱式屬性如checked時不同,前者返回"checked",后者返回"true"

selected屬性處理時最好用is(':selected')

表單元素統一使用val()處理對應的value屬性,統一了取值和賦值操作

添加DOM

除了html()? ? //過于暴力? ? 還可以用父節點.append()和父節點prepend()

同級節點使用before()? ? //代替js中的insertBefore()? ? after()? ? //代替js中的insertAfter()

刪除節點

父節點.remove()? ? 沒有參數的情況下一次刪除多個子節點


事件處理

var a = $('#test-link');????a.on('click', function (){});

on方法用來綁定事件,需要傳入事件名稱和相應的處理函數

鼠標事件

click? ? dblclick? ? mouseenter mouseleave? ? mousemove? ? hover

鍵盤事件

keydown? ? keyup? ? keypress

其他事件

focus? ? blur? ? change? ? submit?

ready僅用于加載document對象

$(document).ready(function(){? ? ? //$(function(){? });

//將初始化代碼放在ready事件中,以確保DOM已完成初始化

});


事件參數

$(function(){

????$('#testMouseMoveDiv').mousemove(function(e){

????????$('#testMouseMoveSpan').text('pageX = '+ e.pageX +', pageY = '+ e.pageY);?

? ? });

?});

事件傳入Event對象作為參數


取消綁定

off('event',function)? ? 實現,需要注意,以下寫法無效:

// 綁定事件:a.click(function(){alert('hello!');});// 解除綁定:a.off('click',function(){alert('hello!');});

兩個匿名函數對應不同的對象,無法移除已綁定的第一個參數

正確用法:off('click')? ? 或調用無參數函數xxx.off()

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。