1. 環(huán)境搭建
引入jQuery庫：
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
可以在 bootstrapCDN 找到各種開源庫的網(wǎng)址曼库。
- 壓縮版：項目上線發(fā)布使用（體積小，效率快）萨驶；
- 開發(fā)版：開發(fā)過程中使用（便于修改調(diào)試）。
2. jQuery 對象
- 通過
$()獲取的是jQuery對象，是一個類數(shù)組對象安聘。 -
.get(索引值)方法:訪問jQuery對象中相關(guān)的DOM節(jié)點
var $div = $('div') //jQuery對象
var div = $div.get(0) //通過get方法，轉(zhuǎn)化成DOM對象
div.style.color = 'red' //操作dom對象的屬性
3. jQuery 選擇器
- id 選擇器（比較高效）:
$("#id"); - 類選擇器（可以多選瓢棒，隱式循環(huán)處理）:
$(".className"); - 元素選擇器（可以多選浴韭，隱式循環(huán)處理）:
$("element"); - 全選擇器:
$("*"); - 層級選擇器（兄弟選擇器不向前選擇）
層級選擇器
- 基本篩選選擇器
基本篩選選擇器
- 內(nèi)容篩選選擇器
內(nèi)容篩選選擇器
- 可見性篩選選擇器
可見性篩選選擇器
- 屬性選擇器
屬性選擇器
- 子元素選擇器
子元素選擇器
- 表單元素選擇器
表單元素選擇器
- 表單對象屬性選擇器
表單對象屬性選擇器
- 特殊選擇器
this
this表示當(dāng)前的上下文對象是一個html對象，可以調(diào)用html對象所擁有的屬性和方法脯宿。
$(this)代表的上下文對象是一個jquery的上下文對象念颈，可以調(diào)用jQuery的方法和屬性值。
4. jQuery .attr() 和 .removeAttr()
.attr( 屬性名 ).attr( 屬性名连霉，屬性值 )-
.attr( 屬性名榴芳，函數(shù)值 )
eg:
<input type="text" value="hiahia" />
<script type="text/javascript">
$("input").attr('value',function(i, val){
return ' 通過function設(shè)置 ' + val //val 是原來的舊 value，新值為“通過 function設(shè)置 hiahia ”
})
</script>
.attr({ 屬性名一:"屬性值一",屬性名二:"屬性值二",屬性名三:"屬性值三" });
.removeAttr( 屬性名 )
5. jQuery .html()
-
.html()獲取匹配集合中第一個元素的 HTML 內(nèi)容 -
.html( html 內(nèi)容 )設(shè)置每一個匹配元素的 HTML 內(nèi)容跺撼； -
.html( function ( index,oldhtml ))用函數(shù)返回值設(shè)置 HTML 內(nèi)容 -
.text()獲取匹配集合中每一個元素的合并文本窟感，包括它們的后代 -
.text(text 內(nèi)容)設(shè)置每一個匹配元素內(nèi)容的文本 -
.text(function(index,oldtext))用函數(shù)返回值設(shè)置文本內(nèi)容
eg:
<script type="text/javascript">
//通過 .text() 的回調(diào)，獲取原本的內(nèi)容财边，修改肌括，在重新賦值
$(".left a:first").text(function(index,text){
return ' 增加新的文本內(nèi)容 ' + text //text 是舊的 text
})
</script>
6. jQuery .val()
-
.val()獲取匹配的元素集合中第一個元素的當(dāng)前值 -
.val(value)設(shè)置匹配的元素集合中每一個元素的值 -
.val(function)用函數(shù)的返回值設(shè)置值
7. jQuery .addClass()
-
.addClass("newClassName")添加而不是替換一個新的類 -
.addClass("newClassName1","newClassName2")添加多個新類 .addClass(function(index,currentClass))
8.jQuery .removeClass()
-
.removeClass(className)刪除某個類 -
.removeClass()刪除所有樣式 -
.removeClass(function(index,class))//class是該元素的全部類名
eg:
<script type="text/javascript">
$('.right > div:first').removeClass(function(index,className){
//className = aa bb imoocClass
//把div的className賦給下一個兄弟元素div上作為它的class
$(this).next().addClass(className);
//刪除自己本身的imoocClass
return 'imoocClass';
})
</script>
9. jQuery .toggleClass()
-
.toggleClass(className)在匹配的元素集合中的每一個元素上添加或者刪除樣式類名（存在則刪除，不存在則添加）酣难； -
.toggleClass(className,true/false)如果true谍夭，就添加該className，如果是false憨募，就刪除該className紧索。
10. jQuery .css()
-
.css( "屬性名" )獲取匹配元素集合中的第一個元素的該屬性的屬性值 -
.css([ "屬性一 ", "屬性二" ])獲取匹配元素的多個屬性值，返回一個對象結(jié)果
eg：
<script type="text/javascript">
//獲取尺寸菜谣，傳入CSS屬性組成的一個數(shù)組
//{width: "60px", height: "60px"}
var value = $('.first').css(['width','height']);
//因為獲取的是一個對象珠漂，取到對應(yīng)的值
$('p:eq(2)').text( 'widht:' + value.width + ' height:' +value.height )
</script>
-
.css ( "屬性名", "屬性值" )設(shè)置 css 屬性值 -
.css ( "屬性名" , function)
eg:
<script type="text/javascript">
//獲取到指定元素的寬度晚缩，在回調(diào)返回寬度值
//通過處理這個value，重新設(shè)置新的寬度
$('.sixth').css("width",function(index,value){//value是原來的css屬性值媳危，即此處是width的值
value=value.split('px');//將width的值以px為界分割成一個數(shù)組荞彼，數(shù)組內(nèi)的元素是字符串
return(Number(value[0])+50)+value[1];//value[0]是原來的width的值，是字符串待笑，所以要轉(zhuǎn)化為number 鸣皂，value[1]是單位“px”
})
</script>
-
.css ( 對象 )同時設(shè)置多個樣式
eg:
<script type="text/javascript">
//合并設(shè)置,通過對象傳設(shè)置多個樣式
$('.seventh').css({
'font-size':"15px",
"background-color":"#40E",
"border":"1px solid red"
})
</script>
-
.css()方法處理的樣式是內(nèi)聯(lián)的，直接通過元素的style屬性附加到元素上的暮蹂； - 通過
.css()方法設(shè)置的樣式屬性優(yōu)先級高于.addClass()方法
11. jQuery 創(chuàng)建寞缝、替換、刪除節(jié)點
$("<div></div>");$("<div> 我是陳大虹 </div>");$("<div id='test' class='dahong'> 我是陳大虹 </div>");-
$(A).append($(B));把B添加為A的最后一個子節(jié)點（每一個匹配元素都添加） -
$(B).appendTo($(A));把B添加為A的最后一個子節(jié)點（每一個匹配元素都添加） -
$(A).before(B,C)在A前面按照順序插入節(jié)點B,C -
$(A).after(B,C)在A后面按照順序插入節(jié)點B,C -
$(A).prepend(B,C)把B,C插入為A的第一仰泻、第二個子節(jié)點（多個參數(shù)） -
$(B).prependTo(A)把B插入為A的第一個節(jié)點（一個參數(shù)） -
$(A).insertAfter(B)等于$(B).after(A)等于$(A).before(B) -
$(A).insertBefore(B)等于$(B).before(A)等于$(A).after(B) -
$(A).empty()移除A的子節(jié)點（A本身不被移除） -
$(A).remove()移除A及內(nèi)部所有元素荆陆，包括事件 -
$(A).remove(B)刪除A中的B（選擇性） -
a = $(A).detach(); $(B).append(a)把A移除，讓一個變量托管集侯，可以通過.append()方法再次添加 -
$(A).clone()復(fù)制一個A（只克隆結(jié)構(gòu)被啼，不克隆事件） -
$(B).append($(A).clone())復(fù)制一個A，添加為B的最后一個子節(jié)點 -
$(A).clone().css('xx','cc')復(fù)制一個A棠枉，并設(shè)置它的某個css屬性值 -
$(A).clone(true)復(fù)制一個A趟据，包括結(jié)構(gòu)、事件與數(shù)據(jù) -
$(A).replaceWith(B)把A替換成B 等于$(B).replaceAll(A) -
$(A).wrap(B)給A包裹一層B（添加父元素）
$(A).wrap(function() {
return '<div></div>'; //給A包裹一層div（添加父元素）
})
-
$(A).unwrap()刪除A的父元素 -
$(A).wrapAll(B)給所有的A包裹一層B
eg:
<p>A</p>
<p>B</p>
......
$('p').wrapAll('<div></div>');
......
result:
<div>
<p>A</p>
<p>B</p>
</div>
<p>A</p>
<p>B</p>
......
$('p').wrapAll(function() {
return '<div></div>';
});
......
<div>
<p>A</p>
</div>
<div>
<p>B</p>
</div>
-
$(A).wrapInner(B)給A的子元素包裹一層B（B是正確的HTML格式） -
$(A).children()A的直接子元素术健，不包括孫級元素 -
$(A).children(selector)A的直接子元素中滿足selector選擇器的 -
$(A).find(B)遍歷A中滿足B選擇器的所有后代元素（包括子元素） -
$(A).parent()查找A的直接父元素 -
$(A).parent(selector)查找A中的滿足selector的父元素 -
$(A).parents()查找A的所有祖輩元素（包括父元素） -
$(A).parents(selector)查找A中滿足selector的所有祖輩元素 -
$(A).closest(selector)查找A的上級元素中滿足selector的，查找到一個就停止 -
$(A).next(selector)查找A的緊鄰的下一個滿足selector的兄弟節(jié)點 -
$(A).prev(selector)查找A的緊鄰的上一個滿足selector的兄弟節(jié)點 -
$(A).siblings(selector)查找A的所有滿足selector的兄弟節(jié)點 -
$(A).add(selector/DOM元素/HTML格式標(biāo)簽)在A合集中添加元素一起進行操作 -
$(A).each()for循環(huán)迭代器
$(A).each(function(index,element) {
$(this).css('color','red');
//index 是當(dāng)前循環(huán)元素的索引
//element是對應(yīng)的循環(huán)元素
//this指向當(dāng)前對應(yīng)的循環(huán)元素
})
12. jQuery 事件
12.1 click() 和 dbclick()
-
ele.click( function () { } )元素ele被點擊時粘衬，調(diào)用函數(shù)荞估，函數(shù)中的this指向綁定事件的元素
eg:
$("button").click(function(e) { alert(this); });
this指向綁定事件的元素
-
ele.click()手動觸發(fā)點擊事件 ele.click( data, function() { } )
$("#test").click(123, function(e) {
//e.data=>123;
}
-
dbclick()雙擊事件
12.2 鼠標(biāo)事件
- 用法同
click()事件 -
mouseup()是鼠標(biāo)松開時觸發(fā) -
mousedown()是鼠標(biāo)按下時觸發(fā) -
mousemove()鼠標(biāo)移動時觸發(fā) -
mouseover()鼠標(biāo)移入時觸發(fā)（當(dāng)元素和它的父元素都有綁定mouseover()事件時，元素觸發(fā)mouseover()事件稚新，會向上冒泡觸發(fā)父元素的mouseover()事件） -
mouseout()鼠標(biāo)移出時觸發(fā)（也會冒泡） -
mouseenter()鼠標(biāo)移入時觸發(fā)（不會冒泡） -
mouseleave()鼠標(biāo)移出時觸發(fā)（不會冒泡） -
hover(hoverIn,hoverOut);hoverIn是鼠標(biāo)移入時執(zhí)行的事件函數(shù)勘伺，hoverOut是鼠標(biāo)移出時執(zhí)行的事件函數(shù) -
focusin()元素獲得鼠標(biāo)焦點時觸發(fā)（有冒泡） -
focusout()元素失去鼠標(biāo)焦點時觸發(fā)（有冒泡） -
focus()元素獲得鼠標(biāo)焦點時觸發(fā)（無冒泡） -
blur()元素失去鼠標(biāo)焦點時觸發(fā)（無冒泡） - 點擊鼠標(biāo)事件，
event.which屬性的值：鼠標(biāo)左鍵為1褂删，鼠標(biāo)中鍵為2飞醉，鼠標(biāo)右鍵為3；
12.3 表單事件
-
change();<input> <textarea> <select>的元素值改變后失去焦點時觸發(fā) -
select();<input> <textarea>元素值被選中時觸發(fā) -
submit()提交表單時觸發(fā)
12.4 鍵盤事件
-
keydown()鍵按下時觸發(fā) -
keyup()鍵松開時觸發(fā) keypress()
12.5 事件綁定 on
- 綁定一個事件
$(selector).on('click',function() { });
- 多個事件綁定同一個函數(shù)（用空格分隔多個事件）
$(selector).on('mouseover mouseout',function() { });
- 多個事件綁定不同函數(shù)
$(selector).on({
mouseover:function() { },
mouseout:function() { }
})
- 傳遞數(shù)據(jù)
function greet(event) {
alert(event.data.name);
}
$(selector).on("click",{
name:"chendahong"
},greet);
-
on()事件委托
$(selector1).on("click","selector2",fn)向上冒泡到第二參數(shù)選擇器指定的元素時觸發(fā)函數(shù)fn
12.6 事件卸載off
-
$(selector).off("mouseover");卸載事件mouseover -
$(selector).off()卸載全部事件
12.7 事件對象
$(selector).on("click",function(event) {
//event 是事件對象
//event.target 是當(dāng)前觸發(fā)事件的元素
}
-
event.type獲取事件的類型 -
event.pageX和event.pageY獲取鼠標(biāo)當(dāng)前相對于頁面的坐標(biāo) -
event.preventDefault()阻止默認(rèn)行為 -
event.stopPropagation() 方法阻止事件冒泡 -
event.which獲取在鼠標(biāo)單擊時屯阀，單擊的是鼠標(biāo)的哪個鍵 -
event.currentTarget在事件冒泡過程中的當(dāng)前DOM元素 -
this和event.target的區(qū)別:js中事件是會冒泡的缅帘，所以this是可以變化的，但event.target不會變化难衰，它永遠是直接接受事件的目標(biāo)DOM元素
13. jQuery 動畫
13.1 元素隱藏顯示（display:none 和 display:block）
-
$(selector).hide()直接隱藏 -
$(selector).hide("fast/slow/數(shù)值")fast:200ms,slow:600ms
$(selector).hide({
duration:3000, //3000ms
complete:function() { } //動畫完成時執(zhí)行的函數(shù)
})
- ``$(selector).show(數(shù)值)`` 數(shù)值：動畫執(zhí)行時間（毫秒）
- ``$(selector).toggle(數(shù)值)`` 元素原來隱藏钦无，則顯示；元素原來顯示盖袭，則隱藏
- ```
$(selector).toggle({
duration:3000, //3000ms
complete:function() { } //動畫完成時執(zhí)行的函數(shù)
})
-
$(selector).slidedown(duration,fn)（下拉改變高度）duration:執(zhí)行時間失暂；fn動畫執(zhí)行完畢的回調(diào)函數(shù) -
$(selector).slideup(duration,fn)（上卷改變高度動畫） -
$(selector).slideToggle()上卷下拉切換顯示或隱藏 -
$(selector).fadeOut(參數(shù))淡出（透明度在0-1間切換） -
$(selector).fadeInt(參數(shù))淡入（透明度在0-1間切換） -
$(selector).fadeToggle(參數(shù))淡出淡入切換顯示或隱藏（透明度在0-1間切換） -
$(selector).fadeTo(duration,opacity,fn)duration:動畫執(zhí)行時間彼宠；opacity:指定達到的透明度；fn:動畫執(zhí)行完畢的回調(diào)函數(shù) $(selector).animate()
$(selector).animate({
properties1://要改變的屬性值一
properties2://要改變的屬性值二
},[duration],[fn]); //duration:動畫執(zhí)行時間弟塞，fn:動畫執(zhí)行完畢的回調(diào)函數(shù)
-
$(selector).stop()停止第一個動畫 -
$(selector).stop(true)停止所有動畫 -
$(selector).stop(true,true)停止所有動畫凭峡，跳到第一個動畫的完成狀態(tài)
14. jQuery的一些方法
-
$.each(array/object,fn);fn第一個參數(shù)是數(shù)組的索引或者對象的屬性名，第二個參數(shù)是數(shù)組索引對應(yīng)的元素值或者對象屬性名對應(yīng)的屬性值 -
$.inArray(value,array,start);value:要查找的值决记，array:查找的數(shù)組摧冀，start:查到的起始位置。如果要查找的值不在查找的數(shù)組中霉涨，返回“-1”按价，查找到一個即停止 -
$.trim(string);對字符串去除空格 -
$(selector).get(index);獲取jQuery對象合集中的某個元素，index是正值時從左往右計笙瑟，起始值是 0楼镐，index是負(fù)值時從右往左計，起始值是 -1 -
$(selector).index();index中無參數(shù)往枷，則返回選擇器選中的jQuery合集中的第一個相對于他的兄弟元素的位置 -
$(selector).index(dom元素/jq對象);返回改DOM元素或jq對象相對于selector選擇器選中的jQuery對象合集中的位置
