- 博客(26)
- 收藏
- 关注
RSS订阅原创 git基本命令的使用
git使用：git config --global user.name "" 配置自己的用户名git config --global user.email "" 配置自己的邮箱地址如果使用了--global 命令只需运行一次就会用具生效查看全部全局配置git config --list --global查看指定的配置项git config user.name打开帮助手册git help config（浏览器打开） / git config -h(本地打开)将当前目录转换为git仓库...
2022-04-04 21:29:45
181
原创 JS-BOM
一、BOM的顶级对象（window）（可省略）window常见的事件onload 和DOMContentLoaded1.onload事件 等待页面内容全部加载完毕之后，才执行js代码2.DOMContentLoaded事件 是等DOM加载完，不包含图片、flash、css等 ，加载速度比load快resize事件当window的大小发生了变化就会触发，window.innerWidth得到窗口宽度二、定时器1.setTimeout定时器语法规范：window.setTimeo
2022-04-02 20:48:30
196
原创 动画 和轮播图（原生JS）
一、动画原理利用定时器不断实现某个操作二、简单动画函数封装简单动画函数封装obj目标对象 target 目标位置停止动画的本质是停止定时器function animate(obj, target) {清除以前的定时器，防止调用多个定时器clearInterval(obj.timer);使用对象属性，减少开辟空间obj.timer = setInterval(function() {操作}, 30);}三、缓动动画原理缓动动画函数封装obj目标对象 ta
2022-03-29 19:38:04
448
原创 offset系列属性
offsetTop/offserLeft 可以返回元素的偏移位置（不带单位为的数值）相对于带有定位的父级 没有则是相对于bodyoffsetWidth/offsetHeight 可以得到元素的大小 是包括padding+border+widthclientWidth 得到的元素大小不包含边框offsetParent 返回带有定位的父亲节点如何计算出鼠标在盒子里的坐标x = e.pageX - this.offsetLeft;y = e.pageY - this.offsetTop;
2022-03-29 16:02:47
260
原创 DOM事件流的三个阶段
在所有的现代浏览器当中——除了IE9之前的版本——都实现了DOM2标准事件模型，即事件处理过程的三个阶段：捕获，目标，冒泡；（1）捕获阶段：当我们在 DOM 树的某个节点发生了一些操作（例如单击、鼠标移动上去），就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段（Capture Phase）。（所有经过的节点，都会触发这个事件。捕获阶段的任务就是建立这个事件传递路线，以便后面冒泡阶段顺着这条路线返回 Window。）在目标元
2022-03-29 13:41:19
701
原创 JS-DOM-监听事件
一、 事件侦听注册事件 addEventListener(1) 里面的事件类型是字符串 必定加引号 而且不带on(2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）传统注册事件只能给一个元素注册一个同类型的事件 监听注册事件可以二、删除事件1.传统方式删除事件事件 = null；（divs[0].onclick = null;）2.监听事件删除removeEventListener （divs[1].removeEventListener('click', fn)
2022-03-20 14:29:45
2811
原创 JS-DOM-节点
一、父亲节点parentNode 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null二、子节点（集合）1.childNodes 所有的子节点 包含 元素节点 文本节点等等2.children 获取所有的子元素节点 也是我们实际开发常用的三、获取子节点的第一个元素和最后一个元素1.firstChild lastChild2..children[0] .children[ol.children.length - 1] 实际开发的写法 没有兼容性问题四、兄弟
2022-03-20 14:04:54
100
原创 JS -DOM- 操作元素
一、事件三要素1.事件源（事件触发对象）2.事件类型 如何触发的 3.事件处理程序（通过一个函数赋值的方式完成）二、改变元素文本内容1.innerTEXT 给元素添加文本内容 可读写 但是不识别 空格 换行 html标签2.innerHTML 添加元素文本内容 可读写 识别空格 换行 html标签3.value 表单元素通过value属性添加 （button除外）三、修改元素属性通过获取元素加 .属性 = ‘’；的方法来修改四、修改元素样式element.style el
2022-03-20 13:47:22
79
原创 JS获取元素
一、通过id获取元素document.getElementById（''）;二、通过标签获取元素.getElementsByTagName('');返回的是 获取过来的元素对象的集合 以伪数组形式存储这个方法不管有没有这个元素都会返回伪数组三、通过类名获取元素.getElementsByClassName（‘’）；根据类名获取某些元素集合四、通过选择器获取元素.querySelector（）根据选择器返回指定选择器的第一个元素对象document.querySel
2022-03-15 21:10:18
2930
原创 字符串的相关操作
一、根据字符返回索引号str.indexOf('要查找的字符'，起始位置的索引号)var str = '改革春风吹满地，春天来了';console.log(str.indexOf('春')); //2console.log(str.indexOf('春', 3)); //8二、根据位置返回字符1. .charAt(index)2. .charCodeAt(index) 返回相应位置的字符的ASCII值，目的是为了判断用户按下了哪个键3. .str[index] h5新增的
2022-03-15 21:04:10
73
原创 数组的相关操作
一、判断是否为数组1.instanceof 来判断是否为数组 返回true或falsevar arr = []; arr instanceof Array；2.Array.isArray(参数);H5新增的方法 ie9以上的才支持Array.isArray(arr）二、添加删除数组1.push()在我们数组的末尾添加一个或多个元素 push的返回值是数组的长度2.unshift在数组前面添加元素 返回值也是数组长度3.pop删除最后一个元素，返回值是删除的元素4.shif
2022-03-15 20:58:59
77
原创 对象（Math对象 日期对象）
属性和方法是在对象里面的，必须搭配对象使用变量和函数是单独存在的，可以单独使用一、创建对象的三种方法：1.利用对象字面量创建对象{}var obj = {};2.利用new Object 创建对象var obj2 = new Object();3. 构造函数的语法格式function 构造函数名() {this.属性 = 值;this.方法 = function() {}}new 构造函数();二、遍历对象使用for（var k in 对象）{ } k
2022-03-15 20:51:45
104
原创 JavaScript的函数
return后面的代码不会被执行，return只能返回一个值，并且值最后一个值没有return则是undefinedreturn可以退出循环还可以退出函数在函数外面声明的变量属于全局变量，还有在函数里没有声明直接赋值的也属于全局变量全局变量只有浏览器关闭的时候才会销毁，比较占内存资源局部变量 但我们程序执行完毕就会销毁arguments（是函数里面特有的自带的）可以存储传过来全部实参，是一种伪数组伪数组具有length属性，还有索引的方式存储作用域链，在同名变量中使用最近的变
2022-03-13 16:07:45
955
原创 运算符和逻辑短路
运算符的优先级，先* / 在+ - 有括号先算括号里的浮点数运算会出现问题，是因为十进制和二进制的精确度不一样导致转换时会出现误差,所以不要判断两个浮点数相等例如： console.log(0.2 + 0.1); //0.30000000000000004前置递增运算符相当于 num = num +1; 单独写时没有区别前置递增是先加1在返回，后置是先返回再加一逻辑短路：逻辑与短路运算，找假的那个，假后面的表达式不在执行逻辑或短路,找真的那个，真后面的表达式不在执行例如：
2022-03-13 16:02:59
74
原创 变量 数据类型 数据类型之间的转换
prompt（’‘）这是一个输入框但是返回值是字符串类型的alert弹出警示框，输出的展示给用户console.log在浏览器的控制台输出，给程序员看的变量：只声明不赋值，结果是undefined 未定义的js里面允许不声明直接赋值，但是不提倡变量区分大小写变量不能用关键字遵守驼峰法js中的变量数据类型是只有程序在运行过程中根据等号右边的值来确定的js的变量数据类型是可以动态变化的尽量不要使用name，在浏览器中name有特殊含义变量之间的相互转换数据类型
2022-03-10 18:12:51
157
原创 阿里百秀移动端 （响应式布局（Bootstrap））
响应式布局：通过媒体查询在不同的屏幕将container的宽度改变基于Bootstrap的响应式开发：在不同屏幕下将container划分为12份，超小屏幕下（<768px）加类前缀（.col-xs-份数），小屏幕（>=768px）（.col-sm-）,中等屏幕（>=992px）（.col-md-），大屏（>=1200px）(.col-lg-)新知识：vwh和vh相对于视口的（将视口划分为100份） 一般使用vw且一般在移动端使用效果图：能够自适应与各大屏幕结构发生变化
2022-03-09 21:30:55
634
原创 黑马面面移动端布局（flex + rem + less）
技术选型：flex + rem + less插件主要使用：慕客：主要是切图和测量pxswiper：在这个官网上可以查看自己想要的相似样式只需要稍加修改就可以使用，需要引用相应的html结构 js css css样式 js语法flex;在平分空间时大量的使用，不需要在像做pc端页面时那样加浮动，在将图片和文字上下排列并居中时，可以使用flex布局 （flex-direction:column; align-items:center）成果图：...
2022-03-08 19:49:07
372
原创 苏宁移动端首页制作（rem+媒体查询+less）
苏宁移动端首页制作（rem布局）技术选型主要是有两种方案1.less+媒体查询+rem2. flexible.js+rem（不需要写媒体查询，他将设备屏幕分成了10分，我们只需那根据设计稿确定html字体大小）知识点：em单位是相对于父级元素的字体大小来说的 rem是相当于html的字体大小来说的媒体查询语法：@media 设备类型 and/not/only (媒体特性) {css-code；}针对于不同的屏幕大小我们可以写不同的css文件可通过link+媒体查询调用不同的css比如 ..
2022-03-08 12:49:51
517
原创 京东移动端首页（静态）
一、 京东移动端页面制作1. 技术选型方案：单独制作移动端页面技术：流式布局2.搭建相关文件夹结构css images（背景图、精灵图等） upload（产品图） index.html3.引入引入视口标签和相关样式4.定义好body宽度大小为100% 还有最大宽度最小宽度 字体大小颜色型号 行高5、二倍精灵图做法 1.在firework里面把精灵图等比例缩放为原来的一半 2.之后根据大小测量坐标 3.代码里面也要将精灵图缩放宽度的一半background-size...
2022-03-07 13:21:06
2093
1
原创 CSS复习
1.过渡效果ransition: 要过渡的属性 花费的时间 运动曲线 何时开始、2.2D移动 旋转 缩放translate不会影响其他元素的位置 transform: translate(x,y); 在x轴和y轴上面移动位置transform: translateX(50%)参照的是自己的数据移动对于行内内元素无效旋转 transform: rotate(360deg);设置旋转中心点（ 设置旋转中心点 可以是方位名词 可以是百分比 也可以是像素）transform-...
2022-03-06 19:08:00
37
原创 品优购网站制作下（静态网站）
收获：如何将溢出部分省略号显示，分为三步：1.添加overflow：hidden；（溢出部分隐藏）2.white-space:nowrap;（强制一行显示）3.text-overflow：ellipsis；（溢出部分省略号显示）感受运用了大量的浮动和定位，全部是css3盒子模型，不需要考虑padding将盒子撑大成果图：...
2022-03-05 21:13:05
55
原创 品优购网站制作上（静态网站）
TDK：在 SEO 中，所谓的 TDK 其实就是 title、description、keywords 这三个标签，title 标题标签，description 描述标签，keywords 关键词标签logo seo 优化：1.logo 里面首先放一个h1标签，目的是为了提权，告诉搜索引擎这个地方很重要2.h1里面再放一个链接，可以返回主页，把logo的背景图片给一个链接即可3.为了搜索引擎收录我们，我们在链接里面要放文字（网站名称），但是不要显示出来 方法1：text-indent..
2022-03-05 15:41:43
77
原创 css复习
定位主要有相对定位position：relative（相对于原来的位置移动后，继续占有原来的位置）；绝对定位 absolute（ 绝对定位，相对于父级元素，如果父级元素没有定位以浏览器为准如果祖先元素有定位，以最近的有定位的祖先定位为准绝对定位不占有位置）；固定定位fixed（固定定位，以页面的可视化窗口为定位，不占有位置）；只有定位的盒子才有z-index属性（定位叠放次序）解决定位盒子的居中对齐：left：50%； top：50%；transform：translate（-50%，50%）；tr.
2022-03-05 12:04:57
53
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人