前端学习之路 js

已于 2023-01-13 10:16:28 修改
阅读量155 收藏
点赞数
分类专栏： 前端学习之路 文章标签： javascript 前端 学习
于 2023-01-08 15:04:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cichu77/article/details/128600858
版权

标识符

在这里插入图片描述

变量

在这里插入图片描述

console.log()在控制台console输出

/*变量提升的例子*/
<script>
	console.log(age);
	var age=10;
	/*相当于以下部分
	  var age；
	  console.log(age);
	  age=10;
	  输出结果为：undefined
    */
</script>

js引入到文件(body和head都可以写，推荐body)

1.嵌入到html文件中
<body>
	<script>
		var age=20;
	</script>
</body>
2.引入本地独立js文件:需要创建一个.js文件(类似于.css文件)
<body>
	<scirpt type="tetx.javascript" src="./hello.js"></script>
	/*src为引入资源，这里引入.js文件*/
</body>
3.引入网络来源文件
<body>
	<script src="http://code.jquery.com/jquery1.2.1.min.js"></script>
</body>

注释

在这里插入图片描述

js输出方式

1.alert(“输出内容”)
<script>
	alert("我是弹出框")
</script>

在这里插入图片描述

2.document.write(“输出内容”)
<script>
	document.write("我是输出到页面")
</script>

在这里插入图片描述

数据类型

1.原始类型(基础类型)：
  • 数值，字符串，布尔值
2.合成类型(复合类型，引用类型)：

在这里插入图片描述

var user={
	name:"xiaoming",
	age:20,
	learn:true
}//也可以嵌套另一个对象
3.特殊

在这里插入图片描述

typeof运算符:判断数据类型

在这里插入图片描述

比较运算符

== 与 === (!= 与 !==)的区别:

在这里插入图片描述

布尔运算符

在这里插入图片描述

字符串

换行

在这里插入图片描述
-打印出来不是换行的，只是代码换行
在这里插入图片描述

字符串方法

charAt

在这里插入图片描述

concat(一般直接用加号连接)

在这里插入图片描述

substring

在这里插入图片描述

substr

在这里插入图片描述

indexOf

在这里插入图片描述

trim

在这里插入图片描述

split

在这里插入图片描述
在这里插入图片描述

遍历的两种for循环

在这里插入图片描述

另一种是c语言的for循环

数组方法

Array.isArray

在这里插入图片描述

push/pop

在这里插入图片描述

shfit/unshfit

在这里插入图片描述

  • shift空数组返回undefined，undefined为false
    在这里插入图片描述
join

在这里插入图片描述

concat(这里用加号会转成字符串)

在这里插入图片描述

reverse

在这里插入图片描述

indexOf

在这里插入图片描述

函数

在这里插入图片描述

对象

在这里插入图片描述

函数名作为键，函数作为值
对象的读取

在这里插入图片描述

  • 当对象里面嵌套对象时，通过链式调用来读取对象
    在这里插入图片描述
Math对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • (最大值-最小值)×随机数—>生成0~最小值之间的随机数
  • 上式再加上最小值—>生成min~max之间的随机数
Date对象

在这里插入图片描述
在这里插入图片描述

console.log(Date.now());//打印时间戳
sjc=Date.now();
console.log(new Date(sjc));//打印获得时间戳时对应所代表的时间
console.log(Date(sjc));//如果不带new，则表示当前时间
console.log(new Date(sjc).getDate());//打印获得时间戳时对应所代表的日期号数
console.log(new Date(sjc).getDay());//打印获得时间戳时对应所代表的星期几
console.log(new Date(sjc).getFullYear());//打印获得时间戳时对应所代表的年份
console.log(new Date(sjc).getMonth()+1);//打印获得时间戳时对应所代表的月份，0为1月，11为12月，所以+1提高可读性
//同理.........

//编写函数获得本年度剩余天数
function leftDays(){
	var today = new Date();//当前时间戳（以秒为单位）
	var endYear = new Date(today.getFullYear(),11,31,23,59,59,999);
	//今年最后一天的时间戳（以秒为单位），参数为年份，月份，日期，小时，分钟，秒，毫秒（精确到毫秒）
	var msPerDay = 24 * 60 * 60 * 1000;//一天有多少毫秒
	return Math.round((endYear.getTime()-today.getTime()) / msPerDay);
	//时间戳转化为以毫秒为单位，同时除以msPerDay求出天数
}

