【叔小生】JavaScript进阶篇
如何插入JS
JS基础语法
语法、函数、方法
提取字符串substring()
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>string对象</title>
<script type="text/javascript">
var mystr="Hello World!"
document.write( mystr.substring(6) + "<br />");
document.write( mystr.substring(0,5) );
</script>
</head>
<body>
</body>
</html>
[外链图片转存失败(img-K3XEMn7r-1564447208325)(https://upload-images.jianshu.io/upload_images/11158618-05633a37ca111289.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
使用 substring() 从字符串中提取字符串，代码如下：
<script type="text/javascript">
var mystr="I love JavaScript";
document.write(mystr.substring(7));
document.write(mystr.substring(2,6));
</script>
运行结果:
JavaScript
love
提取指定数目的字符substr()
substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。
使用 substr() 从字符串中提取一些字符，代码如下：
<script type="text/javascript">
var mystr="I love JavaScript!";
document.write(mystr.substr(7));
document.write(mystr.substr(2,4));
</script>
运行结果：
JavaScript!
love
Math对象
Math对象，提供对数据的数学计算。
使用 Math 的属性和方法，代码如下：
<script type="text/javascript">
var mypi=Math.PI;
var myabs=Math.abs(-15);
document.write(mypi);
document.write(myabs);
</script>
运行结果:
3.141592653589793
15
abs(x)
返回数的绝对值
Math 对象方法
![[外链图片转存失败(img-xuLeutpX-1564447208329)(https://upload-images.jianshu.io/upload_images/11158618-2db8f2f40f887c6f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]](http://img.mukewang.com/532fe841000174db05160622.jpg){kind=link}
向上取整ceil()
ceil() 方法可对一个数进行向上取整。
语法:
Math.ceil(x)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Math </title>
<script type="text/javascript">
document.write(Math.ceil(3.3) + "<br />")
document.write(Math.ceil(-0.1) + "<br />")
document.write(Math.ceil(-9.9) + "<br />")
document.write(Math.ceil(8.9) + "<br />")
</script>
</head>
<body>
</body>
</html>
[外链图片转存失败(img-PL0CMiV6-1564447208333)(https://upload-images.jianshu.io/upload_images/11158618-e1a2a55c381a9e0b.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
<script type="text/javascript">
document.write(Math.ceil(0.8) + "<br />")
document.write(Math.ceil(6.3) + "<br />")
document.write(Math.ceil(5) + "<br />")
document.write(Math.ceil(3.5) + "<br />")
document.write(Math.ceil(-5.1) + "<br />")
document.write(Math.ceil(-5.9))
</script>
运行结果：
1
7
5
4
-5
-5
向下取整floor()
floor() 方法可对一个数进行向下取整。
<script type="text/javascript">
document.write(Math.floor(0.8)+ "<br>")
document.write(Math.floor(6.3)+ "<br>")
document.write(Math.floor(5)+ "<br>")
document.write(Math.floor(3.5)+ "<br>")
document.write(Math.floor(-5.1)+ "<br>")
document.write(Math.floor(-5.9))
</script>
运行结果：
0
6
5
3
-6
-6
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Math </title>
<script type="text/javascript">
document.write(Math.floor(3.3)+ "<br>")
document.write(Math.floor(-0.1)+ "<br>")
document.write(Math.floor(-9.9)+ "<br>")
document.write(Math.floor(8.9)+ "<br>")
</script>
</head>
<body>
</body>
</html>
四舍五入round()
round() 方法可把一个数字四舍五入为最接近的整数。
语法:
Math.round(x)
<script type="text/javascript">
document.write(Math.round(1.6)+ "<br>");
document.write(Math.round(2.5)+ "<br>");
document.write(Math.round(0.49)+ "<br>");
document.write(Math.round(-6.4)+ "<br>");
document.write(Math.round(-6.6));
</script>
运行结果：
2
3
0
-6
-7
随机数 random()
random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。
语法：
Math.random();
返回一个大于或等于 0 但小于 1 的符号为正的数字值。
取得介于 0 到 1 之间的一个随机数，代码如下：
<script type="text/javascript">
document.write(Math.random());
</script>
运行结果：
0.190305486195328
获得0 ~ 10之间的随机数，代码如下:
<script type="text/javascript">
document.write((Math.random())*10);
</script>
运行结果：
8.72153625893887
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Math </title>
<script type="text/javascript">
document.write(Math.round((Math.random())*10));
</script>
</head>
<body>
</body>
</html>
Array 数组对象
数组方法
concat()
连接两个或更多的数组，并返回结果
join()
把数组的所有元素放入一个字符串
pop()
删除并返回数组的最后一个元素
push()
向数组的末尾添加一个或更多元素，并返回新的长度
reverse()
颠倒数组中元素的顺序
shift()
删除并返回数组的第一个元素
slice()
从某个已有的数组返回选定的元素
sort()
对数组的元素进行排序
splice()
删除元素，并向数组添加新元素
toSource()
返回该对象的源代码
toString()
把数组转换为字符串，并返回结果
toLocaleString()
把数组转换为本地数组，并返回结果
unshift()
向数组的开头添加一个或更多元素，并返回新的长度
valueOf()
返回数组对象的原始值
数组连接concat()
concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
<script type="text/javascript">
var mya = new Array(3);
mya[0] = "1";
mya[1] = "2";
mya[2] = "3";
document.write(mya.concat(4,5)+"<br>");
document.write(mya);
</script>
运行结果：
1,2,3,4,5
1,2,3
<script type="text/javascript">
var mya1= new Array("hello!")
var mya2= new Array("I","love");
var mya3= new Array("JavaScript","!");
var mya4=mya1.concat(mya2,mya3);
document.write(mya4);
</script>
运行结果：
hello!,I,love,JavaScript,!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Array对象 </title>
<script type="text/javascript">
var myarr1= new Array("010")
var myarr2= new Array("-","123456789");
document.write(myarr1.concat(myarr2))
</script>
</head>
<body>
</body>
</html>
指定分隔符连接数组元素join()
join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
语法：
arrayObject.join(分隔符)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Array对象 </title>
<script type="text/javascript">
var myarr1= new Array("86","010")
var myarr2= new Array("123456789");
var myarr3= myarr1.concat(myarr2);
document.write(myarr3.join("-"));
</script>
</head>
<body>
</body>
</html>
颠倒数组元素顺序reverse()
reverse() 方法用于颠倒数组中元素的顺序。
定义数组myarr并赋值，然后颠倒其元素的顺序：
<script type="text/javascript">
var myarr = new Array(3)
myarr[0] = "1"
myarr[1] = "2"
myarr[2] = "3"
document.write(myarr + "<br />")
document.write(myarr.reverse())
</script>
运行结果：
1,2,3
3,2,1
选定元素slice()
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)
可使用负值从数组的尾部选取元素。
String.slice() 与 Array.slice() 相似
<script type="text/javascript">
var myarr = new Array(1,2,3,4,5,6);
document.write(myarr + "<br>");
document.write(myarr.slice(2,4) + "<br>");
document.write(myarr);
</script>
运行结果：
1,2,3,4,5,6
3,4
1,2,3,4,5,6
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Array对象 </title>
<script type="text/javascript">
var myarr1= ["我","爱","你"];
document.write(myarr1.slice(1,3))
</script>
</head>
<body>
</body>
</html>
[外链图片转存失败(img-ClUZFuSd-1564447208336)(https://upload-images.jianshu.io/upload_images/11158618-bbc6af645130f0d8.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
数组排序sort()
sort()方法使数组中的元素按照一定的顺序排列。
语法:
arrayObject.sort(方法函数)
<script type="text/javascript">
function sortNum(a,b) {
return a - b;
//升序，如降序，把“a - b”该成“b - a”
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "<br>");
document.write(myarr.sort(sortNum));
</script>
运行结果：
80,16,50,6,100,1
1,6,16,50,80,100
parseInt() 字符串类型转成整型。
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>
<script type="text/javascript">
//通过javascript的日期对象来得到当前的日期，并输出。
var T=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var myw=T.getDay();
document.write("今天的日期是："+T+weekday[myw]+"<br>");
//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var myarr=[10];
myarr=scoreStr.split(";");
for(i=0;i<10;i++){
document.write(myarr[i]+"<br>");
}
//从数组中将成绩撮出来，然后求和取整，并输出。
var sum=0;
for(i=0;i<10;i++){
sum=sum+parseInt(myarr[i].substr(3));
document.write(sum+"<br>");
}
</script>
</head>
<body>
</body>
</html>
window对象
window对象是BOM的核心，window对象指当前的浏览器窗口。
alert()
显示带有一段消息和一个确认按钮的警告框
prompt()
显示可提示用户输入的对话框
confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框
open()
打开一个新的流里流气窗口或查找一个已命名的窗口
close()
关闭浏览器窗口
print()
打印当前窗口的内容
focus()
把键盘焦点给予一个窗口
blur()
把键盘焦点从顶层窗口移开
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
setTimeout()
指定的延迟时间之后来执行代码
clearTimeout()
取消setTimeout()设置
setInterval()
每隔指定时间执行代码
clearInterval()
取消setInterval()设置
计时器setTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:
setTimeout(代码,延迟时间);
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var num=0;
function startCount() {
document.getElementById('count').value=num;
num=num+1;
setTimeout("startCount()",100);
}
setTimeout("startCount()",100);
</script>
</head>
<body>
<form>
<input type="text" id="count" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var num=0;
var i;
function startCount(){
document.getElementById('count').value=num;
num=num+1;
i=setTimeout("startCount()",1000);
}
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="count" />
<input type="button" value="Start" onclick="startCount()" />
<input type="button" value="Stop" onclick="stopCount()" />
</form>
</body>
</html>
History 对象
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
History 对象属性
length 返回浏览器历史列表中的url数量
History 对象方法
back() 加载history列表中的前一个url
forward() 加载history列表中的下一个url
go() 加载history列表中的某个具体的页面
<script type="text/javascript">
var HL = window.history.length;
document.write(HL);
</script>
返回前一个浏览的页面
back()方法，加载 history 列表中的前一个 URL。
语法：
window.history.back();
back()相当于go(-1),代码如下:
window.history.go(-1);
返回下一个浏览的页面
window.history.forward();
window.history.go(1);
Location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
location 对象属性：
hash
设置或返回从井号开始的url
host
设置或返回主机名和当前url的端口号
hostname
设置或返回当前url的主机名
href
设置或返回完整的url
pathname
设置或返回当前url的路径部分
port
设置或返回当前url的端口号
protocol
设置或返回当前url的协议
location 对象方法:
assign()
加载新的文档
reload()
重新加载当前文档
replace()
用新的文档替换当前文档
Navigator对象
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
对象属性:
appCodeName
浏览器代码名的字符串表示
appName
返回浏览器的名称
appVersion
返回浏览器的平台和版本信息
platform
返回运行浏览器的操作系统平台
userAgent
返回由客户机发送服务器的user-agent头部的值
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>navigator</title>
<script type="text/javascript">
function validB(){
var u_agent = navigator.userAgent ;
var B_name="不是想用的主流浏览器!";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
document.write("浏览器:"+B_name+"<br><br>");
document.write("u_agent:"+u_agent+"<br>");
}
</script>
</head>
<body>
<form>
<input type="button" value="查看浏览器" onclick="validB()" >
</form>
</body>
</html>
screen对象
screen对象用于获取用户的屏幕信息。
语法：
window.screen.属性
availHeight
窗口可以使用的屏幕高度
availWidth
窗口可以使用的屏幕宽度
colorDepth
用户浏览器表示的颜色位数
pixelDepth
用户浏览器表示的颜色位数
height
屏幕的高度
width
屏幕的宽度
屏幕分辨率的高和宽
window.screen 对象包含有关用户屏幕的信息。
- screen.height 返回屏幕分辨率的高
- screen.width 返回屏幕分辨率的宽
<script type="text/javascript">
document.write( "屏幕宽度："+screen.width+"px<br />" );
document.write( "屏幕高度："+screen.height+"px<br />" );
</script>
屏幕可用高和宽度
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>
<!--先编写好网页布局-->
<h3>操作成功</h3>
<span id="second">5</span>
<span>秒后回到主页</span>
<a href="javascript:back()">返回</a>
<script type="text/javascript">
var num = document.getElementById("second").innerHTML;
//获取显示秒数的元素，通过定时器来更改秒数。
function count(){
num--;
document.getElementById("second").innerHTML=num;
if(num==1){
window.location.assign("https://www.123.com");
}
}
setInterval("count()",1000);
//通过window的location和history对象来控制网页的跳转。
function back(){
window.history.back();
}
</script>
</body>
</html>
节点属性:
nodeName:
返回一个字符串，其内容是给定节点的名字
nodeType:
返回一个整数，这个数值代表给定节点的类型
nodeValue:
返回给节点的当前值
遍历节点树:
childNodes
返回一个数组
firstChild
返回第一个子节点
lastChild
返回最后一个节点
parentNode
返回一个给定节点的父节点
nextSibling
返回给定节点的下一个子节点
previousSibling
返回给定节点的上一个子节点
createElement(element)
创建一个新的元素节点
createTextNode()
创建一个包含着给定文本的新文本节点
appendChild()
指定节点的最后一个子节点列表之后添加一个新的子节点
insertBefore()
将一个给定节点插入到一个给定元素节点的给定子节点的前面
removeChild()
从一个给定元素中删除一个子节点
replaceChild()
把一个给定父元素里的一个子节点替换为另外一个节点
getElementsByName()方法
返回带有指定名称的节点对象的集合。
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。
区别getElementByID,getElementsByName,getElementsByTagName
[外链图片转存失败(img-5246wOsc-1564447208339)(https://upload-images.jianshu.io/upload_images/11158618-7571a159e25500c3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
for(i = 0;i < hobby.length;i++){
if(hobby[i].type == "checkbox"){
hobby[i].checked = true; }
}
}
function clearall(){
var hobby = document.getElementsByName("hobby");
for(i = 0;i < hobby.length;i++){
hobby[i].checked = false;}
}
function checkone(){
var j=document.getElementById("wb").value;
var hobby = document.getElementById("hobby"+j);
hobby.checked = true; }
</script>
</body>
</html>
getAttribute()方法
通过元素节点的属性名称获取属性的值。
使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
getElementsByTagName();获取的是一个集合
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>
<p id="intro">课程列表</p>
<ul>
<li title="第1个li">HTML</li>
<li>CSS</li>
<li title="第3个li">JavaScript</li>
<li title="第4个li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text=con[i].getAttribute("title");
if(text!=null)
{
document.write(text+"<br>");
}
}
</script>
</body>
</html>
setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
在文档对象模型 (DOM) 中，每个节点都是一个对象。
nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for(i=0;i<con.length;i++){
document.write(con[i].nodeName+"<br>");
document.write(con[i].nodeValue+"<br>");
document.write(con[i].nodeType+"<br>");
}
</script>
</body>
</html>
访问子节点childNodes
访问子节点的第一和最后项
node.firstChild
node.lastChild
访问父节点parentNode
获取指定节点的父节点
访问兄弟节点
nodeObject.nextSibling
previousSibling 属性可返回某个节点之前紧跟的节点
插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode = document.createElement("li");
var newtext= document.createTextNode("PHP");
newnode.appendChild(newtext);
otest.appendChild(newnode);
</script>
</body>
</html>
插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="test"><li>JavaScript</li><li>HTML</li></ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode = document.createElement("li");
newnode.innerHTML = "PHP" ;
otest.insertBefore(newnode,otest.childNodes[1]);
</script>
</body>
</html>
删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
function clearText() {
var content=document.getElementById("content");
for(var i=content.childNodes.length-1;i>=0;i--){
var childNode = content.childNodes[i];
content.removeChild(childNode);
}
}
替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
function replaceMessage(){
var oldnode=document.getElementById("oldnode");
var oldHTML= oldnode.innerHTML;
var newnode=document.createElement("i");
oldnode.parentNode.replaceChild(newnode,oldnode);
newnode.innerHTML=oldHTML;
}
创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
<script type="text/javascript">
var element = document.createElement("p");
element.className = "message";
var textNode = document.createTextNode("I love JavaScript!");
element.appendChild(textNode);
document.body.appendChild(element);
</script>
浏览器窗口可视区域大小
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
Document对象的body属性对应HTML文档的标签
• document.body.clientHeight
• document.body.clientWidth
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w=document.documentElement.clientWidth;
var h=document.documentElement.clientHeight;
document.write(w,"<br>",h);
</script>
</body>
</html>
网页尺寸scrollHeight
scrollHeight和scrollWidth，获取网页内容高度和宽度。
scrollHeight 是网页内容实际高度，可以小于 clientHeight。
scrollHeight 是网页内容高度，不过最小值是 clientHeight。
var h=document.documentElement.scrollHeight;
var w=document.documentElement.scrollWidth;
document.write(h,"<br>",w);
网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
offsetHeight = clientHeight + 滚动条 + 边框。
浏览器兼容性
var w= document.documentElement.offsetWidth
浏览器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
document.write(w+"<br>");
document.write(h);
</script>
</body>
</html>
网页卷去的距离与偏移量
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function req(){
var div = document.getElementById("div1");
document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离
document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离
}
</script>
</head>
<body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">
<div style="width:60%;border-right:1px dashed red;float:left;">
<div style="float:left;">
<div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">
<div style="height:500px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
</div>
<input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>
</div>
</div>
<div style="width:30%;float:left;">
<ul style="list-style-type: none; line-height:30px;">结果：
<li>offsetTop : <span id="li1"></span></li>
<li>offsetLeft : <span id="li2"></span></li>
<li> scrollTop : <span id="li3"></span></li>
<li>scrollLeft : <span id="li4"></span></li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
[外链图片转存失败(img-uacMpWDE-1564447208342)(https://upload-images.jianshu.io/upload_images/11158618-29140c0929e27d8e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
ul{list-style-type: none;}
a{text-decoration: none;}
#tab-list{width: 275px;height:190px;margin: 20px auto;}
#ul1{border-bottom: 2px solid #8B4513;height: 32px;}
#ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
#ul1 li:hover{cursor: pointer;}
#ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}
#tab-list div{border: 1px solid #7396B8;border-top: none;}
#tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}
.show{display: block;}.hide{display: none;}
</style>
<script type="text/javascript">
window.onload = function() {
var oUl1 = document.getElementById("ul1");
var aLi = oUl1.getElementsByTagName("li");
var oDiv = document.getElementById("tab-list");
var aDiv = oDiv.getElementsByTagName("div");
for(var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function() {
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
this.className = "active";
for(var j = 0; j < aDiv.length; j++) {
aDiv[j].className = "hide";
}
aDiv[this.index].className = "show";
}
}
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab-list">
<ul id="ul1">
<li class="active">房产</li><li>家居</li><li>二手房</li>
</ul>
<div>
<ul>
<li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
<li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
<li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
</ul>
</div>
<div class="hide">
<ul>
<li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
<li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>
<li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
<li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
</ul>
</div>
<div class="hide">
<ul>
<li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
<li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
<li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>
<li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
</ul>
</div>
</div>
</body>
</html>
标签tab
[外链图片转存失败(img-UUpOMK5g-1564447208344)(https://upload-images.jianshu.io/upload_images/11158618-2234c7611e4bd432.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达叔小生的简书！
这是一个有质量，有态度的博客
[外链图片转存失败(img-qqsAIRGv-1564447208346)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
【叔小生】JavaScript进阶篇的更多相关文章
- ＃笔记＃JavaScript进阶篇一
#JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...
- 4、JavaScript进阶篇①——基础语法
一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...
- JavaScript进阶篇 - -第1章 系好安全带
第1章 系好安全带 html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- Javascript进阶篇——总结--DOM案例+选项卡效果
断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 ...
- javascript 进阶篇1 正则表达式，cookie管理，userData
首先,什么事正则表达式呢,其实引入概念很多时候并不能帮我们明白它到底是什么,所以我先简单描述下,正则表达式,其实就是一个记录字符串规则则的字符串,等我们看完这一部分,也就能明白它到底是什么了. 基本语 ...
- 慕课网javascript 进阶篇 第九章 编程练习
把平常撸的码来博客上再撸一遍既可以加深理解,又可以理清思维.还是很纯很纯的小白,各位看官老爷们,不要嫌弃.最近都是晚睡,昨晚也不例外,两点多睡的.故,八点起来的人不是很舒服,脑袋有点晕呼呼,鉴于昨晚看 ...
- JavaScript进阶篇QA总结
Q1:常用的运算符有哪些?他们的优先级是怎样的?A1:1.算术运算符:加(+).减(-).乘(×).除(÷),自加一(++),自减一(--):2.比较运算符:大于(>).小于(<).大于等 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
随机推荐
- Linux生产环境上，最常用的一套“AWK“技巧【转】
最有用系列: <Linux生产环境上,最常用的一套“vim“技巧> <Linux生产环境上,最常用的一套“Sed“技巧> <Linux生产环境上,最常用的一套“AWK“技 ...
- Golang slice和map的申明和初始化
1 前言 仅供记录使用. 2 代码 /** * @Author: FB * @Description: * @File: SliceMapInit.go * @Version: 1.0.0 * @Da ...
- 在vue组件中访问vuex模块中的getters/action/state
store的结构: city模块: 在各模块使用了命名空间的情况下,即 namespaced: true 时: 组件中访问模块里的state 传统方法: this.$store.state['模块名' ...
- Celery：Optimizing
参考文档:http://docs.celeryproject.org/en/latest/userguide/optimizing.html#guide-optimizing
- day 07 预科
目录 异常处理 字符串内置方法 1.索引取值 2.切片 3.成员运算 4.for循环 5.len() 6.strip(): 默认去掉两端空格 7.lsteip()/rstrip(): 去左端/右端 空 ...
- c++ 初始化静态static成员变量或static复合成员变量
https://stackoverflow.com/questions/185844/how-to-initialize-private-static-members-in-c https://sta ...
- 《大象 Thinking in UML》读书笔记：Process-oriented vs. Object-oriented
前言 面向过程 还是 面向对象?这不仅仅是个软件工程术语,其问题甚至可以追溯到亚里士多德:您把这个世界视为过程还是对象? 回归到现今的软件行业,这不仅仅是个某个具体编程技术问题,更是认识论问题. 认识 ...
- SQL进阶系列之5外连接的用法
写在前面 SQL本身是作为一种数据提取工具而出现,使用SQL生成各种定制化报表和非定制化报表并非SQL原本用途的功能,但这并不意味着SQL无法实现这些功能. 用外连接进行行列转换(1)(行 → 列): ...
- 数据库索引数据结构总结——ART树就是前缀树
数据库索引数据结构总结 from:https://zhewuzhou.github.io/2018/10/18/Database-Indexes/ 摘要 数据库索引是数据库中最重要的组成部分,而索引的 ...
- C# 上传大文件
上传大文件首先要修改web.config文件,否则上传报错.在web.config添加如下配置maxRequestLength表示能上传的最大文件值,单位是KB,requestLengthDiskTh ...