JavaScript 基础学习（五）

最新推荐文章于 2023-04-22 13:30:26 发布
最新推荐文章于 2023-04-22 13:30:26 发布
阅读量254 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cherry_Zj/article/details/120195891
版权

文章目录

使用DOM操作CSS

  1. 通过JS修改元素的样式：
    语法：元素.style.样式名 = "样式值"

    注意：如果CSS的样式名中含有-，这种名称在JS中是不合法的比如background-color，需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写。
    如：background-color改成backgroundColor

    box1.style.backgroundColor = "yellow";

  2. 我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			
		</style>
		
		<script type="text/javascript">	
			window.onload = function(){	
				/*
				 * 点击按钮以后，修改box1的大小
				 */
				//获取box1
				var box1 = document.getElementById("box1");
				//为按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){

					box1.style.width = "300px";
					box1.style.height = "300px";
					box1.style.backgroundColor = "yellow";
					
				};
		</script>
	</head>
	<body>
		
		<button id="btn01">点我一下</button>
		<br /><br />
		
		<div id="box1"></div>
		
	</body>
</html>

点击按钮后，通过style属性设置的样式都是内联样式：

在这里插入图片描述

但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效。所以尽量不要为样式添加!important

  1. 读取样式：
    语法：元素.style.样式名
    通过style属性设置和读取的都是内联样式，无法读取样式表中的样式。

读取元素的样式

  1. 获取元素的当前显示的样式
    语法：元素.currentStyle.样式名
    它可以用来读取当前元素正在显示的样式。如果当前元素没有设置该样式，则获取它的默认值。
    currentStyle只有IE浏览器支持，其他的浏览器都不支持。

  2. 在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式。
    这个方法是window的方法，可以直接使用，需要两个参数：
    第一个：要获取样式的元素
    第二个：可以传递一个伪元素，一般都传null

    该方法会返回一个对象，对象中封装了当前元素对应的样式。可以通过对象.样式名来读取样式。

    如果获取的样式没有设置，则会获取到真实的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度

    但是该方法不支持IE8及以下的浏览器

//正常浏览器的方式
alert(getComputedStyle(box1,null).backgroundColor);

//IE8的方式
alert(box1.currentStyle.backgroundColor);

注意：通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性。

  1. 定义一个函数，用来获取指定元素的当前的样式（使其在任何浏览器中都能使用）
    参数：
    obj 要获取样式的元素
    name 要获取的样式名
function getStyle(obj , name){
				
	if(window.getComputedStyle){
	
		//正常浏览器的方式，具有getComputedStyle()方法
		return getComputedStyle(obj , null)[name];
		
	}else{
	
		//IE8的方式，没有getComputedStyle()方法
		return obj.currentStyle[name];
		
	}
	
}

其他样式相关属性

① clientWidth&clientHeight

  1. 这两个属性可以获取元素的可见宽度和高度。
  2. 这些属性都是不带px的，返回的都是数字，可以直接进行计算。
  3. 会获取元素宽度和高度，包括内容区和内边距
  4. 这些属性都是只读的，不能修改。

②offsetWidth& offsetHeight

  1. 获取元素的整个的宽度和高度，包括内容区、内边距、边框
  2. 这些属性都是不带px的，返回的都是数字

③offsetParent

  1. 可以用来获取当前元素的定位父元素
  2. 会获取到离当前元素最近的开启了定位的祖先元素， 如果所有的祖先元素都没有开启定位，则返回body。

④offsetLeft & offsetTop

  1. offsetLeft：当前元素相当于其定位元素的水平偏移量
  2. offsetTop：当前元素相当于其定位元素的垂直偏移量

⑤ scrollWidth &scrollHeight

可以获取元素整个滚动区域的宽度和高度

⑥scrollLeft& scrollTop

  1. scrollLeft：可以获取水平滚动条滚动的距离
  2. scrollTop：可以获取垂直滚动条滚动的距离

⑦ clientHeight& clientWidth

这两个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0。否则，它是元素内部的高度和宽度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

注意：
当满足scrollHeight - scrollTop == clientHeight，说明垂直滚动条滚到底了。
当满足scrollWidth - scrollLeft == clientWidth，说明垂直滚动条滚到底了。

