首页 > 编程语言 >深入学习jquery源码之show()和hide()

深入学习jquery源码之show()和hide()

时间:2023-02-23 22:07:11浏览次数:46  
标签:jquery jQuery hide name cache elem 源码 data display


jQueryshow([speed,[easing],[fn]])

概述:

显示隐藏的匹配元素。

这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。

参数:

speed[,fn] Number/String,Function

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

fn:在动画完成时执行的函数,每个元素执行一次。

[speed],[easing],[fn] Number/String,String,Function

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"

fn:在动画完成时执行的函数,每个元素执行一次。

使用:

显示所有段落

<p style="display: none">Hello</p>
$("p").show()

用缓慢的动画将隐藏的段落显示出来,历时600毫秒。

<p style="display: none">Hello</p>
$("p").show("slow");

用迅速的动画将隐藏的段落显示出来,历时200毫秒。并在之后执行反馈!

<p style="display: none">Hello</p>
$("p").show("fast",function(){
$(this).text("Animation Done!");
});

将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈

<p style="display: none">Hello</p>
$("p").show(4000,function(){
$(this).text("Animation Done...");
});

 

jquery源码

function showHide(elements, show) {
var display, elem, hidden,
values = [],
index = 0,
length = elements.length;

for (; index < length; index++) {
elem = elements[index];
if (!elem.style) {
continue;
}

values[index] = jQuery._data(elem, "olddisplay");
display = elem.style.display;
if (show) {
// Reset the inline display of this element to learn if it is
// being hidden by cascaded rules or not
if (!values[index] && display === "none") {
elem.style.display = "";
}

// Set elements which have been overridden with display: none
// in a stylesheet to whatever the default browser style is
// for such an element
if (elem.style.display === "" && isHidden(elem)) {
values[index] = jQuery._data(elem, "olddisplay", defaultDisplay(elem.nodeName));
}
} else {
hidden = isHidden(elem);

if (display && display !== "none" || !hidden) {
jQuery._data(elem, "olddisplay", hidden ? display : jQuery.css(elem, "display"));
}
}
}

// Set the display of most of the elements in a second loop
// to avoid the constant reflow
for (index = 0; index < length; index++) {
elem = elements[index];
if (!elem.style) {
continue;
}
if (!show || elem.style.display === "none" || elem.style.display === "") {
elem.style.display = show ? values[index] || "" : "none";
}
}

return elements;
}


jQuery.fn.extend({

show: function () {
return showHide(this, true);
}
});



/**
* Determines whether an object can have data
*/
jQuery.acceptData = function (elem) {
var noData = jQuery.noData[(elem.nodeName + " ").toLowerCase()],
nodeType = +elem.nodeType || 1;

// Do not set data on non-element DOM nodes because it will not be cleared (#8335).
return nodeType !== 1 && nodeType !== 9 ?
false :

// Nodes accept data unless otherwise specified; rejection can be conditional
!noData || noData !== true && elem.getAttribute("classid") === noData;
};

function internalRemoveData(elem, name, pvt) {
if (!jQuery.acceptData(elem)) {
return;
}

var thisCache, i,
isNode = elem.nodeType,

// See jQuery.data for more information
cache = isNode ? jQuery.cache : elem,
id = isNode ? elem[jQuery.expando] : jQuery.expando;

// If there is already no cache entry for this object, there is no
// purpose in continuing
if (!cache[id]) {
return;
}

if (name) {

thisCache = pvt ? cache[id] : cache[id].data;

if (thisCache) {

// Support array or space separated string names for data keys
if (!jQuery.isArray(name)) {

// try the string as a key before any manipulation
if (name in thisCache) {
name = [name];
} else {

// split the camel cased version by spaces unless a key with the spaces exists
name = jQuery.camelCase(name);
if (name in thisCache) {
name = [name];
} else {
name = name.split(" ");
}
}
} else {
// If "name" is an array of keys...
// When data is initially created, via ("key", "val") signature,
// keys will be converted to camelCase.
// Since there is no way to tell _how_ a key was added, remove
// both plain key and camelCase key. #12786
// This will only penalize the array argument path.
name = name.concat(jQuery.map(name, jQuery.camelCase));
}

i = name.length;
while (i--) {
delete thisCache[name[i]];
}

// If there is no data left in the cache, we want to continue
// and let the cache object itself get destroyed
if (pvt ? !isEmptyDataObject(thisCache) : !jQuery.isEmptyObject(thisCache)) {
return;
}
}
}

// See jQuery.data for more information
if (!pvt) {
delete cache[id].data;

// Don't destroy the parent cache unless the internal data object
// had been the only thing left in it
if (!isEmptyDataObject(cache[id])) {
return;
}
}

// Destroy the cache
if (isNode) {
jQuery.cleanData([elem], true);

// Use delete when supported for expandos or `cache` is not a window per isWindow (#10080)
/* jshint eqeqeq: false */
} else if (support.deleteExpando || cache != cache.window) {
/* jshint eqeqeq: true */
delete cache[id];

// When all else fails, null
} else {
cache[id] = null;
}
}

