chihuomiao的博客

Asynchronous JavaScript and XMLAJAX是异步的JavaScript和HTML，读做埃阿斯，也有人会读成阿贾克斯用来异步对象与服务器进行通信发送和接受各种格式的信息，包括JSON/XML/HTML/document但是是搜索引擎支持度不够，因为数据不在页面上所以搜索引擎搜不到AJAX只有在用到的时候会变/不需要重新加载整个页面只更新部分内容它的作用是只更新页面上部分节点而不加载整个页面JSON这个对象只有两个方法JSON更小更快更易解析它可转为任意语言的对

event.target触发事件的对象的引用

键盘事件一般用于表单和全局哦貌似以下的几个键盘事件的书写不是很规范，但是能用！onkeyup当键盘在某个HTML元素上弹起的时候触发，请优先使用onkeyup，因为它是最接近我们日常生活使用的，弹起触发嘛onkeydown当键盘在某个HTML元素上按下的时候触发如果按下不放手会一直触发onkeypress键盘按下（只支持字母键）产生字符后才触发键盘事件之输入框练习在这个小栗子中，我调用了一个属性e.keycode 这是事件对象e自带的一个属性，它的作用是返回一个ASCII表的编

window.onload的用处就是预加载Script语句，有了它可以把script放在前面事件对象跟原型对象一样是自动生成的，在事件绑定完成的时候MouseEvent.下列方法clientX和clientY 相对于浏览器可视窗口左上角原点它们提供了事件发生时应用客户端区域的水平和垂直坐标（与页面坐标不同）for exsample，不论页面是否水平滚动，只要你点击应用客户端区域左上角它都是0screenX和screenY相对于电脑屏幕左上角它提供鼠标在全局（屏幕）中的水平坐标（偏移量）。

JS的一般事件事件是文档或浏览器窗口中发生的，特定的交互瞬间。经过子节点会触发和经过子节点不会触发的区别就是：经过子元素也算是进入/离开，而经过子节点不会触发的把子节点看成自己的组成部分，就不会触发，区别不能说很大，更不能说没有JS创建表格我们在获取元素的时候，如果定义是ID，可以直接使用不用获取 但是不推荐因为怕ID名你起重复忘了开关：定义一个变量，决定一种状态其实就是通过判断真假两种状态来执行不同的语句最常见最简单的就是这种开关灯的效果，真的干什么，假的时候又干.

扩展运算符：点点点它的作用是将可迭代的对象（包括且不限于数组，字符串，映射对象，DOM节点）展开到其独有的元素中1，复制newarr=[...arr]这两个值看上去是一模一样的，扩展运算符把原数组给拍碎了丢在了一个数组环境里2，合并newarra=[...arr1,...arr2],这样可以把两个数组合并。3，传参函数有几个形参加入扩展运算符就可以对传入的形参进行简单筛选举个栗子，定义变量x等于数学函数点max（...数组）就可以把数组最大值赋予x啦！4去重扩展运算符

主要包括创建添加插入替换删除克隆创建：document.createElement（'标签名'）创造一个指定标签元素，返回的是一个创建好的元素节点、如果浏览器无法识别标签名就会生成一个未知HTML元素一般流程----1创建空对象（只能用document调用）2为空元素添加关键属性和内容3将空元素加载到dom树中添加：父节点.appendChild（子节点）把这个子节点追加到父节点下所有子元素的末尾，如果加入的子节点已经存在DOM树中，那么就会改变该子节点的位置.

window.getComputedStyle这方法返回的是一个对象，这个对象呢，返回的东东差不多是CSS所有属性的值，啧。它括号里面可以装一个对象后面可以也可以不跟一个要匹配的伪元素字符串element.className 这个方法为指定元素提供了设置修改class属性的功能，因为class是保留字嗷早期核心DOM现用于自定义属性设置：元素.setAttribute('属性名'，'属性值')用来设置指定元素上的某个属性值。如果属性已经存在，就更新这个值；不然的话，使用指定的名称和值添加一个新

