全面解析jQuery中的$(window)与$(document)的用法区别


Posted in jQuery onAugust 15, 2017

[window对象]

    它是一个顶层对象,而不是另一个对象的属性,即表示浏览器中打开的窗口。

  1、属性

defaultStatus 缺省的状态条消息

document 当前显示的文档(该属性本身也是一个对象)

frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)

frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个
对象)

history 窗口的历史列表(该属性本身也是一个对象)

length 窗口内的框架数

location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location
混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变

document.location (因为这是当前显示文档的位置)

name 窗口打开时,赋予该窗口的名字

opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引
入的一个新属性)

parent 包含当前框架的窗口的同义词。frame和window对象的一个属性

self 当前窗口或框架的同义词

status 状态条中的消息

top 包含当前框架的最顶层浏览器窗口的同义词

window 当前窗口或框架的同义词,与self相同

  2、方法

alert() 打开一个Alert消息框

clearTimeout() 用来终止setTimeout方法的工作

close() 关闭窗口

confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击
Cancel返回false

blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)

focus() 把指定的窗口带到前台(另一个新方法)

open() 打开一个新窗口

prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本

setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序事件处理程序

Onload() 页面载入时触发

Onunload() 页面关闭时触发[document 对象]

  该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。

  1、属性

alinkColor 活动链接的颜色(ALINK)

anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象)

anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)

bgColor 文档的背景颜色(BGCOLOR)

cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性

fgColor 文档的文本颜色(<BODY>标记里的TEXT特性)

form 文档中的一个窗体(<FORM>)(该属性本身也是一个对象)

forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)

lastModified 文档最后的修改日期

linkColor 文档的链接的颜色,即<BODY>标记中的LINK特性(链接到用户没有观察到的文档)

link 文档中的一个<A HREF=>标记(该属性本身也是一个对象)

links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)

location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,
可以改变 window.location (用其它文档取代当前文档)window.location本身也是一个对象,而
document.location不是对象

referrer 包含链接的文档的URL,用户单击该链接可到达当前文档

title 文档的标题((TITLE>)

vlinkColor 指向用户已观察过的文档的链接文本颜色,即<BODY>标记的VLINK特性

  2、方法

clear 清除指定文档的内容

close 关闭文档流

open 打开文档流

write 把文本写入文档

writeln 把文本写入文档,并以换行符结尾

一、jQuery中的$(window).load()与$(document).ready()的区别

1.执行时间

window.onload()即jquery写法中的$(window).load(function(){})必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

2.编写个数不同

window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个(最后一个)
$(document).ready()可以同时编写多个,并且都可以得到执行

3.简化写法

window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

二、$(window).height()和$(document).height()的区别

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

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

三、$(window).scroll()和$(document).scroll()的区别

1、scroll()定义和用法:

当用户滚动指定的元素时,会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

2、两者在使用效果上区别不大,但所有浏览器基本都支持$(window).scroll(),但$(document).scroll()就不一定了。

四、$(window).scrollTop()和$(document).scrollTop()的区别

1、scrollTop()定义和用法:

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置(即:滚动条最上方与该元素顶部的距离)。
输入参数比如: $(window).scrollTop(100),将垂直位置设置为100px;
不输入参数比如: $(window).scrollTop(100),返回匹配元素的滚动条的垂直位置。

2、$(window).scrollTop()和$(document).scrollTop()两者在使用效果上区别不大,但所有浏览器基本都支持前者,但后者就不一定了。

附:一个返回顶部功能,对以上知识的应用

$(function(){
 "use strict";
 var backButton=$('.back-to-top ');//css中请事先将按钮隐藏
 //返回顶部按钮点击事件
 backButton.on('click',function(){
 $('html,body').animate({
 scrollTop:0
 },800)
 });
 //窗口向下滚动一屏后显示‘返回顶部按钮'
 $(window).on('scroll',function(){
 if($(window).scrollTop() > $(window).height())
 backButton.fadeIn();
 else
 backButton.fadeOut();
 })
});

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

jQuery 相关文章推荐
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 #jQuery
jQuery实现菜单栏导航效果
Aug 15 #jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 #jQuery
使用jQuery实现购物车结算功能
Aug 15 #jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 #jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 #jQuery
jQuery实现手势解锁密码特效
Aug 14 #jQuery
You might like
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
vue实现搜索功能
2019/05/28 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python3简单实现微信爬虫
2015/04/09 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Python内置类型性能分析过程实例
2020/01/29 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
python实现拼接图片
2020/03/23 Python
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
大四学生思想汇报
2014/01/13 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2015年党总支工作总结
2015/05/25 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书