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()