网页节点node分类1标签2属性3文本4注释HTML元素是元素节点尽量使用getelebysomeone查找效率高条件复杂使用queryselector查找每一个节点都不是独立的可以相互访问元素是开始标签加内容加结束标签DOM的节点在逻辑上呈现树状连接节点的父子关系节点.parentNode可以返回指定的节点在DOM树中的父节点.可以在后面无限接力，一直往上找节点.parentElement返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM元...

Browser Object Model 浏览器对象模型可视化窗口大小视口宽window.innerWidthdocument.body.clientWidthdocument.documentElement.clientWidth高就是把后面的width换成height可以封装一下方便使用写三条是因为BOM的兼容性很差，你写三条兼容的浏览器就...

遍历对象方法一个变量对象名.object.keys（原来没有发生变化的对象的名称）:利用这个方法获取所有属性，返回数组变量对象名.object.values（原对象名称）:利用这个方法获取所有值，返回数组变量.object.entries（原对象名称）:利用这个方法获取所有属性和值，返回二维数组当你给函数传了参数之后会产生有arguments属性当前函数内置对象arguments属性它是一个对象具有length一般的呢，arguments用下标做为它的属性永远指向当前函数调用者传入的参数

冒泡排序一堆，数字类型的数据进行排序让第一个数和第二个数进行比较，如果第一个数更大，让它继续和下一位数再次比较否则就不让它跟下一位继续比较，这样操作一圈之后可以比较出最大的数然后把这个最大的数丢到一边不管在剩下的数中再次这么玩，这样我们就获得了第二大的数，丢到一边不管再在剩下的数中继续循环这样最大的数垫底，越往前越小，这就是冒泡函数之所以这么命名时因为很久以前的解释是，这堆数假设在往水底沉，相互比较最大的先沉到最下面，然后挨个对比让其它的冒泡泡一样冒上来再继续对比原理：相邻的

ES5就是ECMAscript第5版本遍历for（变量等于0变量小于数组长度减一变量++）{i}for(let i in arr){arr[i]}循环中用定义变量i开始是因为index，后面的继续往下接j，k，l…es5新增遍历数组方法forEcah数组名点forEach（函数（形参））用于取代for循环，这个方法它没有返回值三个可选形参分别是数值，下标，数组字符串减号点repeat括号数量 可以输出一排线-------------------------------------

对于this函数，谁调用指向谁，我们使用this函数是为了方便后期好改。箭头函数中没有this指向，如果在箭头函数中有，则向上一层函数中查找this，直到找到window还没有找到就返回undefined或者报错这是因为对象没有作用域，大括号里找不到。但方法体有，函数有作用域所以如上图所示，显示的结果为解决方法是在外面设置一个，简单粗暴有效。改变this的三种方法callcall（）方法的第一个参数必须是指定的对象，方法的原参数，挨个放在后面函数名.call（）第一个参

如图所示啊，我们有以上的函数声明方式这就是箭头函数啦，上图中上面的函数和下面的函数的效果是一样哒！大括号去掉啦！小括号也省掉了就算没有参数，也可以用下划线给它空一个出来，也是可以的。那么箭头函数有啥用呢？变成箭头函数后好像短了一点吼。（￣︶￣）↗　----------------------------------------------------------------------------------------------------..

字符串比较大小的时候会只比较首字母，但是奥，字符串是可以比较大小的，虽然我没加parseInt，但是依然可以比较出大小，不管多少位，是不是首字母一样。前面的文章有写原因啦~.函数 函数内的变量必须要调用才能在外面打印有系统函数和自定义函数两种函数常用系统函数：parseInt （"字符串"）字符串转整型数字；parseFloat（"字符串"）将字符串转换为浮点型数字。NaN 返回的意思是not a number 。isNaN 用于检查其参数是否是非数字，不是数字返回...