练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#info{
				width: 300px;
				height: 400px;
				background-color: pink;
				overflow: auto;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 当垂直滚动条滚动到底时是表单项可用
				 * onscroll
				 * -该事件会在元素的滚动条滚动时触发
				 */
				//获取id为info的p元素
				var info = document.getElementById("info");
				//获取两个表单项
				var inputs = document.getElementsByTagName("input");
				
				//为info绑定一个滚动条滚动事件
				info.onscroll = function(){
					//检查垂直滚动条是否滚动到底
					if(info.scrollHeight - info.scrollTop == info.clientHeight){
						//滚动条滚动到底，是表单项可用
						/*
						 * disable属性可以设置一个元素是否禁用，
						 * 如果设置为true，则元素禁用
						 * 如果设置为false，元素可用
						 */
						inputs[0].disabled = false;
						inputs[1].disabled = false;
					}
				};
			};
			
		</script>
	</head>
	<body>
		<h3>欢迎亲爱的用户注册</h3>
		<p id="info">
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
			亲爱的用户，请仔细阅读以下协议，如果不仔细阅读，则无法注册。
		</p>
		<!--
			如果为表单项添加disabled="disabled"，则表单项将变成不可用的状态
		-->
		<input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定会遵守
		<input type="submit" value="注册" disabled="disabled" />
	</body>
</html>

事件对象

事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一些信息。比如：鼠标的坐标……

注意：在IE8中浏览器被触发时，浏览器不会传递事件对象，在IE8及以下浏览器中，是将事件对象作为window对象的属性保存的。

onmousemove：该事件将会在鼠标在元素中移动时被触发
clientX：可以获取鼠标指针的水平坐标
clientY：可以获取鼠标指针的垂直坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#div1{
				width: 300px;
				height: 50px;
				margin-bottom: 10px;
				border: 1px solid black;
			}
			#div2{
				width: 300px;
				height: 20px;
				border: 1px solid black;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 当鼠标在div1中移动时，在div2中来显示鼠标的坐标
				 */
				//获取两个div
				var div1 = document.getElementById("div1");
				var div2 = document.getElementById("div2");
				
				div1.onmousemove = function(event){
					//兼容IE8及以下浏览器
//					if(!event){
//						event = window.event;
//					}
					
					event = event ||window.event;
					
					var x = event.clientX;
					var y = event.clientY;
	
					//在div2中显示鼠标的坐标
					div2.innerHTML = "x="+x+"，y="+y;
				};
			};
			
		</script>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
</html>

练习

clientX和clientY用于获取鼠标在当前的可见窗口的坐标
div的偏移量，是相对于整个页面的
pageX和pageY可以获取鼠标相对于当前页面的坐标。但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用。

使div可以跟随鼠标移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: pink;
				
				//开启box1的绝对定位
				position: absolute;
			}	
		</style>
		
		<script type="text/javascript">
			window.onload = function(){	
				/*
				 * 使div可以跟随鼠标移动
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				//绑定鼠标移动事件
				document.onmousemove = function(event){
					
					//解决兼容问题
					event = event || window.event;
					
					//获取滚动条滚动的距离
					/*
					 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
					 * 火狐等浏览器认为浏览器的滚动条是html的，
					 */
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
				
					//获取到鼠标的坐标				
					var left = event.clientX;
					var　top = event.clientY;
					
					//设置div的偏移量
					box1.style.left = left + sl + "px";
					box1.style.top = top + st + "px";
					
				};

			};
		
		</script>
	</head>
	<body style="height: 1000px;width: 2000px;">
		<div id="box1"></div>
	</body>
</html>

事件冒泡

事件冒泡（Bubble）
所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。

在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡。

取消冒泡
可以将事件对象的cancelBubble设置为true，即可取消冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: pink;
			}
			#s1{
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//为s1绑定一个单击响应函数
				var s1 = document.getElementById("s1");
				s1.onclick = function(event){
					event = event || window.event;
					alert("我是span的单击响应函数");
					//取消冒泡
					//可以将事件对象的cancelBubble设置为true，即可取消冒泡
					event.cancelBubble = true;
				};
				//为box1绑定一个单击响应函数
				var box1 = document.getElementById("box1");
				box1.onclick = function(event){
					event = event || window.event;
					alert("我是div的单击响应函数");
					event.cancelBubble = true;
				};
				//为body绑定一个单击响应函数
				document.body.onclick = function(){
					alert("我是body的单击响应函数");
				};
			};
		</script>
	</head>
	<body>
		<div id="box1">
			我是box1
			<span id="s1">我是span</span>
		</div>
	</body>
</html>

事件的委派

  1. 事件的委派指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
  2. 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
  3. target：event中的target表示的触发事件的对象

练习：点击按钮以后添加超链接