DOM概述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

document对象_方法/获取元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>Hello1</div>
    <div>Hello2</div>
    <script>
        var divs = document.getElementsByTagName("div");
        //通过div标签名获取html中的元素，不加索引的时候是一个HTML Collection
        console.log(divs);//返回对象为一个HTML Collection,类似于数组
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>Hello1</div>
    <div>Hello2</div>
    <script>
        var div1 = document.getElementsByTagName("div")[0];
         //通过标签名获取html中第一个符合元素，控制台输出该标签元素
        div1.innerHTML = "HelloWorld";//将div1标签内容更改为HelloWorld
    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="text">Hello</p>
    <script>
        var text = document.getElementsByClassName("text");
        //通过clas名获取html中第一个符合的元素
        console.log(text);
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="text">Hello</p>
    <script>
        var text = document.getElementsByClassName("text")[0];
        //通过class名获取html中第一个符合元素，控制台输出该标签元素
        text.innerHTML = "HelloWorld";//将text内容修改为HelloWorld
    </script>
</body>
</html>
  • 使用率极低
    在这里插入图片描述
  • 最常用
    在这里插入图片描述
  • 由于id具有唯一性，Element不用加s，获取到的直接是该id标签元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">nav1</div>
    <div class="nav">nav2</div>
    <script>
        var nav = document.querySelector(".nav");
        //通过给定的class选择器获取第一个匹配的标签元素
        console.log(nav);
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">nav1</div>
    <div class="nav">nav2</div>
    <script>
        var nav = document.querySelectorAll(".nav");
        //通过给定的class选择器获取所有匹配的标签元素
        console.log(nav);
    </script>
</body>
</html>

在这里插入图片描述

document对象_方法/创建对象

在这里插入图片描述

creatElement创建标签
creatTextNode创建文本
appendChild将创建的文本添加到创建的标签里，也可以将其他标签嵌套到标签里

在这里插入图片描述

createAttribute创建属性
.value为创建的属性添加内容
setAttributeNode将创建的属性添加到标签里
这里的标签是通过获取方法得到的

Element对象属性

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

Element 获取元素位置

在这里插入图片描述

在这里插入图片描述

  • 输出220、220(包含padding，不包含border margin)

在这里插入图片描述

  • 输出 屏幕高度、 230(页面高度是指元素撑开的高度)
    在这里插入图片描述
  • 日常应用场景与client基本一样，没区别
    在这里插入图片描述
    在这里插入图片描述
  • offsetHeighr offsetWidth比client只多了边框
    在这里插入图片描述
  • 定位距离相对于父元素的上边距 左边距，如果没有父元素，则以顶层文档为准，要注意的是如果是以顶层文档为准，浏览器默认左部分空出8px，要去除这8px，可以通过全局选择器设置margin和padding为0，如果有父元素，父元素必须要有定位relative，此时才会返回相对于父元素的上边距和左边距

在这里插入图片描述

css操作

在这里插入图片描述
在这里插入图片描述

  • 通过setAttribute设置style
    在这里插入图片描述
    在这里插入图片描述
  • 直接设置style
    在这里插入图片描述
    在这里插入图片描述

事件处理程序

HTML事件

在这里插入图片描述

  • onClick表示点击
  • 缺点：html 与 js没有分开
DOM0级事件

在这里插入图片描述

  • html不区分大小写，js区分大小写
  • 优点：html 与 js分离 缺点：无法同时添加多个事件
    在这里插入图片描述
  • 第一个被覆盖了
DOM2级事件

在这里插入图片描述

  • 优点：不会被覆盖，可以添加多个事件 缺点：写起来麻烦

鼠标事件

在这里插入图片描述

Event事件对象

在这里插入图片描述

  • function(e)中的e就是event
    在这里插入图片描述
    在这里插入图片描述

键盘事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

表单事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 输入回车或失去焦点时触发
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

定时器

setTimeout

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

setInterval

在这里插入图片描述
在这里插入图片描述

