javascript组成：

ECMAScript 基本语法。
1.
BOM （浏览器对象模型）
1.
DOM （文档对象模型）

BOM（borwser Object Model）

浏览器对象模型：使用对象描述了浏览器的各个部分的内容。

0）document对象

属性方法	介绍
referrer	获取别的页面超链接到本页面的地址var ur=document.referrer;字符串可用于判断是否从指定的页面进来的
URL	获取当前页面的地址var ur=document.URL字符串
getElementByld()	返回对对拥有指定id的第一个对象的引用(也就是可以进行设置修改)
getElementsByName()	返回带有指定名称的对象的集合只能是name对象记住是集合array 调用需要用集合对象[]
getElementsByTagName()	返回带有指定标签的对象的集合记住是集合array只能是标签名比如input ,h1,p,div 等等
write()	向页面写文本 HTML 表达式或Js 代码等等也就是输入内容但是会覆盖不属于write的内容包括任何(视频图片文字等等) 可以用于清空页面所有东西

getElementByld() 和getElementsByName()以及getElementsByTagName()和write()这里就不在介绍了之前已经用过很多了如果不会js选择器的话可以参考js选择器这篇文章

我们就来介绍referrer和URL

referrer

new_file.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        		<h1>我是页面1</h1>
		<a href="new_file2.html">测试</a>
	</body>
</html>

new_file2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<h1>我是页面2</h1>
	<body>
		<script> document.write(document.referrer) </script>
	</body>
</html>

从页面1 点击超链接到页面2看效果

URL

获取当前页面的url

var url=document.URL
		document.write(url)

1）window :当前的窗口

window常用的方法：

open() 打开一个新的资源。

open()方法接收4个参数分别是

资源地址
打开方式 _blank(在新窗口) 或者_self(当前窗口)
打开的窗口大小和位置(用逗号隔开) “height=?,width=?,top=?,left=?”
资源找不到是否用其他代替 fasle 或者其他资源地址

<button onclick="open_baidu()">点击打开新窗口</button>
		<button onclick="openclose()">关闭当前打开的窗口</button>
		<button onclick="closeAll()">关闭全部打开的窗口</button>
		<script type="text/javascript">
			
			var clean=new Array();
			var win;
			function open_baidu()
			{
		win=window.open("https://www.baidu.com","_blank","height = 500px,width = 350px,top = 50px,left = 450px",false);
			  clean.push(win)
			
			}
			//关闭当前打开的窗口
			function openclose(){
				win.close();
			}
			//关闭全部打开的窗口
			function closeAll(){
				for (var i = 0; i < clean.length; i++) {
					clean[i].close()
				}
				window.close();
			}
		</script>

moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

<input type="button" value="打开我的窗口" onclick="openWin()" />
		<br><br>
		<input type="button" value="移动我的窗口" onclick="moveWin()" />
		<script type="text/javascript">
			var myWindow;

			function openWin() {
				//第一个参数 必须是资源 不能是网络资源 否则移动不了 moveTo 报错
				myWindow = window.open('new_file1.html', '', 'width=200,height=100');
			}

			function moveWin() {
				myWindow.moveTo(500, 500);
				myWindow.focus();
			}
		</script>

moveBy() 相对于当前的窗口移动指定的 x 和 y 偏移值(左上角)。 (常用))

<input type="button" value="打开我的窗口" onclick="openWin()" />
<br><br>
<input type="button" value="移动我的窗口" onclick="moveWin()" />
		<script type="text/javascript">
			var myWindow;
		function openWin(){
			//第一个参数 必须是资源 不能是网络资源 否则移动不了 moveBy 报错
			myWindow=window.open('new_file1.html','','width=200,height=100');
		}
		function moveWin(){
			myWindow.moveBy(250,250);
			myWindow.focus();
		}
		</script>

2 ) 时间函数

特别注意的是使用时间函数不要放在 $(document).ready… 和 onload 里不然就会无效

setInterval() 每隔指定的毫秒数指定指定的代码。 (持续执行)

