引入個人庫沖突解決:
將$引用的對象映射回原始的對象冰垄。相當(dāng)于引入了兩個$選擇器的js
jQuery.noConflict(); // 使用 jQuery
jQuery(“div p”).hide(); // 使用其他庫的 $()
$(“content”).style.display = ‘none’;
核心: 【完結(jié)】
選擇器 : 【完結(jié)】
如果選擇器中包含特殊字符,可以用兩個斜杠轉(zhuǎn)義。 一個符號加兩個 兩個符號加四個
$(“div:contains(‘John’)”) 內(nèi)容包含john的元素 $(“input[name!=’newsletter’]”).attr(“checked”, true);
$(“td:empty”) 查找空元素
屬性 : 【完結(jié)】
prop(“屬性”,”值”:也可以是函數(shù)”); 和attr用法一樣 值返回true和false 屬性后面的函數(shù)
$(“input[type=’checkbox’]”).prop({ disabled: true }); 禁用頁面上所有的復(fù)選框
$(“l(fā)i”).parent().is(‘ul’) 判斷l(xiāng)i的父元素是否是ul 返回false和true if($(“.top-nav a”).eq(0).is(“.active”))判斷類名加點(diǎn)
下拉框不折疊 全部顯示
篩選 : 【完結(jié)】
if ( $(this).hasClass(“protected”) ) 判斷是否包含這個類
$(“div”).css(“background”, “#c8ebcc”).filter(“.middle”).css(“border-color”, “red”); 過濾器 選中類名為**的元素
jQuery 代碼:
$(“p”).slice(0, 2).css(“color”,”red”); 選中元素的下標(biāo) 從什么開始到什么結(jié)束包括結(jié)束元素
$(“p”).wrapInner(““); 在每個 p 元素的內(nèi)容上包圍 b 元素:
$(“l(fā)i:first”).closest([“ul”, “body”]); 查找祖先元素 和parents類似
$(“h1”).add(“p”).add(“span”).css(“background-color”,”yellow”); 給選中的元素設(shè)置相同的樣式
map() 遍歷出來是jquery對象虹茶,通過get方法轉(zhuǎn)換為dom對象
$(“ul”).has(“l(fā)i”).addClass(“full”); 給包含有l(wèi)i子元素的ul加一個類名
find()與(“p span”)相同逝薪。
$(“#term-1”).nextUntil(term3, “dd”).css(“color”, “yellow”);
$(“p”).offsetParent().css(“background-color”,”red”); 設(shè)置距離自己最近的父元素 必須是定位的屬性的父元素
$(‘li.item-a’).parentsUntil(‘.level-1’).css(‘background-color’, ‘red’);
查找指定元素的所有父元素 parentsUntil(‘.level-1’)代表找到哪里停止 但不包括他本身
$(‘#term-2’).prevUntil(‘dt’).css(‘background-color’, ‘red’); 指定元素的同輩元素 代表找到哪里停止 但不包括他本身
$( “l(fā)i.third-item” ).nextAll().addBack().css( “background-color”, “red” ); 包括他自己在內(nèi) 都變成紅色
$(“p”).contents().not(“[nodeType=1]”).wrap(““);
$(“p”).find(“span”).end().css(“border”, “2px red solid”)把P的邊框設(shè)置了。 意思還是設(shè)置p元素 毛用沒有這個 返回的意思 必須和find一起使用
文檔處理 : 【完結(jié)】
$(p).wrap(”“); 給元素外層包一層標(biāo)簽
unwrap() 刪除指定元素的父元素
wrapAll() 用一個div包裹所有匹配的段落
$(“p”).wrapInner(““); 給元素內(nèi)部包含一層標(biāo)簽
$(“p”).replaceWith(“Paragraph. “); 替換當(dāng)前標(biāo)簽
$(“Paragraph. “).replaceAll(“p”); 和上面差不多
$(“p”).empty(); 刪除元素的所有子節(jié)點(diǎn)
$(“p”).remove(); 刪除所有匹配的元素 $(“p”).detach(); 和前面一樣 但會保留它的數(shù)據(jù)和方法
$(“b”).clone(); 克隆自己 屬性方法寫在括號里
prepend 插入到元素里內(nèi)容的前面蝴罪,prependTo 相反
css : 【完結(jié)】
$.cssHook
scrollTop scrollLeft 將滾動條設(shè)置到指定的位置
change(); 當(dāng)元素內(nèi)容發(fā)生改變時觸發(fā)董济,只有當(dāng)離開時才觸發(fā) 自己寫個函數(shù)邊寫邊觸發(fā)的那種
error 一個函數(shù),如果圖片未加載 然后進(jìn)行什么樣式
offset 值不寫單位 outerHeight(true) 不寫參數(shù)獲取元素高度 寫了true加上外邊距內(nèi)邊距啥的 margin padding
事件 : 【完結(jié)】
$(“body”).on(“click”,”p”,function() 這樣寫后面添加進(jìn)去的就有事件了 off刪除on的綁定事件
bind 同時綁定多個事件 采用css({})方法
slideToggle() 點(diǎn)一下隱藏 點(diǎn)一下出來
one 語法和bind一樣 只會觸發(fā)一次事件
trigger 點(diǎn)擊事件的時候選中文本域
triggerHandler 和上面的不一樣 觸發(fā)時不會選中文本
$( “#target” ).contextmenu(function() 鼠標(biāo)右鍵單擊事件 左鍵是click
var userObj = { name: “CodePlayer”, age: 18 }; // 為所有p元素綁定click事件要门,并傳入附加數(shù)據(jù)(user)
$(“p”).on( “click”, userObj, function(event){
alert( event.data.name ); // CodePlayer 必須是對象或數(shù)組
} );
$(“p”).bind(“click”, {foo: “bar”}, handler); 點(diǎn)擊的時候把foo的值彈出來 首先寫一個handler的函數(shù) ————–$(“p”).unbind( “click” ) 與bind相反 刪除綁定的事件
live 和on方法類似 1.7版本移除 和他相反的die方法也移除
delegate live方法的代替 undelegate刪除綁定的事件 {先寫元素虏肾,后寫事件}
toggle 兩次點(diǎn)擊事件 相當(dāng)于hover 可以寫個回調(diào)函數(shù)
fousein 可以檢測子元素獲取焦點(diǎn) 然后寫事件處理程序 fouseout 和這個相反
keydown 鍵盤按下 switch(event.keyCode) 鍵盤碼 keypress 它發(fā)生在當(dāng)前獲得焦點(diǎn)的元素上{計(jì)算在輸入域中的按鍵次數(shù)} keyup 抬起事件
mousedown 移入元素 并按下 mousemove 移動 mouseup 離開
select 當(dāng)文本框內(nèi)容被選中時 觸發(fā)的事件 就是要復(fù)制時那種狀態(tài)
submit 提交事件 可以return false;阻止
unload 不管用 關(guān)閉時沒提示 【onunload事件IE中有效欢搜,其他無效 {onbeforeunload}事件封豪,所有瀏覽器有效 缺點(diǎn)刷新時會提示】
window.location.href=”about:blank”; window.close(); 點(diǎn)擊元素關(guān)閉窗口
change $(“option:checked”) 對選中的option操作
$(‘.play-list ul’).empty(); 移除元素內(nèi)的所有內(nèi)容和子節(jié)點(diǎn)
off 移除事件
$( document ).bind(“click”, function( e ) { 事件委托
$( e.target ).closest(“l(fā)i”).toggleClass(“hilight”);
});
isnan函數(shù) 檢測是否為數(shù)值
效果 : 【完結(jié)】
$(“p”).slideDown(); 以滑動的方式顯示隱藏的元素 $(“p”).slideUp(“slow”); 相反 都有回調(diào)函數(shù) $(“p”).slideToggle(“slow”);
$(“p”).fadeIn(“slow”); $(“p”).fadeTo(“slow”, 0.66); 這倆一樣 出現(xiàn) $(“p”).fadeOut(“slow”); 隱藏 $(“p”).fadeToggle(“slow”,”linear”);
$(“#box”).stop(); 停止正在執(zhí)行動畫的元素 $(‘#foo’).slideUp(300).delay(800).fadeIn(400); 中間的函數(shù) 用來延遲動畫的執(zhí)行
.finish()方法和.stop(true, true)很相似,.stop(true, true)將清除隊(duì)列炒瘟, $(“div”).finish();停止動畫
jQuery.fx.off = true; 將頁面上所有有動效的元素停止動畫 意思就是本來有過度效果 設(shè)置true后就沒了 false就有了
jQuery.fx.interval = 1000; 意思是過度的時間速度 相當(dāng)于speed每秒變化多少
————————————————————————————————————————
工具 :調(diào)試瀏覽器是否支持用到
過濾數(shù)組中小于 0 的元素吹埠。
$.grep( [0,1,2], function(n,i){
return n > 0;
});
排除數(shù)組中大于 0 的元素,使用第三個參數(shù)進(jìn)行排除疮装。
$.grep( [0,1,2], function(n,i){
return n > 0;
}, true);
array,callback,[invert]Array,Function,BooleanV1.0array:待過濾數(shù)組缘琅。
callback:此函數(shù)將處理數(shù)組每個元素。第一個參數(shù)為當(dāng)前元素廓推,第二個參數(shù)而元素索引值刷袍。此函數(shù)應(yīng)返回一個布爾值。另外樊展,此函數(shù)可設(shè)置為一個字符串呻纹,當(dāng)設(shè)置為字符串時,
將視為“l(fā)ambda-form”(縮寫形式专缠?)居暖,其中 a 代表數(shù)組元素,i 代表元素索引值藤肢。如“a > 0”代表“function(a){ return a > 0; }”。
invert:如果 “invert” 為 false 或?yàn)樵O(shè)置糯景,則函數(shù)返回?cái)?shù)組中由過濾函數(shù)返回 true 的元素嘁圈,當(dāng)”invert” 為 true,則返回過濾函數(shù)中返回 false 的元素集蟀淮。
得到所有l(wèi)i的元素?cái)?shù)組 把jQuery集合中所有DOM元素恢復(fù)成一個數(shù)組最住。 alert($(‘li’).toArray());
$.fn.jquery .jquery 屬性是通過 jQuery 原型賦值的,通過使用它的別名 $.fn 進(jìn)行引用怠惶。
事件對象 :
$(document).bind(‘mousedown’,function(e){ mouseup 去除move事件就行了 去除down事件就沒效果了
e.preventDefault();
$(document).bind(“mousemove”,function(e){
$(“#log”).text(“X: ” + e.pageX + “, Y: ” + e.pageY);
});
$(document).bind(“mouseup”,function(){
$(document).off(“mousemove”);
})
});
event.type 返回事件類型
event.which 將 event.keyCode 和 event.charCode 標(biāo)準(zhǔn)化了涨缚。
$(‘#whichkey’).bind(‘keydown’,function(e){ 返回按下的鍵盤碼
$(‘#log’).html(e.type + ‘: ‘ + e.which );
});
event.keyCode; 鍵盤碼
延遲對象 :
回調(diào)函數(shù) :
var callbacks = $.Callbacks(); 回調(diào)列表中添加一個回調(diào)或回調(diào)的集合 callbacks.disable(); 禁止回調(diào)
callbacks.empty(); 從列表中刪除所有的回調(diào). callbacks.fire( ‘hello again’ ); 這個參數(shù)或參數(shù)列表傳回給回調(diào)列表。
callbacks.fired() 使用callbacks.fired() 確定策治,如果列表中的回調(diào)至少有一次被呼叫 呼叫過true 沒有false
callbacks.fireWith( window, [‘foo’,’bar’]); 相當(dāng)于兩個參數(shù)
console.log( callbacks.has( foo ) ); // true 意思就是這個函數(shù)被調(diào)用了沒有
callbacks.lock(); 鎖定 后面的參數(shù)就修改不了了 callbacks.locked() 檢測這個函數(shù)傳參是否已被鎖定 是true 否false
callbacks.remove( foo ); 刪除回調(diào)函數(shù) 在它后面?zhèn)鞯膮?shù)都不行
var callbacks = $.Callbacks( “once” );
once: 確保這個回調(diào)列表只執(zhí)行一次(像一個遞延 Deferred).
memory: 保持以前的值和將添加到這個列表的后面的最新的值立即執(zhí)行調(diào)用任何回調(diào) (像一個遞延 Deferred)
unique: 確保一次只能添加一個回調(diào)(所以有沒有在列表中的重復(fù)).
stopOnFalse: 當(dāng)一個回調(diào)返回false 時中斷調(diào)用
默認(rèn)情況下脓魏,回調(diào)列表將像事件的回調(diào)列表中可以多次觸發(fā)兰吟。
- jq源碼鏈?zhǔn)秸{(diào)用實(shí)現(xiàn) 寫在原型對象中 通過return this;完成鏈?zhǔn)?/li>
- 再會茂翔!