web前端之CSS操作

浪漫的诗人2023-08-09 18:24

文章目录

  • 一、CSS操作
      • [1.1 html元素的style属性](#1.1 html元素的style属性)
      • [1.2 元素节点的style属性](#1.2 元素节点的style属性)
      • [1.3 cssText属性](#1.3 cssText属性)
  • 二、事件
      • [2.1 事件处理程序](#2.1 事件处理程序)
        • [2.1.1 html事件](#2.1.1 html事件)
        • [2.1.2 DOM0事件（适合单个事件）](#2.1.2 DOM0事件（适合单个事件）)
        • [2.1.3 DOM2事件（适合多个事件）](#2.1.3 DOM2事件（适合多个事件）)
      • [2.2 事件之鼠标事件](#2.2 事件之鼠标事件)
      • [2.3 事件之Event事件对象](#2.3 事件之Event事件对象)
        • [2.3.1 Event.target](#2.3.1 Event.target)
        • [2.3.2 Event.type](#2.3.2 Event.type)
        • [2.3.3 Event.preventDefault](#2.3.3 Event.preventDefault)
        • [2.3.4 Event.stopPropagation()](#2.3.4 Event.stopPropagation())
      • [2.4 事件之键盘事件](#2.4 事件之键盘事件)
      • [2.5 事件之表单事件](#2.5 事件之表单事件)
          • [2.5.1 input事件](#2.5.1 input事件)
          • [2.5.2 select事件](#2.5.2 select事件)
          • [2.5.3 change事件](#2.5.3 change事件)
          • [2.5.3 reset事件、submit事件](#2.5.3 reset事件、submit事件)
  • 三、定时器
      • [3.1 setTimeout](#3.1 setTimeout)
      • [3.1 setInterval()](#3.1 setInterval())
  • 四、防抖

一、CSS操作

1.1 html元素的style属性

使用网页元素节点的setAttribute方法直接操作网页元素的style属性。

html 复制代码 
div.setAttribute(
	'style',
	'background-color:red;'+'border:1px solid black;'
	);

1.2 元素节点的style属性

html 复制代码 
var divStyle = document.querySelector('div').style;
divstyle.backgroundColor = 'red';
divstyle.border = '1px solid black';
divstyle.width ='100px';
divstyle.height = '100px';
divstyle.fontsize = '10em'

1.3 cssText属性

html 复制代码 
var divStyle = document.querySelector('div').style;
divStyle.cssText = 'background-color: 'red;'
+ border: 1px solid black;
+ 'height: 100px;
+ 'width: 100px;';

二、事件

2.1 事件处理程序

2.1.1 html事件

缺点：html和js没有分开

html 复制代码 
<!DOCTYPE htm1>
<htm1>

	<head lang="en">
		<meta charset="UTF-8">
		<title>Js事件详解--事件处理</title>
	</head>

	<body>
		<div id="div">
			<button id="btn1" onclick="demo()">按钮</button>
		</div>
		<script>
			function demo() {alert("he11o htm]事件处理");}
		</script>
	</body>
	</htmI>

onclick为鼠标事件

2.1.2 DOM0事件（适合单个事件）

优点：html和js是分离的

html 复制代码 
<!DOCTYPE htm1>
<htm1>

	<head lang="en">
		<meta charset="UTF-8">
		<title>Js事件详解--事件处理</title>
	</head>

	<body>
		<button id="btn">按钮</button>
		<script>
			var btn=document.getElementById("btn")
			btn.onclick=function(){
				console.log("点击了");
			}

		</script>
	</body>
	</htmI>

2.1.3 DOM2事件（适合多个事件）

优点：事件不会被覆盖

html 复制代码 
<!DOCTYPE htm1>
<htm1>

	<head lang="en">
		<meta charset="UTF-8">
		<title>Js事件详解--事件处理</title>
	</head>

	<body>
		<button id="btn">按钮</button>
		<script>
			var btn=document.getElementById("btn")
			btn.addEventListener("click",function(){console.log("点击了1");})
			btn.addEventListener("click",function(){console.log("点击了2");})

		</script>
	</body>
	</htmI>

2.2 事件之鼠标事件

html 复制代码 
<!DOCTYPE htm1>
<htm1>

	<head lang="en">
		<meta charset="UTF-8">
		<title>Js事件详解--事件处理</title>
	</head>

	<body>
		<button id="btn1">鼠标事件之单击</button>
		<button id="btn2">鼠标事件之双击</button>
		<script>
			var btn=document.getElementById("btn1")
			var btn=document.getElementById("btn2")
			btn1.onclick=function(){
				console.log("单击"); 
			}
			btn2.ondblclick=function(){
				console.log("双击");
			}

		</script>
	</body>
	</htmI>

其他代码均和以上的类型相同。

2.3 事件之Event事件对象

事件发生以后，会产生一个事件对象，作为参数传给监听函数
Event对象属性

  • Event.Target
  • Event.type
    Event对象方法
  • Event.preventDefault
  • Event.stopPropagation
html 复制代码 
<!DOCTYPE htm1>
<htm1>

	<head lang="en">
		<meta charset="UTF-8">
		<title>Js事件详解--事件处理</title>
	</head>

	<body>
		<button id="btn1">按钮</button>

		<script>
			var btn=document.getElementById("btn1")
			//Event事件对象  其实就是参数
			btn1.onclick=function(event){
				console.log(event); 
			}


		</script>
	</body>
	</htmI>

2.3.1 Event.target

返回事件当前所在的节点，点击谁就打印出来谁。

html 复制代码 
//html代码为
// <p id="para"> Hello </p>
<!DOCTYPE htm1>
<htm1>

	<head lang="en">
		<meta charset="UTF-8">
		<title>Js事件详解--事件处理</title>
	</head>

	<body>
		<button id="btn1">按钮</button>

		<script>
			var btn=document.getElementById("btn1")
			//Event事件对象  其实就是参数
			btn1.onclick=function(event){
				console.log(event.target); 
				event.target.innerHTML="点击之后";/*点击按钮会变成这个字符串*/
			}


		</script>
	</body>
	</htmI>

2.3.2 Event.type

返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。

2.3.3 Event.preventDefault

此方法取消浏览器对当前事件的默认行为，比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了。

html 复制代码 
btn.οnclick=function(e){
	e.preventDefault();
	console.log("点击A标签");
	}

2.3.4 Event.stopPropagation()

stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数

html 复制代码 
btn.οnclick=function(e){
	e.stopPropagation();//阻止事件冒泡
	console.log("btn");
	}

2.4 事件之键盘事件

键盘事件由用户打击键盘触发，主要有keydown、keypress、keyup三个事件。

  • keydown: 按下键盘时触发
  • keypress: 按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
  • keyup:松开键盘时触发该事件
html 复制代码 
username.οnkeypress=function(e){
	console.log("keypress事件");
	}

event对象

keyCode:唯一标识

var username=document.getElementById("username");

username.οnkeydοwn=function(e){

if(e.keyCode==13){

console.log("回车");

}

}

2.5 事件之表单事件

表单事件是在使用表单元素及输入框元素可以监听的一系列事件

2.5.1 input事件

input事件当 <input>、<selet>、<textarea> 的值发生变化时触发,即数据发生改变触发此事件。

对于复选框 ( <input type=checkbox> ) 或单选框 ( <input type=radio>)，用户改变选项时，也会触发这个事件

input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。

html 复制代码 
var username=document.getElementById("username");
username.οninput=function(e){
	console.log(e.target.value);
	}
2.5.2 select事件

select事件在<input>、<textarea>里面选中文本时触发

html 复制代码 
//html代码如下
//<input id="test" type="text" value="select me"/>
var elem=document.getElementById('test');
elem.addEventListener('select',function(e){
	console.log("e.type");
	},false);
2.5.3 change事件

Change事件当 <input>、<selet>、<textarea> 的值发生变化时触发，它与input最大的不同就是不会连续触发，只有当全部修改完成时，才会触发。

html 复制代码 
var email=document.getElementById("email");
email.οnchange=function(e){
	console.log(e.target.value);
	}
2.5.3 reset事件、submit事件

这两个事件发生在表单对象 <form>上，而不是发生在表单的成员上。

reset事件当表单重置(所有表单成员变回默认值)时触发

submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是<form>元素，而不是<buton>元素，因为提交的是表单，而不是按钮

html 复制代码 
<form id="myForm" onsubmit="submitHandle">
	<button onclick="resetHandle">重置数据</button>
	<button>提交</button>
</form>
html 复制代码 
var myForm = document.getElementById("myForm")
function resetHandle(){
	myForm.reset();
	}
function submitHandle(){console.1og("提交");}

三、定时器

JavaScript 提供定时执行代码的功能成。。它们向任务队列添加定时任务

叫做定时器 (timer)，主要由 setTimeout0 和 setlnterval0 这两个函数来完

3.1 setTimeout

setTimeout 函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

html 复制代码 
var timerId=setTimeout(func|code,delay);

setTimeout 函数接受两个参数，第一个参数 fun|code 是将要推迟执行的函数名或者一段代码，第二个参数 delay 是推迟执行的毫秒数.

html 复制代码 
setTimeout(function(){
	console.log("定时器")
	},1000)

3.1 setInterval()

setinterval 函数的用法与 setTimeut 完全一致，区别仅仅在于 setintervl 指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行

html 复制代码 
vat timer=setInterval(function(){
	console.log(2);
	},1000)

通过setInterval方法实现网页动画

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#someDiv{
			width:100px;
			height:100px;
			background:red;
		}
	</style>
</head>
<body>
	<div id="someDiv"></div>
	<script>
		var div=document.getElementById('someDiv');
		var opacity=1;
		//opacity 透明度：范围0-1
		var fader=setInterval(function(){
			opacity-=0.5;
			if(opacity>0){ 
				
				div.style.opacity=opacity; 
			}else{
				clearInterval(fader);
			}
		},30);
	</script>
</body>
</html>

四、防抖

定义：对于短时间内连续触发的事件（滚动事件），让某个时间期限内，事件函数只执行一次。

相关推荐
zandy101113 分钟前
如何快速入门-衡石科技分析平台
服务器·前端·科技·数据库管理员
邝邝邝邝丹1 小时前
React学习———React Router
前端·学习·react.js
Yvonne爱编码1 小时前
CSS- 2.1 实战之图文混排、表格、表单
前端·css·html·github·状态模式·html5·hbuilder
前端小巷子1 小时前
CSS面试题汇总
前端·css·面试
绝美焦栖1 小时前
vue复杂数据类型多层嵌套的监听
前端·javascript·vue.js
xixixin_2 小时前
【Vite】前端开发服务器的配置
服务器·前端·网络
.生产的驴2 小时前
Vue3 加快页面加载速度 使用CDN外部库的加载 提升页面打开速度 服务器分发
运维·服务器·前端·vue.js·分布式·前端框架·vue
史迪仔01122 小时前
Python生成器：高效处理大数据的秘密武器
前端·数据库·python
蓝婷儿3 小时前
前端面试每日三题 - Day 34
前端·面试·职场和发展
CopyLower3 小时前
苹果计划将AI搜索集成至Safari：谷歌搜索下降引发的市场变革
前端·人工智能·safari
热门推荐
01YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】02KGG转MP3工具|非KGM文件|解密音频03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05DeepSeek各版本说明与优缺点分析06Coze扣子平台完整体验和实践（附国内和国际版对比）07深度学习基础--ResNet网络的讲解，ResNet50的复现(pytorch)以及用复现的ResNet50做鸟类图像分类08苍穹外卖面试总结09yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记10【解决】Android Gradle Sync 报错 Could not read workspace metadata