$(window) $(document) 区别

发布时间：2017-08-10, 10:11:48 分类：HTML | 编辑 off 网址 | 辅助

正文 203字数 480,322阅读

jquery里，$(window)和$(document)有什么区别？

$(window)和$(document)获取到的对象不同。
1、Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算.
2、Document 对象是 Window 对象的一部分,每个载入浏览器的 HTML 文档都会成为 Document 对象.

（支付宝）给作者钱财以资鼓励（微信）→

标签: $(window)1 $(document)1 区别18

有过 8 条评论 »

广西南宁市 2017-08-10, 10:12:35

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

reply | quote | #¹

广西南宁市 2017-08-10, 10:16:55

(document).height()与$(window).height()

jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用.

注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。

$(document).scrollTop() 获取垂直滚动的距离即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离

要获取顶端只需要获取到scrollTop()==0的时候就是顶端了

要获取底端只要获取

scrollTop()>=$(document).height()-$(window).height()

Run code

Cut to clipboard

就可以知道已经滚动到底端了

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前 也就是你浏览器所能看到的页面的那部分的高度  这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧

Run code

Cut to clipboard

自己做个实验就知道了

$(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->

Run code

Cut to clipboard

#,广西南宁市,2017-08-10,10:17:18, 不错！简洁有力。但是要获取底端只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了可以只判断scrollTop()=$(document).height()-$(window).height()吗？小于是什么情况会出现？

reply | quote | #²

广西南宁市 2017-08-10, 10:18:14

首先
$(document)这个是获取文档对象
$(window)这个是获取窗口对象，也就是浏览器客户区
给大家举个例子就非常直接明了了

$(document).height()
$(window).height()

Run code

Cut to clipboard

注意，让网页有滚动条
然后输出一下这两个值得大小，你就知道什么区别了

reply | quote | #³

广西南宁市 2017-08-10, 10:30:58

$(document) 是当前文档，就是你看到的整个网页
$(window) 如果没有框架则就是你浏览的当前浏览器的窗口

$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数，因为它可以极大地提高web应用程序的响应速度

首先我解释一下jQuery jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数，那就是ready… 他在页面加载完成之前执行。
为什么不用window.onload()，因为window.onload函数执行的时候，要说明所有东西已经载入，包括图像和横幅等等。要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的。
但是 $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数. $(document).ready(function(){ // 你的代码 });
$(document)意思是说，获取整个网页文档对象（类似的于window.document），

$(document).ready意思就是说，获取文档对象就绪的时候。上面这段代码的意思是检查文档对象直到它能够允许被操作

reply | quote | #⁴

广西南宁市 2017-08-10, 10:32:07

$(document).ready()于$(window).load()的区别。
1.执行时间不同：
从字面的意思上理解，$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档，dom树已经建立起来了，这时就可以通过class属性或者id属性等等对dom进行操作等。而$(window).load()就是整个页面已经加载完毕。与前者的区别是dom树虽然已经建立起来了，但页面不一定加载完毕，如一些大的图片等，加载完成就需要一定的时间；但是页面加载完毕后，dom肯定也就建立起来了；但是有些文字或者图片链接等需要在文档加载完毕前，dom树建立后就进行的，这时就要用到$(document).ready()了。
2.可以被执行的次数不同：
$(document).ready()可以在JavaScript代码中出现多次，并且里面的函数或者代码都可以得到执行；而$(window).load()只能在JavaScript代码中出现一次，如果有多个$(window).load()，那么只有最后一个$(window).load()里面的函数或者代码才会执行，之前的$(window).load()都将被覆盖;

<script>
$(document).ready(function(){
alert("test1");//这段代码会被执行
});
$(document).ready(function(){
alert("test2");//这段代码会被执行
});
$(window).load(function(){
alert("test1");//这段代码不会被执行
});
$(window).load(function(){
alert("test2");//这段代码将被执行
});
</script>

Run code

Cut to clipboard

3.执行的效率不同：
如要在dom的元素节点中添加onclick属性节点，这时用$(document).ready()就要比用$(window).load()的效率高；但是在某些时候还必须得用$(window).load()才行，如之前写的app下载，如果要关闭这个下载框，则必须要在整个下载框加载完毕后，才能点击关闭图标，对app下载框执行隐藏。

<script>
$(document).ready(function(){
$(".the_body a").attr("onclick","alert('test')");
});
$(window).load(function(){
$(".close_btn").click(function(){
$("#app_down").hide();
});
});
</script>

Run code

Cut to clipboard

reply | quote | #⁵

广西南宁市 2017-08-10, 10:33:47

用JS或者jQuery可以监听浏览器窗口的变化吗 5
我要的效果是这样的：当浏览器窗口大小变化时（缩小或者放大浏览器窗口），能够实时获取当前浏览器窗口的宽度和高度。我说的实时指不用刷新当前页面，当浏览器窗口大小改变时就触发事件。
试试resize事件

$(window).resize(function() {
    var width = $(this).width();
    var height = $(this).height();
});

Run code

Cut to clipboard

不过resize事件好像对框架不起作用

#,广西南宁市,2017-08-10,10:34:25, 方法一：在标签上加入 onLoad="" onResize="" 方法写上对应的方法即可
方法二：window.onresize=function(){///.....} 在方法里面写上对应的代码即可
着两种方法基本都可以解决你的问题了

reply | quote | #⁶

广西南宁市 2017-08-10, 10:35:46

JS 如何获取和监听屏幕方向的改变？
大概写一下：
方法一：用触发手机的横屏和竖屏之间的切换的事件

window.addEventListener("orientationchange", function() { 
// 宣布新方向的数值 
alert(window.orientation); 
}, false);

Run code

Cut to clipboard

方法二：监听调整大小的改变

window.addEventListener("resize", function() { 
// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度) 
}, false);

Run code

Cut to clipboard

css判断横竖屏幕

@media screen and (orientation:portrait) { 
/* portrait-specific styles */ 
} 
/* landscape */ 
@media screen and (orientation:landscape) { 
/* landscape-specific styles */ 
}

Run code

Cut to clipboard

本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角：

var mql = window.matchMedia("(orientation: portrait)"); 
// 如果有匹配，则我们处于垂直视角 
if(mql.matches) { 
// 直立方向 
alert("1") 
} else { 
//水平方向 
alert("2") 
} 
// 添加一个媒体查询改变监听者 
mql.addListener(function(m) { 
if(m.matches) { 
// 改变到直立方向 
document.getElementById("test").innerHTML="改变到直立方向"; 
} 
else { 
document.getElementById("test").innerHTML="改变到水平方向"; 
// 改变到水平方向 
} 
});

Run code

Cut to clipboard

reply | quote | #⁷

广西南宁市 2017-08-11, 11:37:49

HTML <map> 标签
实例
带有可点击区域的图像映射：

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

Run code

Cut to clipboard

reply | quote | #⁸

Records:8 1/1 «‹1 ›»

lizhenqiu blog

$(window) $(document) 区别

相关日志

有过 8 条评论 »

留下評論