大家好，我是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
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
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删除监听事件*/
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
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("您点击了鼠标中键！");
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
3).判断是否按下某键
function k(event)
{
var ke=event.keyCode || event.which
if(event.shiftKey==1)
{
alert('您点击了shift');
}
alert(ke)
alert(event.type)
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
4).网页内容节点兼容性
1)).网页可视区域宽高
var w=document.body.offsetWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
var h=document.body.offsetHeight|| document.documentElement.clientHeight || document.body.clientHeight;
- 1.
- 2.
2)).窗体宽度高度 比可视区域要大
window.innerHeight - 浏览器窗口的内高度（以像素计）
window.innerWidth - 浏览器窗口的内宽度（以像素计）
- 1.
- 2.
3)).页面滚动条距离顶部的距离
var t=document.documentElement.scrollTop || document.body.scrollTop
- 1.
4)).页面滚动条距离左边的距离
var s=document.documentElement.scrollLeft || document.body.scrollLeft
- 1.
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};
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
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;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
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支持
};
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
8)).窗口的宽高
document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高
- 1.
- 2.
9)).屏幕分辨率的宽高
window.screen.height;//屏幕分辨率的高
window.screen.width;//屏幕分辨率的宽
- 1.
- 2.
10)).坐标
window.screenLeft;//x坐标
window.screenX;//X坐标
window.screenTop;//y坐标
window.screenY;//y坐标
- 1.
- 2.
- 3.
- 4.
11)).屏幕可用工作区宽高
window.screen.availHeight
window.screen.availWidth
- 1.
- 2.
5).事件源获取
e.target || e.srcElement
- 1.
6).行外样式
funtion getStyle(obj,name){
if(obj.currentStyle){
//IE
return obj.currentStyle[name];
}else{
//Chrom,FF
return getComputedStyle(obj,false)[name];
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
7).阻止事件冒泡函数封装
function pre(event){
var e = event || window.event;
if(e.stopPropagation){ // 通用方式阻止冒泡行为
e.stopPropagation();
}else{ //IE浏览器
event.cancelBubble = true;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
8).阻止浏览器默认行为(例如点击右键出来菜单栏)
function stop(event) {
var e = event || window.event;
if (e.preventDefault){
e.preventDefault(); // 标准浏览器
}else{
e.returnValue = false; // IE浏览器
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
3.严格模式
"use strict"
- 1.
4.判断变量类型
typeof variable
instance instanceof object
instance.constructor== object
Object.prototype.toString.call(instance)
- 1.
- 2.
- 3.
- 4.
5.下载服务器端文件
<a href="http://somehost/somefile.zip" download="myfile.zip">Download file</a>
- 1.
总结
这篇文章主要介绍了JavaScript的进阶操作命令!希望对大家的学习有所帮助。