<button onclick="Interval()">每隔三秒后弹出alert()</button><br />
		<button onclick="ClearInterval()">清除Interval定时效果</button>

		<script type="text/javascript">
            var c;
			function Interval() {
				c = setInterval("Aletr()", 3000);
			}

			function Aletr() {
				alert("Interval")
			}

			function ClearInterval() {
				// 通过定时器返回的 id 值来关闭定时器
				clearInterval(c);
			}
		</script>

时钟案例:

<div id="myclock"></div>
		<button onclick=" gunb()">关闭周期定时器</button>
		<button onclick="zouqtime()">开启周期定时器</button>
		<script type="text/javascript"> function distime() { var tody = new Date(); var hh = tody.getHours(); var mm = tody.getMinutes(); var ss = tody.getSeconds(); //设置div 的内容 为当前时间 document.getElementById("myclock").innerHTML = "现在是:" + hh + ":" + mm + ":" + ss; } //使用setInterval() 每间隔指定时间(毫秒1000=1秒)调用一次 distime var c function zouqtime() { //也可以设置在body 里 οnlοad="" 页面加载时候就运行 c = setInterval("distime()", 1000); } //关闭周期定时器 function gunb() { //通过 定时器 返回 的 id 值 c 用 clearInterval(c)来关闭定时器 clearInterval(c); } </script>

setTimeout（）经过指定毫秒数后执行一次指定的代码。 (就一次)

<button onclick="Timeout()">三秒后弹出alert()</button><br />
		<button onclick="ClearTimeout()">清除Timeout定时效果</button>

		<script type="text/javascript">
			var c;

			function Timeout() {
				c = setTimeout("Aletr()", 3000);
			}

			function Aletr() {
				alert("Timeout")
			}

			function ClearTimeout() {
				// 通过定时器返回的 id 值来关闭定时器
				clearTimeout(c);
			}
		</script>

3）location 地址栏对象

location的属性

属性	介绍
host	设置或返回主机名称和当前url的端口号
hostname	设置或返回当前url的主机名
href	设置或返回完整的url

语法: location.属性（?）

示例：

//获取本机名和端口号
            document.write(location.host+"<br>")
            //获取本机名 也就是 ip 
            document.write(location.hostname+"<br>")
            //获取全部地址 也就是url
            document.write(location.href+"<br>")

<button onclick="javascript:location.href='https://www.baidu.com'">点击</button>

效果等用于 <a href="https://www.baidu.com" target="_self">点击</a>
但是样式不一样
如果想要在新窗口打开页面 可以使用 open()方法  上面有

获取url的参数然后处理

比如 url  http://xxxxx?login=false

function getUrlVars() {
    var vars = [],
        hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

//调用方法
if (getUrlVars()["login"]!=undefined){
        if (getUrlVars()["login"]==="false"){
        alert("你输入的账户或 密码错误")
        }
}

location.href = “http://www.baidu.com”; 设置地址栏地址类似于a标签

location.reload(); 重新加载地址栏地址

location的方法

方法	介绍
reload()	重新加载当前文档 (页面) 刷新
replace()	用新的文档替换当前文档 (页面)

location.reload();  //刷新 当前页面

location.replace('https://www.baidu.com');
效果等用于 <a href="https://www.baidu.com" target="_self">点击</a>

replace和href区别

window.location.href中的href其实就是<a>标签中的href，使用这个进行页面跳转后，可以使用浏览器的后退按钮退回到原来的页面，也可以使用history.go(-1)函数跳转到原来的页面。

window.location.replace(url)方法是让浏览器清除掉其历史中的url，重新进行url的设定。使用浏览器的后退按钮或是前进按钮时，它将无法跳转到原来的页面，而是跳转到原来页面的上一页

4 ) history 页面后退前进

方法	介绍
back()	加载history对象列表中前一个url
forward()	加载history对象列表中后一个url
go()	加载history对象列表中某个具体url

go(n) n=0时是当前页面 n=1是前进 n=-1是后退

注意只有使用 back 后退了才能forward前进比如:我进入 1页面使用back 返回本页面这时候就可以使用 forward 进入1页面

案例:

页面new_file.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
	<h1>111111111111</h1>
	<a href="new_file2.html">1111页面</a><br />
	<a href="javascript:history.back()"> 后退</a>
	<a href="javascript:history.forward()"> 前进</a>
	</body>
</html>

页面new_file2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<h1>222222222222</h1>
	<a href="new_file.html">2222页面</a><br />
	<a href="javascript:history.back()"> 后退</a>
	<a href="javascript:history.forward()"> 前进</a>
	</body>
</html>

自己玩玩

注意这几种情况会丢失退回页面的url

1，直接在浏览器中输入地址
2，使用location.reload()刷新或者location.replace()
3，在微信对话框中，点击进入微信自身浏览器,
4，扫码进入微信或浏览器

如果在手机端的话history就会失效就需要使用 referrer 但是referrer只会存储上一个的

比如:a->b->c 那么 c 返回b b返回的就是c 而不会 b返回a 了

onclick="javascript:window.location.href = document.referrer"

解决方案直接返回首页:

$("#jsBack").click(function () {
  if ( document.referrer === window.location.href||document.referrer.trim().length<=0){
    // 没有来源页面信息的时候，改成首页URL地址
    $('#jsBack').attr('href', '/index.jsp');
  }else{
    window.location.href = document.referrer
  }
})

当然如果想要实现更多页面的返回那么就需要使用到 jsp 了利用 request对象进行将url保存在数组中转发给下一个页面以此类推每次想要返回上一个页面就是循环遍历数组判断当前页面url在数组中的的位置然后-1 就是上一个页面然后赋值给location.href

进行页面跳转以此类推最终可以返回到首页的记住返回到首页之后将数组内容清空

如果当数组内的数据是空就默认数组第一个空间是首页地址这样防止别人通过路径直接方法其他页面导致无法返回的情况

DOM

DOM节点分为三大类：元素节点、属性节点、文本节点；

而我们心心念念想知道的DOM树就长酱紫！

由DOM树我们可以看到，文本节点、属性节点属于元素节点的子节点。

文本节点和属性节点就像是这颗DOM树的果子，而元素节点就是树枝，所以，在操作时，一定要顺枝摘果：得先取到元素节点！然后再操作子节点！！

获取元素节点

要先取到元素节点！要先取到元素节点！要先取到元素节点！重要的事情说三遍！

到这你就该好奇了，那该怎么顺着树枝摘果子呢，别急，小编给你带来了方法!

这里还要注意的是:

就算是<br/>都算是一个节点

<p> ,<div> … 这些块节点元素后面自带<br/> 也就相当于2个节点

这个一定要注意这个一定要注意这个一定要注意重要的事情说三遍！

首先，可以用使用getElement系列方法，取到元素节点。

在这里，小编该介绍怎么找树枝了！

属性	介绍
parentNode	返回节点的父节点
childNodes	返回子节点的集合 ChildNodes[i]使用length 可以获取接点内有多少子节点

属性	介绍
firstElementChild	返回节点内的第一个子节点,最普通的用法是访问该元素的文本节点
lastElementChild	返回节点内最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

属性	介绍
firstChid	返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个字节点
nextSibling	下一个节点
previousSibling	上一个节点

带Element 和不带的Element 如果单独使用有时候就会出现失效的情况

所以一般写得时候加上兼容

在js 中提供了兼容不同游览器的方法   和不同使用环境中的方法
var ob1j= document.getElementById("new_w");
//获取下一个节点

//var str= ob1j.nextElementSibling .innerHTML || ob1j.nextSibling.innerHTML; 
// 上一个节点

 //var str =ob1j.previousElementSibling.innerHTML || ob1j.previousSibling .innerHTNL; 
//获取第一个子节点
//var str=ob1j.firstElementChild.innerHTML ||ob1j.firstChild.innerHTML; 
//获取最后一个子节
  // var str= ob1j.lastElementChild.innerHTML || ob1j.lastChild.innerHTNL点
 alert(str)

如果不想使用兼容那么先使用带Element 如果失效在加上兼容

小编先示范一遍，注意看了！

案例

<p>hello</p>
		    <ul id="hu">
		        <li>林志玲姐姐:墨镜300减30 <a href="#">aaa1</a></li>
		        <li>京东物体管正式启动       <a href="#" >aaa2</a></li>
		        <li>99元抢平板!平牌配件      <a href="#">aaa3</a></li>
		        <li>节能领跑京东先行		   <a href="#">aaa4</a> </li>
		        <li>高洁丝示例撩妹,领劵五折  <a href="#">5</a> </li>
		    </ul>
		<p>world</p>

如果想获取 ul 下的第一个li 下的第一个a文本内容

var ob1j= document.getElementById("hu");  //获取ul的节点对象 
var str =ob1j.firstElementChild.firstElementChild .innerHTML  
alert(str) //结果 aaa1

如果想获取 ul下的第3个 li 里的内容

var ob1j= document.getElementById("hu");  //获取ul的节点对象
var str =ob1j.firstElementChild.nextElementSibling.nextElementSibling.innerHTML
alert(str) //结果 99元抢平板!平牌配件 <a href="#">aaa3</a>

如果想获取ul 的上一个节点<p> 中的内容因为p元素后面自带了<br/>所以需要两次previousSibling

var ob1j= document.getElementById("hu");  //获取ul的节点对象
var str =ob1j.previousSibling.previousSibling.innerText
alert(str) //结果 hello

获取节点参数

要先取到元素节点！要先取到元素节点！要先取到元素节点！重要的事情说三遍

节点介绍

<div class="attr-class" id="attr-id">  这是文本</div>

元素节点 [div]

属性节bai点 [class、id]

文本节点 [这是文本]

nodeName (获取节点名称) 返回的都是大写

元素节点的nodeName是标签名称

属性节点nodeName是属性名称

文本节点的nodeName永远是/#text

<button id="hu" >点击<a>1</a></button>
	<script>
var ob1j= document.getElementById("hu");  //获取ul的节点对象
var str =ob1j.nodeName
alert(str) //BUTTON
	</script>

nodeValue (获取节点值)

一般用于获取文本节点内容那么为什么不使用 innerText

我们来测试下

<button id="hu" >点击<a>111</a></button>
	<script> var ob1j= document.getElementById("hu"); //获取ul的节点对象 var str =ob1j.childNodes[0].nodeValue alert(str) //结果 点击 var str1 =ob1j.innerText alert(str1) //结果 点击 111 </script>

可以发现区别了吧

innerText是获取当前节点下所有文本内容包括子节点

而nodeValue获得当前节点下指定子节点的文本内容一般都配合childNodes 使用

这里注意如果不是文本节点那么返回的是 null

如果你实在不知道怎么使用nodeValue 那么是可以使用nodeType 如果结果为3 那么你就可以使用nodeValue

nodeType (获取节点类型)

可返回节点类型,是一个只读属性

如果是元素节点文本节点注释节点等

nodeType 返回的节点类型

类型	值
元素element	1
属性attr	2
文本text	3
注释类型comments	8
文档类型document	9

<button id="hu" >点击<a>1</a></button>
	<script> var ob1j= document.getElementById("hu"); //获取ul的节点对象 var str =ob1j.nodeType alert(str) //1 </script>

获取和设置节点属性

DOC提供了获取以及改变属性值的方法

getAttribute(“属性名”);//用来获取属性的值

setAttribute(“属性名”,”属性值”) //用来设置属性的值

我们来实现一个图片切换效果

<input type="radio" name="book" onclick="book()"> 图片1
		<input type="radio" name="book" onclick="book()"> 图片2

		<div>
			<img src="" alt="" id="imag" onclick="geta()"><br>
			<span></span>
		</div>

		<script type="text/javascript"> // 给属性值 赋值 function book() { var ele = document.getElementsByName("book"); var im = document.getElementById("imag") if (ele[0].checked) { im.setAttribute("src", "./meinv.jpg") im.setAttribute("alt", "美女") im.nextElementSibling.nextElementSibling.innerHTML = "美女" } else if (ele[1].checked) { im.setAttribute("src", "./shuaige.jpg") im.setAttribute("alt", "帅哥") im.nextElementSibling.nextElementSibling.innerHTML = "帅哥" } } // 鼠标点击获取 属性值 function geta() { var alt = document.getElementById("imag").getAttribute("alt"); alert(alt) } </script>

我们还可以设置 class 和 id 以及 style …

我们来演示下

.class1 {
				font-size: 30px;
				color: red;
			}

			#id1 {
				font-size: 19px;
				color: skyblue;
			}
		</style>
	</head>
	<body>

		<p>class</p>
		<p>id</p>
		<p>style</p>

		<script type="text/javascript"> var obj = document.getElementsByTagName("p"); obj[0].setAttribute("class", "class1"); var obj = document.getElementsByTagName("p"); obj[1].setAttribute("id", "id1"); var obj = document.getElementsByTagName("p"); obj[2].setAttribute("style", "font-size: 31px;color: aqua;"); </script>