jQuery.extend({
cache: {},

// The following elements (space-suffixed to avoid Object.prototype collisions)
// throw uncatchable exceptions if you attempt to set expando properties
noData: {
"applet ": true,
"embed ": true,
// ...but Flash objects (which have this classid) *can* handle expandos
"object ": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
},

hasData: function (elem) {
elem = elem.nodeType ? jQuery.cache[elem[jQuery.expando]] : elem[jQuery.expando];
return !!elem && !isEmptyDataObject(elem);
},

data: function (elem, name, data) {
return internalData(elem, name, data);
},

removeData: function (elem, name) {
return internalRemoveData(elem, name);
},

// For internal use only.
_data: function (elem, name, data) {
return internalData(elem, name, data, true);
},

_removeData: function (elem, name) {
return internalRemoveData(elem, name, true);
}
});

 

hide([speed,[easing],[fn]])

概述:

隐藏显示的元素

这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。

参数:

speed[,fn] Number/String,Function

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

fn:在动画完成时执行的函数,每个元素执行一次。

[speed],[easing],[fn] Number/String,String,Function

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"

fn:在动画完成时执行的函数,每个元素执行一次。

隐藏所有段落

$("p").hide()

用600毫秒的时间将段落缓慢的隐藏

$("p").hide("slow");

用200毫秒将段落迅速隐藏,之后弹出一个对话框。

$("p").hide("fast",function(){
alert("Animation Done.");
});

 

jquery源码

jQuery.fn.extend({
hide: function () {
return showHide(this);
}
});

 

 

 

标签:jquery,jQuery,hide,name,cache,elem,源码,data,display
From: https://blog.51cto.com/u_11837698/6081926

相关文章

  • 深入学习jquery源码之继承框架的实现
    深入学习jquery源码之继承框架的实现继承框架的实现实现自己的extend方法/*SimpleJavaScriptInheritance*ByJohnResighttp://ejohn.org/*MITLicensed.*///Insp......
  • 深入学习jquery源码之创建科学、复用率高的对象
    常规创建对象的方式通过{},[]来定义数组和对象1.{}大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数。2.[]中括号,表示一个数组,也可以理解为一个数组对象......
  • 深入学习jquery源码之原型链
    深入学习jquery源码之原型链prototype原型,对该函数对象的对象原型的引用,是函数对象的默认属性我们在定义函数的时候,函数定义的时候函数本身就会默认有一个prototype的属性,而......
  • 深入学习jquery源码之继承方案的选择
    prototype实现继承原型链继承的主要思想是:让子类型的引用指向父类型的实例。每次在函数(类)中定义了成员方法,都会导致实例有副本,因此可以借助prototype原型,进行改进先访问自己......
  • 深入学习jquery源码之extend()
    jQuery.extend([deep],target,object1,[objectN])概述:用一个或多个其他对象来扩展一个对象,返回被扩展的对象。如果不指定target,则给jQuery命名空间本身进行扩展。这有助......
  • 深入学习jquery源码之上传附件插件的实现
    深入学习jquery源码之上传附件插件的实现/***上传附件通用JS(基于layerUI)*/;(function($){vardefaults={url:"/attach/upload",fieldCode:"ab......
  • 深入学习jquery源码之attr()与removeAttr()
    深入学习jquery源码之attr()与removeAttr()attr(name|properties|key,value|fn)概述设置或返回被选元素的属性值。参数name String属性名称properties Map作为属性的“名/......
  • 深入学习jquery源码之jQuery的构造函数与实例化
    深入学习jquery源码之jQuery的构造函数与实例化创建jQuery对象的整个流程如下:1、调用$()方法;2、调用jQuery.prototype.init()构造函数;3、根据选择器不同返回不同的jQuery对......
  • 深入学习jquery源码之queue()与dequeue()
    深入学习jquery源码之queue()与dequeue()queue(element,[queueName])概述显示或操作在匹配元素上执行的函数队列参数element,[queueName] Element,Stringelement:检查附加......
  • 深入学习jquery源码之序列化表单
    深入学习jquery源码之序列化表单serialize()概述序列表表格内容为字符串。序列表表格内容为字符串,用于Ajax请求。<pid="results"><b>Results:</b></p><form><select......