javascript 常用方法

最新推荐文章于 2022-03-21 15:37:53 发布
最新推荐文章于 2022-03-21 15:37:53 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011146423/article/details/82864115
版权

一、Js/Jquery获取网页屏幕可见区域高度

1.1、获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
   
document.body.clientWidth ==> 网页可见区域宽 
document.body.clientHeight ==> 网页可见区域高
document.body.offsetWidth ==> 网页可见区域宽(包括边线的宽)
document.body.offsetHeight ==> 网页可见区域高(包括边线的高)
document.body.scrollWidth ==> 网页正文全文宽
document.body.scrollHeight ==> 网页正文全文高
document.body.scrollTop ==> 网页被卷去的高
document.body.scrollLeft ==> 网页被卷去的左
window.screenTop ==> 网页正文部分上
window.screenLeft ==> 网页正文部分左
window.screen.height ==> 屏幕分辨率的高
window.screen.width ==> 屏幕可用工作区高度
window.screen.availHeight ==> 屏幕可用工作区高度
window.screen.availWidth ==> 屏幕可用工作区宽度
window.innerHeight ==> 获取浏览器显示区域高度
window.innerWidth ==> 获取浏览器显示区域宽度

 1.2、部分jquery函数获取方法

// 部分jQuery函数  
$(window).height() 　              //浏览器时下窗口可视区域高度   
$(document).height()　           //浏览器时下窗口文档的高度   
$(document.body).height()　　　　　　//浏览器时下窗口文档body的高度   
$(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度 包括border padding margin   
$(window).width() 　   //浏览器时下窗口可视区域宽度   
$(document).width()   //浏览器时下窗口文档对于象宽度   
$(document.body).width()　　　　　　//浏览器时下窗口文档body的高度   
$(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度 包括border padding  
HTML精确定位:  scrollLeft,scrollWidth,clientWidth,offsetWidth   
scrollHeight: 获取对象的滚动高度。   
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离   
scrollTop:  设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离   
scrollWidth: 获取对象的滚动宽度   
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度   
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置   
offsetTop:  获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置   
event.clientX 相对文档的水平座标   
event.clientY 相对文档的垂直座标   
event.offsetX 相对容器的水平坐标   
event.offsetY 相对容器的垂直坐标   
document.documentElement.scrollTop 垂直方向滚动的值   
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 
alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

二、浏览器兼容的一些代码写法

一：网页可见区域宽高，不包括工具栏和滚动条（浏览器窗口可视区域大小）

1.对于IE9+、chrome、firefox、Opera、Safari：

window.innerHeight浏览器窗口的内部高度；
window.innerWidth浏览器窗口的内部宽度；

2.对于IE8.7.6.5:

document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度；
document.documentElement.clientWidth:表示HTML文档所在窗口的当前宽度；
或者，因为document对象的body属性对应HTML文档的<body>标签，所以也可表示为：
document.body.clientHeight：表示HTML文档所在窗口的当前高度；
document.body.clientWidth：表示HTML文档所在窗口的当前宽度；

结论：
document.body.clientWidth/Height：的宽高偏小，高甚至默认200；
document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等。

所以在不同浏览器都实用的的Javascripit方案：
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
 

二：网页正文全文宽高

scrollWidth和scrollHeight获取网页内容高度和宽度

1.针对IE.Opera：scrollHeight是网页内容实际高度，可以小于clientHeight;
2.针对NS.firefox：scrollHeight是网页内容高度，不过最小值是clientHeight;也就是说网页内容实际高度小于clientHeight的时候，scrollHeight返回clientHeight；
3.浏览器兼容代码：
var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;
 

二：网页可见区域宽高，包括滚动条等边线（会随窗口的显示大小改变）

1.值：offsetWidth = scrollWidth + 左右滚动条 +左右边框；
　　　offsetHeight = scrollHeight + 上下滚动条 + 上下边框；

2.浏览器兼容代码：
var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
var h = document.documentElement.offsetHeight || document.body.offsetHeight ;
 

三：网页卷去的距离与偏移量

1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离；
2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离；
3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置；
4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置；

二、浏览器 window.navigator 对象 

浏览器信息：
window.navigator ： 代表正在使用的浏览器的对象。
window.navigator.appCodeName： 返回浏览器的代码名。"Mozilla" 本来是 Netscape Navigator 的开发代码（语源是怪兽哥斯拉），考虑到为 Mozilla 制作的网页的兼容性，Internet Explorer 的返回值也是 "Mozilla"。
window.navigator.appName：返回代表浏览器名的字符串。
IE：Microsoft Internet Explorer
Chrome：Netscape
window.navigator.appVersion  : 返回代表浏览器版本号的字符串。Internet Explorer 为“<对应的Mozilla版本> (compatibpe; MSIE <IE的版本>; <操作系统名称>)”的形式。
window.navigator.appMinorVersion: 返回浏览器的次版本号。该属性是一个只读的字符串。仅IE有效。
window.navigator.userAgent:  userAgent 返回代表浏览器名和版本号的字符串。
window.navigator.platform:返回浏览器平台的字符串（"Win32", "Win16", "WinCE", "Mac68k", "MacPPC", "HP-UX", "SunOS" 等）。
window.navigator.cpuClass：返回CPU的信息（"x86", "68K", "Alpha", "PPC" 等）。仅IE有效。
window.navigator.browserLanguage、window.navigator.systemLanguage、window.navigator.userLanguage

以上三个语言仅IE有效。
language、browserLanguage 返回浏览器的语言种类，systemLanguage 返回系统的语言种类，userLanguage 返回用户环境的语言种类。

浏览器状态：
window.navigator.cookieEnabled：返回 cookie 是否可用的真伪值。
window.navigator.onLine：返回是否能连上网络的真伪值。
window.navigator.javaEnabled()：返回 Java 是否可用的真伪值。
window.navigator.userProfile：

2.1、获取浏览器URL

获取到当前浏览的url地址方法：
window.location.href 
window.document.URL 

获取URL中的内容信息：
url = 'http://www.baidu.com?id=123456&word=abcd#123'
window.location.hostname // 获取到域名 www.baidu.com
window.location.hash // 获取哈希值 “#” 号后面的值 ?id=123456&word=abcd
window.location.search // 获取 “?” 号后面的值 #123

三、LocalStorage和sessionStorage的用法以及使用区别

3.1、localstorage

localStorage的生命周期是永久性的。即使关闭浏览器，数据也不会销毁，存储大小一般为5M,需要主动去销毁，使用方法如下：
var storage = null;
if(window.localStorage){           //判断浏览器是否支持localStorage
  storage = window.localStorage;     
  storage.setItem("name", "Rick"); //存储/修改
  alert(storage.getItem("name")); //获取
  storage.removeItem("name");     //删除
  storage.clear();//清除所有数据
  storage.length();//查看多少条记录
}

3.2、sessionStorage

sessionStorage 的生命周期是在浏览器关闭前。在整个浏览器未关闭前，其数据一直都是存在的。

var storage = window.sessionStorage;  
storage.setItem('name', name); // 设置/修改
storage.getItem("name"); // 获取
storage.removeItem("name");  //删除 
storage.clear();//清除所有数据
storage.length();//查看多少条记
最低0.47元/天 解锁文章
爱人BT
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python 文件操作
爱人BT的博客
10-18 739
一、基本语法 file = open(文件名,模式,encoding='utf-8',newline='') # newline 去掉默认换行符 file_data = file.read(字符数) # 读取文件；默认读取全部 file.write('写入的内容') # 写内容进文件 file.close() # 关闭文件操作行为 二、实用方法 file.readable() ...
MySQL 时间戳操作
爱人BT的博客
05-13 9548
1. 秒级别时间戳 自1970-01-01 00:00:00以来按秒算，SQL如下： mysql> select unix_timestamp(now()); +-----------------------+ | unix_timestamp(now()) | +-----------------------+ | 1557728379 | +---------...
JavaScript中的方法是什么
粉丝们务必加入微信粉丝群
04-27 889
作者：Shadeed 译者：前端小智 来源：dmitripavlutin 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。 1.什么是方法 定义并调用一个常规函数： function greet(who) { return `Hello, ${who}!`; } greet('World'); // => 'H.
locationStorage和sessionStorage的用法总结
zag666的博客
08-27 2693
文章目录webStoragelocalStoragesessionStorage用法 webStorage 存储内容大小一般支持5MB左右（不同浏览器可能还不一样） 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。 相关API： xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。 xxxxxStora
JQuery和JS操作LocalStorage/SessionStorage的方法
热门推荐
一碗单炒饭的专栏
02-26 5万+
首先说一下LocalStorage和SessionStorageLocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右，各个浏览器不一致 在所有同源窗口中都是共享的 本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存） 不能被爬虫爬取，不要用它完全取代URL传参 IE７及以下不支持外，其他标准浏览器都完全支持
前端学习（592）：使用snippets辅助debugging
歌谣的博客
03-19 194
javascript常用方法
07-20
javascript常用方法：数组属性、方法；String对象属性、方法；以及日期、Math、Number等以及JavaScript 全局属性方法。
javascript 常用方法总结
10-29
JavaScript常用方法总结 JavaScript是一种广泛应用于Web开发的脚本语言，提供了许多实用的方法来操作字符串、数组、日期等。下面将总结一些常用的JavaScript方法。 1. replace()方法 replace()方法用于字符串的...
javascript常用方法汇总
10-25
本文给大家汇总了一些自己整理的在项目中经常能够用到的javascript小方法，基本都是短小精悍型，方便大家快速开发。
javascript常用方法总结
10-24
经常使用的一些javascript方法，今天总结了一下，以便以后查询，有需要的小伙伴可以参考下。
2234娱乐导航BT电影下载站
07-13
后台登陆地址/myadmin 默认帐号admin 默认密码admin
三种视频监控调用JS代码文件
08-07
集成三家视频监控厂家，浏览器调用视频监控的js代码，基于厂家API编写
javascript获取图片的top N主色值方法详解
11-28
题目要求 找出一个页面中出现次数最多的标签！！！ 个人解法： var eles = document.getElementsByTagName('*'); var rs = []; for(var i=0; i<eles.length; i++) { var tag_name = eles[i].tagName.toLowerCase(); if(undefined != tag_name) { if(inJsonArray(rs, tag_name)) { addWeight(rs, tag_name); }else { rs.push({
Node.js-Nonejs实现磁力链接获取DHTBT爬虫磁力链接解析种子解析资源搜索
08-09
Nonejs 实现磁力链接获取 DHT BT爬虫 磁力链接解析 种子解析 资源搜索
Node.js-Nonejs实现获取磁力链接infohashDHTBT网络爬虫磁力链接解析获取种子读取信息
08-10
Nonejs 实现获取磁力链接infohash DHT BT网络爬虫 磁力链接解析获取种子 读取信息
JavaScript的方法(常用)
AMD23的博客
03-21 9180
1.js的弹窗方法 1.输出内容：document.write 2.警告内容：alert（“内容”），弹框只有确定按钮，起到提示作用 3.确定内容：confirm（“内容”），弹框有确定和取消按钮，分别返回值为true、false 4.提问窗口：prompt（“弹框内容（不可修改），文本框默认内容（可修改）”），弹框包括确定按钮、取消按钮、文本框，点击确定按钮返回文本框内容、点击取消按钮返回null。 5.打开新窗口：window.open(, <窗口名称>, <参数字符串&gt
Python高级特性：切片
爱人BT的博客
01-04 826
我们在查找序列类型（如字符串、列表、元组…）的单个元素时，可以通过索引值（或称下标）来获取；但是有时候需要获取其中的一个片段值的时候，就需要用到切片（slice）截取索引片段。 1、切片的基础用法 列表是 Python 中极为基础且重要的一种数据结构，也是最能发挥切片的用处的一种数据结构。 首先是切片的书写形式：[i : i+n : m] ；其中，i 是切片的起始索引值，为列表首位时可省略；...
Flask 之 flask-script 模块使用
爱人BT的博客
01-28 2736
Flask Script扩展提供向Flask插入外部脚本的功能，包括运行一个开发用的服务器，一个定制的Python shell，设置数据库的脚本，cronjobs，及其他运行在web应用之外的命令行任务；使得脚本和系统分开； Flask Script和Flask本身的工作方式类似，只需定义和添加从命令行中被Manager实例调用的命令； 官方文档：http://flask-script.rea...
Python 异常处理
爱人BT的博客
11-20 829
一、Python 异常处理 python提供了两个非常重要的功能来处理python程序在运行中出现的异常和错误。你可以使用该功能来调试python程序。 异常处理: 本站Python教程会具体介绍。 断言(Assertions):本站Python教程会具体介绍。 1.1、python标准异常 异常名称 描述 BaseException 所有异常的基类 SystemExi...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值