存在的问题：为每一个超链接都绑定一个单击响应函数。这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦， 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定。
解决方式：我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的。我们可以尝试将其绑定给元素的共同的祖先元素。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				var u1 = document.getElementById("u1");	
			
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//创建一个li
					var li = document.createElement("li");
					li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
					
					//将li添加到ul中
					u1.appendChild(li);
				};	
				
				//获取所有的a
				var allA = document.getElementsByTagName("a");
				/*
				 * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
				 * 我们可以尝试将其绑定给元素的共同的祖先元素
				 */
				
				//为ul绑定一个单击响应函数
				u1.onclick = function(event){
					event = event || window.event;
					
					/*
					 * target
					 * 	- event中的target表示的触发事件的对象
					 */
					//alert(event.target);
					
					//如果触发事件的对象是我们期望的元素，则执行否则不执行
					if(event.target.className == "link"){
						alert("我是ul的单击响应函数");
					}	
				};
			};	
		</script>
	</head>
	<body>
		<button id="btn01">添加超链接</button>
		
		<ul id="u1" style="background-color: pink;">
			<li>
				<p>我是p元素</p>
			</li>
			<li><a href="javascript:;" class="link">超链接一</a></li>
			<li><a href="javascript:;" class="link">超链接二</a></li>
			<li><a href="javascript:;" class="link">超链接三</a></li>
		</ul>
		
	</body>
</html>

事件的绑定

  1. 使用 对象.事件 = 函数 的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的。

示例：弹出框只会弹出2

<script type="text/javascript">
			
			window.onload = function(){		
				/*
				 * 点击按钮以后弹出一个内容
				 */
				//获取按钮对象
				var btn01 = document.getElementById("btn01");
				//为btn01绑定一个单击响应函数
				btn01.onclick = function(){
					alert(1);
				};
				
				//为btn01绑定第二个响应函数
				btn01.onclick = function(){
					alert(2);
				};
				
			};
			
		
		</script>

  1. addEventListener()通过这个方法也可以为元素绑定响应函数
    参数：
    ①事件的字符串，不要on
    ②回调函数，当事件触发时该函数会被调用
    ③是否在捕获阶段触发事件，需要一个布尔值，一般都传false

    使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。这个方法不支持IE8及以下的浏览器。

    addEventListener()中的this，是绑定事件的对象

示例：弹出框会依次弹出1 2 3

<script type="text/javascript">
			
			window.onload = function(){		
				/*
				 * 点击按钮以后弹出一个内容
				 */
				//获取按钮对象
				var btn01 = document.getElementById("btn01");
				btn01.addEventListener("click",function(){
					alert(1);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(2);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(3);
				},false);
				
			};
		</script>

  1. attachEvent()：在IE8中可以使用attachEvent()来绑定事件
    参数：
    ①事件的字符串，要on
    ②回调函数

    注意：
    这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反。

    attachEvent()中的this，是window

示例：弹出框会依次弹出 3 2 1

<script type="text/javascript">
			
			window.onload = function(){		
				/*
				 * 点击按钮以后弹出一个内容
				 */
				//获取按钮对象
				var btn01 = document.getElementById("btn01");
				btn01.attachEvent("onclick",function(){
					alert(1);
				});
				
				btn01.attachEvent("onclick",function(){
					alert(2);
				});
				
				btn01.attachEvent("onclick",function(){
					alert(3);
				});
			};
		</script>

注意：
addEventListener()中的this，是绑定事件的对象
attachEvent()中的this，是window

  1. 定义一个函数，用来为指定元素绑定响应函数
    参数：
    obj要绑定事件的对象
    eventStr 事件的字符串(不要on)
    callback回调函数
function bind(obj , eventStr , callback){
	if(obj.addEventListener){
	
		//大部分浏览器兼容的方式
		obj.addEventListener(eventStr , callback , false);
		
	}else{ 
	
		/*
		 * this是谁 由调用方式决定
		 * callback.call(obj)
		 */
		 
		 //IE8及以下
		obj.attachEvent("on"+eventStr , function(){
		
		//在匿名函数中调用回调函数
		callback.call(obj);
		
	 	});	
	}
}

事件的传播

  1. 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。

  2. 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。

  3. W3C综合了两个公司的方案，将事件传播分成了三个阶段
    ①捕获阶段
    在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
    ②目标阶段
    事件捕获到目标元素，捕获结束开始在目标元素上触发事件
    ③冒泡阶段
    事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

    如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。 一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false。

    注意： IE8及以下的浏览器中没有捕获阶段


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 300px;
				height: 300px;
				background-color: yellowgreen;
			}
			
			#box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			
			#box3{
				width: 150px;
				height: 150px;
				background-color: skyblue;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 分别为三个div绑定单击响应函数
				 */
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var box3 = document.getElementById("box3");

				bind(box1,"click",function(){
					alert("我是box1的响应函数")
				});
				
				bind(box2,"click",function(){
					alert("我是box2的响应函数")
				});
				
				bind(box3,"click",function(){
					alert("我是box3的响应函数")
				});
				
			};
			
			function bind(obj , eventStr , callback){
				if(obj.addEventListener){
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr , callback , true);
				}else{
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on"+eventStr , function(){
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}
			
		</script>
	</head>
	
	<body>
		
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
		
	</body>
