jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用.
注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变,但是jQuery(document).height()是不变的。
以下为获取高度或宽度函数的jQuery源代码
// 创建jQuery.height(size) jQuery.width(size)
//调用each方法创建两个相似的函数
jQuery.each([ "Height", "Width" ], function( i, name ) {
var type = name.toLowerCase();
jQuery.fn[ type ] = function( size ) {
var elem = this[0];
if ( !elem ) {
return size == null ? null : this;
}
if ( jQuery.isFunction( size ) ) {
return this.each(function( i ) {
var self = jQuery( this );
self[ type ]( size.call( this, i, self[ type ]() ) );
});
}
// 获取window对象的高度或宽度 ($(window).width() ) 实际上是当前可见区域的高度或宽度
if ( jQuery.isWindow( elem ) ) {
// Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
// 3rd condition allows Nokia support, as it supports the docElem prop but not CSS1Compat
// 以上英文的意思是依赖于Quirks 或 Standards 文档模式来使用
// document.documentElement (实际上就是<html/>元素) 或 document.body
var docElemProp = elem.document.documentElement[ "client" + name ];
return elem.document.compatMode === "CSS1Compat" && docElemProp ||
elem.document.body[ "client" + name ] || docElemProp;
// 获取整个文档对象(document)的宽度或高度
} else if ( elem.nodeType === 9 ) {
// Either scroll[Width/Height] or offset[Width/Height], whichever is greater
return Math.max(
elem.documentElement["client" + name],
elem.body["scroll" + name], elem.documentElement["scroll" + name],
elem.body["offset" + name], elem.documentElement["offset" + name]
);
// 获取DOM元素的高度或宽度
} else if ( size === undefined ) {
var orig = jQuery.css( elem, type ),
ret = parseFloat( orig );
return jQuery.isNaN( ret ) ? orig : ret;
// 设置DOM元素的高度或宽度 (当没有单位时默认为像素值)
} else {
return this.css( type, typeof size === "string" ? size : size + "px" );
}
};
});
分享到:
相关推荐
4. jQuery代码中常见的元素包括工厂函数、选择器和方法 5. jQuery程序代码的特殊:包含$符号和连缀操作 6. 每个页面都有对应的DOM模型,DOM模型包括元素节点、文本节点和属性节点 7. 可以将DOM对象转换成jQuery对象...
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...
一、jQuery 核心函数 首先介绍 jQuery 的几个... 返回值:jQuery 对象 参数 elements: 用于封装成 jQuery 对象的 DOM 元素 代码如下: // 将当前页面的背景色设为黑色 jQuery(document.body).css( “background-color
这个函数也可以接收XML文档和Window对象(虽然它们不是DOM元素)作为有效的参数。 jQuery(callback) $(document).ready()的简写。 允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document)....
这个函数也可以接收XML文档和Window对象(虽然它们不是DOM元素)作为有效的参数。 -------------------------------------------------------------------------------- Wrap jQuery functionality around a ...
jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready… 他在页面加载完成之前执行。 (也许window.onload()能实现同样的功能,但是jQuery更加快速,灵活)。 $(document).ready(fn):当DOM...
第1部分 JavaScript.cCSS与DOM基础篇 第1章 ccJavaScript概述 1.1 JavaScript的起源 1.2 浏览器之争 1.2.1 DHTML 1.2.2 浏览器之间的冲突 1.2.3 标准的制定 1.3 JavaScript的实现 1.3.1...
Jquery库提供了一个非常方便好用的函数( $(selector).ready()),让我们可以在页面的dom加载完后就可以做相应的操作(当然,这还得看用户浏览器的支持).,而不用等待全部元素加载完成.例如: $(document).ready(function ...
第7章 用CSS设置页面和浏览器的元素 7.1 丰富的超链接特效 7.2 鼠标特效 7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 ...
* 获取元素,或者在DOM加载完成时执行某函数 * @param arg 此参数为字符串时,认为是 c$.getElement 的缩写,用来获取元素。用法参考 c$.getElement * 如果 arg 是 function 则认为是 c$.ready 的缩写,在dom加载完成...
所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。因此,使用load方法时尽量把load方法写在页面顶部。调用load方法的完整格式是:load( url, [data], [callback] ), ...
---DOM载入就绪可以查询及操纵时执行该操作|等同window.load,确保在body元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。 用到了一个JS脚本库,主要就是设置各个验证项的正则表达式,基本...
包括初识JavaScript、JavaScript基础、流程控制、函数、JavaScript对象与数组、字符串与数值处理对象、正则表达式、程序调试与错误处理、事件处理、处理文档(document对象)、文档对象模型(DOM对象)、window窗口...
内容索引:脚本资源,jQuery,表单验证 一个带验证的jQuery表单,同时支持无刷新编辑,DOM载入就绪可以查询及操纵时执行该操作|等同window.load ,确保在元素的onload事件中没有注册函数,否则不会触发$(document)....
它接受两个参数,分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如: var html = clip.getHTML( 150, 20 ); 你可以用 innerHTML 或直接 [removed](); 进行输出。 以下是测试输出的组装完毕的HTML ...
在使用SWFUpload之前,请确认你具备一定的JavaScript和DOM知识。在实际开发中,大部分的错误都是由于错误的设置和低劣的Event Handlers处理程序所造成的。 [编辑本段]文档中文翻译 ...
HTML基础加强、css(包含Div+CSS布局)、JavaScript、Dom(事件、window对象、document对象、对话框、定时器、粘贴板、动态Dom、跨浏览器兼容性解决方案、JS压缩和CDN、Internet Explorer Developer Toolbar)、...
由于您的脚本在同一个域 iframe 的上下文中运行,因此您可以通过window.top完全访问主机页面的 DOM。 使用 jquery 并需要访问主机页面? 现在问题只是使用主机页面的文档$('.button', window.top.document)来确定您...