表单校验的思路就是排错的过程，发现错误即使给出提示，终止下一步操作match对象方法：Math.ceil（变量） 对小数进行上舍入，复数的话-25.5就是25因为25更大呀喵！Math.floor(变量) 下舍入 负21.7会变成22，正21.7会变成21.round（）四舍五入为最近的数 当负数小数点是点5的时候，会舍去.random()返回0.0-1.0的随机数包括0不包括1。Math.floor(Math.random()*(max - min+1))+min;最大最小是数组变量的下标。

字符串空格也是有长度的str.trim();可以把字符串两头的空格去掉，字符中间的空格保留给出错误提示：获得错误，在if判断的时候，可以设置！取反为truesplit（）：分隔字符串使其称为以括号内第一个参数为分隔的数组，第二个参数限制数组出现几个值，写1就是出现一个。点toLowerCase，返回小写的字符串点toUpperCase，返回大写的字符串.substring()提取字符串下标x，y中两个之间的字符会包含x的值但不包括最后的字符y的值，如果只写了一个下标，就是从这个下标往后的拿过

使用构造函数String实例化一个对象字符串，这个方法定义的字符串的类型是object一般用第二种：声明字符串名并赋值，这种方式创建的是字符串类型数组也是object，函数也是object七大主要数据类型包含下列七个stringnumberbealoonsymboolundefinednullobject(引用数据类型，上面六个基本数据类型)引用数据类型：具有堆内存（实际值），栈内存（内存地址）。引用数据类型的改动是联动的哦！引用数据相等的话，两个共用一个堆内存而栈内存做了一个指向.

let 声明一个变量并赋值是为了让你在这个语句块里使用，不加就变成全局变量啦使用Date对象获得时间数据首字母大写的内置函数称为构造函数声明一个实例化对象名字随便，可获得当前时间let 随便 = new Date（）括号里的变量是字符串，格式 月月，天天，年年年年，时时：分分：秒秒 也可以写new Date括号引号年-月-日空格时：分：秒（-可以换成/）如果写（2022，3，22，10，20，30）纯数字类型，也能显示但...

关于对象可以使用for-in循环 把它的属性值输出出来属性都是字符串，所以可以使用输出语句（对象名引号属性名）把值打出来.concat ：声明合体的数组=数组1.concat(数组2);把两个数组合并起来数组名点push（变量）：把一个变量塞进去在数组最后面数组点unshift（'变量'）：把一个变量塞到数组的最前面并返回给你新数组长度数组.shift（）;：把数组最前一个字符删除数组点pop（）把数组最后面一个数删除数组.indxof（'变量'）：如果字符不存在..

对象是带有属性和方法的特殊数据类型对象名，属性名称内置对象：arry date用于操作时间日期 string用于支持对字符串的整理 math处理数学任务包含若干数字常数自定义对象：对象={属性名：属性值，属性名：属性值……}打印或弹出（）对象名。属性名称对象名.方法名称（参数内容）请注意如果你的值是字符串需要加引号如果你打印的是对象名加属性名就不要加引号啊喵给对象添加属性对象名。属性名=变量删除对象属性delete 对象名点属性名；数组它包含的是一堆变量，或字符可以不

接上一次的双循环用双循环输出一个矩阵break用于中止循环，使程序跳到循环块外的下一个语句。在循环中位于break后的语句将不再执行。当数组中有一个数触发条件break，那么即使后面有符合执行条件的数也不会再执行。break语句不仅可以用在for循环中也可以在其他循环中使用数组名.length 可以作为一个值放在条件中注意使用break中止语句的时候如果有提示语句要放在break前面continue：在循环结构中用于循环，它会跳过本次变量的执行语句进入变量的下一位...

while循环while（循环条件）{循环部分 迭代部分}声明变量 当while变量处在一个条件中{执行操作；改变变量}写之前先想想有几个变量wile（true）{输出语句}这就是死循环do-while循环do{循环操作}while{循环条件}至少会执行一次函数三个特点： 实现功能，返回结果，可以有参数首先定义一个函数function fn（）{输出语句}小括号里可以有变量，称为形式参数，形式参数可以不止一个。这个变量如果给了值就变成了实际参数，实际参数可以被打印或弹出函.

