jQuery鏈?zhǔn)秸{(diào)用與show知識淺析
上篇文章給大家介紹了jQuery的框架，有關(guān)jquery的基礎(chǔ)知識可以參考下。
jQuery使用許久了，但是有一些API的實現(xiàn)實在想不通。下面將使用簡化的代碼來介紹，主要關(guān)注jQuery的實現(xiàn)思想。
相較于上一篇，代碼更新了：21~78
(function(window, undefined){
function jQuery(sel){
return new jQuery.prototype.init(sel);
}
jQuery.prototype = {
constructor: jQuery,
init: function(sel){
if(typeof sel === 'string'){
var that = this;
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
},
show: function(){
Array.prototype.forEach.call(this, function(node){
//if(node.style) continue; //textnode沒有style
//刪除style上的display:none
var display = node.style.display;
if(display === 'none'){
//dispaly置為空后，css如果有display則css的生效
//否則默認(rèn)的生效
node.style.display = '';
}
//元素display值為非默認(rèn)值情況，需要還原為oldDisplay：div->display:inline-block
//或 檢測css上的display是否為none
if(node.style.display==='' || isHidden(node)){
//有oldDispaly則設(shè)置
if(node.oldDisplay) node.style.display = node.oldDisplay;
//沒有則設(shè)置為元素默認(rèn)值或元素當(dāng)前值
else node.style.display = getDisplay(node);
}
})
//鏈?zhǔn)秸{(diào)用
return this;
},
hide: function(){
Array.prototype.forEach.call(this, function(node){
if(!isHidden(node)) {
//jQuery使用其cache機(jī)制存儲信息，這里簡化一下
//直接掛載在對應(yīng)的dom下
node.oldDisplay = getDisplay(node);
node.style.display = 'none';
}
})
return this;
}
}
function getDisplay(node){
var display = window.getComputedStyle(node, null).getPropertyValue('display');
if(display === 'none'){
var dom = document.createElement(node.nodeName);
//插入到body中
document.body.appendChild(dom);
//即可獲取到元素display的默認(rèn)值
var display = window.getComputedStyle(dom, null).getPropertyValue('display');
document.body.removeChild(dom);
}
return display;
}
function isHidden(node) {
//忽略未append進(jìn)document的元素這種隱藏情況：$('<div>block</div>')未append
return window.getComputedStyle(node, null).getPropertyValue('display') === 'none';
}
jQuery.prototype.init.prototype = jQuery.prototype;
window.$ = jQuery;
})(window);
先拿hide函數(shù)熱身一下。如上篇提到的，jQuery會將獲取到的nodeList處理成數(shù)組，所以一上來，我們用forEach處理數(shù)組里的每一個node節(jié)點(diǎn)。
接下來，我們只需要將每一個節(jié)點(diǎn)的style.display置為'none'即可隱藏。很簡單，對吧？(⊙０⊙) 。oldDisplay和return this先不管╰(￣▽￣)╮
hide: function(){
Array.prototype.forEach.call(this, function(node){
if(!isHidden(node)) {
//jQuery使用其cache機(jī)制存儲信息，這里簡化一下
//直接掛載在對應(yīng)的dom下
node.oldDisplay = getDisplay(node);
node.style.display = 'none';
}
})
return this;
}
其中isHidden是判斷該元素是否隱藏：已經(jīng)隱藏的元素就沒必要再去處理了，直接跳過
function isHidden(node) {
//忽略未append進(jìn)document的元素這種隱藏情況：$('<div>block</div>')未append
return window.getComputedStyle(node, null).getPropertyValue('display') === 'none';
}
--------------------------
接下來，來個稍繁瑣的show。先拋出一個問題來引發(fā)一系列問題：
hide某個元素只需要將display:none，那么show呢？
display:block不就行了嗎？這樣確實可以將元素顯示出來。但是萬一元素原來的值是display:inline呢？
那在hide處保存原來的值不就行了嗎？就像以下的代碼：
node.oldDisplay = getDisplay(node);
要是執(zhí)行show前沒有不執(zhí)行hide呢？比如下面這種情況，不就沒有oldDisplay了嗎(⊙０⊙)
<style>
div{ display:none; }
</style>
<div>display:none</div>$('div').show()
好，關(guān)鍵的地方到了：我們獲取元素display的默認(rèn)值就可以了吧？比如div默認(rèn)是block，span默認(rèn)是inline。
思路有了，那么接下來的問題是：如何獲取元素display的默認(rèn)值？
嘿嘿嘿，想不到吧？這里需要用點(diǎn)小技巧，大體思路如下：通過nodeName創(chuàng)建一個新的標(biāo)簽，再獲取。
有個地方可以再優(yōu)化一下，getDisplay獲取到元素display默認(rèn)值后，可以使用jQuery的cache機(jī)制存起來（實際上jQuery也是這么做了）。
function getDisplay(node){
var display = window.getComputedStyle(node, null).getPropertyValue('display');
if(display === 'none'){
var dom = document.createElement(node.nodeName);
//插入到body中
document.body.appendChild(dom);
//即可獲取到元素display的默認(rèn)值
var display = window.getComputedStyle(dom, null).getPropertyValue('display');
document.body.removeChild(dom);
}
return display;
}
然后，綜合這兩種情況：
//有oldDispaly則設(shè)置 if(node.oldDisplay) node.style.display = node.oldDisplay; //沒有則設(shè)置為元素默認(rèn)值或元素當(dāng)前值 else node.style.display = getDisplay(node);
以為這樣就結(jié)束了？NO,show函數(shù)的情況還是挺復(fù)雜的，我們大致要應(yīng)對這幾種情況：
<style>
#none,#none2{ display: none; }
</style>
<body>
<div id="div">默認(rèn)值為block</div>
<span id="span">默認(rèn)值為inline</span>
<div id="div2" style="display:inline-block;">修改為inline-block</div>
<div id="none">通過css隱藏了</div>
<div id="none2" style="display:none">通過css和style隱藏了</div>
</body>
最終,show函數(shù)變成了這鬼樣ψ(╰_╯)。大致思路如下：
show: function(){
Array.prototype.forEach.call(this, function(node){
//if(node.style) continue; //textnode沒有style
//刪除style上的display:none
var display = node.style.display;
if(display === 'none'){
//dispaly置為空后，css如果有display則css的生效
//否則默認(rèn)的生效
node.style.display = '';
}
//元素display值為非默認(rèn)值情況，需要還原為oldDisplay：div->display:inline-block
//或 檢測css上的display是否為none
if(node.style.display==='' || isHidden(node)){
//有oldDispaly則設(shè)置
if(node.oldDisplay) node.style.display = node.oldDisplay;
//沒有則設(shè)置為元素默認(rèn)值或當(dāng)前值
else node.style.display = getDisplay(node);
}
})
}
--------------------------
鏈?zhǔn)秸{(diào)用就是類似這種情況：
$('div').show().hide().css('height','300px').toggle()
實現(xiàn)起來非常簡單，只要在每個函數(shù)后面return this即可
--------------------------
有同學(xué)說：喂！這個show,hide不對吧？是不是漏了時間參數(shù)？ 用setTimeOut自己實現(xiàn)吧~>_<~+。
本節(jié)最主要是讓大家知道jQuery需要考慮的情況非常多（很多臟活）。即時簡化了代碼，依然還是這么長。
寫完后，發(fā)現(xiàn)show還有一種情況沒考慮：
div{ display:none !important; }
<div>大家自己開腦洞，怎么處理吧(⊙０⊙)</div>
相關(guān)文章
下面小編就為大家?guī)硪黄猨Query 局部div刷新和全局刷新方法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
jQuery對象數(shù)據(jù)緩存Cache原理及jQuery.data方法區(qū)別介紹
jQuery.data(..)來實現(xiàn)數(shù)據(jù)緩存，但有兩個用戶經(jīng)常使用的data([key],[value])和jQuery.data(element,[key],[value])，接下來為大家介紹下他們的區(qū)別，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要分享了15個大家都熟知的jquery小技巧，幫助提高你jQuery應(yīng)用的簡單小技巧，感興趣的小伙伴們可以參考一下2015-12-12
基于jQuery的message插件實現(xiàn)右下角彈出消息框
有時在頁面加載的時候，需要在頁面的右下角彈出一個小的提示框，顯示一些提示信息給用戶，通過使用jQuery的message插件，可以很方便的實現(xiàn)這個效果，在使用之前先介紹一下message插件中的方法的使用。2011-01-01
這篇文章主要介紹了10分鐘學(xué)會寫Jquery插件,通過一個實例分兩步完成一個簡單的插件,非常實用,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了簡單的jQuery入門指引,jQuery是當(dāng)今最為流行的JavaScript庫,需要的朋友可以參考下2015-07-07
jQuery ajax serialize() 方法使用示例
serialize() 方法創(chuàng)建以標(biāo)準(zhǔn) URL 編碼表示的文本字符串，下面為大家介紹下jQuery serialize方法的使用2014-11-11
jquery checkbox選擇器在程序開發(fā)中經(jīng)常會用到，接下來通過實例代碼給大家介紹jquery獲取checkbox選中的值，需要的朋友參考下2016-01-01
IE7中無法使用Jquery動態(tài)操作頁面元素的name屬性，怎么解決這個問題呢？下面小編給大家?guī)砹私鉀QIE7中使用jQuery動態(tài)操作name問題，需要的朋友參考下吧2017-08-08
這篇文章主要介紹了jquery實現(xiàn)圖片左右切換的方法,設(shè)計jQuery操作頁面元素及對應(yīng)樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-05