JS学习第七天总结

最新推荐文章于 2021-07-14 09:30:22 发布
最新推荐文章于 2021-07-14 09:30:22 发布
阅读量166 收藏
点赞数
分类专栏： JS学习笔记 JS学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44791254/article/details/88831821
版权

1.昨天内容复习

  • 焦点事件
    • 得到焦点onfocus
    • 失去焦点onblur
  • this关键字，指的是事件的调用者
  • value，获取表单的内容
  • className，添加类名
  • innerHTML，修改元素内容
  • focus()，自动获得焦点的方法
  • select()，表单选择内容

2.for循环

复习回顾

3.获得元素的方式

  • 通过Id获取元素，document.getElementById();
  • 通过标签名获取元素，documnet.getElementsByTagName()，获取到的元素是多个，是一个伪数组；
    • 通过for循环遍历所有元素
    • 通过父级元素缩小范围之后再获取里面的元素

4.数组

  • 创建数组：
    • var arr=[1,2,3,4,5…];
    • var arr2=new Array(1,2,3,4,5…)// 使用不多
  • 通过下标（索引）来获取数组中元素，没有的元素返回undefined
  • 遍历数组元素，for循环
隔行变色案例，鼠标经过高亮显示

注意：行内样式权重高于类名设置的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style: none;
			}
			li{
				line-height:40px;
				margin-top:10px;
				border:1px solid #777;
				padding-left:20px;
				width:300px;
				height:40px;
			}
			.bgc{
				background-color:skyblue!important;				
			}
		</style>
	</head>
	<body>
		<ul>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
		</ul>
		<script type="text/javascript">
			var lis=document.getElementsByTagName("li");
			for(var i=0;i<lis.length;i++){
				if(i%2==0){
					lis[i].style.backgroundColor="yellow";					
				}
				lis[i].function(){
					this.className="bgc";
				}
				lis[i].function(){
					this.className="";
				}
			}
		</script>
	</body>
</html>
写一个函数，求数组的平均值
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			function num(arr){
				var sum=0;
				var j=0;
				for(var i=0;i<arr.length;i++){
					if(parseInt(arr[i])!=0){
						sum+=parseInt(arr[i]);
						j++;
					}				
				}
				var num=sum/j;
				return num;
			}
			var a=prompt("请输入要求平均数的数字,中间用逗号分隔");
			for(var i=0;i<a.length;i++){
				console.log(a[i]);
			}
			console.log(num(a));
		</script>
	</body>
</html>
精灵图实现九宫格布局
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			ul{
				list-style: none;
				width:410px;
				height:310px;
				margin:100px auto;				
				border:1px solid #666;
				padding-left:20px;
			}
			li{
				display: block;
				width:100px;
				height:100px;
				float:left;
				text-align: center;
				margin-bottom: 10px;
			}
			i{
				display:block;
				width:44px;
				height:44px;
				background:url(img/QQ图片20190326144407.png) no-repeat;
				margin-top:10px;
				margin-left:40px;
			}
			a{
				text-decoration: none;
				color:#999;
				font-size:18px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
		</ul>
		<script type="text/javascript">
			var is=document.getElementsByTagName("i");
			for(var i=0;i<is.length;i++){
				is[i].style.backgroundPosition="0px "+(-43*i)+"px";// 空格不能少
//				is[i].style.backgroundPositionY=(-43*i)+"px";// 只有Y方向变量改变
			}
		</script>
	</body>
</html>
复选框带全选、反选、取消按钮

checked=true，选中；top不要用作变量名，是关键字，会报错。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="top1">
			<button>全选</button>
			<button>取消</button>
			<button>反选</button>
		</div>
		<div id="bottom">
			商品1：<input type="checkbox" /><br />
			商品2：<input type="checkbox" /><br />
			商品3：<input type="checkbox" /><br />
			商品4：<input type="checkbox" /><br />
			商品5：<input type="checkbox" /><br />
			商品6：<input type="checkbox" /><br />
			商品7：<input type="checkbox" /><br />
			商品8：<input type="checkbox" /><br />
			商品9：<input type="checkbox" /><br />
		</div>
		<script type="text/javascript">
			var top1=document.getElementById("top1");
			var bottom=document.getElementById("bottom");
			var btns=top1.getElementsByTagName("button");
			var inputs=bottom.getElementsByTagName("input");
			btns[0].function(){
				for(var i=0;i<inputs.length;i++){
					inputs[i].checked=true;
				}
			}
			btns[1].function(){
				for(var i=0;i<inputs.length;i++){
					inputs[i].checked=false;
				}
			}
			btns[2].function(){
				for(var i=0;i<inputs.length;i++){
					if(inputs[i].checked==true){
						inputs[i].checked=false;
					}else{
						inputs[i].checked=true;
					}
				}
			}
		</script>
	</body>
</html>
京东搜索框

事件可以连写，..onpropertychange=function(){}。
IE6、7、8兼容的是onpropertychange。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
				position: relative;
			}
			#container{
				width: 500px;
				margin:100px auto;
			}
			#txt{
				height:30px;
				width:500px;
			}
			#label{
				position: absolute;
				top:5px;;
				left:10px;
				cursor: text;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<input type="text" id="txt"/>
			<label id="label" for="txt">默认商品</label>
		</div>
		<script type="text/javascript">
			var txt=document.getElementById("txt");
			var label=document.getElementById("label");
			txt.function(){
				label.style.color="#666";
			}
			txt.function(){
				label.style.color="black";				
			}
			txt.function(){
				label.style.display="none";	
				if(txt.value==""){
					label.style.display="block";
				}
			}
		</script>		
	</body>