只有if，每个if都会执行if （条件一）{}else if（条件二）{} else{} 它只会执行一次有效的是不是稍微理解一点什么叫逻辑能力了？在我看来，所谓的逻辑能力就是注意力和专注力的分散程度，脑子里有个沙比不可怕，可怕的是脑子里全是沙比的沙比行为做的沙比事情，这如果还要你逻辑清晰，思维敏捷，这不强人所难么。var后一个定义的会把前一个给覆盖变量提升：先使用变量然后用var定义变量会导致变量提升，浏览器返回undfine使用let不会产生变量提升，它会说不行es6提供了新的声明...

++在对象前面先+1再赋值，++在对象后面，先赋值再+1，是不一样的。不要连续比较因为只要有一个符合就会回复一个true。&&：与号 不可以连续比较但是可以加与号一起比较，比如num1>1&&num<3.可以表示一个数再另外两个数之间；一个真的条件加上与号后加上语法可以执行语法，一个假的条件加上与号则不会执行语法 ，且&&可以连续使用哦，只要条件都是真的就能执行。||：或号 表示左右两个条件满足一个就可以返回true了，举例，fales

JavaScript：基于对象和事件驱动的一种脚本语言。基本结构：ecmascripe规范decument object model元素browser obiect model浏览器对象<script type="text/javascript">java语句</script> 这个语句你塞在文档的任何位置都可以， 支持简写。三种使用方式1.在body里面写<script>document.write('负心人') </script>

