您的位置: 首页  >  文章  >  JS - 事件 and 页面操作

JS - 事件 and 页面操作

分类: 文章 • 2024-10-21 12:57:53

目录

一、事件初级

使用 HTML DOM 来分配事件

实例

二、JS选择器

1、getElement系列

2、querySelect系列

3、id名

三、JS操作页面内容

四、JS操作页面样式

style属性样式 （读写）

计算后样式 （只读）

结合 css 操作样式

 js切换样式实例

一、事件初级

  • onload：页面加载完毕事件，只附属于window对象

  • onunload：在用户离开页面时被触发

  • onchange：常结合对输入字段的验证来使用。例：当用户改变输入字段的内容时，会调用 函数

  • onclick：鼠标点击时间

  • onmousedown：首先当点击鼠标按钮时，会触发 onmousedown 事件。（按住不放）

  • onmouseup ：当释放鼠标按钮时，会触发 onmouseup 事件。（按住后释放）

  • onmouseover：鼠标悬浮事件

  • onmouseout：鼠标移开事件

  • onfocus：表单元素获取焦点

  • onblur：表单元素失去焦点

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>事件初级</title>
	<script type="text/javascript">
		// 事件需要绑定具体执行函数(方法)
		// 通过事件满足的条件触发绑定的函数(方法)
		// 函数(方法)完成具体的功能

		// onload事件附属于window
		// onload触发条件:页面加载完毕(DOM文档树及页面资源)
		// 行间式方式可以书写在body标签
		window.onload = function () {
			div.style.color = 'red';
		}
	</script>
</head>
<body>
	事件初级
        <!-- 点击换橘色 悬浮换蓝色 -->
	<div id="div" onclick="div.style.color = 'orange';" onmouseover="overAction()">123</div>
	<!-- 1.直接将js代码块书写在行间事件中, 不提倡 -->
	<!-- 2.行间事件调用函数, 不提倡(比较直接) -->
</body>

<script type="text/javascript">
	var overAction = function () {
		div.style.color = 'blue';
	}

	// 3.为目的对象绑定事件方法,内部可以使用this关键词
	// this就是绑定的对象本身
	div.onmouseout = function () {
		this.style.color = 'pink';
	}

</script>

</html>
//例一
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

//例二
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>

使用 HTML DOM 来分配事件

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：

实例

向 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
<!-- document.getElementById("id名字").onclick=function(){函数名()}; -->

</script>

在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。
当按钮被点击时，会执行该displayDate函数。

二、JS选择器

1、getElement系列

通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

  • 通过 id 找到 HTML 元素 document.getElementById()
  • 通过标签名找到 HTML 元素 document.getElementByClassNmae() | 页面元素对象 .getElementsByClassNmae()
  • 通过类名找到 HTML 元素 document .getElementsByTagName()  | 页面元素对象 .getElementsByTagName()
// 1.通过id名获取唯一满足条件的页面元素
document.getElementById('id名');
var x=document.getElementById("intro");
// 该方法只能由document调用
​
// 2、通过class名获取所有满足条件的页面元素
document.getElementsByClassName('class名');
var y=x.getElementsByClassName("pqqqq");
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])


// 3.通过tag名获取所有满足条件的页面元素
document.getElementsByTagName('tag名');
var y=x.getElementsByTagName("p");
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])

​//提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

2、querySelect系列

// 1.获取第一个匹配到的页面元素
document.querySelector('css语法选择器');
// 该方法可以由document及任意页面对象调用
​
// 2.获取所有匹配到的页面元素
document.querySelectorAll('css语法选择器');
// 该方法可以由document及任意页面对象调用
// 返回值为NodeList (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空NodeList对象 ([])

3、id名

  • 可以通过id名直接获取对应的页面元素对象，但是不建议使用

三、JS操作页面内容

  • innerText：普通标签内容（自身文本与所有子标签文本）

  • innerHTML：包含标签在内的内容（自身文本及子标签的所有）
    JS - 事件 and 页面操作

  • value：表单标签的内容

  • outerHTML：包含自身标签在内的内容（自身标签及往下的所有）

  • document.getElementById(id).attribute=new value：改变 HTML 元素的属性

    JS - 事件 and 页面操作

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>JS操作页面内容</title>
</head>
<body>
	<div class="sup">
		sup的文本
		<div class="sub">sub的文本</div>
	</div>
	<form action="">
		<input class="input" type="text" />
		<button class="btn" type="button">获取</button>
	</form>
</body>

