JavaScript中的DOM和BOM

x33g5p2x  于9个月前 转载在 JavaScript  
字(25.0k)|赞(0)|评价(0)|浏览(86)

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个参数分别是

  1. 资源地址
  2. 打开方式 _blank(在新窗口) 或者_self(当前窗口)
  3. 打开的窗口大小和位置(用逗号隔开) “height=?,width=?,top=?,left=?”
  4. 资源找不到是否用其他代替 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 返回的 节点类型

类型
元素element1
属性attr2
文本text3
注释类型comments8
文档类型document9
<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;

相关文章