jQuey可以做什么
- 選擇網(wǎng)頁元素
- 改變結(jié)果集
- 元素的操作：取值和賦值
- 元素的操作：移動
- 元素的操作： 復(fù)制，刪除和創(chuàng)建
- 工具方法
- 特殊效果
- ajax
- http://devdocs.io/jquery/
jquery 2.x版本之后不兼容IE 6 7 8
jQuery選擇器
選擇器
| 基本選擇器 | 作用 |
|---|---|
| $('*') | 匹配頁面所有元素 |
| $('#id') | id選擇器 |
| $('.class') | 類選擇器 |
| $('element') | 標簽選擇器 |
| 組合/層次選擇器 | 作用 |
|---|---|
| $('E,F') | 多元素選擇器闺魏，用,分隔丑掺，同時匹配元素E或元素F
|
| $('E F') | 后代選擇器迎卤，用空格分隔，匹配E元素所有的后代（不只是子元素，子元素向下遞歸）元素F |
| $('E>F') | 子元素選擇器炊汤，用,分隔，匹配E元素的所有直接子元素
|
| $('E+F') | 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F |
| $('E~F') | 普通相鄰選擇器（弟弟選擇器）抢腐，匹配E元素之后的同級元素F（無論直接相鄰與否） |
| $('.class1 .class2') | 匹配類名中既包含class1又包含class2的元素 |
其他具體詳細選擇器參考中文文檔
jQuery對象和DOM原生對象的區(qū)別
對于jquery對象姑曙，只能使用jquery提供的API
原生對象需要去使用原生對象的屬性和方法
- jQuery對象和DOM原生對象的轉(zhuǎn)換
jquery對象可以通過加下標的方法來變成DOM原生對象，從而使用原生對象的方法迈倍。而一個原生對象伤靠，也可以通過用$包裹一下原生的對象，就能變?yōu)閖query對象啼染。
<div id="container">
<ul>
<li>001</li>
<li class="active">002</li>
<li>003</li>
</ul>
</div>
<script>
$('#container li');//[li,li.active,li]
$('#container li')[0]; //變?yōu)樵鶧OM對象 <li>001</li>
document.querySelector('.active'); //原生DOM對象 <li class="active">002</li>
$(document.querySelector('.active'));// 變?yōu)閖query對象 [li.active, context: li.active]
</script>
對于上述例子宴合，如果想得到第二項的元素，又不想將其變?yōu)镈OM元素對象的話迹鹅，可以使用.eq()方法卦洽。
$('#container li').eq(1); //[li.active, prevObject: n.fn.init(3), context: document]
依然是jquery對象
- 常見選擇器的使用舉例：
結(jié)構(gòu)如下：
<div id="container">
<ul class="wrap">
<li>001</li>
<li class="active">002</li>
<li>003</li>
</ul>
</div>
各種選擇器選擇到的jquery對象
<script>
$('.wrap').parent(); // [div#container]
$('.wrap').parents(); // [div#containe, body, htmlr]
$('.wrap').parents('body'); //[body]
$('.wrap').children();// [li, li.active, li]
$('.wrap').children('.active'); // [li.active]
$('.wrap').children().first();//[li]
$('.wrap').children().last();//[li]
$('.wrap').find('.active'); //[li.active]
$('.wrap').find('.active').next();//[li]
$('.wrap').find('.active').prev();//[li]
$('.wrap').find('.active').siblings(); //[li, li]
</script>
jquery的DOM操作
創(chuàng)建對象
- 選擇一個DOM對象，然后用$()包裹
- 或者可以直接把html字符串用$()包裹斜棚，就能創(chuàng)建一個jquery對象
添加元素
- append() appendTo()
將一個元素放入另一個元素的尾部
<script>
var $li = $('<li>004</li>'); //var的變量前面加$沒有任何實際意義阀蒂，僅僅表面是個jquery對象，方便理解
$('#container .wrap').append($li);
$li.appendTo($('#container .wrap'));//和上面的效果一致弟蚀，可以換種寫法而已
</script>
- prepend() prependTo()
同理 prepend為插入到另一個元素最前面
var $li2 = $('<li>000</li>');
$('#container .wrap').prepend($li2);
$li2.prependTo($('#container .wrap'));
- before 針對并列同級的元素
現(xiàn)在把$li放到$li2前面
$li2.before($li);
也可以新建一個
$li2.before('<li>005</li>'); - after 和before相似 插入到并列同級元素之后
刪除元素
- remove()
舉例：刪除第三個li
$('.wrap li').eq(2).remove(); //選中所有的li蚤霞，然后使用eq方法選擇要刪除的jquery對象，使用remove() - empty()
清空被選擇元素內(nèi)部的所有子元素义钉，自身還在
$('.wrap').empty(); // ul自身還在争便，所有的li被刪除 - detach()
detach()和remove()一樣，除了detach()保存所有jquery數(shù)據(jù)和被移走的元素相關(guān)聯(lián)断医。當需要移走一個元素滞乙，不久又將該元素插入DOM時，這種方法很有用鉴嗤。
html()
html()方法讀寫兩用斩启，可以修改和獲取元素的innerHTML
- 沒有傳遞參數(shù)的時候，返回元素的innerHTML
- 傳遞了參數(shù)時醉锅，修改元素的innerHTML為傳遞的參數(shù)
讀寫兩用的方法基本都類似兔簇。
- 如果結(jié)果是多個賦值操作，會給每個結(jié)果都賦值
- 如果結(jié)果多個硬耍，獲取值的時候垄琐，返回結(jié)果集中的第一個對象的相應(yīng)值
text()
和html()類似，對應(yīng)DOM的innerText
jquery的事件
jquery可以很好的處理瀏覽器兼容经柴，1.7版本之后狸窘，綁定和解除事件用on/off方法即可
on(event[,selector][,data],handler(eventObject))
on()方法的各個參數(shù)的意思
1.event
一個或多個空格分隔的事件類型和可選的命名空間，或僅僅是命名空間坯认，例如： "click" , "keydown.myPlugin" 或者".myPlugin"
2.selector
一個選擇器字符串翻擒，用于過濾出被選中元素中能觸發(fā)事件的后代元素氓涣。如果選擇器是null或者忽略了該選擇器，那么被選中的元素總是能觸發(fā)事件
3.data
當一個事件被觸發(fā)時陋气，要傳遞給事件處理函數(shù)的event.data
4.handler(eventObject)
當事件被觸發(fā)時劳吠，執(zhí)行的函數(shù)。若該函數(shù)只是要執(zhí)行return false的話巩趁，那么參數(shù)位置可以簡寫成false
使用舉例：
- 普通事件綁定痒玩，最簡單的用法
$('div').on('click',function (e) {//可以簡寫為$('div').click(...)
console.log(this);
console.log(e);
})
- 事件委托或者事件代理，想讓div下面所有的span綁定事件议慰，可以把事件綁定到div上
$('div').on('click','span',function (e) {
console.log(this);
console.log(e);
})
- 可以在綁定的時候給事件處理程序傳遞一些參數(shù)
$('div').on('click',{name: 'byron',age: 24},function (e){
console.log(e.data);
console.log(e.data.name);
console.log(e.data.age);
})
需要注意的是凰荚，要用this或者e.target的話，因為這兩個都是原生的DOM對象褒脯，所以要使用jquery的時候，要轉(zhuǎn)換成jquery對象在使用缆毁。例如var $this = $(this);
trigger()
模擬事件觸發(fā)
jQuery屬性操作
.val([value])
讀寫雙用番川，用于處理input的value。
<input type="text" value="hello">
<script>
console.log($('input').val());
$('input').val('world');
console.log($('input').val());
</script>
.attr()
獲取/修改元素特定屬性的值
<input type="text" value="hello">
<script>
$('input').attr('type'); //text 獲取目標元素的type屬性的值
$('input').attr('type','checkbox'); //設(shè)置type屬性值為checkbox
</script>
移除屬性用removeArrt()方法
css()
和arrt()很像脊框，用來處理元素的css
<div class="box"></div>
<script>
$('.box').css({
width: '30px',
height: '30px',
border: '1px solid red',
});
</script>
addClass() / removeClass()
為元素添加class颁督，不是覆蓋原class，是追加
-
hasClass()
判斷是否存在某個類
對應(yīng)原生的classList.add/remove/contains
-
toggleClass()
切換類
jQuery動畫
基礎(chǔ)
.hide([duration][,easing][,complete])
用于隱藏元素浇雹，沒有參數(shù)的時候等同于直接設(shè)置display屬性
.css('display','none')
1.duration 動畫持續(xù)多久
2.easing 表示過渡使用哪種緩動函數(shù)沉御，jq自身提供"linear"和"swing"
3.complete 在動畫完成時執(zhí)行的函數(shù)
.show([duration][,easing][,complete])
顯示元素，使用和hide類似
.toggle([duration][,easing][,complete])
用來切換元素的隱藏昭灵，顯示吠裆。類似于toggleClass,使用方法和hide show一樣
漸變
.fadeIn([duration][,easing][,complete])
通過淡入的方式顯示匹配元素
.fadeOut([duration][,easing][,complete])
淡出的方式隱藏匹配元素
.fadeToggle([duration][,easing][,complete])
滑動
.slideDown([duration][,easing][,complete])
用滑動動畫顯示一個元素，方法將會給匹配元素的高度的動畫烂完，這會導(dǎo)致頁面的下面部分滑下去试疙，彌補了顯示的方式
.slideUp([duration][,easing][,complete])
自定義動畫
.animate(properties [duration][,easing][,complete])
properties是一個css屬性和值的對象，動畫將根據(jù)這組對象移動抠蚣。
當進行多個連續(xù)動畫的書寫時祝旷，不需要一層層的嵌套代碼在回調(diào)函數(shù)內(nèi)部，jq支持直接按照動畫順序進行書寫嘶窄。也可以將多個動畫的properties寫到一個數(shù)組內(nèi)怀跛，遍歷數(shù)組調(diào)用animate方法傳入這個數(shù)組。
jquery的鏈式調(diào)用：一般來說調(diào)用jquery的每一個方法柄冲，這個方法最后都會return這個jquery對象本身吻谋，所以可以支持鏈式調(diào)用
- 停止動畫 finish() 和 stop()
