<meta name="keywords" content="华夏棋牌,jquery链式挪用,jquery链式,show" />
华夏棋牌 > web前端 > js教程 > 注释

jQuery链式挪用与show知识浅析_jquery

原创 2016-05-16 08:59:58 0 692
赞助会员专享特权
华夏棋牌 上篇文章给年夜家简介了,有关jquery的基础知识可以参考下。

jQuery应用良久了,然则有一些API的完成着实想不通。下面将应用简化的代码来简介,主要关注jQuery的完成头脑。

相较于上一篇,代码更新了: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的掉效
//否则默许的掉效
node.style.display = '';
}
//元素display值为非默许值情形,须要回复为oldDisplay:div->display:inline-block
//或 检测css上的display能否为none
if(node.style.display==='' || isHidden(node)){
//有oldDispaly则设置
if(node.oldDisplay) node.style.display = node.oldDisplay;
//没有则设置为元素默许值或元素以后值
else node.style.display = getDisplay(node);
}
})
//链式挪用
return this;
},
hide: function(){
Array.prototype.forEach.call(this, function(node){
if(!isHidden(node)) {
//jQuery应用其cache机制存储信息,这里简化一下
//直接挂载在对应的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的默许值
var display = window.getComputedStyle(dom, null).getPropertyValue('display');
document.body.removeChild(dom);
}
return display;
}
function isHidden(node) {
//忽视未append进document的元素这类隐藏情形:$('
block
')未append return window.getComputedStyle(node, null).getPropertyValue('display') === 'none'; } jQuery.prototype.init.prototype = jQuery.prototype; window.$ = jQuery; })(window);

先拿hide函数热身一下。如上篇提到的,jQuery会将获得得的nodeList处置赏罚赏罚成数组,以是一下去,我们用forEach处置赏罚赏罚数组里的每个node节点。

接上去,我们只须要将每个节点的style.display置为'none'便可隐藏。很质朴,对吧?(⊙0⊙) 。oldDisplay和return this先岂论╰( ̄▽ ̄)╮

hide: function(){
Array.prototype.forEach.call(this, function(node){
if(!isHidden(node)) {
//jQuery应用其cache机制存储信息,这里简化一下
//直接挂载在对应的dom下
node.oldDisplay = getDisplay(node);
node.style.display = 'none';
}
})
return this;
} 

其中isHidden是断定该元素能否隐藏:曾经隐藏的元素就没须要再行止置赏罚了,直接跳过

function isHidden(node) {
//忽视未append进document的元素这类隐藏情形:$('
block
')未append return window.getComputedStyle(node, null).getPropertyValue('display') === 'none'; }

--------------------------

接上去,来个稍繁琐的show。先抛出一个效果来激起一系列效果:

hide某个元素只须要将display:none,那么show呢?

display:block不就好了吗?这样确切可以将元素显示出来。然则万一元素原来的值是display:inline呢?

那在hide处生涯原来的值不就好了吗?就像以下的代码:

node.oldDisplay = getDisplay(node); 

若是推行show前没有不推行hide呢?比以下面这类情形,不就没有oldDisplay了吗(⊙0⊙)


display:none
$('div').show()

好,要害的地方到了:我们取得元素display的默许值便可以了吧?好比div默许是block,span默许是inline。

思绪有了,那么接上去的效果是:若何取得元素display的默许值

嘿嘿嘿,想不到吧?这里须要用点小手艺,年夜体思绪以下:经由历程nodeName培植一个新的标签,再取得。

有个地方可以再优化一下,getDisplay获得得元素display默许值后,可以应用jQuery的cache机制存起来(现实上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的默许值
var display = window.getComputedStyle(dom, null).getPropertyValue('display');
document.body.removeChild(dom);
}
return display;
}

然后,综合这两种情形:

//有oldDispaly则设置
if(node.oldDisplay) node.style.display = node.oldDisplay;
//没有则设置为元素默许值或元素以后值
else node.style.display = getDisplay(node); 

以为这样就阻拦了?NO,show函数的情形照样挺严重年夜的,我们年夜致要应对这几种情形:


华夏棋牌

默许值为block
默许值为inline
修改成inline-block
经由历程css隐藏了

事实,show函数酿成了这鬼样ψ(╰_╯)。年夜致思绪以下:

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的掉效
//否则默许的掉效
node.style.display = '';
}
//元素display值为非默许值情形,须要回复为oldDisplay:div->display:inline-block
//或 检测css上的display能否为none
if(node.style.display==='' || isHidden(node)){
//有oldDispaly则设置
if(node.oldDisplay) node.style.display = node.oldDisplay;
//没有则设置为元素默许值或以后值
else node.style.display = getDisplay(node);
}
})
} 

--------------------------

链式挪用就是类似这类情形:

$('div').show().hide().css('height','300px').toggle()

完成起来异常质朴,只需在每个函数前面return this便可

--------------------------

有同砚说:喂!这个show,hide纰谬吧?能否是漏了时间参数? 用setTimeOut自己完成吧~>_<~+。

本节最主若是让年夜家知道jQuery须要推敲的情形异常多(许多脏活)。即时简化了代码,依然照样这么长。

写完后,发现show尚有一种情形没推敲:

div{ display:none !important; }
年夜家自己开脑洞,如那里置赏罚赏罚吧(⊙0⊙)
php中文网最新课程二维码
  • 相关标签:jquery链式挪用 jquery链式 show
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 原生javascript完因素享到同伙圈功效 支持ios和android_javascript手艺
  • jQuery链式挪用与show知识浅析_jquery
  • JS完成登录页面记着密码和enter键登录措施推荐_javascript手艺
  • BootstrapTable与KnockoutJS相联络完成增删改查功效【一】_javascript手艺
  • jQuery链式挪用与show知识浅析_jquery
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173955)

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(170100)

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137390)

    ThinkPHP5实战之[教授修养治理系统]

    华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130755)

    PHP入门视频教程之一周学会PHP

    华夏棋牌一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(130133)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节