JavaScript快速入门

已于 2022-03-27 11:56:27 修改
阅读量1.1k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 html5
于 2022-03-12 16:16:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ziyue13/article/details/123443494
版权

基础知识：

1.获取单个元素：

根据class获取元素：
var a = document.querySelector('.div1');
根据id获取元素：
var a = document.querySelector('#div1');
根据标签获取元素：
var a = document.querySelector('li');

2.获取数组元素：

var lis = document.querySelectorAll('.div1 ul li');

元素事件绑定：

div1.addEventListener('事件类型',function(){
	
})

3.创建节点与插入节点：

指定标签创建节点：a=document.createElement('li')，创建一个结点只能添加一次
添加节点：ul.appendChild(a)将一个结点添加到指定父节点的子节点末尾
添加节点2：ul.insertBefore(a,ul.children[0]):将一个结点添加到父节点下的一个子节点的前一个

4.定时器：

setInterval():每隔一段这个时间，就去调用一次回调函数（例：倒计时效果）
clearInterval(定时器名)可以删除setInterval()设置的定时器

5.本地储存
本地存储（sessionStorage关闭浏览器删除数据，localStorage只能手动删除，其他页面也能使用存储在浏览器中的数据）：

sessionStorage.setItem(key,value):把数据存储在用户浏览器中
sessionStorage.getItem(key):获取数据
sessionStorage.removeItem(key)：删除数据
sessionStorage.clear():删除所有数据
localStorage.setItem(key,value):把数据存储在用户浏览器中
localStorage.getItem(key):获取数据
localStorage.removeItem(key)：删除数据
localStorage.clear():删除所有数据

简单项目：

操作单个元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.div1{
				width: 100px;
				height: 100px;
				margin: auto;
				background-color: red;
			}
			
		</style>
	</head>
	<body>
		
		<div class="div1">
			
		</div>
		<button type="button" id="btn">点击</button>
		
		<script type="text/javascript">
			var div1 = document.querySelector('.div1');
			var btn = document.querySelector('#btn');
			
			btn.addEventListener('click',function(){
				div1.style.width='200px';
				div1.style.height='200px';
			})
			
			div1.addEventListener('click',function(){
				div1.style.backgroundColor='black';
			})
			
			div1.addEventListener('mouseover',function(){
				div1.style.backgroundColor='gray';
			})
			
 		</script>
		
	</body>
</html>

