Jquery回看小記錄

引入個人庫沖突解決:

將$引用的對象映射回原始的對象冰垄。相當(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>
  • 再會茂翔!
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末混蔼,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子珊燎,更是在濱河造成了極大的恐慌惭嚣,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,104評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件悔政,死亡現(xiàn)場離奇詭異晚吞,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)谋国,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評論 3 399
  • 文/潘曉璐 我一進(jìn)店門槽地,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人烹卒,你說我怎么就攤上這事闷盔。” “怎么了旅急?”我有些...
    開封第一講書人閱讀 168,697評論 0 360
  • 文/不壞的土叔 我叫張陵逢勾,是天一觀的道長。 經(jīng)常有香客問我藐吮,道長溺拱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,836評論 1 298
  • 正文 為了忘掉前任谣辞,我火速辦了婚禮迫摔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘泥从。我一直安慰自己句占,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評論 6 397
  • 文/花漫 我一把揭開白布躯嫉。 她就那樣靜靜地躺著纱烘,像睡著了一般。 火紅的嫁衣襯著肌膚如雪祈餐。 梳的紋絲不亂的頭發(fā)上擂啥,一...
    開封第一講書人閱讀 52,441評論 1 310
  • 那天,我揣著相機(jī)與錄音帆阳,去河邊找鬼哺壶。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的山宾。 我是一名探鬼主播至扰,決...
    沈念sama閱讀 40,992評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼塌碌!你這毒婦竟也來了渊胸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,899評論 0 276
  • 序言:老撾萬榮一對情侶失蹤台妆,失蹤者是張志新(化名)和其女友劉穎翎猛,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體接剩,經(jīng)...
    沈念sama閱讀 46,457評論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡切厘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評論 3 341
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了懊缺。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片疫稿。...
    茶點(diǎn)故事閱讀 40,664評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖鹃两,靈堂內(nèi)的尸體忽然破棺而出遗座,到底是詐尸還是另有隱情,我是刑警寧澤俊扳,帶...
    沈念sama閱讀 36,346評論 5 350
  • 正文 年R本政府宣布途蒋,位于F島的核電站,受9級特大地震影響馋记,放射性物質(zhì)發(fā)生泄漏号坡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評論 3 334
  • 文/蒙蒙 一梯醒、第九天 我趴在偏房一處隱蔽的房頂上張望宽堆。 院中可真熱鬧,春花似錦茸习、人聲如沸畜隶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽代箭。三九已至,卻和暖如春涕刚,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背乙帮。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評論 1 272
  • 我被黑心中介騙來泰國打工杜漠, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 49,081評論 3 377
  • 正文 我出身青樓驾茴,卻偏偏與公主長得像盼樟,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子锈至,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式晨缴。設(shè)計(jì)者無需花費(fèi)時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,347評論 0 2
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式峡捡。設(shè)計(jì)者無需花費(fèi)時間糾纏JS復(fù)雜的高級特性击碗。 1....
    LaBaby_閱讀 1,182評論 0 1
  • 一:認(rèn)識jquery jquery是javascript的類庫,具有輕量級们拙,完善的文檔稍途,豐富的插件支持,完善的Aj...
    xuguibin閱讀 1,715評論 1 7
  • 第一章 入門 基本功能:訪問和操作 dom 元素砚婆,控制頁面樣式械拍,對頁面的事件處理,與ajax完美結(jié)合装盯,有豐富的插件...
    X_Arts閱讀 1,048評論 0 2
  • //------------------------- 第一章 認(rèn)識JQuery ----------------...
    米塔塔閱讀 725評論 0 9