JS学习第十六天总结

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

1.昨天复习

  • onmousedown：鼠标点下
  • onmouseup：鼠标抬起

2.Json

  • JavaScript Object Notation JS对象表示法
  • 它不是一门语言，只是JS语言的一个应用，前后台数据交互使用。
  • 对象表示法：k:v (key，value)，键值对
    • 对象形式：{}；
    • var jsonPerson={name:“janes”,age:23,height:198,address:“30TH”}；
    • jsonPerson.name拿到json对象的name
    • ES6–>ES2015–>ECNAScript2015
    • ES7–>ES2016
    • ES8
    • 模板字符串:ES6中新内容 MDN文档
      • 需要使用变量的地方使用 ${…} 包裹就好了
console.log(`
    他的名字叫：${jsonPerson.name}
`)
  • 获取title、head等文档内容
    • document.title 标题
    • document.head 头部
    • document.body 身体
    • document.documentElement HTML
  • 数组表示法

3.scroll

  • window对象的screenTop、screenLeft属性
  • scrollTop、scrollLeft
  • window.onscroll事件，滚动条滚动时
  • document.documentElement.scrollTop 要注意兼容问题，Safari和没有文档声明的IE6、7、8中要使用特殊写法。
    • 兼容写法：var scrolltop=document.documentElement.scrollTop||document.body.scrollTop||window.pageYOffset||0;
  • 使用json写scroll封装：
    JavaScript Scroll家族以及封装
function scroll(){
	if(document.documentElement){
		return {
			top: document.documentElement.scrollTop,
			left: document.documentElement.scrollLeft
		}
	}else if(document.body){
		return {
			top: document.body.scrollTop,
			left: document.body.scrollLeft
		}
	}else if(window.pageXOffset){
		return {
			top: window.pageYOffset,
			left: window.pageXOffset
		}
	}
}

课外了解知识：

  • 浏览器怪异模式
  • 怪异盒模型
  • 标准盒模型

4.导航栏吸顶效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			.head{
				width:100%;
				height:200px;
				background-color: yellow;
			}
			.nav{
				width: 100%;
				height:80px;
				background-color:black;
			}
			.fixed{
				position: fixed;
				left:0;
				top:0;
			}
			.content{
				width:100%;
				height:10000px;
				background-color:#ccc;
			}
		</style>
	</head>
	<body>
		<div class="head"></div>
		<nav class="nav"></nav>
		<div class="content"></div>
	</body>
	<script src="js/scroll.js"></script>
	<script type="text/javascript">
		var headH=document.getElementsByClassName("head")[0].offsetHeight;
		var nav=document.getElementsByTagName("nav")[0];
		window.function(){
			if(scroll().top>=headH){
				nav.className="nav fixed";
			}else{
				nav.className="nav";
			}
		}
	</script>
</html>

5.图片跟随

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				width:100%;
				height:10000px;
			}
			img{
				display: block;
				position: absolute;
				left: 0;
				top:300px
			}
		</style>
	</head>
	<body>
		<img src="img/QQ图片20190409143138.gif"/>
	</body>
	<script src="js/scroll.js"></script>
	<script type="text/javascript">
		var img=document.querySelector("img");
		var leader=0,target=0,timer=null;
		window.function(){
			target=scroll().top+300;
			timer=setInterval(function(){				
				leader=leader+(target-leader)/10;
				img.style.top=leader+"px";
			},20);
		}
	</script>
</html>

6.回到顶部效果

  • window.scrollTo(x,y); 让水平和垂直滚动条去到啥位置。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			body{
				height:10000px;
			}
			div{
				width:500px;
				height:5000px;
				background-color: red;
			}
			span{
				display: inline-block;
				width:80px;
				height:80px;
				border-radius: 8px;
				background-color: yellow;
				font-size:20px;
				line-height: 80px;
				text-align: center;
				position: fixed;
				right:20px;
				bottom:20px;
				display: none;
			}
			span:hover{
				background-color:black;
				color:white;
			}
		</style>
	</head>
	<body>
		<div></div>
		<span id="span">
			TOP
		</span>
	</body>
	<script src="js/scroll.js"></script>
	<script type="text/javascript">
		var span=document.getElementById("span");
		var leader=0,target=0,timer=null;
		window.function(){
			if(scroll().top>0){
				span.style.display="block";
			}else{
				span.style.display="none";
			}
			leader=scroll().top;
			span.function(){
				timer=setInterval(function(){
					leader=leader+(target-leader)/20;
					if(leader<300){
						leader-=10;
					}
					console.log(leader)
					window.scrollTo(0,leader);
					if(leader<=0){
						leader=0;
						clearInterval(timer);
					}
				},30);				
			}
		}
	</script>
</html>

7.盒子尺寸获取方法

  • client：可视区
  • offsetHeight：包含内height、padding、border
  • clientHeight：包含height、padding，没有border
  • scrollHeight：元素的内容的高度，内容没有超过盒子就和clientHeight一样

