赵哎呦-CSDN博客

原创 JS中的事件监听

什么是“事件监听”DOM允许我们书写JS代码，来让HTML元素对事件作出反应；事件：用户与网页的交互动作；eg：点击网页；监听：是为了让计算机随时能够发现这个事件发生了，从而执行程序员预先编写的一些程序；设置事件监听的方法主要有onxxx和addEventListener()两种；最简单的设置事件监听的方法设置它们的onxxx属性；oBox.onclick = function () { // 点击盒子时，将执行这里的语句}常见的鼠标事件监听事件名事件

2022-03-25 11:25:20 24987 1

原创 JS中的DOM（文档对象模型）

什么是DOMDOM是JS操控HTML和CSS的桥梁；最大特点：将文档表示为节点树；节点的nodeType属性可以显示这个节点具体的类型；nodeType值节点类型 1 元素节点，例如<p>、<div> 3 文字节点 8 注释节点 9 document节点（树根） 10 DTD节点（文档类型声明节点）访问元素节点所谓“访问”元素节点，就是指“得到”、“获取”页面上的元素节点；访问元素节点主要依靠docum

2022-03-23 21:48:37 648

原创立即执行函数

IIFE（立即调用函数表达式）是一种特殊的JS函数写法，一旦被定义，就立即被调用；(function () { statements})();

2022-03-22 16:00:10 287

原创 JS中的闭包

什么是闭包JS中，函数会产生闭包；闭包是函数本身和该函数声明时所处的环境状态的组合。函数能够“记忆住”其定义时所处的环境，即使函数不再其定义的环境中被调用，也能访问定义时所处环境的变量；在JS中，每次创建函数时都会创建闭包；但，闭包特性往往需要将函数“换一个地方”执行，才能被观察出来；闭包允许我们将数据与操作该数据的函数关联起来。// 创建一个函数function fun() { // 定义一个局部变量 var name = '哈哈哈'; function

2022-03-21 21:34:21 301

原创全局变量和局部变量

变量作用域JS是函数级作用域编程语言：变量只在其定义时所在的function内部有意义；function fun() { var a = 10; // a是局部变量 console.log(a); // 10}fun();console.log(a); // 报错：Uncaught ReferenceError: a is not defined全局变量如果不将变量定义在任何函数的内部，此时这个变量就是全局变量，它在任何函数内都可以被访问和更改；var b

2022-03-17 21:15:12 118

原创与函数相关（含递归、深克隆、sort方法）

什么是函数函数就是语句（功能）的封装，可以让这些代码方便地被复用；函数具有“一次定义，多次调用”的优点；使用函数，可以简化代码，让代码更具有可读性；函数的定义和变量类似，函数必须先定义然后才能使用使用function关键字定义函数，function是“功能”的意思function name(params) { // 函数体语句}// 匿名函数var fun = function (params) { // 函数体语句 }...

2022-03-17 19:42:30 45

原创数组中的排序

冒泡排序核心思路一趟一趟地进行多次项的两两比较，每次都会将最小的元素排好位置，如同水中的气泡上浮一样；// 冒泡排序var arr = [5,6,8,9,4,1,7];// 一趟一趟比较，趟数序号就是ifor(var i = 1; i < arr.length; i++){ // 内层循环，负责两两比较 for(var j = arr.length-1; j >= i; j--){ // 判断项的大小 if (arr[j]&lt

2022-03-15 13:57:51 46

原创 JS里的数组

什么是数组（Array）用来存储一组相关的值，从而方便进行求和、计算平均数、逐项遍历等操作定义数组的方法使用方括号"[ ]"var arr = ['A', 'B', 'C', 'D']使用内置构造函数var arr = new Array('A', 'B', 'C', 'D');// 表示定义了一个长度为4的数组。但，这4项都是undefinedvar arr = new Array(4);...

2022-03-14 22:17:51 115

原创流程控制语句

条件语句if语句的基本使用if (测试条件) { // 语句块1 // 当测试条件为真，则执行这里} else { // 语句块2 // 当测试条件为假，则执行这里}var a = Number(prompt('请输入一个数字'));if (a%2==0) { alert('偶数');} else { alert('奇数');}if else if多条件分支var score = Number(prompt('请输入成绩')

2022-03-10 20:27:07 53

原创表达式和运算符

表达式种类算数、关系、逻辑、赋值、综合算数表达式意义运算符加 + 减 - 乘 * 除 / 取余 % 加号的两种作用加法：两边的操作数都是数字；连字符：有一个不是数字；1 + 2 // 31 + '2' // '12''1' + '2' // '12'隐式类型转换如果参与数学运算的某操作数不是数字型，那么JS会自动将此操作符转换为数字型3 * '4' // 12隐式转换的本质是内部调用N

2022-03-07 21:57:11 80

原创 JS数据类型

JS中两大类数据类型基本数据类型number、string、Boolean、undefined、nullnumber数字类型所有数字，不分大小、不分整（整数）浮（浮点数）、不分正负，都是数字类型不同进制的数字二进制数值以0b开头；eg：0b10代表数字2，0b1111代表数字15 八进制数值以0开头；eg：010代表数字8，017代表数字15 十六进制数值以0x开头；eg：0xf代表数字15一个特殊的数字型值NANNAN：not a number；即，“不是一个数”，但，它

2022-03-03 22:05:47 384

原创初识JS相关

书写位置在<body>的<script>标签中书写JS代码在HTML中使用<script src=“”></script>，引入.js文件输出语句alert() 语句——弹出警告框alert()是内置函数，函数就是功能的“封装”；调用函数需要使用圆括号字符串要用引号包裹alert('你好, JS');console.log() 语句——控制台输出console是JS的内置对象，通过“打点”可以调用它内置的log方法，方法就是对象

2022-03-02 18:10:20 56

原创 CSS3动画

定义可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀/* 定义动画动画的名字 */@keyframes identifier { /* 起始状态 */ from{ transform: rotate(0); } /* 结束状态 */ to{ transform: rotate(360deg); }}调用使用animation属.

2022-02-22 21:17:51 140

原创 CSS3过渡（transiition）

为一个元素在不同样式之间变化自动添加“补间动画”优点：动画更细腻，内存开销小/* 过渡：什么属性要过渡{宽} 动画时长(必须以秒为单位){1秒} 变化速度曲线{匀速} 延迟时间(s不可省略)*/transition: width 1s linear 0s;可以参与过渡的属性所有数值类型的属性，eg：width、height、left、top、border-radius 背景颜色和文字颜色所有变形（包括2D和3D）如果要所有属性都参与过渡，可以写alltransition:

2022-02-22 20:41:58 191

原创 css中2D与3D转换

2D旋转变形// 顺时针旋转45°transform: rotate(45deg);旋转角度为正，则顺时针方向旋转，否则逆时针方向旋转；transform-origin属性可以使用transform-origin属性设置自己的自定义变换原点/* 以左上角为中心点进行旋转 */transform-origin: 0 0;缩放变形// 放大三倍transform: scale(3);当数值小于1时，表示缩小元素；大于1时，则表示放大元素；斜切变形// （

2022-02-21 20:51:53 243

原创 CSS背景相关

背景颜色（background-color）表示：十六进制、rgb()、rgba()注意：padding区域是有背景颜色的背景图片（background-image）图片路径要写到url()圆括号中，可以是相对路径，也可以是http://开头的绝对路径背景图片的重复模式（background-repeat）值意义 repeat x，y均平铺（默认） repeat-x x平铺 repeat-y y平铺 no-repeat 不平铺

2022-02-21 15:30:57 144

原创 CSS3边框与圆角

边框（border）三要素border: 1px solid #fff; //线的宽度线的形状线的颜色//拆分：拆分后的小属性可以更好的层叠大属性border-width: 1px;border-style: solid;border-color: #fff;线形状常见：solid 实线 dashed 虚线 dotted 点状线四个方向的边框 border-top 上边框 border-right

2022-02-10 20:23:14 275

原创 CSS3的浮动与定位

浮动基本概念最本质功能：用来实现并排 float: left;使用要点：要想浮动，并排的盒子都要设置浮动；且父盒子要有足够的宽度，否则子盒子会掉下去顺序贴靠特性子盒子会按照顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素一定可以设置宽高浮动的元素不再区分块级元素、行内元素，已经脱离了标准的文档流，一律能够设置宽度和高度，即使它是span或者a标签右浮动float: right;实现网页布局垂直显示的盒子不要设置浮动；只有并排显示的盒子才要设

2022-02-09 18:52:40 98

原创 css盒模型

盒模型：所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成width、height：表示内容的宽高盒模型计算盒子总宽度：width + 左右padding + 左右border盒子总高度：height + 上下padding + 上下borderpadding：盒子的内边距，即盒子边框内壁到文字的举例；上、右、下、左margin：盒子的外边距，即盒子和其他盒子之间的距离；上、右、下、左；竖直方向的margin有

2022-02-07 23:59:42 68

原创 css3文本与字体属性

常用文本样式属性color属性可以设置文本内容的前景色；主要用英语单词、十六进制、rgb()、rgba()来表示十六进制：/* 白色 */color: #fff;/* 黑色 */color: #000;/* 常见灰色 */color: #ccc;color: #333;color: #2f2f2f;rgba(): rgba(255 , 0 , 0 , .65) ，最后一个参数表示透明度，介于0~1之间，0为纯透明，1为纯实心font-size属性设置字号，单位：p

2022-02-06 22:08:05 579

原创 CSS选择器和层叠性

层叠式样式表，用来给HTML标签添加样式的语言。美化页面，实现布局。css3选择器标签选择器和id选择器、类选择器、复合选择器、伪类选择器标签选择器和id选择器标签选择器：直接使用元素标签名当作选择器，将选择页面上所有该种标签；通常用于标签的初始化。 ul{ /* 去掉无序列表的小圆点 */ list-style: none; } a{ /* 去掉超级链接的下划线 */ text-decoration: none; }id：#id标

2022-02-05 21:41:27 554

原创表单相关内容

用来收集信息，比如注册、登录、发送评论反馈、购买商品等所有HTML表单都以一个<form>元素开始<form action="" method="post"> </form>其中，action属性表示表单要提交到的后台程序的网址，method属性表示表单提交的方式（get、post）基本控件单行文本框<input type="text">拥有value、placeholder、disabled属性valu

2022-02-04 17:01:04 301

原创关于HTML

超文本标记语言，用来开发网页的语言，主要用标签对的形式为文本添加语义，或者放置文档的部件。后缀名为 .htmlhtml5骨架：<!DOCTYPE html><html lang="en"><head></head><body></body></html>DTD作.

2022-02-03 14:14:25 215

原创 vs code快捷键

在安装sublime插件之后：ctrl + shift + d 复制当前行 ctrl + shift + ⬆ 上移当前行 ctrl + shift + ⬇ 下移当前行多行编辑：按住鼠标滚轮，下拉

2022-02-03 13:39:17 381

weixin_50795415的博客