setAttribute 只要标签有的属性都能加

设置节点样式

在js中只有 style 和 className 两种添加样式的方法

css在页面使用非常频繁但是直接设置的话都是静态的不能进行动态互动实现不一样的特效而使用js 的可以改变此情况的发生

先设置基础特效(就是在打开网页的时候已经呈现的特效)
1.
在设置js的鼠标或者键盘特效 (在原有的基础特效上随着键盘或者鼠标的点击或者触摸等等引发特效更改从而实现炫酷的效果)

style 方式

style 是一个对象代表一个样式的声明

语法:标签引用.style.样式属性=”值”;

在css中很多的属性名称中带有- 的分割符但是在js中将 - 去掉了 - 后面的首字母大写

比如: margin-right = marginRight

只要css里能用的属性在js中也能用改变下语法就行

演示:

document.getElementById("ll").style.color="darkred";

document.getElementById("ll").style.fontSize="10px";

document.getElementById("ll").style.position="relative";

我们来做一个鼠标互动效果:

鼠标点击颜色切换

<h1 id="col" onclick="cli()">hello</h1>

		<script type="text/javascript"> //默认红色 document.getElementsByTagName("h1")[0].style.color = "red"; var co = true; function cli() { //鼠标点击 切换 蓝色 或 红色 document.getElementsByTagName("h1")[0].style.color = co ? "red" : "blue"; co = !co; } </script>

