04 2022 档案
摘要：location对象 什么是location对象 window对象给我们提供了一个location属性用于获取或设置窗体的URL ,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。 什么是URL 统一资源定位符(Uniform Resource L
阅读全文
摘要：this只有在函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象 全局作用域或者普通函数中this指向全局对象window,（注意定时器里面的this指向window） JS console.log(this); // 指向window全局对象 functio
阅读全文
摘要：💚获取元素的坐标位置 clientX clientY : 事件触发时, 鼠标相当于浏览器窗口(坐标原点)的偏移值 pageX pageY : 事件触发时,鼠标相当于文档坐标原点的偏移值 offsetX offsetY : 事件触发时,鼠标相对于事件源对象的偏移值 screenX screenY :
阅读全文
摘要：注册事件（绑定事件） 给元素添加事件，称为注册事件或者绑定事件 注册事件有两种方式：传统方式和方法监听注册方式 传统注册方式 利用on开头的事件 onclick <button onclick = 'alert("hi~")'></button> btn.onclick = function(){}
阅读全文
摘要：if : 条件语句（判断语句） for : 循环语句 while ：循环语句 each : 循环语句 html结构： HTML <h1 class="text">hello</h1> <div class="wrap">选择器</div> <p class="item">多选一吧</p> <p cl
阅读全文
摘要：作用域： 声明变量： 全局变量： 在页面的最外边声明的变量是全局变量。拥有全局作用域 局部变量： 在某个选择器内或函数内声明的变量就是局部变量 ， 拥有局部作用域 变量的作用域： 全局作用域: 在任何地方都可以访问使用 局部作用域: 只能在变量声明的地方使用 html结构： HTML <ul cla
阅读全文
摘要：sass变量的声明： 通过 $ 声明变量 ， $ 后边的就是变量的名字， 比如：$wd;声明变量后需要给变量赋值 ,比如 $wd:200px 变量的命名规则： 变量名都是自定义的 变量名可以使用字母，_ 作为开头，后边可以使字母，数字，_ , - 的组合，比如：$wd:100px $_ht:100p
阅读全文
摘要：三种动态创建元素的区别 docment.write( ) element.innerHTML docment.createElement( ) 区别 docment.write( ) 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘 innerHTML 是将内容写入某个DOM
阅读全文
摘要：节点操作 利用节点层级关系获取元素 网页中所有内容(标签，属性，文本，注释)都是节点，节点使用node 来表示 利用父子兄节点关系获取元素 逻辑性强，但是兼容相差 节点至少有nodeType(节点类型)，nodeName(节点名称)和nodeValue(节点值)这三个基本属性 元素节点 nodeTy
阅读全文
摘要：API和 Web API 1.API是为程序员提供的一个接口，帮助我们实现某种功能 2.Web API是浏览器提供的一套操作浏览器和页面元素的API(BOM和DOM) 3.Web API主要是针对浏览器提供的接口，主要针对浏览器做交互效果 4.Web API一般都有输入和输出（函数的传参和返回值），
阅读全文
摘要：图示： 栈内存： 栈内存空间大小是固定的，存储的是基本数据类型 ； 变量名和值在同一空间中 堆内存： 堆内存空间是动态分配的， 大小不固定, 存储的是引用数据类型； 值在堆内存， 变量名在栈内存中，此时变量名称之为地址 指针： 指针也就是内存地址，指针变量是用来存放内存地址的变量，不同类型的指针变量
阅读全文
摘要：计时器控制元素移动 setTimeout() setTimeout(handler, timer) : 间隔指定的时间 执行一次代码 JS let count =1; let time = setTimeout(function(){ count++; console.log(count); },1
阅读全文
摘要：说明： this 指向它所引用的对象 （this最终代表的是一个对象） this指向可以更改； 通过 call() 和 apply()方法 修改this指向 注意💡： 全局作用域下 this 指向window JS // 全局作用域下： window是顶层对象(window 对象的属性和方法拥有全
阅读全文
摘要：Math对象介绍： 是js内置的对象，可以直接使用 ； 它拥有一些数学常数属性和数学函数方法 ； Math 不是一个函数对象。 Math 用于 Number 类型 Math的属性： JS console.log(Math.E); //2.718281828459045 //Math.PI 圆周率 c
阅读全文
摘要：js对象与json对象的区别 对象： js的对象 object ; 它用于存储各种键值集合和更复杂的实体 JSON ： 是一种轻量级的数据交换格式；采用完全独立于编程语言的文本格式来存储和表示数据，用于在服务器之间传递数据 注意⚠️： json 对象只有数组和对象组合形式； 不存在方法 js 对象是
阅读全文
摘要：对象 object：属性和属性值是以键值对key/value的形式存在的 对象中可以存储任意类型的数据；它用于存储各种键值集合和更复杂的实体 定义对象： JS let obj = { key1:value1, key2:value2, ... } 示例1： JS let school ={ // 键
阅读全文
摘要：函数(方法)： 通过function关键字声明函数；函数必须被调用才能执行 1.无参函数 JS //name是自定义的函数名遵循变量的命名规则 function name(){ //函数体： } 调用执行函数： 通过 函数名( ) 调用执行函数 2.有参函数 参数个数不受限制 JS function
阅读全文
摘要：indexOf() lastIndexOf() 实现数组去重 JS // indexOf() lastIndexOf() 实现数组去重 let arr = [1, 2, 3, 1, 2, 3, 4, 5, 1, 1, 1, 1]; for(let i = 0; i < arr.length; i++
阅读全文
摘要：for循环遍历数组 JS let arr = [10, 23, 45, 56, 89]; for(let i = 0; i < arr.length;i++){ console.log(i,arr[i]); } for-in循环 JS let arr = [10, 23, 45, 56, 89];
阅读全文
摘要：解释说明 数组 : 数组对象是使用单独的变量名来存储一系列的值。 数组可以用一个变量名存储所有的值，并且可以用索引值访问数组中的任何一个值。 数组中的每个元素都有自己的的ID(索引值)，以便它可以很容易地被访问到。 数组对象的属性 length : 数组的长度 声明数组的方式 数组中可以存放任何值
阅读全文
摘要：字符串不可变（所以不要大量拼接字符串） 字符串所有的方法都不会改变字符串本身（字符串不可变），操作完成会返回一个新的字符串 属性： length ：获取字符串的长度 JS // 获取字符串的长度 let str = 'hello'; let len = str.length; console.log
阅读全文
摘要：算数运算符 + - * / % 注意⚠️： + 运算符比较特殊：进行求和运算或字符串拼接操作 求和: + 两边的操作数都是数值类型，进行求和运算 拼接： + 只要有一边是字符串类型，则执行拼接操作，结果是一个字符串 示例🟢 : 数值类型和字符串类型的运算 JS var num = 10, coun
阅读全文
摘要：JS的组成 1.ECMAScript javascript语法 2.DOM 页面文档对象模型 3.BOM 浏览器对象模型 JS的引入方式 ⚠️注意： js 可以在页面的任何地方使用 1.内嵌JS：通过 script 标签引入：在页面的任何地方 2.外链JS：通过 script 标签的src 属性引入
阅读全文
摘要：git介绍：版本管理工具（分布式版本控制工具）属于命令行操作工具（分支之间不存在层级关系） 常用的命令行操作 进入某个文件夹 cd 文件夹名 返回上一级文件夹 cd .. 查看命令行的历史纪录： 通过 ↑ 或 ↓ 查看 git初始化配置 安装完Git之后，要做的第一件事就是设置你的用户名和邮件地址。
阅读全文
摘要：介绍： Sass (Syntactically Awesome StyleSheets) ，Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高
阅读全文
摘要：CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需
阅读全文
摘要：元素默认是基线对齐 vertical-aligin: 图片和文本的垂直方向的对齐方式 设置对齐方式时，要把所需要对齐的元素都添加该属性，并且取值保持一致 适用场景： 适用于行内块元素和行内元素，以及表格单元格（table-cell）元素垂直方向对齐方式，不能用于块级元素 取值： baseline 基
阅读全文
摘要：一、过渡transition 特点： 过渡是两个状态之间的过渡，只能从一种状态过渡到另一种状态 过渡需要事件触发，不能自动执行 综合属性: 可以同时控制多个属性进行过渡，多个属性之间用逗号隔开 CSS transition: width 2s linear 1s,height 2s linear 1
阅读全文
摘要：1.单行文本水平居中 说明： 只针对块元素中的行内元素，或者 行内块元素，使用text-align:center; 属性 HTML： <div class="box"> <span> 我是文字 </span> </div> CSS: .box { background-color: pink; he
阅读全文
摘要：1.上下margin重叠问题 HTML: <div class="box1"></div> <div class="box2"></div> CSS: * { margin: 0; padding: 0; } .box1 { height: 100px; width: 100px; backgrou
阅读全文
摘要：1.影响 让子元素默认横向排列 （默认主轴：水平方向；相反侧轴：垂直方向） 弹性盒子会把行内元素，变成块元素 只有一个元素时，使用margin:auto 自动居中 2.修改主轴方向 属性：flex-direction 属性值： row (默认:水平排列) row-reverse 水平取反排列 col
阅读全文
摘要：1.单行文本溢出显示省略号 HTML: <div> Visual Studio Code(简称 VS Code)是一个由微软开发,同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码 编辑器,编辑器中内置了扩展程序管理的功能。 </div> CSS: div{ he
阅读全文
摘要：以阿里矢量图标库为例: 1.添加图标 1.登录网站 2.找到自己需要的图标，点击加入购物车 3.点击左上角购物车图标，讲刚刚选中的图标添加到项目，选中要加入的项目，点击确定 2.使用方式（下载后使用） 1.在项目设置里面，勾选这几个选项，保存 2.将该项目的图标下载到本地，会得到一个压缩包 3.下载
阅读全文
摘要：1.怪异盒模型 语法：box-sizing:border-box; padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度。 HTML : <div> 怪异盒模型 </div> C
阅读全文
摘要：CSS伪类 1.链接伪类 :link 未访问链接 :visited 已访问链接 :hover 鼠标划过链接 :active 已选中的链接 2.结构伪类 first-child 选择父元素的第一个子元素。 last-child 选择父元素的最后一个子元素。 nth-child(n) n取值：数字，ev
阅读全文
摘要：字体模块（@font-face） 语法： font-family:你的字体名称 src:url(你的字体文件路径) font-weight：你的字体粗细 font-style:你的字体样式 HTML Code: <div>天道酬勤</div> CSS Code: @font-face { font-
阅读全文
摘要：文本阴影（text-shadow） 属性: 水平阴影位置 垂直阴影位置 阴影模糊距离 阴影颜色 ; HTML Code: <div class="box1"> 文本阴影 </div> CSS Code: .box1{ width: 100px; height: 100px; line-height:
阅读全文
摘要：radio单选框，默认样式小圆圈，默认不会互斥，想要互斥有需要给一组单选框添加相同的name属性 <div>1.你对京东首页满意度如何</div> <div> <input type="radio" name="aaa" id="">非常满意 </div> <div> <input type="ra
阅读全文
摘要：父元素不写高度时，子元素写了浮动之后，父元素会发生高度塌陷 示例代码: HTML代码: <div class="box"> <div class="box-l">left浮动</div> <div class="box-r">right浮动</div> </div> CSS代码: .box{ wid
阅读全文
摘要：缝隙未解决前缝隙解决后 1. 方案一 给父元素设置font-size:0;然后给子元素重新设置font-size style="font-size:0;" <style> <!--父元素设置font-size:0;--> .bg{ font-size: 0; } .box1{ height: 100
阅读全文
摘要：一、盒子模型 1.内边距padding 1个值，4个方向一样 padding：10px; 2个值，上下，左右 padding：10px 10px ; 3个值，上 左右 下 padding：10px 10px 10px; 4个值，上 右 下 左 padding：10px 10px 10px 10px;
阅读全文
摘要：1.背景属性 background background-color 背景颜色 background-color: red ; background-image 背景图片 background-image: url() ; background-repeat 背景图片的平铺 background-r
阅读全文
摘要：CSS属性 1.文本属性 font-size 字体大小 单位是px，浏览器默认是16px，设计图常用字号是12px font-family 字体 多个字体中间用逗号连接，先解析第一个字体，如果没有解析第二个人字体 color 字体颜色 color:red; color:rgb(255,0,0)取值在
阅读全文
摘要：标题标签 <h1> 🌹🍀🍎h1 h2 h3 h4 h5 h6 段落标签 <p> <p></p> 换行标签<br> <br/> 水平线 <hr/> <hr/> 加粗 <b> or<strong> 通常标签<strong>替换加粗标签<b>来使用 倾斜标签<em> or <i> 通常标签<em>替
阅读全文
