jQuery链式调用与show知识浅析
上篇文章给大家介绍了jQuery的框架，有关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的元素这种隐藏情况：$('<div>block</div>')未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'即可隐藏。很简单，对吧？(⊙０⊙) 。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的元素这种隐藏情况：$('<div>block</div>')未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了吗(⊙０⊙)
<style>
div{ display:none; }
</style>
<div>display:none</div>$('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函数的情况还是挺复杂的，我们大致要应对这几种情况：
<style>
#none,#none2{ display: none; }
</style>
<body>
<div id="div">默认值为block</div>
<span id="span">默认值为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函数变成了这鬼样ψ(╰_╯)。大致思路如下：
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; }
<div>大家自己开脑洞，怎么处理吧(⊙０⊙)</div>
相关推荐
-
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
hide和fadeOut 显示效果有什么区别? show和fadeIn显示效果都一样? 很多朋友在学习jQuery的时候 会遇到这个问题 ,hide和 fadeOut都可以带有参数: $(selector).hide(speed,callback); $(selector).fadeOut(speed,callback); 首先我们从名字上就可以看出 hide是隐藏而fadeOut是淡出,当然名字不能看出具体的区别,只能体现他们是不同的而已.但是当我们把参数 speed 设置稍微长一些就可以看出
-
jQuery的图片轮播插件PgwSlideshow使用详解
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: •体验度很好的响应式设计 •支持桌面及移动设备 •身形矫健,压缩后的文件只有不到4KB •你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlides
-
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
本文实例为大家分享了jquery中show().hide()和toggle()用法实例,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>初识jQuery</title> <script src="http:/www.jb51.net/
-
jquery中show()、hide()和toggle()用法实例
本文实例讲述了jquery中show().hide()和toggle()用法.分享给大家供大家参考.具体分析如下: 这里介绍了jquery效果:show()方法.hide()方法和toggle()方法 现实应用场景:QQ面板里我的好友分组 复制代码 代码如下: <html> <head> <title>jquery效果:show()方法.hide()方法和toggle()方法</title> <script type="text/javasc
-
jQuery焦点图轮播插件KinSlideshow用法分析
本文实例讲述了jQuery焦点图轮播插件KinSlideshow用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
jquery (show,fadeOut,Animate)简单效果
jquery show移上去看看 hello fadeout淡出效果 淡出效果淡出效果淡出效果淡出效果淡出效果 淡出效果淡出效果淡出效果淡出效果 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
用js模拟JQuery的show与hide动画函数代码
复制代码 代码如下: //根据ID返回dom元素 var $ = function(id){return document.getElementById(id);} //返回dom元素的当前某css值 var getCss = function(obj,name){ //ie if(obj.currentStyle) { return obj.currentStyle[name]; } //ff else { var style = document.defaultView.getCompute
-
jQuery中show与hide方法用法示例
本文实例分析了jQuery中show与hide方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
-
Jquery中使用show()与hide()方法动画显示和隐藏图片
(1)功能描述 在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以动画的方式隐藏该图片. (2)实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
-
jQuery链式调用与show知识浅析
上篇文章给大家介绍了jQuery的框架,有关jquery的基础知识可以参考下. jQuery使用许久了,但是有一些API的实现实在想不通.下面将使用简化的代码来介绍,主要关注jQuery的实现思想. 相较于上一篇,代码更新了:21~78 (function(window, undefined){ function jQuery(sel){ return new jQuery.prototype.init(sel); } jQuery.prototype = { constructor: jQue
-
详解jQuery 链式调用
链式调用 jQuery对象调用任何方法(除了节点关系方法)执行完后,方法都会有一个返回值,返回值就是jQuery对象自己,这个现象给我们提供了便利,可以对执行结果继续打点调用jQuery的方法和属性.即--可以使用jQuery对象进行连续打点调用 console.log($(this).css("background-color", "pink").html("hello")); jQuery对象调用除了节点关系的方法之外,其他的方法执行后,返回
-
javascript中的链式调用
jQuery中形如$("#txtName").addClass("err").css("font-size","12px").select().focus();的方式让人不得不为之着迷.其实现机制就是链式调用.链式调用就是调用对象的方法后返回到该对象,严格来讲它并不属于语法,而只是一种语法技巧,js令人着迷的一点就是这里. 没有返回值的方法属于赋值器方法,显然它很容易实现链式调用,前提是正确理解this指针的用法. 复制代码
-
JavaScript 异步调用框架 (Part 4 - 链式调用)
现实开发中,要按顺序执行一系列的同步异步操作又是很常见的.还是用百度Hi网页版中的例子,我们先要异步获取联系人列表,然后再异步获取每一个联系人的具体信息,而且后者是分页获取的,每次请求发送10个联系人的名称然后取回对应的具体信息.这就是多个需要顺序执行的异步请求. 为此,我们需要设计一种新的操作方式来优化代码可读性,让顺序异步操作代码看起来和传统的顺序同步操作代码一样优雅. 传统做法 大多数程序员都能够很好的理解顺序执行的代码,例如这样子的: 复制代码 代码如下: var firstResult
-
JavaScript的级联函数用法简单示例【链式调用】
本文实例讲述了JavaScript的级联函数用法.分享给大家供大家参考,具体如下: 级联函数 级联函数就是在对象调用中通过点的方式串联调用,在jQuery中就是链式调用, 其关键点就是在内部 return this 返回自身 应用 function Person() { this.name = ''; this.age = 0; this.weight = 10; } Person.prototype = { setName:function(name){ this.name = name; r
-
详解JavaScript中的链式调用
链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式调用是一种简化此过程的一种编码方式,使代码简洁.易读. 链式调用通常有以下几种实现方式,但是本质上相似,都是通过返回对象供之后进行调用. this的作用域链,jQuery的实现方式,通常链式调用
-
jQuery链式操作实例分析
本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <script type="text/javascript"> $(function() { $("div").addClass("css1").filter(function(index) { return index == 1 || $(this).
-
学习JavaScript设计模式(链式调用)
1.什么是链式调用 这个很容易理解,例如: $(this).setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:调用完方法后,return this返回当前调用方法的对象. function Dog(){ this.run= function(){ alert("The dog is running...."); return this;//返回当前对象 Dog }; this.eat= function(){ alert("Af
-
jQuery链式操作如何实现以及为什么要用链式操作
两个问题 1.jQuery的链式操作是如何实现的? 2.为什么要用链式操作? 大家认为这两个问题哪个好回答一点呢? 链式操作 原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最后 return this 把对象再返回回来,对象当然可以继续调用方法啦,所以就可以链式操作了.那么,简单实现一个: 复制代码 代码如下: //定义一个JS类 function Demo() { } //扩展它的prototype Demo.prototype ={ setName:function (name
-
浅析jQuery的链式调用之each函数
话说回来,虽然jQuery让学习前端技术的越来越多了起来,(本人就是因为学校图书馆偶然间遇到了一本jQuery基础教程(二)开始想深入的学习前端技术),关于jQuery的博文甚至多于javascript,它让编程的门槛大大的降低了,但是它隐藏了太多细节了,形如$('#id').append('<p>xxx</p>').clone().appendTo(x).end().css(...)................这样操作的模式已经很难找到常规javascript的影子.浏览器的