元素{height：50px;text-align: center;line-height: 50px; }行内元素的水平垂直居中元素{display: flex;justify-content: center;align-items:center; } 使用flex布局使块级元素水平居中父元素{dispaly：relactifv ;} 子元素{display:absoulte; left50%;top50%;magin-lift和magin-top的值为 负的自身宽度的一半...

@media空格设备类型 {元素{属性：值;}}screen表示电子屏幕print表示打印机屏幕所有设备使用媒体查询可以用@media all@media空格and空格（你想要加的条件）{元素{属性：值;}}常见的条件有max-width表示小于等于这个宽度的时候做什么min-width表示大于等于这个宽度的时候做什么条件是可以叠加的哇，记住and的左右都有空格哦设置color颜色时要注意，颜色是可以被body里面的子元素继承的但是如果子元素有自己的颜色，就会使用自己的...

清除内外边距后再自己画样式比较方便察看*{margin：0;padding:0}长江后浪推前浪，后浪死在沙滩上flex布局的诞生几乎代替了float的一般应用，假如你很喜欢用float，为了更好的贴合实际还是要转变一下观念多用用flex的呢，诗和远方，越远越脏~just-content调整主轴方向排列（有水平垂直两种主轴哦！）居中的话一般还加个align-item：center 纵横都居中 就是水平垂直居中啦margin：0px空格auto只能水平居中啦！不是我在水字数（真的不是

相较于它诞生之前的环境flex更加广泛因为不用写浮动了 比以前在垂直居中上更加容易 2016年后基本就是它的天下了Flexible Box跟浮动不同的是它不脱离文档流，自动计算元素尺寸可控元素布局方向给块元素设置display：flex 它的子元素自动成为容器成员称为flex项目flex具有水平主轴 main axis 垂直交叉轴 cross axis 项目默认沿主轴排列块元素设置flex：display：flex； 行内元素也可以设置哦：display：inline-flex；设为

要实现translate3d效果要在父元素上加属性perspective：透视效果 （你想离它多远呢？）在父元素transform-style: flat（默认）;设置为preserve-3d让子元素有3d效果transform3d（水平位移逗号垂直位移逗号视距）transform: translate3d(0,0,200px);=transform: translateZ(200px);近大远小嘛，看上去跟transform：scale一样如果你的视距超过了你离它的距离 你会看穿它r..

transition过渡属性跟transfrom可不一样哦transform是translate位移、scale缩放、ratate旋转、skew倾斜transition：CSS属性空格转化用时空格过渡函数空格延迟时间;CSS属性有很多，可以偷懒写个all转化用时的意思就是这个过渡效果的时间你想要它花费多少秒过渡函数包括：linear 匀速过渡 ； ease（默认 开头慢中间快结束慢 ；ease-in 开始慢，然后加速； ease-out 开始快，然后减速；ease-in-out 慢慢

定位position：默认定位、相对定位、绝对定位、固定定位static默认 ：设了跟没设一样，啥都看不出来-------------------------------------------------------------relative相对自身偏移定位;top：;left：;right从右向左移动：;bottom:;相对定位的盒子原来位置保留不变，它依然还是文档流甚至对父级和相邻盒子没有影响 它移动的原点是元素左上角absolute绝对定位以祖先元素定位。如果不设置则.

CSS3变形元素：{transform：值;}可以调用函数：translate平移函数 后面跟x,y轴参数中间是逗号可以加在伪类里如果只需要移动水平或者垂直距离可以单独设置translateX 或者translateY值可以是负的scale中心缩放函数 后面跟两个值分别代表宽度和纵向标量只设置一个值时第二个值默认等于第一个值比如scale（0.5）就是缩小一半；scale（ 2）就是两倍 ；scale（0.0）是消失哦。可以单独设置scaleY或scaleX相当.

在块元素的排列上浮动很好用float：left /right /none加了浮动之后，原本围绕图片的文字现在好像跑到一边了,不再包裹图片且图片超出父元素显示，脱离正常的文档流，它把div盖住，是无法成为内容把div撑起来的clear：left/right/both（左右不允许出现浮动/none清除浮动带来的父级塌陷问题1在浮动元素后面加上空div设置style=clear：both ps但是空div会造成冗余2给父元素设置高度：ps但是会降低扩展性3给父元素设置overflow：...

CSS3背景渐变主要是一种线性一种径向线性渐变linear-gradient（position，color1，color2……）元素{属性为linear-gradient（不给方向只有两个值从上到下渐变）to bottom,red ,yellow：从上往下红色渐变为黄色to top：从下往上to right：从左往右to left：从右往左颜色可以有好多个to bottom right：从左上到右下角渐变 right可以写在前面径向渐变radilal-gradient（c

border-radius：按左上右上右下左下的顺序设置四个边框的角的半径当元素的高度和宽度相同，圆角的半径为宽度的一半或直接设50%可以画个圆设置一个值1就是所有的角都按值1变化设置值1 值2 是设置了左上角和右下角的值1 右上角和左下角的值2三个值呢？第一个值表示左上的弯曲程度第二个表示右上角和左下角的圆润程度 第三个值表示右下角的圆角大小你要设置边框圆角首先你得有边框吧？可不要忘了哦box-shadow：（inset）x-offse空格y-offset空格blur-radiu...

首先< input type=number：提供一个小箭头给你增加、减少 min=最小值 max=最大值 step=步长 value=默认值range：会有一个拖动条 min=你拖到底提交的最小值 max=你拖到头能提交的最大值 step=步长 value=默认值date:选择日期month：选择月份week：还有选第几周的time：选择时分datetime：UTC时间 给你一个输入框输入时间datetime-local：本地时间要提交的内容要包裹在form标签里可...

元素{contentEditable;}允许用户编辑内容。本来只是显示了内容，加上这个标签用户就可以更改了。元素{hidden;}相当于display：none ;隐藏元素内容必须了解一下HTML5废除了哪些元素html的vision：版本号，写也行。不写也行a或者link的charset：UTF-8是个好东东啊，默认了吧 不用写了呢body的align：centen ：现在我们用的是style{text-align=center;}CSS3的高级选择器x元素：first-of-typ