大家好,我是IT共享者,人称皮皮。上篇文章给大家分享了盘点JavaScript中那些进阶操作知识(上篇),这篇文章继续来看看趴!
前言
相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。
1.Javascript刷新页面
- history.go(0)
- location.reload()
- location=location
- location.assign(location)
- document.execCommand('Refresh')
- window.navigate(location)
- location.replace(location)
- document.URL=location.href
2.Js浏览器兼容问题
1).浏览器事件监听
- function addEventhandler(target,type,fn,cap){
- if(target.addEventListener) /*添加监听事件*/
- {
- target.addEventListener(type,fn,cap)
- }
- else{
- target.attachEvent('on'+type,fn) /*IE添加监听事件*/
- }
- }
- function removeEventhandler(target,type,fn,cap){
- if(target.removeEventListener) /*删除监听事件*/
- {
- target.removeEventListener(type,fn,cap)
- }
- else{
- target.detachEvent('on'+type,fn) /*IE删除监听事件*/
- }
- }
2).鼠标键判断
- function bu(event)
- {
- var bt= window.button || event.button;
- if (bt==2)
- {
- x=event.clientX
- y=event.clientY
- alert("您点击了鼠标右键!坐标为:"+x+','+y)
- }
- else if(bt==0)
- {
- a=event.screenX
- b=event.screenY
- alert("您点击了鼠标左键!坐标为:"+a+','+b)
- }
- else if(bt==1)
- {
- alert("您点击了鼠标中键!");
- }
- }
3).判断是否按下某键
- function k(event)
- {
- var ke=event.keyCode || event.which
- if(event.shiftKey==1)
- {
- alert('您点击了shift');
- }
- alert(ke)
- alert(event.type)
- }
4).网页内容节点兼容性
1)).网页可视区域宽高
- var w=document.body.offsetWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
- var h=document.body.offsetHeight|| document.documentElement.clientHeight || document.body.clientHeight;
2)).窗体宽度高度 比可视区域要大
- window.innerHeight - 浏览器窗口的内高度(以像素计)
- window.innerWidth - 浏览器窗口的内宽度(以像素计)
3)).页面滚动条距离顶部的距离
- var t=document.documentElement.scrollTop || document.body.scrollTop
4)).页面滚动条距离左边的距离
- var s=document.documentElement.scrollLeft || document.body.scrollLeft
5)).元素到浏览器边缘的距离
- function off(o){ #元素内容距离浏览器边框的距离(含边框)
- var l=0,r=0;
- while(o){
- l+=o.offsetLeft+o.clientLeft;
- r+=o.offsetTop+o.clientTop;
- o=o.offsetParent;
- }
- return {left:l,top:r};
- }
6)).获取滚动条高度
- // 滚动条的高度
- function getScrollTop() {
- var scrollTop = 0;
- if (document.documentElement && document.documentElement.scrollTop) {
- scrollTop = document.documentElement.scrollTop;
- }
- else if (document.body) {
- scrollTop = document.body.scrollTop;
- }
- return scrollTop;
- }
7)).DOM节点操作
- function next(o){//获取下一个兄弟节点
- if (o.nextElementSibling) {
- return o.nextElementSibling;
- } else{
- return o.nextSibling;
- };
- }
- function pre(o){//获取上一个兄弟节点
- if (o.previousElementSibling) {
- return o.previousElementSibling;
- } else{
- return o.previousSibling;
- };
- }
- function first(o){//获取第一个子节点
- if (o.firstElementChild) {
- return o.firstElementChild;//非IE678支持
- } else{
- return o.firstChild;//IE678支持
- };
- }
- function last(o){//获取最后一个子节点
- if (o.lastElementChild) {
- return o.lastElementChild;//非IE678支持
- } else{
- return o.lastChild;//IE678支持
- };
- }
8)).窗口的宽高
- document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
- document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高
9)).屏幕分辨率的宽高
- window.screen.height;//屏幕分辨率的高
- window.screen.width;//屏幕分辨率的宽
10)).坐标
- window.screenLeft;//x坐标
- window.screenX;//X坐标
- window.screenTop;//y坐标
- window.screenY;//y坐标
11)).屏幕可用工作区宽高
- window.screen.availHeight
- window.screen.availWidth
5).事件源获取
- e.target || e.srcElement
6).行外样式
- funtion getStyle(obj,name){
- if(obj.currentStyle){
- //IE
- return obj.currentStyle[name];
- }else{
- //Chrom,FF
- return getComputedStyle(obj,false)[name];
- }
- }
7).阻止事件冒泡函数封装
- function pre(event){
- var e = event || window.event;
- if(e.stopPropagation){ // 通用方式阻止冒泡行为
- e.stopPropagation();
- }else{ //IE浏览器
- event.cancelBubble = true;
- }
8).阻止浏览器默认行为(例如点击右键出来菜单栏)
- function stop(event) {
- var e = event || window.event;
- if (e.preventDefault){
- e.preventDefault(); // 标准浏览器
- }else{
- e.returnValue = false; // IE浏览器
- }
- }
3.严格模式
- "use strict"
4.判断变量类型
- typeof variable
- instance instanceof object
- instance.constructor== object
- Object.prototype.toString.call(instance)
5.下载服务器端文件
- <a href="http://somehost/somefile.zip" download="myfile.zip">Download file</a>
总结
这篇文章主要介绍了JavaScript的进阶操作命令!希望对大家的学习有所帮助。
原文链接:https://mp.weixin.qq.com/s/J3Xh9MLj9uaZYrcgolFk3g