饑人谷_李棟
讀了阮一峰的教程之后，作為一個新人，為了方便加深記憶，做了下簡化，方便使用
jQuery可以實現(xiàn)以下功能：
- 選擇
- 篩選
- 連續(xù)的操作
- 元素的操作(取值、賦值)
- 元素的操作(移動)
- 元素的操作(copy、刪、建)
- 自身方法
- 綁定Event
- 動畫效果
一、選擇網(wǎng)頁元素
- 可以是選擇器：
$(document) //選擇整個文檔對象
$('#myId') //選擇ID為myId的網(wǎng)頁元素
$('div.myClass')
$('input[name=first]')
- 可以是jQuery自己的：
$('a:first')
$('tr:odd') //選擇表格的奇數(shù)行
$('#myForm :input') // 選擇表單中的input元素
$('div:visible')
$('div:gt(2)') // 選擇所有的div元素，除了前三個
$('div:animated') // 選擇當(dāng)前處于動畫狀態(tài)的div元素
//可以選擇幾個 $('div,.test')
二、篩選
- 用各種過濾器來篩選：
$('div').has('p');
$('div').not('.myClass');
$('div').filter('.myClass');//filter:過濾
$('div').first(); //第1個
$('div').eq(5); //第6個
- 移動到附近的相關(guān)元素：
$('div').next('p'); //選擇div元素后面的第一個p元素
$('div').parent(); //父元素
$('div').closest('form'); //選擇離div最近的那個form父元素
$('div').children(); //所有子元素
$('div').siblings(); //同級元素
三、連續(xù)操作
選中之后，可以對它作一系列操作：
$('div').find('h3').eq(2).text('Hello');
上面的代碼可以分開來寫的，另外還有倒退功能.end()//后退一步
四、取值、賦值
使用同一函數(shù)來取值、賦值：沒參數(shù)就是取值，有參數(shù)就是賦值
常見的方法：
.html()//html內(nèi)容
.text()//text內(nèi)容
.attr()//屬性值
.width()
.height()
.val()//某個表單元素的值
值得注意的是，取值時，除了text，其他的如果是多個元素則全部取值,賦值則亦同
五、移動
兩個思路：移動自身、移動別人
.insertAfter()和.after()//在現(xiàn)存元素的外部，從后面插入元素
.insertBefore()和.before()//在現(xiàn)存元素的外部，從前面插入元素
.appendTo()和.append()//在現(xiàn)存元素的內(nèi)部，從后面插入元素
.prependTo()和.prepend()//在現(xiàn)存元素的內(nèi)部，從前面插入元素
六、copy、刪、建
.clone()
.remove()//不保留刪除事件
.detach()//保留刪除事件
.empty()
七、自身的方法
jQuery構(gòu)造函數(shù)上的方法，可以直接使用
$.trim()//去除字符串兩端的空格
$.each()//遍歷一個數(shù)組或?qū)ο?$.inArray()
$.grep()//返回數(shù)組中符合某種標準的元素
$.extend()//將多個對象，合并到第一個對象
$.makeArray()//將對象轉(zhuǎn)化為數(shù)組
$.type()
$.isArray()
$.isEmptyObject()
$.isFunction()
$.isPlainObject()
//判斷某個參數(shù)是否為用"{}"或"new Object"建立的對象。
//plain:清楚的、明白的
$.support()
八、綁定事件
直接把事件綁定到選中的元素上
$('p').click(function(){
alert('Hello');
});
事件有：
.blur()//表單元素失去焦點
.change()//表單元素的值發(fā)生變化
.click() .dousedown() .mouseout()
.dblclick()
.focus() 和.focusin()和.focusout()//子元素獲得、失去焦點
.hover() .mouseenter() .mouseleave()
.keydown() .keyup()
.keypress()//按下鍵盤（長時間按鍵，將返回多個事件）
.load() .unload()
.mousemove()
.mouseover()
.ready()
.resize() .scroll()
.select() .submit()
.toggle(f(),f())//根據(jù)鼠標點擊的次數(shù)，依次運行多個函數(shù),
超過次數(shù)，則重復(fù)提交
- 多個事件綁定一個函數(shù)：用到了.bind()//以上事件都是它的快捷方式
解綁：.unbind()
$('input').bind(
'click change', //同時綁定click和change事件
function() {
alert('Hello');
}
);
事件只運行一次 :$.('p').one(事件，Eventhandle)
一些屬性方法
.pageX .pageY
.type
.which//按下了哪個鍵
.date//綁定數(shù)據(jù)
.target
.preventDefault()
.stopProgagation()//就是那個'p' ^_^,用來停止向上層元素冒泡
九、動畫效果
.fadeIn() .fadeOut() .fadeTo()//淡入、淡出、透明度
.hide()
.show()
.slideUp() .slideDown() .slideToggle()//依次展開或卷起某元素
.toggle()//依次展開或隱藏
復(fù)雜的用.animate()
$.fx.off()//關(guān)閉特效
原文出自阮一峰的jQuery設(shè)計思想，本文版權(quán)屬”李棟（饑人谷）“所有