</html>
恋风（微信）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js数组操作学习总结
12-08
shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefinedvar a = [1,2,3,4,5];var b = a.shift();  结果 a：[2,3,4,5] b：1 unshift：将参数添加到原数组开头，并返回数组的长度var a = [1,2,3...
21天学js总结
12-05
在“21天学js”教程中，JavaScript作为一种强大的客户端脚本语言，广泛应用于网页交互和动态效果的实现。这个21天的学习旅程涵盖了JavaScript的基础到进阶内容，旨在帮助初学者快速掌握这一核心技术。 首先，我们从...
Javascript第七天学习总结之字符串的高级操作
YanTuTwo的博客
08-19 366
第1章字符串高级操作 1.1字符串的转换 一、String(变量); 二、“”+变量； 三、变量.toString(); 1.2给索引查字符(charAt/charCodeAt) 1 charAt，获取相应位置字符（参数： 字符位置） 注释：字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。 2 char
C#中的变量与常量
LYQ
08-07 382
C#中的变量与常量
javascript学习心得
热门推荐
成长
04-24 2万+
不论你是想学各种前端框架还是nodejs，都需要深入理解javascript的工作原理以及特性，只有这样才能以不变应万变。最近看了一些js的教学视频与NC的《JS的高级程序设计》这本书，在这里总结一下js的一些特性，以防自己忘记，也可以方便各位朋友学习与交流。
第七天学习总结
qq_52505875的博客
07-14 63
#ifndef MYSTACK_H #define MYSTACK_H #include<stdlib.h> template<class Type> class SeqStack // 栈 先进后出 { private: enum { INC = 2 }; Type* data; int maxsize; // 容量 int top; // public: SeqStack(int sz = 10) :maxsize(sz), top(-1) { ..
java学习总结——第七天
菜鸟的蜕变
03-31 596
Java学习第七天： 面向对象的三大特点：封装、继承、多态   一、封装 封装——面向用户更简单，面向属性更安全。   private  私有的，保护起来。   class Dog{      private String name;  //private修饰的对象表示私有只有本类中可以访问。      private int age;   public void se
JavaScript高级程序设计学习总结
02-23
以下是我对这本书学习的总结： 1. **变量与数据类型** JavaScript中的变量是动态类型的，可以随时更改其数据类型。基本数据类型包括：Number、String、Boolean、Null、Undefined以及Symbol（ES6新增）。此外，还有...
Node.js-Nodejs学习笔记以及经验总结
08-09
本学习笔记和经验总结将深入探讨Node.js的核心概念、主要特性、常用模块以及实战技巧，帮助你从零基础到熟练掌握Node.js。 一、Node.js核心概念 1. 非阻塞I/O模型：Node.js采用事件驱动、非阻塞I/O模型，提高了...
Dom 学习总结以及实例的使用介绍
09-05
- `document.querySelector()`和`document.querySelectorAll()`：根据CSS选择器查找元素，前者返回第一个匹配的元素，后者返回一个包含所有匹配元素的NodeList。 - `element.appendChild()`和`element.removeChild...
第七天 Android学习总结(广播接收者)
zhugushen的博客
01-18 564
Android系统内部相当于一个电台,里面定义了很多的广播事件(频道),如外拨电话,短信到来,sd卡状态,电池电量变化等. 我们要接收到广播信息,需要: 1.创建一个继承BroadcastReceiver的广播类(专门用来接收广播的组件), 2.配置AndroidManifest.xml文件,主要是action★★ 3.权限问题,如监听拨打电话,需要设置权限android.permissi
JS学习第一周总结
前端工程师学习记录
03-22 563
前段三层 HTML 结构层 CSS 样式层 JavaScript 行为层 1.JS能做什么？ 嵌入动态文本于HTML页面。 对浏览器事件作出反应。 读写HTML元素 在数据被提交到服务器之前验证数据。 检测访客的浏览器信息。 基于Node.js技术进行服务器端编程。 2.JS简介 JavaScript是一种直译式脚本语言，是一种动态型、弱类型、基于原型的语言。 基本特点： 是一种解释性脚...
JS学习第二天总结
前端工程师学习记录
03-19 469
1.昨天作业总结 一定要牢记，使用prompt()接收到的数据是字符串型的，要做算术运算，要先使用parseInt()转换成数值型，才能进行操作。 2.新的数据类型-布尔Boolean 昨天已经说了两种基本数据类型： Number（数值类型） 控制台显示蓝色 NaN是数值类型 String（字符串类型） 控制台显示黑色 今天再说一种：Boolean（布尔），他只有两个值 true（真） fals...
JS第一天学习总结
前端工程师学习记录
03-18 352
前段三层 HTML 结构层 CSS 样式层 JavaScript 行为层 学习网站：廖雪峰官方网站 1.JS能做什么？ 嵌入动态文本于HTML页面。 对浏览器事件作出反应。 读写HTML元素 在数据被提交到服务器之前验证数据。 检测访客的浏览器信息。 基于Node.js技术进行服务器端编程。 2.JS简介 JavaScript是一种直译式脚本语言，是一种动态型、弱类型、基于原型的语言。 基...
JS学习第二周总结
前端工程师学习记录
03-30 351
1.上周内容回顾 多个script标签，一个报错，另一个还是会继续执行。 多个window.onload入口函数，后面的会覆盖前面的，最终只会执行一个。 函数：可以重复使用的代码块的封装。 函数三种创建方式：函数声明式、函数表达式、Function——构造函数。 变量声明提升：JS执行前会预解析，将变量声明提升到最前面。 2.函数参数 注意点一： function fun(a,b,c){ ...
JS自学day1
前端工程师学习记录
03-18 327
1. script元素 在使用script嵌入JavaScript代码时，记住不要在代码中的任何地方出现"/script"字符串，负责会引发错误。例如下面的代码，执行时就会出现错误。 <script> function sayScript(){ alert("</script>"); } </script> 如果需要引入外部JS文件，那么src属...
JS学习第三周总结
前端工程师学习记录
04-07 302
1.日期对象 内置对象，JS中有很多内置对象 Math Array Date Vue var date=new Date();// 调用的是系统时间，如果运行程序的电脑时间改了，获取到的时间也会跟着变 getTime，获得到的毫秒数 1秒等于1000毫秒 从1970年至今的毫秒数 2038年问题 getFullYear，获取年份 当前年份 getMonth，获取月份 0-11月 getDa...
JS学习第三天总结
前端工程师学习记录
03-20 210
1.复习昨天内容 布尔类型Boolean 取值就两种 true false 不像Number包括很多种（数字、Ifinity，NaN等都是Number类型） 关系运算符 < > <= >= == === != !== console.log(2<3<5);// 返回true console.log(2<3<1);// 返回false ...
JS学习第二十天总结
前端工程师学习记录
04-15 192
1.通过style方式获取的样式 只能拿到行内样式； 拿到的是字符串数据类型，带px； 简单的封装（使用[]可以传变量）； 存在问题：只能拿到行内样式，但是我们一般是不使用行内样式的。 function getAttr(attr){ console.log(box.style[attr]); } getAttr("left"); 2.currentStyle当前样式/window.g...
"Vue.js：构建高效用户界面的JavaScript框架
2016年7月，Vue.js推出了重要的2.0版本。这个版本带来了更快、更小的体积，以及更多的新特性，如虚拟DOM的优化、异步组件等，使得Vue.js更加强大和高效。 经过几年的发展，Vue.js于2019年10月发布了重要的3.0版本。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值