</html>

拖拽（练习）

拖拽的流程
①当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
②当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
③当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

鼠标在点击后，鼠标位置不变


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				
				left: 200px;
				top: 200px;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){			
				//获取box1
				var box1 = document.getElementById("box1");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				box1.onmousedown = function(event){
					event = event || window.event;
					//使鼠标在点击后，鼠标位置不变
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						box1.style.left = left+"px";
						box1.style.top = top+"px";
						
					};
					
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
					};
				};			
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
		
		<div id="box2"></div>
	</body>
</html>

修改一：

  1. 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的默认行为， 如果不希望发生这个行为，则可以通过return false来取消默认行为， 但是这招对IE8不起作用。
  2. 当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上。
    setCapture()：只有IE支持，但是在火狐中调用时不会报错，而如果使用chrome调用，会报错。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				
				left: 200px;
				top: 200px;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取box1
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				box1.onmousedown = function(event){
					
					//设置box1捕获所有鼠标按下的事件
			
					/*if(box1.setCapture){
						box1.setCapture();
					}*/
					box1.setCapture && box1.setCapture();
					
					
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						box1.style.left = left+"px";
						box1.style.top = top+"px";
						
					};
					
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
						//当鼠标松开时，取消对事件的捕获
						box1.releaseCapture && box1.releaseCapture();
					};
					
					/*
					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
					 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
					 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
					 * 
					 * 但是这招对IE8不起作用
					 */
					return false;
					
				};				
			};
		</script>
	</head>
	<body>
		
		我是一段文字
		
		<div id="box1"></div>
		
		<div id="box2"></div>
	</body>
</html>

修改二：

提取一个专门用来设置拖拽的函数
参数：开启拖拽的元素


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				
				left: 200px;
				top: 200px;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				/*
				 * 拖拽box1元素
				 *  - 拖拽的流程
				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				
				//开启box1的拖拽
				drag(box1);
				//开启box2的
				drag(box2);
				
			};
			
			/*
			 * 提取一个专门用来设置拖拽的函数
			 * 参数：开启拖拽的元素
			 */
			function drag(obj){
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				obj.onmousedown = function(event){
					
					//设置box1捕获所有鼠标按下的事件
					/*
					 * setCapture()
					 * 	- 只有IE支持，但是在火狐中调用时不会报错，
					 * 		而如果使用chrome调用，会报错
					 */
					/*if(box1.setCapture){
						box1.setCapture();
					}*/
					obj.setCapture && obj.setCapture();
					
					
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - obj.offsetLeft;
					var ot = event.clientY - obj.offsetTop;
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						obj.style.left = left+"px";
						obj.style.top = top+"px";
						
					};
					
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
						//当鼠标松开时，取消对事件的捕获
						obj.releaseCapture && obj.releaseCapture();
					};
					
					/*
					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
					 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
					 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
					 * 
					 * 但是这招对IE8不起作用
					 */
					return false;
					
				};
			}		
		</script>
	</head>
	<body>		
		我是一段文字		
		<div id="box1"></div>		
		<div id="box2"></div>
	</body>