如果多个样式可以这样

var h=document.getElementsByTagName("h1")[0];
	h.style.color = "red";
	h.style.fontSize="50px";

还可以这样嵌入式

<p id="btnB">hello</p>
		<script type="text/javascript">
			var obj = document.getElementById("btnB");
			obj.style.cssText = "font-size:30px;color:red";
		</script>

className 方式

className 和style 不同 className可以调取在外部设置好的class 样式

语法

对象引用.className=”class样式名称”; 注意调用的时候去掉class的点

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css"> .da1 { background: red; } .da2 { background: blue; } .da3 { background: salmon; } </style>
	</head>
	<body>

		<ul>
			<li id="bg1"><a class="white">小说</a></li>
			<li id="bg2"><a class="white">非小说</a></li>
			<li id="bg3"><a class="white">少儿</a></li>
		</ul>

		<script type="text/javascript"> var da = ["da1", "da2", "da3"]; var c = document.getElementsByTagName("li"); for (var b in c) { c[b].className = da[b]; } </script>
	</body>
</html>

你还可以进行事件触发实现动态效果这里就不多说了自己尝试

获取节点的样式

语法

var xx=document.defaultView.getComputedStyle(节点对象,null).属性;

这个比较万能基本所有游览器都支持

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css"> .da1 { font-size: 50px; } </style>
	</head>
	<body>

		<h1 id="col" class="da1" style="background-color:salmon;">hello</h1>
		<script type="text/javascript"> //默认红色 var c=document.getElementsByTagName("h1")[0]; var fon=document.defaultView.getComputedStyle(c,null).fontSize; var back=document.defaultView.getComputedStyle(c,null).backgroundColor; alert("字体大小:"+fon+"___"+"背景颜色"+back) </script>
	</body>