操作多个元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.div1{
				width: 800px;
				height: 200px;
				margin: auto;
			}
			li{
				list-style: none;
				text-align: center;
				line-height: 200px;
				font-size: 45px;
				float: left;
				width: 200px;
				height: 200px;
				background-color: black;
				color: red;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		
		<div class="div1">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			
			var lis = document.querySelectorAll('.div1 li');
			for(var i = 0;i<lis.length;i++){
				lis[i].addEventListener('mouseover',function(){
					for(var j = 0;j < lis.length;j++){
						lis[j].style.backgroundColor='';
					}
					this.style.backgroundColor='red';
				})
			}
			for(var i = 0;i<lis.length;i++){
				lis[i].addEventListener('mouseout',function(){
					for(var j = 0;j < lis.length;j++){
						lis[j].style.backgroundColor='';
					}
				})
			}
			
 		</script>
		
	</body>
</html>

留言板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>留言板</title>
		<style type="text/css">
			.div1{
				width: 800px;
				height: 200px;
				margin: auto;
				border: 1px solid red;
				overflow: scroll;
			}
			.div2{
				width: 400px;
				height: 50px;
				margin: auto;
			}

		</style>
	</head>
	<body>
		
		<div class="div1">
			<ul>
				
			</ul>
		</div>
		
		<div class="div2">
			<input type="text" id="ipt" placeholder="请输入内容"/>
			<button type="button" id="btn">发布</button>
		</div>
		
		<script type="text/javascript">
			//获取元素
			var div1 = document.querySelector('.div1');
			var div2 = document.querySelector('.div2');
			var btn = document.querySelector('#btn');
			var ipt = document.querySelector('#ipt');
			var ul = document.querySelector('.div1 ul');
			
			//用数组充当数据库保存已有的数据
			var arr = ['123','456','678'];
			
			//先渲染出数组当中的数据
			for(var i=0;i<arr.length;i++){
				var li = document.createElement('li');
				li.innerHTML=arr[i];
				ul.appendChild(li);
			}
			
			//给按钮添加点击事件
			btn.addEventListener('click',function(){
				console.log('----')
				//重新获取元素
				var ul = document.querySelector('.div1 ul');
				//创建一个li元素
				var li = document.createElement('li');
				//给li元素添加内容
				li.innerHTML=ipt.value;
				//把li元素插入到ul当中
				ul.appendChild(li);
				//向数组当中添加元素
				arr.push(ipt.value);
				//内容盒子卷去的头部为它的高度，保持最新的数据在最下面
				div1.scrollTop = div1.scrollHeight;
			})
			
 		</script>
		
	</body>
</html>

效果图：
在这里插入图片描述

tab栏切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body{
				background-color: black;
			}
			.div1{
				width: 900px;
				height: 50px;
				margin: auto;
				border: 1px solid red;
				color: aqua;
			}
			.div2{
				width: 900px;
				height: 400px;
				margin: auto;
				border: 1px solid gray;
				position: relative;
				color: aquamarine;
				
			}
			.div1 li{
				width: 33%;
				height: 100%;
				float: left;
				list-style: none;
				text-align: center;
				line-height: 50px;
				cursor: pointer;
			}
			.div1 li:hover{
				background-color: red;
			}
			
			.div2 li{
				position: absolute;
				list-style: none;
				display: none;
			}
			.div2 li:nth-child(1){
				display: block;
			}
		</style>
	</head>
	<body>
		
		<div class="div1">
			<ul>
				<li>一</li>
				<li>二</li>
				<li>三</li>
			</ul>
		</div>
		
		<div class="div2">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			//获取元素
			var li1s = document.querySelectorAll('.div1 li');
			var li2s = document.querySelectorAll('.div2 li');
			//给li一个自定义属性
			for(var i = 0 ;i<li1s.length;i++){
				li1s[i].id = i;
			}
			for(var i=0;i<li1s.length;i++){
				li1s[i].addEventListener('click',function(){
					for(var j=0;j<li2s.length;j++){
						li2s[j].style.display='none';
					}
					li2s[this.id].style.display='block';
					
				})
			}
			
 		</script>
		
	</body>
</html>

效果图：
在这里插入图片描述

轮播图：

st紫月
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript快速入门.docx
09-05
JavaScript 快速入门 JavaScript 是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。它是作为开发 Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，例如 Node.js。JavaScript 的标准是...
新手入门JavaScript看这篇就够了~
技术专家
04-20 1298
新手入门JavaScript看这篇就够了~
JavaScript 教程 （详细 全面）
热门推荐
梁辰兴的博客
10-31 7万+
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。JavaScript 诞生于 1995 年，几乎是和互联网同时出现；
JavaScript--快速入门
weixin_74268571的博客
03-13 679
js的认识和基本使用，等腰三角形，九九乘法表及表格版
JavaScript 入门(简单易懂) 看这一篇就够了
2301_77638787的博客
08-06 1万+
尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习。
javascript快速入门Source.rar
12-04
这个"javascript快速入门Source.rar"压缩包文件很可能是为了帮助初学者快速掌握JavaScript的基础知识和实际应用。以下是对其中可能包含的内容的详细解读： 1. **基础概念**：JavaScript的基础包括变量、数据类型...
Javascript快速入门教程
12-13
Javascript快速入门教程！精要地介绍了Javascript的语法元素、语法结构，并给出了非常实用的小例子！
javascript 快速入门
01-13
作为一个快速入门的话题，我们将深入探讨JavaScript的基础知识，帮助有编程经验的初学者快速上手。 1. **变量和数据类型**： JavaScript支持多种数据类型，包括基本类型（如字符串、数字、布尔值）和引用类型（如...
JavaScript快速入门经典 中文
04-06
总的来说，JavaScript快速入门需要掌握ECMAScript的基本语法、DOM的使用以及BOM的操作，同时熟悉开发环境和调试工具，理解变量的概念和规则，这些都是初学者建立坚实基础的关键步骤。随着经验的积累，可以深入学习更...
javaScript快速入门(仅需一天)
King的博客
04-03 3752
/
JavaScript
LISDJZ的博客
10-23 252
JavaScript学习—对象与数组JavaScript内部对象Object对象String对象Date 对象 JavaScript内部对象 内部对象分为动态对象和静态对象，引用动态对象的属性和方法，必须使用new关键字来创建一个对象实列，然后才能使用“对象实例名。成员。引用静态对象的属性和方法时，不需要NEW关键字，只需要对象名.成员 Object对象 1. 创建对象： obj = new object([value]) 2.Object对象属性 （1） prototype属性 objectName.p
【Javascript】for循环中的绑定事件为什么要用this
weixin_43790653的博客
02-20 845
【Javascript】for循环中的绑定事件 先来看一段代码： <div class="box"> <ul> <li> <img src="images/4.jpg" alt=""> </li> <li> <img src="images/9.jpg" alt=""> </li>
5分钟JavaScript快速入门
最新发布
luming的博客
02-24 2566
JavaScript是一种高级编程语言，用于开发网页和网络应用程序。它是一种动态类型语言，可以在客户端和服务器端运行。JavaScript主要用于改善用户体验、实现动态网页、与用户进行交互以及处理数据等功能。它具有易学易用的特点，被广泛用于网页开发和移动应用开发。JavaScript是一种弱类型、动态的编程语言，主要用于在网页上添加交互功能。、
JS快速入门
白豆五的博客
12-05 5752
JavaScript （简称JS），是一门跨平台、面向对象的脚本语言（弱类型语言），而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。
JavaScript三种获取元素方式
weixin_53052268的博客
07-07 382
1.getElementById 结果截图 2.getElementByTagName（） 代码结果截图： 3.html新增的获取元素属性 结果截图 4.获取body和html元素
javascript快速入门
05-11
JavaScript是一种动态编程语言，主要用于在Web浏览器中创建动态效果和交互式用户界面。下面是一些快速入门的步骤...以上就是JavaScript的快速入门步骤。可以通过查找更多教程和示例来深入了解JavaScript的功能和用法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值