1. jQuery是什么带猴？(了解)###
- www.github.com
- jQuery 其實就是一堆的js函數，是普通的js督赤，只不過應用廣泛嘁灯，形成了行業(yè)標準。
- 參考書：鋒利的jQuery
- 學習參考：http://www.w3school.com.cn/jquery/
- 官網：http://jquery.com/
2. jQuery的重點###
2.1 jQuery入口函數(全球都會)
2.2 jQuery的選擇器(其實就是CSS的選擇器)
2.3 jQuery的Dom操作
2.4 jQuery的樣式操作
2.5 jQuery的動畫
2.6 jQuery的事件處理
3.jQuery的入口函數###
-
3.1 語法
- jQuery(document).read(function(){ });
- $(function(){ });// **
- window.onlaod = function(){}
- $ === jQuery // $是jQuery全局函數的別名躲舌。
-
3.2注意事項： （重點）
document ready: 是html文檔準備就緒丑婿，也就是dom樹創(chuàng)建完成了∶恍叮可以進行dom操作了羹奉。 重要的是：html頁面下載完成，并準備就緒
window.onload: 是整個頁面所有的資源都加載完成约计，圖片诀拭、js、css等…
3.3 文檔加載順序： （重點）
下載html頁面煤蚌，解析html標簽耕挨，遇到link標簽加載css，遇到script加載js..
4. jQuery 選擇選取元素###
4.1 jQuery選擇器####
4.1.1 ID選擇器（js一般盡量用ID選擇器尉桩，效率最高） （重點）$(“#id”).html();
4.1.2 類選擇器 （重點）$(“.className”).text();
4.1.3 標簽選擇器 （重點）$(‘p’).click();
4.1.4 屬性選擇器$(“l(fā)i[id]”)筒占、 $(“l(fā)i[id=’link’]”).fadeIn();
4.1.5 層級選擇器 （重點）$(“l(fā)i .link”).show();
4.1.6 父子選擇器$(“ul > li”)
4.1.7 偽類選擇器$(“p:first”)
$(“ul li:eq(3)”)4.1.8 表單選擇器$(“:text”)
$(“:checkbox”)
$(“:checked”)
4.2 選擇器匯總####
4.3 jQuery選擇方法####
4.3.1 獲取父級元素
* $(selector).parent(); //獲取直接父級
* $(selector).parents('p'); //獲取所有父級元素直到html
4.3.2 獲取子代和后代的元素
* $(selector).children(); //獲取直接子元素
* $(selector).find("span"); //獲取所有的后代元素
* find方法 可能用的多。
4.3.3 獲取同級的元素
* $(selector).siblings() //所有的兄弟節(jié)點
* $(selector).next() //下一個節(jié)點
* $(selector).nextAll() //后面的所有節(jié)點
* $(selector).prev() //前面一個的兄弟節(jié)點
* $(selector).prevAll() //前面的所有的兄弟節(jié)點
4.3.4 過濾方法
* $("div p").last(); //取最后一個元素
* $("div p").first(); //取第一個元素
* $("p").eq(1); //去第n個元素
* $("p").filter(".intro"); //過濾魄健，選擇所有p標簽帶有 .intro類
$('p.intro')
* $("p").not(".intro"); //去除赋铝，跟上面的filetr正好相反
5.jQuery的Dom操作##
5.1 獲取html的內容####
$(selector).text() - 設置或返回所選元素的文本內容
$(selector).html() - 設置或返回所選元素的內容（包括 HTML 標記）
$(selector).val() - 設置或返回表單字段的值
通過不同參數來確定是獲取還是設置值
$("#blin").text("傳智播客"); var txt = $("#blin").text();使用html來創(chuàng)建dom的方式效率比較高嗽冒。 遠大于： document.createElement();
案例：02動態(tài)創(chuàng)建表格.html
5.2 樣式操作####
5.2.1 基本樣式操作
$(selector).css("color","red") |css({}) 設置或返回匹配元素的樣式屬性疫诽。
$(selector).height() 設置或返回匹配元素的高度。
$(selector).offset().left => { left:99, top: 22} 返回第一個匹配元素相對于文檔的位置屉符。left,top
$(selector).offsetParent() 返回最近的定位祖先元素析恋。
$(selector).position() 返回第一個匹配元素相對于父元素的位置良哲。
$(window).scrollLeft() 設置或返回匹配元素相對滾動條左側的偏移。
$(window).scrollTop(0) 設置或返回匹配元素相對滾動條頂部的偏移助隧。
$(selector).on("scroll",function(){}); $(selector).width() 設置或返回匹配元素的寬度筑凫。5.2.2 樣式類操作*盡量操作樣式類，少直接操作css屬性
$(selector).addClass('class'); 向匹配的元素添加指定的類名并村。
$(selector).removeClass('class'); 從所有匹配的元素中刪除全部或者指定的類巍实。
$(selector).toggleClass('class') 從匹配的元素中添加或刪除一個類。
$(selector).hasClass('class') 檢查匹配的元素是否擁有指定的類哩牍。5.3 屬性操作
$(selector).attr("id") 設置或返回匹配元素的屬性和值
$(selector).removeAttr()從所有匹配的元素中移除指定的屬性棚潦。5.4 動態(tài)創(chuàng)建
$(selector).append() - 在被選元素的結尾插入內容
$(selector).append(node)
$(selector).append('<div></div>')
$(selector).appendTo(); - 追加到..
$(selector).prepend() - 在被選元素的開頭插入內容
$(selector).after() - 在被選元素之后插入內容
$(selector).before() - 在被選元素之前插入內容
案例04城市選擇案例.html
6. 事件處理##
6.1 簡單事件綁定方法####
- .click(hander) .click() //綁定事件 或者觸發(fā) click事件
- .blur() //失去焦點事件，同上
- .hover(mousein, mouseleave) //鼠標移入膝昆，移出
- mouseout： 當鼠標離開元素及它的子元素的時都會觸發(fā)丸边。
- mouseleave: 當鼠標離開自己時才會觸發(fā)叠必，子元素不觸發(fā)。
- .dbclick() 雙擊
- change 改變,比如：文本框發(fā)送改變妹窖，下來列表發(fā)生改變等…
- focus 獲得焦點
- keyup, keydown, keypress : 鍵盤 鍵被按下纬朝。
- mousedown, mouseover
6.2 綁定事件的方式 bind方式（不推薦，1.7以后的jQuery版本被on取代）
語法格式：.bind( eventType [, eventData ], handler )
參數說明
第一個參數：事件類型
第二個參數：傳遞給事件響應方法的數據對象骄呼，可以省略共苛。
事件響應方法中獲取數據方式： e.data
-
第三個參數：事件響應方法第二個參數可以省略。
例如： $("p").bind("click", function(e){ //事件響應方法 }); $("p").on('click',function(e){ //事件響應方法 })
6.3 delegate方式（推薦谒麦，性能高俄讹，支持動態(tài)創(chuàng)建的元素）####
- 語法格式：$(selector).delegate( selector, eventType, handler )
- 語法說明：
- 第一個參數:selector， 子選擇器
- 第二個參數：事件類型
- 第三個參數：事件響應方法
例如：
$(".parentBox").delegate("p", "click", function(){
//為 .parentBox下面的所有的p標簽綁定事件
});
$(".parentBox").on("click","p", function(){
//為 .parentBox下面的所有的p標簽綁定事件
});
優(yōu)勢：效率較高
6.4 one綁定一次事件的方式####
* .one( events [, data ], handler )
例如：
$( "p" ).one( "click", function() {
alert( $( this ).text() );
});
$("p").on("click",function(){
$(this).off('click');
//事件方法執(zhí)行了一次后绕德，就立即解綁事件
})
6.5 on綁定的方式（整合了bind、delegate 烈建議使用的方式））####
- jQuery1.7版本后摊阀，jQuery用on統(tǒng)一了所有的事件處理的方法
- 語法格式：$(selector).on( events [, selector ] [, data ], handler )
- 參數介紹：
第一個參數：events耻蛇，事件名
第二個參數：selector,類似delegate
第三個參數: 傳遞給事件響應方法的參數
-
第四個參數：handler，事件處理方法
例如： //綁定一個方法 $( "#dataTable tbody tr" ).on( "click", function() { console.log( $( this ).text() ); }); //給子元素綁定事件 $( "#dataTable tbody" ).on( "click", "tr", function() { console.log( $( this ).text() ); }); //綁定多個事件的方式 $( "div.test" ).on({ click: function() { $( this ).toggleClass( "active" ); }, mouseenter: function() { $( this ).addClass( "inside" ); }, mouseleave: function() { $( this ).removeClass( "inside" ); } });
6.6 解綁####
-
unbind解綁 bind方式綁定的事件( 在jQuery1.7以上被 on和off代替)
- $(selector).unbind(); //解綁所有的事件
- $(selector).unbind(“click”); //解綁指定的事件
-
undelegate解綁delegate事件
- $( “p” ).undelegate(); //解綁所有的delegate事件
- $( “p” ).undelegate( “click” ); //解綁所有的click事件
-
off解綁on方式綁定的事件
- $( “p” ).off();
- $(“P”).off(‘click’);
- $( “p” ).off( “click”, “*” ); // 解綁所有的click事件胞此，兩個表示所有
- $( “body” ).off( “click”, “p”, foo );
6.7 觸發(fā)事件####
- 6.7.1 簡單事件觸發(fā)
$(selector).click(); //觸發(fā) click事件 - 6.7.2 trigger方法觸發(fā)事件
$( “#foo” ).trigger( “click” ); - 6.7.3 triggerHandler觸發(fā) 事件響應方法臣咖，不觸發(fā)瀏覽器行為
$( “input” ).triggerHandler( “focus” );
6.8event對象的簡介####
- event.data //傳遞的額外事件響應方法的額外參數
- event.currentTarget === this //在事件響應方法中等同于this，當前Dom對象
- event.target //事件觸發(fā)源漱牵，不一定===this
- event.pageX //The mouse position relative to the left edge of the document
- event.pageY
- event.stopPropagation()//阻止事件冒泡
- e.preventDefault(); //阻止默認行為
- event.type //事件類型：click夺蛇，dbclick…
- event.which //鼠標的按鍵類型：左1 中2 右3
- keydown : a,b,c
- event.keyCode// code的c是大寫
7. jQuery動畫系統(tǒng)##
7.1隱藏顯示####
* $(selector).show(speed,callback);
* $(selector).hide(1000);
* $(selector).toggle("slow");
* 三個方法的語法都一致，參數可以有兩個酣胀，第一個是動畫的速度刁赦，第二個是動畫執(zhí)行完成后的回調函數。
* 第一個參數是：可以是單詞或者毫秒數
7.2淡入淡出####
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(1000)
$(selector).fadeToggle('fast',function(){})參數等同于 7.1*
$(selector).fadeTo(.5); //淡入到 0透明闻镶，1不透明
7.3滑動####
* $(selector).slideDown(speed,callback);
* $(selector).slideUp(speed,callback);
* $(selector).slideToggle(speed,callback);
7.4動畫####
* $(selector).animate({params},speed,callback);
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
},2000);
}).animate({},1000);
7.5結束動畫####
* $(selector).stop()
* $(selector).stop(stopAll,goToEnd);
8. jQuery補充##
8.1 each函數####
- 全局的
- $.each(array, function(index, object){})
- 普通jQuery對象的each方法
- $(“l(fā)i”).each(function(index, element){} )
- 參數的順序是一致的甚脉。