8.屏幕尺寸

  • IE9+：通过window.innerWidth
  • 标准浏览器：通过document.documentElement.clientWidth
  • 非标准浏览器：通过document.body.clientWidth
  • 兼容处理：
function client(){
    if(window.innerWidth !=null){
        return {
            height:window.innerHeight,
            width:window.innerWidth
        }
    }else if(document.compatMode=="CSS1Compat"){
         return {
           height:document.documentElement.clientHeight,
            width:document.documentElement.clientWidth
        }
    }else{
        return {
           height:document.body.clientHeight,
            width:document.body.clientWidth
        }
    }
}

9.新窗口事件

  • window.onresize:窗口尺寸发生改变时
  • 声明函数之后，函数名代表整个函数，函数名()代表函数调用。

案例：当窗口宽度大于960px时，页面背景为黄色；大于640px时背景蓝色；其余为黑色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script src="js/scroll.js"></script>
	<script type="text/javascript">
		fun();
		window.fun;		
		function fun(){
			if(client().width>960){
				document.body.style.backgroundColor="yellow";
			}else if(client().width>640){
				document.body.style.backgroundColor="blue";
			}else{
				document.body.style.backgroundColor="black";
			}
		}
	</script>
</html>

ES6 入门 阮一峰

恋风（微信）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第十六天，开始感受JS的乐趣？-IFE
weixin_34343308的博客
08-13 168
第十六天，开始感受JS的乐趣？ 日期 总用时 学习目标 2018.08.13 2h JavaScript入门 学习目标 JavaScript入门 学习内容 第十六天，开始感受JS的乐趣 MDN 什么是JavaScript？ 学习笔记 对于java程序员来说，今天的内容很简单，就不记笔记了，直接code吧。 作业： 加减乘...
第十六天
09-28 190
第二种方式实现异步通信 1、定义 AJAX的核心对象XMLHttpRequest XMLHttpRequest：是浏览器的XMLHTTP组件的对象，通过该对象AJAX可以像桌面应用程序一样同服务器进行数据层面的交互，不需要每次都进行整个页面的刷新。 2、 步骤
学习JS的这些日子——十二月总结
aoe41606的博客
07-30 70
事实上非常想早就发表这篇十二月份的总结了，可是一直拖拖拉拉没有完毕。一直在想2015年都过去了，该不该再去 写这一篇2015年最后一个月的总结。还有就是2015年的年终总结能否够取代十二月的总结，后来细致考虑了一 下，还是分开来写，毕竟自己的2015年是自己觉得比較过得有意义的大学的一年，这一年计算机带给我不一样的感 受。好了言归正传，開始十...
10-15 Js 学习总结
Mr_Jasper的博客
10-15 444
双重for循环//控制行 for (var i = 0; i < 10 ;i++){ //控制列 for(var j = 0; j < 10; i++){ document.write("*"); } document.write("<br>"); } 双重for循环：for循环里面嵌套for循环。数组 Array属性：leng
JS 学习笔记
dianzhi1155的博客
08-01 73
今天开始学习JS语法，记录一些比较关键的点，权做备忘。 Script Script标签用来直接在页面中嵌入JS代码和包含外部JS文件。 1.包含在<script>标签内的JS代码从上到下依次解释； 2.定义src属性的<script>标签不应再包含JS代码，嵌入的代码会被忽略； 3.标签包含六个属性：async(立即下载脚本)、charset（字符集）...
Node.js-Nodejs学习笔记以及经验总结
08-09
本学习笔记和经验总结将深入探讨Node.js的核心概念、主要特性、常用模块以及实战技巧，帮助你从零基础到熟练掌握Node.js。 一、Node.js核心概念 1. 非阻塞I/O模型：Node.js采用事件驱动、非阻塞I/O模型，提高了...
JavaScript学习总结.pdf
12-16
JavaScript学习总结 JavaScript 基础知识点总结 1. 数据类型比较：JavaScript 允许对任意数据类型做比较。 知识点：数据类型比较 在 JavaScript 中，可以对任意数据类型进行比较，这使得 JavaScript 的数据类型...
JavaScript学习笔记（十）
10-29
### JavaScript学习笔记（十）—— Window对象详解 #### 一、引言 在JavaScript的学习过程中，`window`对象是一个非常重要且实用的概念。它不仅代表浏览器窗口本身，还提供了丰富的API来帮助开发者操作浏览器窗口，...
JavaScript学习总结之正则的元字符和一些简单的应用
10-19
正则表达式在JavaScript编程中是一种用于匹配字符串中字符组合的模式。正则表达式由普通字符（例如字符a到z）以及特殊字符（称为"元字符"）组成。本文详细介绍了JavaScript中的正则表达式元字符及其简单应用。 ### ...
javascript 语法基础 想学习js的朋友可以看看
10-29
首先，JavaScript 是一种高级的、解释型的编程...以上是根据文档提供的信息总结的 JavaScript 语法基础知识点。由于文档中包含了 OCR 技术识别错误，本文对内容进行了合理的推断和修正，以确保知识点的准确性和易读性。
drag_line，JS方法实现两幅图的线连接
01-13
无论怎么拖拽两幅图中间都会有一根线连着，共享学习之，出自妙味课堂
学习js总结——基础知识理解
ljhzhd的博客
03-24 110
学习js总结——基础知识理解 1.js是什么 js，全称JavaScript，是一种运行在浏览器上的直译式脚本语言（小程序也可以用js？？？），是一种动态类型，弱类型基于原型的语言，他的解析器被称为JavaScript解析器，为浏览器的一部分，广泛用于客户端的脚本语言，最早在html网页上使用，为了给html网页增加动态功能。 2.js的数据类型 基本数据类型：null，undefined，number，string，Boolean，symbol（es6新添加的属性），bigIng（es2020新添
JS学习总结（9）——String
Arcgiser的博客
09-08 239
String 对象 用于处理文本（字符串）,两种创建方法。 var a = new String("hello"); var txt = "hello"; String 对象方法 charAt() 返回指定索引位置的字符 charCodeAt() 返回指定索引位置字符的 Unicode 值 concat() 连接两个或多个字符串，返回连接后的字符串 fromCharCode() 将 Unicode 转换为字符串 indexOf() 返回字符串中检索指定字符第一次出现的位置，如果没有找到匹配的字符串则返回
大前端学习--两个多月来的收获与进步 学习总结
爱玲姐姐的博客
09-29 8889
两个多月来的收获与进步有多少 作为大前端课程的第一期学员，我已经学了2个多月了，课程质量和教学水平如何不用再重复了，之前在大前端高薪训练营 心得体会+学习笔记这篇文章里已经说过了。这两个月来有很多人向我打听这个课程如何，我都给予推荐态度。市场上的前端网课那么多，然而真正有难度、有深度的课程，少之又少，这个课程我是认可的。 2020年有件一直压抑着我的事情，这周末应该算是结束了吧，所以心情有点愉悦，下周准备加大马力学习了。 今晚来记录一下这两个多月来的收获与进步，好记性不如烂笔头，我习惯了隔段时间就随笔写一
指引线leader-line库的使用
热门推荐
知无涯
12-11 1万+
今天给大家介绍一个用于做指引线的库，叫做leader-line。简单好用，非常容易上手。 这个库是用于在二个dom元素之间，画上一条线。可以用作产品详细点补充说明，也有用作相关关系表明。这样说有点空洞，先看一下几个示例。 引入与简单使用 leader-line库不依赖任何库，你无需引入jquery，vue，或其他的第三方库。 一个简单的案例 <!DOCTYPE html> <html> <head> <title>demo</title&g
关于前端学习的一些感悟
a514224717的专栏
11-01 655
一：关于问题解决： 在前端开发里解决问题最重要的是思考问题的方式，有的时候换个角度去思考问题，会收到意想不到的结果。下面说几种解决问题的方式。 搜索引擎：如果认为这个问题在搜索引擎能找到答案，一定选择搜索引擎，百度不到，有时候google或许能找到答案。这种问题的答案有个印象便可以，不需要刻意去记录 问题抛出来，大家一起讨论：如果别人帮你解决了问题，一定要记住这个问题的解决方式，因为别人能解...
前端学习总结
热爱IT的张童鞋
10-16 111
html中用a标签代表网页的链接地址，其属性href记录网页的url.实例代码及效果 html通过img标签来在网页上显示图片，其属性src用来指定图片的路径 换行符br以及水平分割线hr 1.iframe标签的用法:不同的网页的集合，使用内嵌标签进行管理 2.form表单:提交数据给服务器与后台进行交互, 例如你登陆CSDN博客，要输入用户名和密码，然后点击登陆，才能够正常的访问主页。 作...
百度前端学院：第十六天，开始感受JS的乐趣【计算器，简历代码】
敲敲的博客
07-16 740
IEF|零基础学院|16天：javascript【1】 @(IEF笔记)[javascript, IEF] ief课程：第十六天，开始感受JS的乐趣 1. 课程目标 从今天开始，我们要开始学习在Web开发中使用 JavaScript/ECMAScript 来实现各种各样的交互逻辑及数据处理，今天的目标是初步了解 JavaScript/ECMAScript 是什么，开始学习基本的语法...
leader-line 使用在ie下的问题
weixin_45332018的博客
10-21 372
leader-line 在安装skeleton-loader 并在vue.config.js 进行配置后在Chrome等浏览器下可以正常显示，但是在ie下使用leader-line.remove() 会导致ie浏览器崩溃
Backbone.js入门教程第二版：从基础到实战
此教程为第二版，针对Backbone.js 1.0.0及以上版本进行了更新，以解决旧版教程中的问题，并加入了作者的新学习心得。 一、前言 作者在前言中提到，第一版教程发布后，受到众多读者的关注与反馈，促使他决定更新为第...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值