1、應用jQuery庫： <script src=" 路徑/名稱.js " >< /script>
導入 外鏈式css樣式：<link rel="stylesheet" href=" 路徑/名稱.css />
2、$(document).ready（function(){ ...//代碼區 }）; ---作用是等頁面的文檔（document）中的節點都加載完畢後，再執行後續的代碼
3、jQuery對象與DOM對象不一樣：
原生js方式：
var p = document.getElementById('imooc');
p.innerHTML = '您好！通過慕課網學習jQuery纔是最佳的途徑';
p.style.color = 'red';
jQuery方式：
var $p = $('#imooc');
$p.html('您好！通過慕課網學習jQuery纔是最佳的途徑').css('color','red');
【 通過$('#imooc')方法會得到一個$p的jQuery對象，$p是一個類數組對象。這個對象裏面包含了DOM對象的信息，然後封裝了很多操作方法，調用自己的方法html與css，得到的效果與標準的JavaScript處理結果是一致的。】
4、轉化。jQuery是一個類數組對象，而DOM對象就是一個單獨的DOM元素:注意“” 是否需要
1） jQ轉化爲DOM對象
var div=$("div").get( 0 ); //利用get( 0 )將jQ對象轉化爲DOM對象 var $div = $('div'); // jQuery對象--->DOM對象 var div = $div[0]; //轉化成DOM對象---$div.get(0); div.style.color = 'red' ; //操作dom對象的屬性
2）DOM對象轉化爲jQ對象
var div=$ ( document.getElementById( "div" )); //利用$(DOM對象)，將DOM對象轉化爲jQ對象 var div = document.getElementsByTagName('div'); //DOM對象--->jQuery對象 var $div = $(div); //轉化爲jQuery對象 var $first = $div.first(); //找到第一個div元素 $first.css('color', 'red'); //給第一個元素設置顏色
【在jQuery事件中，this是原生js對象，轉化爲jQuery對象：$(this) 】
外部樣式 < 內部樣式 < 內聯樣式
5、jQuery、$ ---變量名已被使用，二者作用是一樣的
也可以自己命名一個變量作爲jQuery對象，同時可以釋放$或jQuery, 其一可以作爲正常變量來聲明、賦值、使用
var jq=jQuery.noConflict( ); ---注意只能定義一個（$、jQuery）,且和釋放時使用的要不同【因爲變量的提升】
6、入口函數三種方式
1）jQuery(document).ready(function($) {...})
2）$(document).ready(function($) {...})
3）$(function(){ ..} )
7、jQuery入口函數不會實現覆蓋，加載完所有的標籤後執行
js的入口函數window.onload會覆蓋，只執行最後的一個，加載完所有的標籤和內容 後 執行
8、選擇器：$("div") 或 $("#idName") 或 $(".className") ---根據選擇器的類型傳參
1）下一個兄弟選擇器 $("#li2+li") ---先找到基準結點，再用+標籤
後面的所有兄弟選擇器 $("#li2~li") --- .....用~
2）篩選選擇器（都是以: 開頭）
" li : eq( 4 ) "---先選中：前面的所有元素 在篩選第幾個【參數是index，選中的集合中，從0開始】
: even/odd ---下標是偶數/奇數的元素
: lt( 5 ) ---less than 小於下標的元素，不包括自身
: gt(6 ) ---greater than 大於下標的元素，不包括自身
: first/last ----第一個/最後一個
3）子元素篩選選擇器
$('.first-div a:first-child'); //父元素是class 爲 first-div ,第一個子元素是a的 【元素只匹配一個單獨的元素，但是:first-child選擇器可以匹配多個：即爲每個父級元素匹配第一個子元素。這相當於:nth-child(1) 】
$('.last-div a:nth-child(2)'); //n值是“索引”，也就是說，從1開始計數
".tag : eq( 2 ) " 區別：索引、若兩個指定class下，會將兩個class下的元素當成一個集合，從0開始往下排列，而 nth-child(2) 則將兩個父元素分別當成一個集合，各自從
4）屬性選擇器（屬性寫在【】中）
" a [ href ] " --- 有href 屬性的標籤
[ href = ' value ' ] ---屬性值爲 value 的標籤 （注意‘’ 這個得和外面的“” 相區分）
[ href ! = ' value ' ] --- 屬性不爲href 和 屬性是href 但 屬性值 不爲 value 的標籤
[ href ^/$ = ' value ' ] ---- 屬性值以 value 開頭/結尾 的標籤
[ href * = ' value ' ] ---- 屬性值 包含 value 的標籤
[ ...] [ ...] ---多個屬性選擇滿足 的標籤
5）表單選擇器/表單屬性選擇器
$('input: text'); -----要寫input
9、css函數 ：
$(" li ").css( "backgroundColor" , function( index ,value){ ... } ) ; ---本來，css樣式的第二個參數就是前一個參數樣式值，現在用一個匿名函數去生成，函數的返回值就是樣式值 【index 選中標籤的下標索引，value 是樣式值】
事件：
1）只需要把之前的名字的on去掉（使用事件名稱） 如 onclick-> click onchange -> change
$(" #box " ).hover( function(){ ..} ,function(){ ..} ); ----hover()方法的兩個參數，相當於鼠標進入、離開的事件
2)）on監聽 ---推薦
$( " #button " ).on ("click" , function(){ ...} ); ---on( ) 第一個參數設定什麼點擊事件（事件名稱） ，第二是事件處理程序 （off移除）
函數:
1）$("button").addClass(" fl ") ; --- addClass() 添加類型
2） ... removeClass(...) ; -------移除類型
3） ... .toggleClass(...); -- ---- 如果存在（不存在）就刪除（添加）一個類型
4） ... .attr( { " id " : " btn " , "class": " fl " } ) ;
.attr(" " ) / removeAttr( ) //一個參數（屬性名）
5） ... .html( " 設置文本，會覆蓋 " ); ---- html() 沒有參數則是獲取文本內容
.text()結果返回一個字符串，包含所有匹配元素的合併文本 ---
.html處理的是元素內容 .text處理的是文本內容
.val( ) ----處理表單元素的值，比如 input, select 和 textarea
6）.eq( 2 ) ; ----類似於選擇器:eq() ，找到下標爲2的元素標籤
7）.index( ); -----獲取當前元素的下標---從整個指定的集合來看
8） .show("slow" , function() { ...//動畫結束後的行爲 }); ----顯示，無參則無動畫
9） .hide( ); ---隱藏
10） .toggle( ); ---切換 ，顯示與隱藏
11） .slideDown/slideUp/slideToggle( ); ---向下出現，向上隱藏，切換
12） .fadeIn/fadeOut/fadeToggle( ); ---淡入淡出（慢慢出現、消失）通過透明度的改變實現【fade是有狀態的，toggle下，連續點同樣一個，會改變，in和out的狀態需要主動改變】
13） .fadeTo( 1000, 0.3 ); ---第二個參數是透明度的值，一秒後透明度的變化
14）.animate( { width:"30px" ,left:" +=30px" } ，'fast' ，'swing' , function(){ ...} ) ; ---動畫，第一個參數{....}是要改變的屬性(注意如果是要移動的話指定left的前提下要是有定位的，第二個是時間 ，第三個是動畫的效果【速率，先慢後快，加速...】，第四個是動畫完成時執行的函數【回調函數】
15） .stop( true , true) ; ---結束動畫，無參則結束一切動畫 ，第一個參數是true則清空隊列，立即結束動畫，第二個參數true則 當前正在執行的和在執行隊列的立即完成動畫
16） .delay( 1000) ; ----延遲隊列中項目執行
17） .map( ) ; ----將一組元素轉換成其他數組（不論是否是元素數組)，可以用這個函數來建立一個列表，不論是值、屬性還是CSS樣式，或者其他特別形式。
var arr=$('span').map(function(index, elem) { return $(this); }) ; ---函數返回的值就是元素是span的數組
18） .children( ' .li' ); ---取得子元素的集合，無參則獲取所有匹配的元素，參數是進一步的篩選條件
19） .parent/parents( ); ---該元素的父元素/祖先元素的集合
20） .offsetParent( ) ; ----最近的、帶有定位的父元素【如果都沒有，找到html】
21） .next( ' #box' ); ---下一個兄弟元素【多個滿足元素匹配的集合，則查找到多個】，並且id是box ，參數是進一步的篩選條件，若沒有則是當前元素的下一個
22） .nextAll( ) ; ---當前元素的下面所有兄弟 元素
23） .prev/prevAll() ; --- ....上一個/上面所有兄弟元素
24） .siblings( ':odd') ; --- 所有兄弟元素【同輩元素】，當進一步篩選時，比如下標奇數的元素，則整個兄弟元素集合排序時看，當前元素是不能算進去的
10、結點
1）$( " html結構 ");----使用HTML結構創建： $(" <div id=" box" class=" layout" > 文本內容</div>" ) ;
2） A.append(B) = B.appendTo(A) ; ----向結點元素插入內容，放在最末尾
append() 前面是被插入的對象，後面是要在對象內插入的元素內容
appendTo() 前面是要插入的元素內容，而後面是被插入的對象
3）A.prepend(B) = B.prependTo(A) ; ----向結點元素插入內容，放在首位
4）.after( content) / before(content) ; ---在匹配的每個元素後面/前面 c插入結點元素作爲其兄弟結點
- 都可以接收HTML字符串，DOM 元素，元素數組，或者jQuery對象，用來插入到集合中每個匹配元素的前面或者後面
- 2個方法都支持多個參數傳遞after(div1,div2,....)
5） $('.box').empty(); ---移除指定元素的所有子節點和文本（不包括自己）【移除裏面div的所有元素，它只是清空內部的html代碼，但是標記仍然留在DOM中 】
6） $('p').remove(" :contains('3') ") ; ---移除指定元素及其所有子節點（包括自己），若帶參數，則表示進一步篩選再刪除 ，可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節點
$("p").filter(":contains('3')").remove();
7） .detach(); ---刪除，保留數據的刪除【界面不可見，節點還是保存在內存中，數據與事件都不會丟失】，通過append( )方法可以將刪除的恢復過來。JQuery特有的，所以它只能處理通過JQuery的方法綁定的事件或者數據
8） .clone( ) ;---克隆：複製所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文字節點
注意：如果參數爲true ，則代表連事件也一起拷貝
9）A.replaceWith( B); ---用提供的內容替換集合中所有匹配的元素並且返回被刪除元素的集合
10） B.replaceAll( A ) ; ---同樣是替換
11） .wrap( ); ---給一個指定元素添加一個父元素包裹起來
$('p').wrap('<div></div>') ； ----參數可以是元素，也可以是一個回調函數
$('p').wrap(function() { return '<div></div>' ； //與第一種類似,只是寫法不一樣 })；
12） .unwrap() ; ---刪除匹配元素的父元素
13） .wrapAll( ); ---將集合中的每一個元素用其他元素包裹起來，給每一個匹配的元素增加一個父元素
參數是元素 $('p').wrapAll(' <div></div>'); ---- <div> <p> </p> <p> </p> </div>
參數是回調函數 function(){ return "<div> </div>"｝<div> <p> </p> </div> <div> <p> </p> </div>
14） .wrapInner( ); ---將合集中的元素內部所有的子元素用其他元素包裹起來，並當作指定元素的子元素
11、樣式、窗體屬性、方法
1)$('p').outerWidth( false) /outerHeight(true ); --- 獲取第一個匹配元素外部高度（默認包括補白和邊框）。
此方法對可見和隱藏元素均有效。【設置爲 true 時，計算邊距在內】---（對應js的offsetWidth）
2)$(window).scrollTop() ; ---窗體 滾動的距離
3) .html( ); ---獲取第一個匹配元素裏面的html內容，包括標籤【有參數就是設置內容的值】
4) .text( ); ---獲取 匹配元素裏面的文本內容
5) $('input').val( ' 設置的內容' ); ---獲取/設置 輸入框的內容值
6) $.each( $(" li ")，function( index ，value) { ...} ); ---調用全局變量$的循環遍歷數組方法，兩個參數：第一個參數是要遍歷的數組名，第二個是回調方法，index是索引，value是值
= $( " li " ).each( function() { ...} ) ; ---直接用 數組 調用方法
$.each( { 'key1': "value1", name: 'cc' }，function( key ,value ) { ...} ) ; ---遍歷json數據，只需將index變爲key
類似第一個方法，只是第一個參數變爲一個json數據對象名，第二個參數同樣是回調函數，用來對對象進行操作
7) .end( ); ---回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變爲前一次的狀態。如果之前沒有破壞性操作，則返回一個空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作
$('li : eq(2 ) ').next().css(' ..' ).end.prev().css(' ..' ); ---保證了，在設置第三個li 的下一個兄弟樣式後，再設置第三個li 的前一個兄弟的樣式【若沒有end，則設置完next() 之後，會改變當前$(this)】
8) A.find(' li' ); ---查找到相應元素。遍歷當前元素集合中每個元素的後代。只要符合，不管是兒子輩，孫子輩都可以
9) .closest( ); ---從元素本身開始，在DOM 樹上逐級向上級元素匹配，並返回最先匹配的祖先元素;向上查找，直到找到一個匹配的就停止查找 [ul.class/ul .class]
10) .add( ); ---添加一新的元素,可以接受幾乎任何一個jQ對象、js對象---注意這個添加
$('li').add('p');
$('li').add(document.getElementsByTagName('p')[0]);
$('li').add('<p>新的p元素</p>').appendTo(目標位置);
相關例子（轉侵刪）：http://www.imooc.com/code/10393
12、 事件
1)點擊： .click() ; ---單擊 .dbclick(); ---雙擊
$('button').click( function(){ ...//事件 } ); ---
相關例子（轉侵刪):http://www.imooc.com/code/9710
2) mousedown()/mouseup() ; ---鼠標按下
3) mouseover( )/mouseout(); ---鼠標移入移出
4) mouseenter()/mouseleave() ; ---鼠標進入/移出，阻止 子元素事件的冒泡
5) hover( function(){ ...//鼠標進入觸發事件} ，function(){ ...//鼠標移出事件 } ); ---鼠標移入移出事件,參數不固定
6) focusin( ..)/focusout( ) ; 【表單事件】 ---元素獲得/失去焦點時觸發的事件
$("#test").focusin(11111,function(e) {
//this指向 div元素
//e.data => 11111 傳遞數據
});
focus()在元素本身產生，focusin()在元素包含的元素中產生 http://www.imooc.com/code/9796
8) select( ); 【表單事件】---input 中，textarea 或 text 的元素中的文本被選擇時觸發
$("input").select(function(e){ //監聽input元素中value的選中
alert(e.target.value); //觸發元素的select事件
});
9) submit( ); 【表單事件】---提交表單
10) keydown( )/ keyup() ; 【鍵盤事件】---鍵盤按下和擡起觸發的事件
注意：同步輸入時，keydown() 會之後 一個字符
$('.target1').keydown(function(e) { //監聽鍵盤按鍵11) keypress( ); 【鍵盤事件】---類似keydown()
$("em:first").text(e.target.value); //獲取輸入的值
});
12) .on( events ,function(){ ....//事件 } ) ;----事件綁定
13) off("mousedown mouseup" ,function(){ ..} ); ---解除on的綁定，第一個爲要解綁的事件，可一個或多個，若無參數則解綁所有事件
14) event.target ---事件對象。代表當前觸發事件的元素，可以通過當前元素對象的一系列屬性來判斷是不是我們想要的元素
一個ul裏有多個li，爲了給每個li添加事件，一個一個添加過於繁瑣，就直接給其父元素ul添加，由於事件的冒泡，點擊li就觸發了ul，爲了找到是哪個li就用 事件對象
//多事件綁定
$("ul").on('click',function(e){
alert('觸發的元素是內容是: ' + e.target.textContent)
})
15)事件對象的屬性和方法
event.type---觸發元素的事件類型
event.pageX / event.pageY ---獲取鼠標當前相對於頁面的座標
event.preventDefault() ----阻止默認行爲
event.stopPropagation() ----阻止事件冒泡
event.which ----獲取在鼠標單擊時，單擊的是鼠標的哪個鍵
event.currentTarget ----事件冒泡過程中的當前DOM元素
this 和event.target ----DOM對象，通過$( ) 轉化爲jQ對象【例子（如侵刪）：http://www.imooc.com/code/10048】
16) .trigger( 'click') ; ----主動去觸發事件。根據綁定到匹配元素的給定的事件類型執行所有的處理程序和行爲
$('#elem').on('click', function() {
alert("觸發系統事件");
});
$('#elem').trigger('click');
$('#elem').on('Aaron', function(event,arg1,arg2) { //傳遞參數方式
alert("自觸自定義時間");
});
$('#elem').trigger('Aaron',['參數1','參數2']);
17) .triggerHandler( ); ---類似trigger()
13、動畫
1) $( " li " ).show/hide( "fast" ，function() { ...//動畫完成之後的事件 } ) ; ---顯示/隱藏動畫，可無參
2) .toggle( ); ---切換顯示、隱藏動畫,, 通過設置display來實現隱藏
· show與hide方法是修改的display屬性，通過是visibility屬性佈局需要通過css方法單獨設置
· 如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫樣式
· 如果讓show與hide成爲一個動畫，那麼默認執行動畫會改變元素的高度，高度，透明度
3) .slideDown/slideUp( ) ; ---上卷下拉效果，，通過設置高度來實現隱藏
4) .slideToggle( ) ; ---切換上卷下拉
5) .fadeIn/fadeOut( 1000, "linear" ) ; ---淡入淡出,, 通過設置透明度來實現隱藏
6) .fadeToggle( ) ; ---切換淡入淡出
7) .fadeTo( "fast" ，0.3，function(){ ..} ) ; ---指定淡入淡出的最終效果透明度（0-1）
淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，變化的區間[0,1] 轉，傾刪：來源
8) . animatr( ....); ---執行動畫【看上面】轉侵刪示例來源
$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
9) .stop(queue ... ); ---停止動畫
.stop(); 停止當前動畫，點擊在暫停處繼續開始
· .stop(true); 如果同一元素調用多個動畫方法，尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當調用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數提供true值,那麼在隊列中的動畫其餘被刪除並永遠不會運行
· .stop(true,true); 當前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標值
10) .each( array/object ,function(index ,value ){ ....//回調函數 } ) ; --遍歷數組或對象數據的方法
11) jQuery.inArray( value, array ,[ fromIndex ]); 用於在數組中搜索指定的值，並返回其索引值。如果數組中不存在該值，則返回 -1。【索引>-1則代表查找的值存在於數組之中】
//指定索引開始的位置 var index = $.inArray('a' , ['a','b','c','d','a','c'] , 2); $arrObject.text('a的索引是: '+ index );
12) jQuery.trim( $('input').val() ); ---用於去除字符串兩端的空白字符
13) .get( index) ; ----單獨獲取操作合集中的的某一個元素
1. get方法是獲取的dom對象，也就是通過document.getElementById獲取的對象 2. get方法是從0開始索引 3. 可以從後往前索引，傳遞一個負索引值，注意的負值的索引起始值是-1
14) .index( ) ; ---已知元素在合集中找到對應的索引
<ul> <a></a> <li id="test1">1</li> <li id="test2">2</li> <li id="test3">3</li> </ul>
$("li").index(); ---沒有傳遞參數，結果是1，意思是返回同輩的排列循序，第一個li之前有a元素,同輩元素是a開始爲0，所以li的開始索引是1
.index( selector ) ---dom對象作爲參數
.index( element ) ---jQuery對象作爲參數
· 如果不傳遞任何參數給 .index() 方法，則返回值就是jQuery對象中第一個元素相對於它同輩元素的位置
· 如果在一組元素上調用 .index() ，並且參數是一個DOM元素或jQuery對象， .index() 返回值就是傳入的元素相對於原先集合的位置
· 如果參數是一個選擇器， .index() 返回值就是原先元素相對於選擇器匹配元素的位置。如果找不到匹配的元素，則 .index() 返回 -1 侵刪：示例
14、jQuery 擴展插件（增加方法）
1)給jQuery對象追加函數：
$.fn.funName=function() { ...} ; --調用： $( ' div' ).funName();
2)給全局變量$/jQuery追加函數
$.funName=function() { ...} ; ---調用： $.funName( );
3)背景顏色動畫---背景顏色改變動畫
4)懶加載---有的圖片只有滾動到相應位置纔會加載
15、json數據
1) jsonObject 和jsonArray ,一個是json對象，一個是json數組
jsonObject有key: value 組成，key必須爲字符串。 ---以{ key: value }
jsonArray ---以[ ]，值可以爲jsonObject,也可以嵌套 jsonArray
2) 解析
var json=$.parseJSON(data); / /解析 爲jsonObject var json_1=json.name; //獲取json數據下的name的值 var json_arr=json.Array; //獲取到了Array下的值，是一個數組【只是key爲Array,可以是其他名字】 $.each( json_arr，function( index ,value ){ //通過each遍歷獲取數組裏的值 var hei=value.height; //找出所有height的值 } );
var myUrl = "http://7lrzfo.com1.z0.glb.clouddn.com/mydata.txt"; $.ajax({ //使用ajax解析網絡數據 url: myUrl, //請求 數據的地 址 type: 'get', //請求的方式 dataType: 'text' //返回的數據類型 //data: {param1: 'value1'}, ---get請求方式不用這個 }) .done(function(data) { //請求成功之後觸發,data接收返回的數據的參數 var json=$.parseJSON(data); //可以將text轉化爲json數據 console.log(json); }) .fail(function() { console.log("error"); }) .always(function() { console.log("complete"); });