</html>
Cherry_Zj
关注
专栏目录
获取祖先元素和后代元素
qq_29469441的博客
05-20 2677
一、获取祖先元素 1、获取直接父级    语法： $(selector).parent();//获取元素的直接父级元素 2、获取元素的所有祖先元素    语法： $(selector).parents([selector]);//后面加上选择器可以过滤祖先元素 3、获取某个元素到某个元素间的所有父级元素    语法：
jQuery找祖先和子孙节点方法
卫可冬的博客
12-30 5142
$("span").closest("ul") //找span的祖先ul $("ul").find("span") //找ul的子孙span $(selector).find(filter) find() 方法返回被选元素的后代元素。 后代是子、孙、曾孙，依此类推。 **DOM 树：**该方法沿着 DOM 元素的后代向下遍历，直至最后一个后代的所有路径（）。 **注意：**filter 参数在...
js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代
weixin_34127717的博客
06-26 431
js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代 一、总结 一句话总结：过滤或者查找的方法里面可以带参数进行进一步的选择。   1、parent()和parents()方法的区别是什么（父亲和祖先）？ parent()找父亲，parents()找祖先 父亲只有一个，所以是单数，祖先就有很多个了，所以是复数 parent() 获得当前匹配元素集合中每个元素的父...
JavaScript：封装返回元素第n层祖先元素节点的函数
lvh98的博客
07-06 369
封装返回元素第n层祖先元素节点的函数
php 找祖先,js中查找最近的共有祖先元素的实现代码_javascript技巧
weixin_32998893的博客
03-12 150
先来看概念，首先DOM是一棵树，其根节点是Document，大致可以用下图来表示：所谓“最近的共有祖先元素”，是指给定一系列元素，找出在树中深度最大的，但同时为所有这些元素的祖先元素的元素。比如上图中，I和G的结果为C，G和H的结果为A，D和E的结果为html，C和B的结果为html等。测试驱动对于偏逻辑的题，并没有十足的把握函数是正确的，因此还是先构造测试的用命，力求让函数通过测试。本次就以上图...
JavaScript——DOM
newY6的博客
04-22 159
自定义属性获取是通过getAttribute(‘属性’) 获取。但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
JavaScript基础学习
07-10
JavaScript基础学习
JavaScript js基础学习 示例代码
07-03
JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础...
前端JavaScript基础学习笔记案例
最新发布
08-02
个人在学习前端JavaScript时的学习笔记，内含JavaScript的中基础知识点，以及案例。里面有兼容市面上浏览器的方法 1.知识点包括：基础语法，字符串操作，object对象，DOM对象，BOM对象，offset，client，scroll对象...
HTML CSS and Javascript 基础学习代码.zip
12-30
HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 ...
JavaScript基础学习-1
12-20
1. JavaScript基础：学习ECMAScript的基本规则，这是JavaScript的核心语言部分。 2. ES6实战：了解并应用ES6引入的新特性，如箭头函数、类、模板字符串等。 3. 面向对象编程：理解面向对象的概念并学会在JavaScript...
JS Dom元素属性、样式的获取 子父元素的操作
JS中字符串的操作
12-24 2771
一、属性、样式的获取和设置 1. 属性 1. 获取属性的方式： 1）ps.属性名 2）ps.getAttribute(属性名) 2. 设置属性的方式： 1）ps.属性名＝属性值 例子：ps.className=“one two”; // 赋多个值，用空格隔开 2）ps.setAttribute(属性名，属性值) 例子：ps.setAttribute(“class”,“one two”); ...
每天学习十分钟25之jQuery
小天一直在路上
03-14 404
jquery遍历之parent()和parents()的区别.parent(selector) 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。 .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。参考文献： jQuery 遍历 - parent() 方法 jQuery 遍历 - parents() 方法知识点延伸：parent
JS 判断元素父子关系
MichaelAn的博客
12-20 3917
在工作中遇到一个问题：如果界面元素很多，如何判断当前点击的元素，和某个元素是否有父子关系？ 下面这个截图中，可以看到有20个DIV在嵌套。如果界面发生一个点击事件，在document 监听到这个点击事件，怎样判断点击位于哪个父元素下面（PS 这个HTML代码写的语义不明确，层级很复杂） 查找资料后，有下面几个解决方案 原生 JS 原生JS中可以使用 dom.contains(dom) 来判断是否...
JS获取节点的兄弟，父级，子级元素
热门推荐
hellogull
05-14 59万+
先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素。可以用： var a = docuemnt.getElementById("test").getElementsByTagName("div
遍历元素的父辈和祖先
slb18220570825的博客
04-02 324
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;遍历元素的父辈和祖先&lt;/title&gt;&lt;/head&gt;&lt;script type="text/javascript" src="../js/jqu
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
骆小胖~
09-12 928
&lt;div&gt;&lt;/div&gt; &lt;br&gt; &lt;div&gt;&lt;/div&gt; &lt;br&gt; &lt;div&gt;&lt;/div&gt; &lt;br&gt; &lt;/div&gt; function dom(){ var a = document
JS 查找数组的父节点及祖先节点
Saladbobo的专栏
06-14 4983
JSON数据结构： [ { id: 1, name: 'Node1', children: [ { id: 3, name: 'Node1_1', children: [ { id: 8, name: 'Node1_1_1' }, { id: 9, name: 'Node1_1_2' }, { id: 10, name: 'N...
JavaScript通过style只能获取内联 状态的样式
超胆孤侠
08-25 1225
首先css样式表有三种样式， 一、内联样式 在HTML标签用style属性设置，如 ： 这是内联样式  二、嵌入样式 通过标签内通过标签设置。如：       /*这是嵌入样式*/    .stuff{color:#f90} 三、外部样式 通过标签设置。如： 而在javascript中，获取这三种样式表的方法是有限制
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值