<script type="text/javascript">
	// 通过js获取页面需要操作的元素对象
	var sup = document.querySelector('.sup');
	var sub = sup.querySelector('.sub');

	// 获取

 	// 自身及所有子级的文本
	console.log(">>>>>" + sup.innerText);  // sup的文本 \n sub的文本
	console.log(">>>>>" + sub.innerText);  // sub的文本

	// 自身文本及所有子级的所有(包含标签的所有信息:标签名,id名,class名,样式,事件,文本...)
	console.log(">>>>>" + sup.innerHTML);  // <div class="sub">sub的文本</div>
	console.log(">>>>>" + sub.innerHTML);  // sub的文本

	// 赋值
	sub.innerText = "<b>修改的sub文本</b>";
	sub.innerHTML = "<b style='color: red'>修改的sub文本</b>";
	// Text不解析标签语法,原样作为文本赋值给目标对象
	// HTML可以解析标签语法

	console.log("-------------------------------------------------");
	console.log(sub.innerHTML);  // <b style='color: red'>修改的sub文本</b>
	console.log("-------------------------------------------------");
	console.log(sub.outerHTML);  // <div class="sub"><b style='color: red'>修改的sub文本</b></div>
	console.log("-------------------------------------------------");


	var btn = document.querySelector('.btn');
	var ipt = document.querySelector('.input');
	btn.onclick = function () {
		// 获取表单元素的文本值

		// 获取文本
		var v = ipt.value;
		console.log(v);

		// 清空文本
		ipt.value = "";  // 赋值空文本
	}

</script>

</html>

JS - 事件 and 页面操作

四、JS操作页面样式

  • style属性样式 （读写）

注意：只能获取行间式，进行读写操作

div.style.backgroundColor = 'red';
document.getElementById("p2").style.color="blue";
// 1.操作的为行间式
// 2.可读可写
// 3.具体属性名采用小驼峰命名法

  • 计算后样式 （只读）

注意：页面一般采用css样式布局,css布局的样式叫 “计算后样式”

// eg: 背景颜色
// 推荐
getComputedStyle(页面元素对象, 伪类).getPropertyValue('background-color');
getComputedStyle(div, null).getPropertyValue('background-color')
// 不推荐
getComputedStyle(页面元素对象, 伪类).backgroundColor;
getComputedStyle(div, null).backgroundColor;
​
// IE9以下
页面元素对象.currentStyle.getAttribute('background-color');
页面元素对象.currentStyle.backgroundColor;
​
// 1.页面元素对象由JS选择器获取
// 2.伪类没有的情况下用null填充
// 3.计算后样式为只读
// 4.该方式依旧可以获取行间式样式 (获取逻辑最后的样式)

  • 结合 css 操作样式

页面元素对象.className = "";  // 清除类名
页面元素对象.className = "类名";  // 设置类名
页面元素对象.className += " 类名";  // 添加类名

 js切换样式实例

DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>js操作页面样式</title>
	<style type="text/css">
		div#div.div {
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<!--  style="background-color: orange;" 行间式优先级高于任何css选择器 -->
	<!-- 低于!important -->
	<!-- <div id="div" class="div" style="background-color: orange;"></div> -->
	<div id="div" class="div"></div>
	<button class="btn">切换</button>
</body>
<script type="text/javascript">
	var div = document.querySelector('.div');
	// js操作的就是行间式
	// div.style.backgroundColor = 'orange';

	// 需求:切换背景颜色 红 <=> 黄
	// 1.获取原来的颜色
	// 2.判断颜色
	// 3.修改颜色

	// 因为页面一般采用css样式布局,css布局的样式叫 “计算后样式”
	// 而ele.style.样式只能获取行间式样式
	// var bgColor = div.style.backgroundColor;  
	// console.log(bgColor);

	// 获取计算后样式
	// getComputedStyle参数: 页面对象 伪类
	// getPropertyValue参数: css语法的样式字符串
	// var bgColor = getComputedStyle(div, null).getPropertyValue('background-color');
	var bgColor = getComputedStyle(div, null).backgroundColor;
	console.log(bgColor);  // rgb(255, 0, 0)


	var btn = document.querySelector('.btn');
	// 点击一下
	btn.onclick = function () {
		// 获取当前颜色一次
		bgColor = getComputedStyle(div, null).backgroundColor;
		console.log(bgColor); 
		// 判断并修改
		if (bgColor == 'rgb(255, 0, 0)') {
			div.style.backgroundColor = 'orange';
		} else {
			div.style.backgroundColor = 'red';
		}
	}

</script>
</html>

JS - 事件 and 页面操作JS - 事件 and 页面操作

相关推荐