</html>

创建节点,删除节点,添加节点,设置节点属性,替换节点,复制节点

以下是常用的方法

document.createElement(tagName)  //创建新节点
document.createTextNode("内容")   //创建文本节点
Node.appendChild(node)   //向节点添加最后一个子节点
Node.insertBefore(newNode,oldNode)  // 在指定子节点之前插入新的子节点
Node.removeChild(node)   //删除节点，在要删除节点的父节点上操作
Node.replaceChild(newChild,oldChild)  //替换节点
Node.cloneNode(true);  // 默认为false(当前节点及其属性 不包括后代和文本), true(克隆节点及其属性，以及后代和文本)
Node.setAttribute("属性","值") //设置节点属性

在js中没有 insertAfter (将节点添加到指定节点之后) 需要我们自己手写一个

//将节点添加到指定节点之后
			function insertAfter(newElement,targetElement){
			    var parent = targetElement.parentNode;
			    if(parent.lastChild == targetElement){
			        parent.appendChild(newElement);
			    }else{
			        parent.insertBefore(newElement,targetElement.nextSibling);
			    }
			}

创建节点 , 添加节点属性 ,将新节点添加到指定元素里

<div id="div_1">
		
	</div>
		<script type="text/javascript"> //创建一个节点 img var img=document.createElement("img"); //给img节点添加src属性 img.setAttribute("src","meinv.jpg"); //给img节点添加 title img.setAttribute("title","美女") //将img节点添加到 div 节点内 document.getElementById("div_1").appendChild(img) </script>
	</body>

