wjy_branch
wangjiaoyan 3 weeks ago
parent 0daa4d88dc
commit 0b999cda56

@ -1475,458 +1475,532 @@
var // Static reference to slice // 静态引用 slice 方法,用于数组切片
sliceDeferred = [].slice; var sliceDeferred = [].slice;
jQuery.extend({ jQuery.extend({
// 定义 Deferred 函数,用于创建一个新的延迟对象
Deferred: function( func ) { Deferred: function( func ) {
var doneList = jQuery.Callbacks( "once memory" ), // 创建三个回调列表:成功、失败和进度
failList = jQuery.Callbacks( "once memory" ), var doneList = jQuery.Callbacks("once memory"), // 成功回调列表,只能被调用一次,并保留内存
progressList = jQuery.Callbacks( "memory" ), failList = jQuery.Callbacks("once memory"), // 失败回调列表,同样只调用一次并保留内存
state = "pending", progressList = jQuery.Callbacks("memory"), // 进度回调列表,可以多次调用并保留内存
state = "pending", // 初始状态为“待处理”
lists = { lists = {
resolve: doneList, resolve: doneList, // 将成功列表绑定到 resolve
reject: failList, reject: failList, // 将失败列表绑定到 reject
notify: progressList notify: progressList // 将进度列表绑定到 notify
}, },
promise = { promise = { // 定义 promise 对象
done: doneList.add, done: doneList.add, // 添加成功回调的方法
fail: failList.add, fail: failList.add, // 添加失败回调的方法
progress: progressList.add, progress: progressList.add, // 添加进度回调的方法
state: function() { state: function () { // 返回当前状态的方法
return state; return state; // 返回状态
}, },
// Deprecated // 已废弃的方法,检查是否已经解决
isResolved: doneList.fired, isResolved: doneList.fired, // 检查成功回调是否已被调用
isRejected: failList.fired, isRejected: failList.fired, // 检查失败回调是否已被调用
then: function( doneCallbacks, failCallbacks, progressCallbacks ) { then: function (doneCallbacks, failCallbacks, progressCallbacks) {
deferred.done( doneCallbacks ).fail( failCallbacks ).progress( progressCallbacks ); // 链式调用,将相应的回调添加到 deferred 对象
return this; deferred.done(doneCallbacks).fail(failCallbacks).progress(progressCallbacks);
return this; // 返回当前对象,以支持链式调用
}, },
always: function() { always: function () {
deferred.done.apply( deferred, arguments ).fail.apply( deferred, arguments ); // 无论成功或失败都执行的回调
return this; deferred.done.apply(deferred, arguments).fail.apply(deferred, arguments);
return this; // 返回当前对象,以支持链式调用
}, },
pipe: function( fnDone, fnFail, fnProgress ) {
return jQuery.Deferred(function( newDefer ) { pipe: function (fnDone, fnFail, fnProgress) {
jQuery.each( { // 创建一个新的延迟对象,允许链式调用
done: [ fnDone, "resolve" ], return jQuery.Deferred(function (newDefer) {
fail: [ fnFail, "reject" ], // 遍历每个处理程序(成功、失败和进度)
progress: [ fnProgress, "notify" ] jQuery.each({
}, function( handler, data ) { done: [fnDone, "resolve"], // 成功回调及其对应的操作
var fn = data[ 0 ], fail: [fnFail, "reject"], // 失败回调及其对应的操作
action = data[ 1 ], progress: [fnProgress, "notify"] // 进度回调及其对应的操作
returned; }, function (handler, data) {
if ( jQuery.isFunction( fn ) ) { var fn = data[0], // 获取回调函数
deferred[ handler ](function() { action = data[1], // 获取对应的操作
returned = fn.apply( this, arguments ); returned; // 用于存储返回值
if ( returned && jQuery.isFunction( returned.promise ) ) {
returned.promise().then( newDefer.resolve, newDefer.reject, newDefer.notify ); // 检查 fn 是否为一个有效的函数
if (jQuery.isFunction(fn)) {
// 为当前的 deferred 添加相应的回调处理
deferred[handler](function () {
returned = fn.apply(this, arguments); // 调用该函数并获取返回值
// 检查返回值是否是一个具有 promise 方法的对象
if (returned && jQuery.isFunction(returned.promise)) {
// 若是,则将新的 deferred 的 resolve/reject/notify 方法与返回的 promise 绑定
returned.promise().then(newDefer.resolve, newDefer.reject, newDefer.notify);
} else { } else {
newDefer[ action + "With" ]( this === deferred ? newDefer : this, [ returned ] ); // 否则,直接将返回值传递到新的 deferred
newDefer[action + "With"](this === deferred ? newDefer : this, [returned]);
} }
}); });
} else { } else {
deferred[ handler ]( newDefer[ action ] ); // 如果 fn 不是函数,则直接将新的 deferred 的操作与原 deferred 的操作绑定
deferred[handler](newDefer[action]);
} }
}); });
}).promise(); }).promise(); // 返回新的 promise 对象
}, },
// Get a promise for this deferred
// If obj is provided, the promise aspect is added to the object // 获取当前 deferred 的 promise
promise: function( obj ) { // 如果提供了 obj则将 promise 方法添加到该对象上
if ( obj == null ) { promise: function (obj) {
obj = promise; if (obj == null) {
obj = promise; // 如果没有提供对象,则使用当前的 promise
} else { } else {
for ( var key in promise ) { // 将 promise 中的方法复制到提供的对象中
obj[ key ] = promise[ key ]; for (var key in promise) {
obj[key] = promise[key];
} }
} }
return obj; return obj; // 返回最终的对象
} }
}, },
deferred = promise.promise({}), deferred = promise.promise({}),
key; key;
for ( key in lists ) { // 遍历 lists 对象中的每个 key
deferred[ key ] = lists[ key ].fire; for (key in lists) {
deferred[ key + "With" ] = lists[ key ].fireWith; // 将 lists 中相应的 fire 方法赋值给 deferred 对象的对应属性
deferred[key] = lists[key].fire;
// 将 lists 中的 fireWith 方法赋值给 deferred 对象的对应属性,允许带上下文和参数调用
deferred[key + "With"] = lists[key].fireWith;
} }
// Handle state // 处理状态变化
deferred.done( function() { deferred.done(function () {
// 当执行完所有成功回调后,将状态设置为 "resolved"
state = "resolved"; state = "resolved";
}, failList.disable, progressList.lock ).fail( function() { }, failList.disable, progressList.lock).fail(function () {
// 当执行失败回调时,将状态设置为 "rejected"
state = "rejected"; state = "rejected";
}, doneList.disable, progressList.lock ); }, doneList.disable, progressList.lock);
// Call given func if any // 如果提供了 func 函数,则调用它,并将 deferred 作为上下文传入
if ( func ) { if (func) {
func.call( deferred, deferred ); func.call(deferred, deferred);
} }
// All done! // 返回 deferred 对象,表示所有操作已完成
return deferred; return deferred;
}, },
// Deferred helper // Deferred 辅助函数
when: function( firstParam ) { when: function( firstParam ) {
// 将传入的参数转换为数组形式,取出所有参数
var args = sliceDeferred.call( arguments, 0 ), var args = sliceDeferred.call( arguments, 0 ),
i = 0, i = 0,
length = args.length, length = args.length, // 参数长度
pValues = new Array( length ), pValues = new Array( length ), // 用于存储进度值的数组
count = length, count = length, // 计数器,用于跟踪已解析的 promise 数量
pCount = length, pCount = length, // 另一个计数器,可能用于未来扩展
deferred = length <= 1 && firstParam && jQuery.isFunction( firstParam.promise ) ? deferred = length <= 1 && firstParam && jQuery.isFunction( firstParam.promise ) ?
// 如果只有一个参数且它是一个可执行 promise 的对象,则使用这个对象;否则创建新的 Deferred 对象
firstParam : firstParam :
jQuery.Deferred(), jQuery.Deferred(),
promise = deferred.promise(); promise = deferred.promise(); // 获取与 deferred 相关联的 promise 对象
// 定义解析函数,用于处理成功回调
function resolveFunc( i ) { function resolveFunc( i ) {
return function( value ) { return function( value ) {
// 将对应索引的参数值设置为传入的 value如果有多个参数则存储为数组
args[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value; args[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value;
// 减少计数器,当所有 promise 都已解决时,调用 resolve
if ( !( --count ) ) { if ( !( --count ) ) {
deferred.resolveWith( deferred, args ); deferred.resolveWith( deferred, args ); // 触发 deferred 的 resolved 状态,并传入所有结果
} }
}; };
} }
// 定义进度处理函数,用于处理进度通知
function progressFunc( i ) { function progressFunc( i ) {
return function( value ) { return function( value ) {
// 将进度值存储在 pValues 数组中
pValues[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value; pValues[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value;
deferred.notifyWith( promise, pValues ); // 通知 promise 的进度更新
deferred.notifyWith( promise, pValues ); // 发送当前进度值给观察者
}; };
} }
if ( length > 1 ) {
for ( ; i < length; i++ ) { if ( length > 1 ) { // 如果参数个数大于1
for ( ; i < length; i++ ) { // 遍历所有参数
// 检查当前参数是否为一个有 promise 方法的对象
if ( args[ i ] && args[ i ].promise && jQuery.isFunction( args[ i ].promise ) ) { if ( args[ i ] && args[ i ].promise && jQuery.isFunction( args[ i ].promise ) ) {
// 调用当前参数的 promise 方法,并处理成功和失败的回调
// resolveFunc(i) 用于成功时的处理deferred.reject 用于失败时的处理progressFunc(i) 用于进度更新的处理
args[ i ].promise().then( resolveFunc(i), deferred.reject, progressFunc(i) ); args[ i ].promise().then( resolveFunc(i), deferred.reject, progressFunc(i) );
} else { } else {
// 如果当前参数不是一个有效的 promise则计数器减一
--count; --count;
} }
} }
// 如果 count 计数器为0表示所有的 promise 都已解决
if ( !count ) { if ( !count ) {
// 将 args 中的所有结果传递给 deferred 的 resolved 状态,完成整个过程
deferred.resolveWith( deferred, args ); deferred.resolveWith( deferred, args );
} }
} else if ( deferred !== firstParam ) { } else if ( deferred !== firstParam ) { // 如果只有一个参数且它不是最初传入的 firstParam
// 将 firstParam 的值作为数组传递给 deferred 的 resolved 状态
deferred.resolveWith( deferred, length ? [ firstParam ] : [] ); deferred.resolveWith( deferred, length ? [ firstParam ] : [] );
} }
// 最后返回与 deferred 相关联的 promise 对象
return promise; return promise;
} }
}); });
jQuery.support = (function() { jQuery.support = (function() { // 定义 jQuery.support 作为一个立即执行函数表达式 (IIFE)
var support, var support, // 用于存储支持的特性
all, all, // 用于存储 div 中的所有元素
a, a, // 存储第一个 <a> 元素
select, select, // 将来可能用于存储 <select> 元素
opt, opt, // 将来可能用于存储 <option> 元素
input, input, // 将来可能用于存储 <input> 元素
fragment, fragment, // 将来可能用于存储文档片段
tds, tds, // 将来可能用于存储 <td> 元素
events, events, // 将来可能用于存储事件支持情况
eventName, eventName, // 将来可能用于存储事件名称
i, i, // 循环计数器
isSupported, isSupported, // 用于指示某些特性的支持状态
div = document.createElement( "div" ), div = document.createElement("div"), // 创建一个新的 div 元素
documentElement = document.documentElement; documentElement = document.documentElement; // 获取文档根元素
// Preliminary tests // 进行初步测试
div.setAttribute("className", "t"); div.setAttribute("className", "t"); // 设置 div 的 className 属性IE 特有)
// 设置 div 的 innerHTML包括一些元素和属性
div.innerHTML = " <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>"; div.innerHTML = " <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>";
all = div.getElementsByTagName( "*" ); all = div.getElementsByTagName("*"); // 获取 div 中的所有元素
a = div.getElementsByTagName( "a" )[ 0 ]; a = div.getElementsByTagName("a")[0]; // 获取 div 中的第一个 <a> 元素
// Can't get basic test support // 如果无法获取基本的测试支持,则返回一个空对象
if ( !all || !all.length || !a ) { if ( !all || !all.length || !a ) {
return {}; return {};
} }
// First batch of supports tests
select = document.createElement( "select" ); // 第一批支持测试
opt = select.appendChild( document.createElement("option") ); select = document.createElement("select"); // 创建一个 <select> 元素
input = div.getElementsByTagName( "input" )[ 0 ]; opt = select.appendChild(document.createElement("option")); // 在 <select> 中添加一个 <option> 元素
input = div.getElementsByTagName("input")[0]; // 获取之前创建的 div 中的第一个 <input> 元素
support = {
// IE strips leading whitespace when .innerHTML is used support = { // 初始化 support 对象,用于存储检测到的特性支持情况
leadingWhitespace: ( div.firstChild.nodeType === 3 ),
// IE 在使用 .innerHTML 时会去掉前导空白
// Make sure that tbody elements aren't automatically inserted leadingWhitespace: (div.firstChild.nodeType === 3), // 检查 div 的第一个子节点是否为文本节点nodeType === 3
// IE will insert them into empty tables
tbody: !div.getElementsByTagName("tbody").length, // 确保 tbody 元素不会被自动插入
// IE 会在空表格中插入它们
// Make sure that link elements get serialized correctly by innerHTML tbody: !div.getElementsByTagName("tbody").length, // 检查 div 中是否存在 <tbody> 元素
// This requires a wrapper element in IE
htmlSerialize: !!div.getElementsByTagName("link").length, // 确保 link 元素能通过 innerHTML 正确序列化
// 这在 IE 中需要一个包装元素
// Get the style information from getAttribute htmlSerialize: !!div.getElementsByTagName("link").length, // 检查 div 中是否存在 <link> 元素并转换为布尔值
// (IE uses .cssText instead)
style: /top/.test( a.getAttribute("style") ), // 从 getAttribute 获取样式信息
// IE 使用 .cssText 代替)
// Make sure that URLs aren't manipulated style: /top/.test(a.getAttribute("style")), // 检查 <a> 元素的 style 属性中是否包含 "top"
// (IE normalizes it by default)
hrefNormalized: ( a.getAttribute("href") === "/a" ), // 确保 URL 不会被修改
// IE 默认会对其进行规范化)
// Make sure that element opacity exists hrefNormalized: (a.getAttribute("href") === "/a"), // 检查 <a> 元素的 href 是否为指定的值
// (IE uses filter instead)
// Use a regex to work around a WebKit issue. See #5145 // 确保元素透明度存在
opacity: /^0.55/.test( a.style.opacity ), // IE 使用 filter 代替)
// 使用正则表达式来解决 WebKit 问题
// Verify style float existence opacity: /^0.55/.test(a.style.opacity), // 检查 <a> 元素的 opacity 样式是否为 0.55
// (IE uses styleFloat instead of cssFloat)
cssFloat: !!a.style.cssFloat, // 验证样式浮动的存在
// IE 使用 styleFloat 而不是 cssFloat
// Make sure that if no value is specified for a checkbox cssFloat: !!a.style.cssFloat, // 检查 <a> 元素的 cssFloat 是否存在并转换为布尔值
// that it defaults to "on".
// (WebKit defaults to "" instead) // 确保如果未指定复选框的值,则默认为 "on"
checkOn: ( input.value === "on" ), // WebKit 默认为 ""
checkOn: (input.value === "on"), // 检查 input 元素的值是否为 "on"
// Make sure that a selected-by-default option has a working selected property.
// (WebKit defaults to false instead of true, IE too, if it's in an optgroup) // 确保默认选中的选项具有有效的 selected 属性。
optSelected: opt.selected, // WebKit 默认情况下为 false而 IE 也是如此,如果它在 optgroup 中)
optSelected: opt.selected, // 检查选项是否被选中
// Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
getSetAttribute: div.className !== "t", // 测试 camelCase 类的 setAttribute 是否有效。如果有效,则在进行 get/setAttribute 时需要 attrFixes适用于 IE6/7
getSetAttribute: div.className !== "t", // 检查 div 的 className 是否不等于 "t"
// Tests for enctype support on a form(#6743)
enctype: !!document.createElement("form").enctype, // 测试表单上的 enctype 支持 (#6743)
enctype: !!document.createElement("form").enctype, // 检查新的表单元素是否具有 enctype 属性并转换为布尔值
// Makes sure cloning an html5 element does not cause problems
// Where outerHTML is undefined, this still works // 确保克隆一个 HTML5 元素不会导致问题
html5Clone: document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav></:nav>", // 当 outerHTML 未定义时,这仍然有效
html5Clone: document.createElement("nav").cloneNode(true).outerHTML !== "<:nav></:nav>", // 检查克隆的 <nav> 元素的 outerHTML 是否正确
// Will be defined later
submitBubbles: true, // 以下将稍后定义
changeBubbles: true, submitBubbles: true, // 提交事件是否气泡
focusinBubbles: false, changeBubbles: true, // 改变事件是否气泡
deleteExpando: true, focusinBubbles: false, // focusin 事件是否气泡
noCloneEvent: true, deleteExpando: true, // 是否支持 deleteExpando
inlineBlockNeedsLayout: false, noCloneEvent: true, // 克隆事件是否正常
shrinkWrapBlocks: false, inlineBlockNeedsLayout: false, // inline-block 布局需求
reliableMarginRight: true, shrinkWrapBlocks: false, // 收缩包装块是否有效
pixelMargin: true reliableMarginRight: true, // margin-right 是否可靠
pixelMargin: true // 像素边距支持情况
}; };
// jQuery.boxModel DEPRECATED in 1.3, use jQuery.support.boxModel instead // jQuery.boxModel 在 1.3 中已弃用,使用 jQuery.support.boxModel 代替
jQuery.boxModel = support.boxModel = (document.compatMode === "CSS1Compat"); jQuery.boxModel = support.boxModel = (document.compatMode === "CSS1Compat"); // 判断文档是否处于兼容模式并赋值给 boxModel
// Make sure checked status is properly cloned
input.checked = true;
support.noCloneChecked = input.cloneNode( true ).checked;
// Make sure that the options inside disabled selects aren't marked as disabled // 确保禁用选择框中的选项不会被标记为禁用
// (WebKit marks them as disabled) // WebKit 会将它们标记为禁用)
select.disabled = true; select.disabled = true; // 将选择框设置为禁用
support.optDisabled = !opt.disabled; support.optDisabled = !opt.disabled; // 检查选项是否未被禁用
// Test to see if it's possible to delete an expando from an element // 测试是否可以从元素中删除一个扩展属性expando
// Fails in Internet Explorer // 在 Internet Explorer 中会失败
try { try {
delete div.test; delete div.test; // 尝试删除 div 的 test 属性
} catch( e ) { } catch(e) {
support.deleteExpando = false; support.deleteExpando = false; // 如果抛出异常,则说明不支持删除 expando
} }
if ( !div.addEventListener && div.attachEvent && div.fireEvent ) { // 检查是否存在 addEventListener 方法,如果没有,且可以使用 attachEvent 和 fireEvent
div.attachEvent( "onclick", function() { if (!div.addEventListener && div.attachEvent && div.fireEvent) {
// Cloning a node shouldn't copy over any // 为 div 绑定点击事件
// bound event handlers (IE does this) div.attachEvent("onclick", function() {
support.noCloneEvent = false; // 克隆节点时不应该复制任何绑定的事件处理程序IE 会错误地复制)
support.noCloneEvent = false; // 如果事件处理程序被复制,则设为 false
}); });
div.cloneNode( true ).fireEvent( "onclick" ); div.cloneNode(true).fireEvent("onclick"); // 克隆节点并触发点击事件
} }
// Check if a radio maintains its value // 检查在添加到 DOM 后,单选按钮是否保留其值
// after being appended to the DOM input = document.createElement("input"); // 创建一个新的 input 元素
input = document.createElement("input"); input.value = "t"; // 设置 input 的值为 "t"
input.value = "t"; input.setAttribute("type", "radio"); // 将类型设置为 radio
input.setAttribute("type", "radio"); support.radioValue = input.value === "t"; // 检查 radio 的值是否保持为 "t"
support.radioValue = input.value === "t";
// 将 checked 属性设置为已选中
input.setAttribute("checked", "checked"); input.setAttribute("checked", "checked");
// #11217 - WebKit loses check when the name is after the checked attribute // #11217 - WebKit 在 checked 属性之后设置 name 时会丢失 checked 状态
input.setAttribute( "name", "t" ); input.setAttribute("name", "t"); // 设置名称为 "t"
div.appendChild(input); // 将 input 添加到 div 中
div.appendChild( input ); fragment = document.createDocumentFragment(); // 创建一个文档片段
fragment = document.createDocumentFragment(); fragment.appendChild(div.lastChild); // 将 div 中的最后一个子元素(即 input添加到片段中
fragment.appendChild( div.lastChild );
// WebKit doesn't clone checked state correctly in fragments // WebKit 在克隆片段时不会正确复制 checked 状态
support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked; support.checkClone = fragment.cloneNode(true).cloneNode(true).lastChild.checked; // 检查克隆的片段是否保持 checked 状态
// Check if a disconnected checkbox will retain its checked // 检查一个未连接的复选框在添加到 DOM 后是否能保留其 checked 值为 trueIE6/7 特性)
// value of true after appended to the DOM (IE6/7) support.appendChecked = input.checked; // 检查 input 的 checked 状态
support.appendChecked = input.checked; fragment.removeChild(input); // 从片段中移除 input
fragment.appendChild(div); // 将 div 添加回片段
fragment.removeChild( input );
fragment.appendChild( div );
// Technique from Juriy Zaytsev // 使用 Juriy Zaytsev 的技术
// http://perfectionkills.com/detecting-event-support-without-browser-sniffing/ // http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
// We only care about the case where non-standard event systems // 我们只关心使用非标准事件系统的情况,
// are used, namely in IE. Short-circuiting here helps us to // 主要是在 IE 中。这里的短路操作帮助我们避免调用 eval在 setAttribute 中),
// avoid an eval call (in setAttribute) which can cause CSP // 因为这可能导致 CSP 出错。请参见https://developer.mozilla.org/en/Security/CSP
// to go haywire. See: https://developer.mozilla.org/en/Security/CSP if ( div.attachEvent ) { // 检查 div 是否支持 attachEvent 方法
if ( div.attachEvent ) { // 循环检查特定的事件类型是否受支持
for ( i in { for ( i in {
submit: 1, submit: 1, // 提交事件
change: 1, change: 1, // 更改事件
focusin: 1 focusin: 1 // 聚焦进入事件
}) { }) {
eventName = "on" + i; eventName = "on" + i; // 构建事件名称,例如 "onsubmit"
isSupported = ( eventName in div ); isSupported = ( eventName in div ); // 检查事件名称是否在 div 的属性中
if ( !isSupported ) { if ( !isSupported ) { // 如果不受支持
div.setAttribute( eventName, "return;" ); div.setAttribute( eventName, "return;" ); // 在 div 上设置相应的事件处理程序为 "return;"
isSupported = ( typeof div[ eventName ] === "function" ); isSupported = ( typeof div[ eventName ] === "function" ); // 再次检查该事件处理程序是否为函数
} }
support[ i + "Bubbles" ] = isSupported; support[ i + "Bubbles" ] = isSupported; // 将结果存储到 support 对象中
} }
} }
// 从文档片段中移除 div以避免内存泄漏
fragment.removeChild( div ); fragment.removeChild( div );
// Null elements to avoid leaks in IE // 将变量设为 null以避免在 IE 中的内存泄漏
fragment = select = opt = div = input = null; fragment = select = opt = div = input = null;
// Run tests that need a body at doc ready
// 在文档准备好时运行需要有 body 的测试
jQuery(function() { jQuery(function() {
// 声明变量
var container, outer, inner, table, td, offsetSupport, var container, outer, inner, table, td, offsetSupport,
marginDiv, conMarginTop, style, html, positionTopLeftWidthHeight, marginDiv, conMarginTop, style, html, positionTopLeftWidthHeight,
paddingMarginBorderVisibility, paddingMarginBorder, paddingMarginBorderVisibility, paddingMarginBorder,
body = document.getElementsByTagName("body")[0]; body = document.getElementsByTagName("body")[0]; // 获取页面的 body 元素
// 检查是否存在 body如果不存在返回例如在 frameset 文档中)
if ( !body ) { if ( !body ) {
// Return for frameset docs that don't have a body
return; return;
} }
conMarginTop = 1; conMarginTop = 1; // 定义上边距为 1 像素
paddingMarginBorder = "padding:0;margin:0;border:"; paddingMarginBorder = "padding:0;margin:0;border:"; // 设置 padding、margin 和 border 的基础样式
positionTopLeftWidthHeight = "position:absolute;top:0;left:0;width:1px;height:1px;"; positionTopLeftWidthHeight = "position:absolute;top:0;left:0;width:1px;height:1px;"; // 定义一个绝对定位的小元素
paddingMarginBorderVisibility = paddingMarginBorder + "0;visibility:hidden;"; paddingMarginBorderVisibility = paddingMarginBorder + "0;visibility:hidden;"; // 隐藏元素的样式(无边距和可见性)
style = "style='" + positionTopLeftWidthHeight + paddingMarginBorder + "5px solid #000;"; style = "style='" + positionTopLeftWidthHeight + paddingMarginBorder + "5px solid #000;"; // 构建一个样式字符串,用于设置边框等属性
html = "<div " + style + "display:block;'><div style='" + paddingMarginBorder + "0;display:block;overflow:hidden;'></div></div>" + html = "<div " + style + "display:block;'><div style='" + paddingMarginBorder + "0;display:block;overflow:hidden;'></div></div>" +
"<table " + style + "' cellpadding='0' cellspacing='0'>" + "<table " + style + "' cellpadding='0' cellspacing='0'>" +
"<tr><td></td></tr></table>"; "<tr><td></td></tr></table>"; // 创建含有 div 和 table 的 HTML 结构
// 创建一个容器 div
container = document.createElement("div"); container = document.createElement("div");
// 设置容器的样式,包括宽度、高度、位置和上边距
container.style.cssText = paddingMarginBorderVisibility + "width:0;height:0;position:static;top:0;margin-top:" + conMarginTop + "px"; container.style.cssText = paddingMarginBorderVisibility + "width:0;height:0;position:static;top:0;margin-top:" + conMarginTop + "px";
body.insertBefore( container, body.firstChild ); // 将容器插入到 body 的最前面
body.insertBefore(container, body.firstChild);
// Construct the test element // 构建测试元素 div
div = document.createElement("div"); div = document.createElement("div");
container.appendChild( div ); // 将 div 添加到容器中
container.appendChild(div);
// Check if table cells still have offsetWidth/Height when they are set
// to display:none and there are still other visible table cells in a // 检查当表格单元格被设置为 display:none 时,
// table row; if so, offsetWidth/Height are not reliable for use when // 是否仍然可以获取 offsetWidth/Height并且该行中还有其他可见的表格单元格。
// determining if an element has been hidden directly using // 如果可以获取,那么在确定一个元素是否直接通过 display:none 隐藏时,
// display:none (it is still safe to use offsets if a parent element is // offsetWidth/Height 就不可靠了(如果父元素被隐藏,则使用 offset 仍然安全;
// hidden; don safety goggles and see bug #4512 for more information). // 可查看问题 #4512 获取更多信息).
// (only IE 8 fails this test) // (只有 IE 8 会失败这个测试)
div.innerHTML = "<table><tr><td style='" + paddingMarginBorder + "0;display:none'></td><td>t</td></tr></table>"; div.innerHTML = "<table><tr><td style='" + paddingMarginBorder + "0;display:none'></td><td>t</td></tr></table>"; // 创建一个包含两个单元格的表格,第一个单元格设置为 display:none
tds = div.getElementsByTagName( "td" ); tds = div.getElementsByTagName("td"); // 获取所有的 td 元素
isSupported = ( tds[ 0 ].offsetHeight === 0 ); isSupported = (tds[0].offsetHeight === 0); // 检查第一个单元格的 offsetHeight 是否为 0以验证其是否被正确地隐藏
tds[ 0 ].style.display = ""; tds[0].style.display = ""; // 将第一个单元格的 display 属性重置(使其可见)
tds[ 1 ].style.display = "none"; tds[1].style.display = "none"; // 将第二个单元格设置为不可见
// Check if empty table cells still have offsetWidth/Height // 检查空的表格单元格是否仍然有 offsetWidth/Height
// (IE <= 8 fail this test) // IE <= 8 无法通过这个测试)
support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 ); support.reliableHiddenOffsets = isSupported && (tds[0].offsetHeight === 0); // 设置支持标志,确认第一单元格的 offsetHeight 是否仍为 0表示隐藏效果仍然有效
// Check if div with explicit width and no margin-right incorrectly // 检查一个具有明确宽度且没有右外边距的 div 是否错误地
// gets computed margin-right based on width of container. For more // 根据容器的宽度计算 margin-right。有关更多信息请参见 bug #3333。
// info see bug #3333 // 在 2011 年 2 月之前的 WebKit 版本中会失败。
// Fails in WebKit before Feb 2011 nightlies // WebKit Bug 13343 - getComputedStyle 返回错误的 margin-right 值
// WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
if ( window.getComputedStyle ) { if ( window.getComputedStyle ) { // 检查浏览器是否支持 getComputedStyle 方法
div.innerHTML = ""; div.innerHTML = "";// 清空 div 的内容
marginDiv = document.createElement( "div" ); marginDiv = document.createElement( "div" ); // 创建一个新的 div 元素
marginDiv.style.width = "0"; marginDiv.style.width = "0";// 设置新 div 的宽度为 0
marginDiv.style.marginRight = "0"; marginDiv.style.marginRight = "0";// 设置新 div 的右外边距为 0
div.style.width = "2px"; div.style.width = "2px";// 设置外部 div 的宽度为 2px
div.appendChild( marginDiv ); div.appendChild( marginDiv );// 将新创建的 div 添加到外部 div 中
// 检查 marginDiv 的 computed margin-right 是否为 0
support.reliableMarginRight = support.reliableMarginRight =
( parseInt( ( window.getComputedStyle( marginDiv, null ) || { marginRight: 0 } ).marginRight, 10 ) || 0 ) === 0; ( parseInt( ( window.getComputedStyle( marginDiv, null ) || { marginRight: 0 } ).marginRight, 10 ) || 0 ) === 0;
} }
if ( typeof div.style.zoom !== "undefined" ) { if (typeof div.style.zoom !== "undefined") { // 检查浏览器是否支持 zoom 属性
// Check if natively block-level elements act like inline-block // 检查原生块级元素在设置为 'inline' 并给予布局时,
// elements when setting their display to 'inline' and giving // 是否表现得像 inline-block 元素IE < 8 会这样做)
// them layout div.innerHTML = ""; // 清空 div 的内容
// (IE < 8 does this) div.style.width = div.style.padding = "1px"; // 设置宽度和内边距为 1px
div.innerHTML = ""; div.style.border = 0; // 将边框设置为 0
div.style.width = div.style.padding = "1px"; div.style.overflow = "hidden"; // 设置溢出属性为隐藏
div.style.border = 0; div.style.display = "inline"; // 设置显示属性为 inline
div.style.overflow = "hidden"; div.style.zoom = 1; // 设置 zoom 属性为 1触发布局
div.style.display = "inline"; // 检查此时 div 的 offsetWidth 是否等于 3
div.style.zoom = 1; support.inlineBlockNeedsLayout = (div.offsetWidth === 3);
support.inlineBlockNeedsLayout = ( div.offsetWidth === 3 );
// 检查具有布局的元素是否能收缩包裹其子元素
// Check if elements with layout shrink-wrap their children // IE 6 会这样做)
// (IE 6 does this) div.style.display = "block"; // 将显示属性重置为 block
div.style.display = "block"; div.style.overflow = "visible"; // 允许可见溢出
div.style.overflow = "visible"; div.innerHTML = "<div style='width:5px;'></div>"; // 向 div 中添加一个宽度为 5px 的子 div
div.innerHTML = "<div style='width:5px;'></div>"; // 检查此时 div 的 offsetWidth 是否不等于 3
support.shrinkWrapBlocks = ( div.offsetWidth !== 3 ); support.shrinkWrapBlocks = (div.offsetWidth !== 3);
} }
// 设置 div 的样式,包括位置、大小、内外边距和可见性等
div.style.cssText = positionTopLeftWidthHeight + paddingMarginBorderVisibility; div.style.cssText = positionTopLeftWidthHeight + paddingMarginBorderVisibility;
// 设置 div 的内容为 html 字符串
div.innerHTML = html; div.innerHTML = html;
// 获取 div 的第一个子元素,称为 outer
outer = div.firstChild; outer = div.firstChild;
// 获取 outer 的第一个子元素,称为 inner
inner = outer.firstChild; inner = outer.firstChild;
// 获取 outer 的下一个兄弟元素的第一个子元素的第一个子元素,称为 td
td = outer.nextSibling.firstChild.firstChild; td = outer.nextSibling.firstChild.firstChild;
// 创建一个对象 offsetSupport 用于存储不同情况下的偏移支持信息
offsetSupport = { offsetSupport = {
// 检查 inner 元素的 offsetTop 是否不等于 5表示不会添加边框
doesNotAddBorder: ( inner.offsetTop !== 5 ), doesNotAddBorder: ( inner.offsetTop !== 5 ),
// 检查 td 元素的 offsetTop 是否等于 5表示会为表格和单元格添加边框
doesAddBorderForTableAndCells: ( td.offsetTop === 5 ) doesAddBorderForTableAndCells: ( td.offsetTop === 5 )
}; };
// 将 inner 元素的定位设置为固定,并将顶部位置设置为 20px
inner.style.position = "fixed"; inner.style.position = "fixed";
inner.style.top = "20px"; inner.style.top = "20px";
// safari subtracts parent border width here which is 5px // Safari 浏览器在此处减去父元素的边框宽度5px
offsetSupport.fixedPosition = ( inner.offsetTop === 20 || inner.offsetTop === 15 ); offsetSupport.fixedPosition = ( inner.offsetTop === 20 || inner.offsetTop === 15 );
// 重置 inner 元素的定位和顶部样式
inner.style.position = inner.style.top = ""; inner.style.position = inner.style.top = "";
// 设置 outer 元素的溢出属性为隐藏,并将其定位设置为相对
outer.style.overflow = "hidden"; outer.style.overflow = "hidden";
outer.style.position = "relative"; outer.style.position = "relative";
// 检查 inner 元素的 offsetTop 是否等于 -5表示在 overflow 为 hidden 时减去边框
offsetSupport.subtractsBorderForOverflowNotVisible = ( inner.offsetTop === -5 ); offsetSupport.subtractsBorderForOverflowNotVisible = ( inner.offsetTop === -5 );
// 检查 body 的 offsetTop 是否不等于 conMarginTop表示 margin 没有包含在 body 的偏移量中
offsetSupport.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== conMarginTop ); offsetSupport.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== conMarginTop );
// 检查浏览器是否支持 window.getComputedStyle 方法,用于获取计算后的样式
if ( window.getComputedStyle ) { if ( window.getComputedStyle ) {
// 设置 div 元素的上外边距为 1%
div.style.marginTop = "1%"; div.style.marginTop = "1%";
// 获取 div 的计算后样式并检查 marginTop 是否不等于 1%,以确定是否支持像素边距
support.pixelMargin = ( window.getComputedStyle( div, null ) || { marginTop: 0 } ).marginTop !== "1%"; support.pixelMargin = ( window.getComputedStyle( div, null ) || { marginTop: 0 } ).marginTop !== "1%";
} }
// 检查 container 元素的样式对象是否定义了 zoom 属性
if ( typeof container.style.zoom !== "undefined" ) { if ( typeof container.style.zoom !== "undefined" ) {
// 将 container 的 zoom 属性设置为 1触发浏览器对这个元素进行缩放处理
container.style.zoom = 1; container.style.zoom = 1;
} }
// 从 body 中移除 container 元素
body.removeChild( container ); body.removeChild( container );
// 清空 marginDiv、div 和 container 变量,以便释放内存
marginDiv = div = container = null; marginDiv = div = container = null;
// 将 offsetSupport 对象的内容扩展到 support 对象中
jQuery.extend( support, offsetSupport ); jQuery.extend( support, offsetSupport );
}); });
// 返回 support 对象,包含有关不同偏移和样式支持的信息
return support; return support;
})(); })();
var rbrace = /^(?:\{.*\}|\[.*\])$/, var rbrace = /^(?:\{.*\}|\[.*\])$/,
rmultiDash = /([A-Z])/g; rmultiDash = /([A-Z])/g;
jQuery.extend({ jQuery.extend({

Loading…
Cancel
Save