1.入口函數
1 (document).ready(function());2" role="presentation">(document).ready(function());2(document).ready(function());2(function(){});
jQuery入口函數與js入口函數的區別：
jQuery的入口函數是在 html所有標簽都加載之后，就會(huì )去執行。
Js的window.onload事件是等到所有內容，包括外部圖片之類(lèi)的文件加載完后，才會(huì )執行
3.jQuery動(dòng)畫(huà)
顯示/隱藏
1 $(selector).show(speed,callback);
2 $(selector).hide(speed,callback);
3 $(selector).toggle(speed,callback);
speed：隱藏/顯示的速度，可以取以下值：”slow”、”fast” 或毫秒
callback：隱藏或顯示完成后所執行的函數
滑動(dòng)
1 $(selector).slideDown(speed,callback);
2 $(selector).slideUp(speed,callback);
3 $(selector).slideToggle(speed,callback);
淡入淡出
1 $(selector).fadeIn(speed,callback);
2 $(selector).fadeOut(speed,callback);
3 $(selector).fadeToggle(speed,callback);
4 $(selector).fadeTo(speed,opacity,callback);
opacity：必選參數，將淡入淡出效果設置為給定的不透明度
自定義動(dòng)畫(huà)
1 $(selector).animate({params},speed,callback);
必需的 params 參數定義形成動(dòng)畫(huà)的 CSS 屬性。
可選的 speed 參數規定效果的時(shí)長(cháng)。它可以取以下值：”slow”、”fast” 或毫秒。
可選的 callback 參數是動(dòng)畫(huà)完成后所執行的函數名稱(chēng)。
操作多個(gè)屬性
停止動(dòng)畫(huà)
1 $(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動(dòng)畫(huà)隊列。默認是 false。
可選的 goToEnd 參數規定是否立即完成當前動(dòng)畫(huà)。默認是 false。
stop(true) 所有動(dòng)畫(huà)不執行
stop(false,true) 動(dòng)畫(huà)立即執行完畢，這種用法使用較多
4.jQuery HTML
操作dom
text() - 設置或獲取所選元素的文本內容
html() - 設置或獲取所選元素的內容(包括 HTML 標記)
val() - 設置或獲取表單字段的值
attr()- 設置或獲取屬性的值
有一個(gè)參數就是設置，沒(méi)有參數就是獲取!
removeAttr ()- 移除屬性
操作樣式
addClass() 給指定的元素添加樣式類(lèi)名
removeClass() 給指定的元素移除樣式類(lèi)名
toggleClass () 給指定的元素切換樣式類(lèi)名
hasClass () 判斷是否有樣式類(lèi)名
操作元素
1.在內部添加
$(“p”).append(node) // 在p內部元素的結尾追加元素node
node.appendTo(“p”) // 把node追加到p內部元素的結尾
$(“p”).prepend(node) // 在p內部元素的開(kāi)頭追加元素node
node.prependTo(“p”) // 把node追加到p內部元素的開(kāi)頭
2.在外部添加
$(“p”).before(node) // 在p后面添加兄弟節點(diǎn)node
$(“p”).after(node) // 在p前面添加兄弟節點(diǎn)node
3.刪除
remove() - 刪除被選元素及其子元素(自殺)
empty() - 刪除被選元素的子元素，不包括被選元素!
刪除被選元素的子元素用html(“”)更加高效!
4.復制
clone()- 如果加參數true就是深層復制，會(huì )把之前綁定的事件也給復制
replaceWith()-替換節點(diǎn)
jQuery尺寸
1.寬度和高度
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
.height()方法和.css(“height”)的區別：
返回值不同：.height()方法返回的是數字類(lèi)型(20); .css(“height”)返回的是字符串類(lèi)型(20px)
2.坐標值
offset() //獲取和設置元素在當前窗口的相對偏移，返回的是一個(gè)對象，設置值后自動(dòng)變成相對定位 Object {top: 50, left:8}
position() //只能獲取元素相對于父親的偏移，返回的是一個(gè)對象，不能設置值
獲取值：offset().left offset().top position() .left position() .top
設置值：$(“p”).offset({left:txtLeft,top:txtTop});
區別：
使用position()方法時(shí)事實(shí)上是把該元素當絕對定位來(lái)處理，獲取的是該元素相當于最近的一個(gè)擁有絕對或者相對定位的父元素的偏移位置。使用position()方法時(shí)如果其所有的父元素都為默認定位(static)方式，則其處理方式和offset()一樣，是當前窗口的相對偏移。
使用offset()方法不管該元素如何定位，也不管其父元素如何定位，都是獲取的該元素相對于當前視口的偏移。
3.滾動(dòng)條
scrollTop() //獲取或者設置垂直方向上到頁(yè)面頂端的距離
scrollLeft() // 獲取或者設置水平方向上到頁(yè)面左端的距離
scroll() // 觸發(fā)滾動(dòng)事件：$(selector).scroll(function(){…});
5.jQuery事件綁定機制
bind方式
語(yǔ)法格式：.bind( eventType, [ eventData ], handler )
參數說(shuō)明
第一個(gè)參數：事件類(lèi)型
第二個(gè)參數：傳遞給事件響應方法的數據對象，可以省略。
事件響應方法中獲取數據方式：e.data
第三個(gè)參數：事件響應方法
1 $(“p”).bind(“click”,function(e){
2 //事件響應方法
3 });
one方式
語(yǔ)法格式：one( events [, data ], handler )
只綁定一次事件
delegate方式
語(yǔ)法格式：$(selector).delegate( selector, eventType, handler )
語(yǔ)法說(shuō)明：
第一個(gè)參數:selector， 子選擇器
第二個(gè)參數：事件類(lèi)型
第三個(gè)參數：事件響應方法
1 $(“.parentBox”).delegate(“p”,”click”, function(){
2 //為 .parentBox下面的所有的p標簽綁定事件
3 });
on方式
jQuery1.7版本后，jQuery用on統一了所有的事件處理的方法
語(yǔ)法格式：$(selector).on( events, [ selector ],[ data ], handler )
參數介紹：
第一個(gè)參數：events，事件名
第二個(gè)參數：selector,類(lèi)似delegate
第三個(gè)參數: 傳遞給事件響應方法的參數
第四個(gè)參數：handler，事件處理方法
1 //綁定一個(gè)方法
2 $( “#dataTable tbodytr” ).on( “click”, function() {
3 console.log( $( this ).text() );
4 });
5
6 //給子元素綁定事件
7 $( “#dataTable tbody”).on( “click”, “tr”, function() {
8 console.log( $( this ).text() );
9 });
10
11 //綁定多個(gè)事件的方式
12 $( “p.test” ).on({
13 click: function() {
14 $( this ).toggleClass( “active”);
15 },
16 mouseenter: function() {
17 $( this ).addClass( “inside” );
18 },
19 mouseleave: function() {
20 $( this ).removeClass( “inside”);
21 }
22 });
解綁事件
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", "**" ); // 解綁所有的click事件，兩個(gè)*表示所有
$( "body" ).off( "click", "p", foo );
1 案例1：
2 var foo = function() {
3 // Code to handle some kind of event
4 };
5
6 // … Now foo will be called whenparagraphs are clicked …
7 $( “body” ).on(“click”, “p”, foo );
8
9 // … Foo will no longer be called.
10 $( “body” ).off(“click”, “p”, foo );
11
12 案例2：(了解)解綁命名空間的方式：
13 var validate = function() {
14 // Code to validate form entries
15 };
16
17 // Delegate events under the”.validator” namespace
18 $( “form” ).on(“click.validator”, “button”, validate );
19
20 $( “form” ).on(“keypress.validator”, “input[type=’text’]”, validate );
21
22 // Remove event handlers in the”.validator” namespace
23 $( “form” ).off( “.validator”);
觸發(fā)事件
簡(jiǎn)單事件觸發(fā)：$(selector).click();//觸發(fā) click事件
trigger方法觸發(fā)事件：$( “#foo” ).trigger( “click” );
triggerHandler觸發(fā)事件響應方法，不觸發(fā)瀏覽器行為：$(“input” ).triggerHandler( “focus” );
event對象的簡(jiǎn)介
event.data //傳遞的額外事件響應方法的額外參數
event.currentTarget //在事件響應方法中等同于this，當前Dom對象
event.target //事件觸發(fā)源，不一定===this
event.pageX
event.pageY
event.stopPropagation() //阻止事件冒泡
e.preventDefault(); //阻止默認行為
event.type //事件類(lèi)型：click，dbclick…
event.which //鼠標的按鍵類(lèi)型：左1 中2 右3
6.數據緩存：data( )
獲取值：$(“p”).data(“index”);
設置值：$(“p”).data(“index”,3);
& .data()跟.attr() 方法的區別：
獲取數據的時(shí)候，attr方法需要傳入參數，data方法可以不傳入參數，這時(shí)候獲取到的是一個(gè)js對象，即使沒(méi)有任何data屬性。
獲取到的數據類(lèi)型不同，attr方法獲取到的數據類(lèi)型是字符串(String)，data方法獲取到的是相應的類(lèi)型。
data方法獲取到數據之后，我們使用一個(gè)對象來(lái)接收它，那么就可以直接操作(設置值或獲取值)這個(gè)對象，而attr方法不可以。并且通過(guò)這種方式，要比.data(key,value)的方式更高效!
data-attribute屬性會(huì )在頁(yè)面初始化的時(shí)候放到j(luò )Query對象，被緩存起來(lái)，而attr方法不會(huì )。
聯(lián)系客服