删除节点

注意需要获取到父节点引用然后才能删除父节点内的子节点

<div id="div_1">
			<p id="p_1">hello</p>
		</div>

		<button onclick="di()">删除</button>
		<script type="text/javascript"> function di() { //父标签引用 var f = document.getElementById("div_1"); //子标签引用 var z = document.getElementById("p_1"); f.removeChild(z) } </script>

替换节点和创建文本节点

注意需要获取到父节点引用然后才能替换父节点内的子节点

<div id="div_1">
			<p id="second">hello</p>
		</div>

		<button onclick="di()">替换</button>
		<script type="text/javascript"> function di() { // 父节点 var f=document.getElementById("div_1"); //原来的节点 var oldnode=document.getElementById("second"); //创建替换的节点 var newnod=document.createElement("p"); //创建文本节点 并将文本节点添加到 newnod节点内 newnod.appendChild(document.createTextNode('world')) //将创建的newnod节点 把oldnode节点替换掉 f.replaceChild(newnod,oldnode) } </script>

复制节点

<div id="div_1">
			<p id="second">hello</p>
		</div>

		<button onclick="di()">添加到指定节点之后</button>
		<script type="text/javascript"> //将节点添加到指定节点之后 function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement, targetElement.nextSibling); } } function di() { //获取节点对象 var div_1 = document.getElementById("div_1"); //将 div_1节点复制 var div_2 = div_1.cloneNode(true); //将复制的节点 添加到 div_1之后 insertAfter(div_2, div_1) } </script>

捕获滚动条的位置

onscroll 事件用于捕捉垂直,和水平位置的滚动条

//获取窗体的滚动条垂直移动距离 
var chuiz= parseInt(document.documentElement.scrollTop || document.body.scrollTop);
获取窗体水平移动距离
var shuip=parseInt(document.documentElement.scrollLeft || document.body.scrollLeft);

一般配合窗体变化事件 onscroll 来使用

我们来完成一个案例广告图片

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>带关闭按钮的滚动广告</title>
		<style type="text/css"> #main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 300px; height: 300px; } #float { position: absolute; } #close { position: absolute; right: 0; z-index: 2; cursor: pointer; } </style>
	</head>

	窗体变化事件
	<body onscroll="gund()">
		<div id="main">
			<!-- 关闭图片按钮 -->
			<div id="close" onClick="adv_close()">
				<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="32" height="32" t="1600421857345" p-id="1193" version="1.1">
					<path fill="#d81e06" d="M 511.33 960.7 c -60.34 0 -118.88 -11.82 -174.01 -35.14 c -53.24 -22.52 -101.04 -54.75 -142.09 -95.79 s -73.28 -88.85 -95.79 -142.09 C 76.12 632.55 64.3 574.01 64.3 513.67 c 0 -60.34 11.82 -118.88 35.14 -174.01 c 22.52 -53.24 54.75 -101.04 95.79 -142.09 c 41.05 -41.05 88.85 -73.28 142.09 -95.79 C 392.45 78.46 451 66.63 511.33 66.63 c 60.34 0 118.89 11.82 174.01 35.14 c 53.24 22.52 101.04 54.75 142.09 95.79 c 41.05 41.05 73.28 88.85 95.79 142.09 c 23.32 55.13 35.14 113.68 35.14 174.01 c 0 60.34 -11.82 118.89 -35.14 174.01 c -22.52 53.24 -54.75 101.04 -95.79 142.09 s -88.85 73.28 -142.09 95.79 c -55.12 23.33 -113.67 35.15 -174.01 35.15 Z m 0 -844.07 c -218.93 0 -397.03 178.11 -397.03 397.03 c 0 218.93 178.11 397.04 397.03 397.04 s 397.04 -178.11 397.04 -397.04 c 0 -218.92 -178.11 -397.03 -397.04 -397.03 Z" p-id="1194" />
					<path fill="#d81e06" d="M 652.88 413.43 L 417.22 649.09 c -9.76 9.76 -25.59 9.76 -35.36 0 c -9.76 -9.76 -9.76 -25.59 0 -35.36 l 235.66 -235.66 c 9.76 -9.76 25.59 -9.76 35.36 0 c 9.76 9.77 9.76 25.6 0 35.36 Z" p-id="1195" />
					<path fill="#d81e06" d="M 652.6 645.93 c -9.76 9.76 -25.59 9.76 -35.36 0 L 381.59 410.27 c -9.76 -9.76 -9.76 -25.59 0 -35.36 c 9.76 -9.76 25.59 -9.76 35.36 0 L 652.6 610.57 c 9.77 9.76 9.77 25.59 0 35.36 Z" p-id="1196" /></svg>
			</div>
			<!-- 广告图片 -->
			<div id="float"><img src="shuaige.jpg" width="300" height="300"></div>
		</div>

		<div style="width: 100%; height: 1000px; border: 1px salmon solid;"></div>



		<script> function adv_close() { //点击关闭图片和关闭按钮 document.getElementById("close").style.display = "none"; document.getElementById("float").style.display = "none"; } var chuiz_1n; //关闭按钮的top位置 var shuip_1n; //关闭按钮的left位置 var chuiz_2n; //广告top位置 var shuip_2n; //广告top位置 function huoqu() { var chuiz1 = document.getElementById("close"); var shuip1 = document.getElementById("float"); //获取现在的位置 chuiz_1n = parseInt(document.defaultView.getComputedStyle(chuiz1, null).top); shuip_1n = parseInt(document.defaultView.getComputedStyle(chuiz1, null).left); chuiz_2n = parseInt(document.defaultView.getComputedStyle(shuip1, null).top); shuip_2n = parseInt(document.defaultView.getComputedStyle(shuip1, null).left); } //设置窗体加载就 获取 图片的 位置 window.onload = huoqu(); //获取滚动条的 进度 加上当前位置 function gund() { var chuiz = parseInt(document.documentElement.scrollTop || document.body.scrollTop); var shuip = parseInt(document.documentElement.scrollLeft || document.body.scrollLeft); var chuiz1 = document.getElementById("close"); var shuip1 = document.getElementById("float"); var chuiz_1 = chuiz + chuiz_1n; //原本位置 加上垂直滚动条的距离 var shuip_1 = shuip + shuip_1n; //原本位置 加上水平滚动条的距离 var t = chuiz_1 + "px"; var s = shuip_1 + "px"; var chuiz_2 = chuiz + chuiz_2n; //原本位置 加上垂直滚动条的距离 var shuip_2 = shuip + shuip_2n; //原本位置 加上水平滚动条的距离 var t_1 = chuiz_2 + "px"; var s_1 = shuip_2 + "px"; chuiz1.style.top = t; //重新设置position:absolute; 的位置 chuiz1.style.left = s; shuip1.style.top = t_1; shuip1.style.left = s_1; } //随着滚动条动 图片也跟着动了 </script>

	</body>
</html>

注意 : <svg 标签内容不用管这个是从阿里云图标库上面生成的

地址https://www.iconfont.cn/plus/user/detail?uid=41718

效果图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DS5sS5Lb-1631332288895)(http://img.huitoushian.cn/博客/文章/Web/js/img/11.gif)]

捕获鼠标位置

注意获取的X 和Y坐标是依据窗体最左上角为基准点

获取窗体内鼠标的X 和 Y

<div onclick="cli()" style="width: 200px;height: 200px; border: 1px salmon solid;">点击显示坐标</div>
		<script type="text/javascript"> function X_Y(){ var posX = 0, posY = 0; var event = event || window.event; if (event.pageX || event.pageY) { posX = event.pageX; posY = event.pageY; } else if (event.clientX || event.clientY) { posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } return [posX,posY]; } function cli(){ var array_XY=X_Y() var X=array_XY[0] var Y=array_XY[1] alert("横向坐标"+X+"_____"+"垂直坐标"+Y) } </script>

获取在指定元素内鼠标的坐标

<input type="text" id="text" />
<span style="position:absolute;">
    <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标移动</div>
</span>
<script> var t = document.getElementById("text"); var div1 = document.getElementById("div1"); div1.onmousemove = function (event) { var event = event || window.event; //标准化事件对象 if (event.offsetX || event.offsetY) { t.value = event.offsetX + "_" + event.offsetY; } else if (event.layerX || event.layerY) { t.value = (event.layerX-1) + "_" + (event.layerY-1); } } </script>

案例: 让内容跟随鼠标移动

<div id="div1">鼠标追随</div>

		<script> var pos = function(o, x, y, event) { //鼠标定位赋值函数 var posX = 0, posY = 0; //临时变量值 var e = event || window.event; //标准化事件对象 if (e.pageX || e.pageY) { //获取鼠标指针的当前坐标值 posX = e.pageX; posY = e.pageY; } else if (e.clientX || e.clientY) { posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } o.style.position = "absolute"; //定义当前对象为绝对定位 o.style.top = (posY + y) + "px"; //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标 o.style.left = (posX + x) + "px"; //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标 } //鼠标指针右下方偏移（10,20）的距离 var div1 = document.getElementById("div1"); document.onmousemove = function(event) { pos(div1, 10, 20, event); } </script>

表单快捷操作

代码	作用
document.forms	表示获取当前页面的所有表单
document.forms[0]	表示获取当前页面的第一个表单 …
document.forms[‘exportServlet’]	表示获取当前页面的name="exportServlet"的表单
document.forms[‘exportServlet’].username.value	获取表单为exportServlet，name为exportServlet的值
document.forms[0].submit	表示提交第一个form表单

补充：document.forms[0].submit提交的地址即对应的action地址如果想要改变，可以使用
document.forms[0].action = theUrl;

JavaScript中的DOM和BOM