debounce(防抖)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 间隔200ms执行一次
throttle(节流)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

辞初
关注
专栏目录
前端学习笔记-黑马程序员JS
01-09
"前端学习笔记-黑马程序员JS" 本资源主要介绍了 JavaScript 的基本概念和语法，包括变量、数据类型、运算符、流程控制、数组、函数、对象、内置对象等知识点。 变量 在 JavaScript 中，变量可以在三种位置书写：...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册六：JS条件语句
01-20
JavaScript是Web前端开发的核心语言之一，它为网页和应用程序提供了动态交互的能力。在JavaScript中，条件语句是控制程序流程的重要工具，它们允许我们根据不同的条件执行不同的代码块，从而实现逻辑判断和决策。本...
元素的属性及样式设置
weixin_48780364的博客
09-13 440
元素的属性及样式设置（小白自结）
JavaScript DOM 中setAttribute()的使用 以及点击鼠标返回函数的处理
ios0213的专栏
05-18 2724
无标题文档 #demo{ position:absolute; top:210px; left:250px; } ul{ margin:0; padding-left:170px; list-style-type:none; } li{ float:left; margin-right:70px; } li:hover{ border-bottom:3px so
JavaScript操作CSS基础知识
WZJ278的博客
03-04 624
关于CSS的一些基础知识
setAttribute设置class,style,事件时的浏览器兼容性
木木的森林的博客
07-01 1632
setAttribute设置class,style,事件时的浏览器兼容性
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
最新发布
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
前端学习 html css js 算法.zip
01-05
前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js ...
前端学习html+css+js.zip
01-05
前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端...
setAttribute()与.style.property="值"的区别
Shellerine的专栏
05-10 5279
混沌的认为都是设置属性的，那两者有什么区别呢。仔细对比后发现，两者设置的属性是不同的。 setAttribute是给html元素属性设置值的。我主要是没有理解html元素属性这个概念。html元素属性就是指的标签中的键值对的前者，例如中的id和class就是html元素属性。 .style.property="值"是用来设置css样式的。例如说document.getElementById("
关于style设置方法，obj.setAttribute("style"."")和obj.style.stylename
weixin_33720078的博客
04-17 521
1、使用obj.setAttribute("style"."")方法； obj.setAttribute("style","-webkit-clip-path: polygon(0% 0%, 66% 0, 33% 100%, 0% 100%);float:none;"); obj.setAttribute("style","position:absolute;background-imag...
getAttribute和setAttribute设置style的兼容问题
Focus-Fe
10-10 1059
其实前面写过一篇“获取和设置目标元素的属性值”的，本文补充说明一下里面的兼容性问题：   先抛结论：     IE6-7在使用getAttribute或者setAttribute，不能直接操作样式 举例： &lt;div id="test" style="height:200px;width:100px;border:1px solid red;"&gt;&lt;/...
使用setAttribute()修改display属性的坑
还在学啦
05-19 7052
今天在慕课网学习的时候遇到一个问题。 有这样一个盒子： #login_box{width:300px;height:150px;background:#eee;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:none;} 用户登录 根据
js-getAttribute与setAttribute的用法
XiaoQ的博客
03-13 4408
今天UI出图里有一个小小的特效，鼠标滑过图标时，图标更换颜色（字体图标本身和北京）正常情况下UI会提供相应的字体图标然后css:hover就可以搞定了，但是UI说没有，只有psd原图还得自己换颜色，本来打算自己把图片转换给字体图标，后来一想好像可以用JS来实现，在加上又是一个小网站，用户对相应速度要求很低（其实是我发现生成字体图标好麻烦还要下载AI），于是我就打算用JS来实现，正好练练手。
html中setAttribute属性给控件赋予新属性
user_app的博客
01-02 2058
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> body{ background: url(img/abc.jpg) no-repeat ; backgrou
深入学习Web前端开发之JavaScript与JSON教程
资源摘要信息:"头歌教学实践平台的《Web前端开发基础 JavaScript学习手册十一：JSON》是一份专注于教授前端开发者如何在JavaScript中处理JSON数据的教程。JSON（JavaScript Object Notation）是一种轻量级的数据交换...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值