- 博客(40)
- 收藏
- 关注
RSS订阅原创 Git 代码管理
1.简介 Git是管理代码的工具 作用：(1)用于记录代码的变更，以便于查阅 (2)可以合并多人的代码，实现多人协作2.Git安装及配置 去官网下载，一直下一步安装即可 配置：配置用户名和密码：git config --global user.name "你的用户名" git config --global user.email "你的邮箱"3.初始化 命令：git init 注意：(1)必须进入项目文件夹，才能初始化，因为要检测终端路径 (2)
2021-11-03 18:11:02
581
原创 Ajax 第四天
1.同步和异步 同步：代码从上往下顺序执行，如果前面的一直执行不完，就会造成“阻塞” 异步：事件、定时器、ajax请求是异步任务，放在异步的任务队列中，等同步代码执行完在执行异步的 同步必须执行完，才会执行异步，如果同步没有执行完，异步就不会执行 如果是一个函数不算同步或异步，得看函数里面是啥，函数里面如果是console.log()的话就是同步的；函数里面是一个ajax请求，就是异步的2.JSON JSON是一种数据交换格式，是数据的载体 服务端使用的编程语
2021-11-03 17:39:46
173
原创 Ajax 第三天 原生DOM中XHR2.0及jQuery的一些补充
1.介绍 2008年2月，对XHR1.0进行了扩展2.新增的一些事件 ontimeout：请求超时事件设置let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if(xhr.readyState === 4) { let res = xhr.responseText; console.log(res); }}xhr.timeout = 30;
2021-11-03 17:33:43
473
原创 Ajax 第二天 原生DOM中的Ajax方法 XHR1.0
1.介绍 XMLHTTPRequest是浏览器内置的一个对象，Ajax技术的核心就是XMLHTTPRequest对象 所有浏览器都支持这个对象2.原生代码实现get/delete请求 1.创建对象 2.注册xhr.onreadystatechange()事件 3.调用open()方法 4.调用send()方法// 创建xhr对象let xhr = new XMLHttpRequest();// 注册onreadystatechange事件xhr.onrea
2021-11-03 17:27:06
152
原创 Ajax 第一天 jQuery中的Ajax方法
1.基本概念资源 资源就是网络中的内容，比如html文件、cs文件、JS文件、图片、视频、音频等数据 数据就是真实的数据，比如排行榜、股票价格、文章信息等服务器 本质是一台电脑 作用：(1)存储网站资源 (2)提供网站的资源给用户 如何获得服务器：购买和租赁客户端 用户用的设备，比如电脑、平板、手机等2.浏览器-服务器交互模型 (1)用户输入一网址，按下回车 (2)客户端向服务器端发送请求 (3)服务器处理请求 (4)服务
2021-11-03 17:24:34
436
原创 数据可视化 第一天
1.Echarts使用 第一步：下载echarts插件 第二步：引入js文件 第三步：写一个具有宽高的盒子 第四步：实例化 实例化的时候是echarts.init(DOM对象) 括号里必须是DOM对象let myChart = echarts.init(document.querySelector('元素')); 第五步：准备配置项 配置项必须是一个对象let option = {}; 第六步：设置配置项myChart.setOption(option)
2021-11-03 17:19:21
127
原创 jQuery 第三天 表单、插件
1.表单提交 表单会提交，看上去像刷新页面； 表单提交会触发submit事件； 用户按回车键或点击提交按钮时，会触发form的submit事件； 原生DOM中e.defalutprevent()阻止表单的默认行为不让它提交，在jQuery中return false就可以阻止表单的默认行为； button中type的默认值就是submit2.表单序列化 表单如果提交后面有参数，必须有name，值就是表单的value 表单中标签中如果没有value,提交后地址栏是x
2021-11-03 17:16:12
164
原创 jQuery 第二天 元素节点、尺寸位置及动画
1.元素节点创建节点 直接$('html标签')就可以创建节点插入节点父子关系 追加到某一个元素的最后：$('父').appnd('子') 子.appendTo('父') 不会覆盖原先的 追加到某一个元素的最前面：$('父').prepend('子') 子.prependTo('父')兄弟关系 追加到元素的后面：$('元素').after('元素') 追加到元素的前面：$('元素').before('元素')删除节点 $('元素').remove();
2021-11-03 17:10:26
105
原创 jQuery 第一天 认识、基础概念和实例方法
1.jQuery介绍 就是js库，JS写的一堆方法，专注于DOM操作的类库2.jQuery使用 (1)下载 (2)引入 引入JS文件 (3)使用3.实例 jQuery对象别名：$ 每次调用这个jQuery或$都会得到一个新的实例4.选择器 jQuery获取元素用css选择器 $('css选择器') jQuery对象是一个伪数组，遍历出来的是DOM对象，必须要转成jQuery对象才能用5.jQuery对象和DOM对象转换 dom对象用
2021-11-03 17:08:54
449
原创 JS高级 第四天
1.this指向普通函数：window自执行函数：this指向上级作用域构造函数：指向new出来的那个实例化对象事件：this指向事件源对象字面量中的方法：指向调用者2.修改this指向的三种方法函数.call(this指向,参数1,参数2,...)函数.apply(this指向,[参数1,参数2,...]) 参数必须在数组里，然后会把数组拆分函数.bind(this指向,参数1,参数2,...) 需要改变this指向，又不需要立即执行用bind3.class封装
2021-10-06 19:44:48
60
原创 JS高级 第三天
1.封装命名空间 字面量创建一个对象 冲突了各自封装成对象 不能用高级的情况构造函数 就是自定义封装一个函数，就是第二天讲的原型对象 每个构造函数(函数)都有prototype，指向了一个对象就是原型对象，原型对象就是构造函数中的一个属性 每个原型对象中都有constructor属性，用来指向函数本身，看他是哪个构造函数的 实例对象身上有proto属性，指向原型对象，去构造函数找，找不到的话会去原型对象找，这就是可以使用的原因作用：共享方法，节省内存2
2021-10-06 19:40:58
49
原创 JS高级 第二天
1.构造函数 new出来的是实例化对象 实例化构造函数没有参数时可以省略小括号() 系统构造函数，比如Object、Array、String等，是系统提供的2.自定义构造函数 自己起名的叫自定义构造函数，比较便于分类，比较灵活 构造函数的this指向当前实例化对象 instanceof：判断一个对象是否属于一个构造函数的 对象 instanceof 构造函数名称 constructor：用于指回构造函数本身 对象.constructor3.成员
2021-10-06 19:38:57
82
原创 JS高级 第一天
1.声明变量三种关键字区别 var只有全局和局部作用域，没有块级作用域(如果写在块级作用域里，就是全局变量)；let三个作用域都有 var定义的变量打印window，window下会有这个属性；而let定义的变量没有 var可以定义多个同名的变量，会覆盖前面的变量值；let如果定义多个同名的会报错 const和let差不多，但是const声明的变量不可以修改，一般用const声明常量2.闭包 一个作用域能够访问另一个作用域的局部变量，意思就是返回了一个子函数，这个函数可以访
2021-10-06 19:37:02
77
原创 Web APIs 第七天 正则表达式
1.介绍 用于匹配字符串中字符组合的模式 用于匹配字符的 作用：匹配(表单验证)、替换(过滤敏感词)、提取(字符串提起想要的部分)2.语法 let 变量名 = /表达式/ test：测试，判断是否符合，返回的是布尔值，true或false exec：查找、检索，找到返回数组，但是返回的是一个(第一个匹配的)，找不到返回null3.元字符边界符 ^：匹配以xxx为开头的字符 $：匹配以xxx为结尾的字符 注意：如果是^和$在一起，是精准匹配(就是那个
2021-09-26 20:55:51
62
原创 Web APIs 第六天 BOM
1.BOM介绍BOM：浏览器对象模型 window最大，包括了document naviagter：浏览器对象 location:地址栏对象 history：历史记录对象 screen：屏幕对象2.定时器-延时函数 一次性函数 开启定时器：setTimeout(函数，时间)； 关闭定时器：把它赋值给一个变量，然后clearTimeout(变量)3.递归函数 在自己函数内部调用自己的函数叫递归函数 例如：function fn () {
2021-09-26 20:54:29
81
原创 Web APIs 第五天 网页特效篇
1.滚动事件 谁滚动给谁加事件 如果整个网页有滚动条了，事件加给window或document2.加载事件 如果想要所有资源加载完毕之后在执行，给window加事件只加载DOM节点，不等全部加载完，给document加DOMContentLoaded事件3.三大家族scroll家族 scrollWidth、scrollHeight获取宽高 获取的是内容+padding+溢出 scorll获取宽高不可以设置宽高，设置的话还用style修改 获取向上/向右卷起
2021-09-26 20:52:54
104
原创 Web APIs 第四天 事件高级
1.事件类型 鼠标事件：鼠标经过：mouseenter/mouseover 区别：mouseover执行冒泡，mouseenter不执行冒泡 鼠标离开：mouseleave/mouseout 键盘事件：键盘按下：keydown 键盘抬起：keyup 键盘按下：keydown 任何键都可以触发 keypress 只有输入键可以触发，功能键(Ctrl、shift、Alt)不可以触发2.事件对象 事件触发时产生的对象 对象里有事件触发时的相关信息 事件对象在回调
2021-09-26 20:46:12
78
原创 Web APIs 第三天 DOM节点操作
1.查找节点 查找父节点： 子元素.parentNode 查找子节点： 元素.childNodes 查找的是所有的子节点（文本节点(空格、换行)、元素节点） 元素.children 查找的是所有的元素节点 元素.firstchild 查找的是第一个节点 元素.firstElemetChild 查找第一个元素节点 元素.lastchild 查找的是最后一个节点 元素.lastElemetChild 查找最后一个元素节点 元素.nextElementSibling
2021-09-25 20:15:27
64
原创 Web APIs 第二天 事件、环境对象、排他思想
1.事件 编程时系统内发生的动作，简单来说，就是用户做的动作 程序内部的一种机制2.事件监听三要素 事件源：点击谁要发生的动作 事件类型：不同事件 click：单击 dblclick：双击 事件处理程序：程序要做什么 元素.addEventListener('事件'，要执行的函数)3.监听事件 检测是否有事件发生，如果事件触发，就调用4.事件类型 学习事件，主要是学习事件的触发方式 focus：获得焦点 blur：失去焦点 click：
2021-09-25 20:14:04
65
原创 Web APIs 第一天 DOM获取元素
1.Web APIs介绍API是为我们程序员提供的一个接口，帮助我们实现某种功能Web APIs主要针对于浏览器与网页提供的接口，主要针对于浏览器做交互效果 一般都有输入输出，很多都是方法（函数） Web APIs提供操作浏览器（BOM）与网页（DOM）的接口DOM：页面文档对象模型（操作网页内容，把文档当做对象，里面有属性和方法） BOM：浏览器对象模型2.DOM树 html文档以树状结构的形式展现出来 作用：标签之间的关系保留着 每一个标签就是一个节点（也叫对象），元素
2021-09-25 20:12:12
114
原创 JS基础 第五天 对象
1.对象的介绍 对象是一种复杂的数据类型，它可以把数据关联起来 万物皆对象 特点：里面的数据是无序的2.对象的使用 声明对象：let 对象名 = { }; 使用对象： 一提对象，对象都具有属性和方法 对象中有属性，属性由属性名和属性值构成，也可以有方法，方法就是方法名：function（） {} let 对象名 = { 属性名：属性值，（也叫键值对、成员） uname：'刘佳慧'， 方法名：function （） { } ....
2021-09-25 20:10:23
68
原创 JS基础 第四天 函数
1.函数的介绍 一段代码的的封装 代码需要重复的用，而又不需要立即用，什么时候需要用就用 调用才会执行，不调用不会执行2.函数的定义及使用 定义函数：function 函数名（）{ 函数体 } 调用函数：函数名（）； 注意：定义函数时函数体不执行，只有调用函数时函数体才执行，意思就是才执行函数体中的代码3.函数传参 形参：定义函数时括号里的参数，形式上的参数 实参：调用函数时括号里的参数，实际上的参数 参数可以有多个，但实参和形参要一一对应，中间
2021-09-25 20:09:12
131
原创 JS基础 第三天 数组
1.数组 一多个数据的组合，并且存储在单个变量下 可以存放任意类型的数据如字符串、数字、布尔值等 创建数组：利用new创建 let arr = new Array（）； 利用字面量创建 let arr = [ ]； 数组也是对象，也可以使用对象的for in遍历2.访问数组元素 索引（下标）：访问数组元素的序号，从0开始3.遍历数组 把数组中的每个元素从头到尾都访问一次 for循环遍历：for（var i=0；i<arr.length；i++）
2021-09-25 20:06:55
139
原创 JS基础 第二天 运算符及语句
1.算数运算符 + - / %(取余) / %优先级相同，+ -优先级相同 / %优先级大于+ - 使用（）可以提升优先级总结：先乘后加减，有括号先算括号里面的2.表达式和返回值 把右边表达式计算完毕把返回值给左边 表达式：数字、运算符、变量等组成的式子 返回值：表达式的结果3.递增运算符 ++ 自增一元运算符：n++：先赋值在自加 ++n：先自加在赋值 经常用于计数来使用4.递减元素符 -- 自减一元运算符：n--：先赋值在自减 --n
2021-09-25 20:05:47
55
原创 JS基础 第一天 初识、数据类型及转换
1.JS介绍 是一种运行在客户端（浏览器）的编程语言 网景推出的2.浏览器部分 分为两部分，一部分是渲染引擎（内核：解析html和css），一部分是JS引擎(逐行解释，转换为机器语言)3.js 分为两部分：ECMAScript语法(JS语法)、webAPIs（DOM(页面文档对象模型)、BOM(浏览器对象模型)）4.js代码书写位置 行内式js：写在body标签中 用单引号'' 内嵌式js：在</body>之前写，所有标签之后添加<script&g
2021-09-25 20:03:36
69
原创 移动布局第七天 BootStrap布局
1.响应式布局 在PC端、iPad端、移动端都可以显示 页面的布局随着页面的变化而变化 响应式布局原理：通过媒体查询实现 响应式布局容器：需要一个父级做为布局容器，配合子元素实现变化2.BootStrap 基于html、css、js的框架3.BootStrap使用 通过类名控制，就是他自己官网的类名不能动 （1）创建文件夹结构 项目中添加一个bootstrap文件夹，官网下载bootstrap，解压 生产环境的是代码编译压缩过后的 （2）创建html骨架结构
2021-09-25 20:01:47
285
原创 移动布局第五天 rem布局
1.rem解决的问题 页面布局文字随着屏幕大小变化而变化 高度可以变化 屏幕变化的时候元素宽度和高度等比例缩放 解决文字大小和元素高度的自适应2.rem单位 rem是相对于html元素字体大小来说的，em是相对于自身元素的font-size值来说的 优点：可以通过修改html里的文字大小来改变页面元素中的大小 px是固定单位，em和rem是相对单位，em相对的是自身的，rem相对的是html的3.flexible.js + rem单位 head标签中 引入<
2021-09-25 20:00:39
54
原创 移动web第四天 flex布局
1.flex布局（伸缩布局、弹性布局） 解决元素自适应过于复杂 父盒子设置为flex布局，float、vertial-align属性将失效 布局原理：通过给父盒子添加属性，来控制子盒子的位置和排列方式 特点：比较新、天生支持自适应 使用步骤：给父盒子加上display:flex;此时父盒子称为容器，子元素称为项目 给元素或项目添加属性，控制项目在容器中的大小和位置 主轴和侧轴始终保持垂直 项目永远按主轴的方向排列 主轴不一定是从左往右的，看设置2.容器（父盒子）属性
2021-09-24 20:58:38
48
原创 移动web第三天 二倍图、视口等
1.移动web浏览与调试 F12打开手机调试工具—>点击手机图标—>切换到移动调试模式—>选择移动设备型号或调剂移动设备宽度2.视口 viewport 浏览器显示页面内容的屏幕区域 视口分为布局视口、视觉视口和理想视口 布局视口 layout viewport ios、andriod基本上都将这个视口分辨率设为980px\ 视觉视口 visual viewport 用户正在看到网站的区域 理想视口 ideal viewport 移动端最理想的浏览和阅读量来
2021-09-24 20:57:29
118
原创 移动web第二天 动画
1.动画：animation使用步骤： （1）定义动画 如果一个动画系列里没有CSS代码，这个动画序列就可以不写 每一个动画序列都是单独的，都是相对于最开始的动画样式，不是相对于上一个动画序列@keyframes identifier（动画的名字） { 0% { 动画开始的状态 百分数相对的是整体动画的时间，按百分比分配 } 100% { 动画结束的状态 }
2021-09-24 20:55:20
73
原创 移动web第一天 字体图标
1.字体图标下载和使用字体图标本质还是文字 通过文字的属性来改变字体图标的属性 font-size改变字体图标的大小 color改变图标的颜色重要的是第一个demo_index.html文件说明书文件 引入的时候记得把字体的名字改了第一个文件是说明书iconfont.css是引入文件，下面三个文件是间接引入的.js是交互的一个文件 .json是配置文件最后三个文件是字体的核心文件结构和样式简单的小图标，用字体图标 结构和样式复杂的用精灵图2.2D转换 二维坐标 移动
2021-09-24 20:53:10
62
原创 前端学习第八天 图片等一些属性
1.精灵图 一张图片中，存在很多的小图片，这样的图片称为精灵图（雪碧图） 使用精灵图可以减少服务器 发送和请求 请求的次数减少 使用：1.确定盒子的大小 2.测量小图片的位置（坐标） 3.给盒子添加背景图片，并设置背景定位一般情况下，精灵图使用的背景定位都是负值） 缺点：1.首次加载会慢，因为图片变大了2.背景图片大小 background-size：宽度px 高度px; auto等比例缩放 background-size：100% 100%; 百分比相对
2021-09-24 20:51:48
91
原创 前端学习第七天 定位
1.定位的应用场景 解决盒子与盒子之间的层叠问题 让盒子固定在盒子的某个位置2.定位 （1）静态定位 position：static; 就是标准流 （2）相对定位 position：relative; 需要配合偏移量移动，相对于自己原来位置移动，不脱标 （3）绝对定位 position：absolute; 需要配合偏移量移动，相对于浏览器可视化区域移动，脱标不占位置 水平居中：1.子绝父相 2.left：50%；3.transform：translateX(-50%)
2021-09-24 20:49:36
53
原创 前端第六天学习浮动
1.结构伪类选择器 选择父元素中的子元素，匹配父元素中第n个子元素 E就是Element，元素的意思 父元素 E:first-child {} 选择的是第一个子元素 父元素 E:last-child {} 选择的是最后一个子元素 任意元素： ：nth-child（n | 关键字 | 公式） nth-child（）是从第一个开始选，依次往后选，也包含其他的照片 n 表示从0到n的数字 nth先执行所有的nth-child，在找第一个子元素，不一定是你想选择的标签的 第一个子
2021-09-24 20:46:21
51
原创 前端第五天学习CSS
1.CSS的三大特性 （1）继承性 子元素默认继承父元素的特点 color、文字类（font-size、font-style、font-weigth、font-family）、文本类（text-indent、text-align）、line-height可以继承 特殊：a不能继承颜色 默认浏览器的颜色 蓝色加下划线 h系列不能继承字体大小 （2）层叠性 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上 给同一个标签设置相同的样式 → 此时样
2021-09-24 20:43:48
42
原创 学习前端第四天CSS选择器进阶
1.复合选择器 （1）后代选择器 1.语法：选择器1 选择器2 选择器3{} div span{} 选择器1及时父级元素 最终样式作用在最后一个选择器上 （2）子代选择器 只选择他的儿子 语法：选择器1 > 选择器2 {} （3）并集选择器*** 并集的可以是基础选择器，也可以是复合选择器 语法：选择器1，选择器2，选择器3，...{} （4）交集选择器 语法：选择器1选择器2...{} 意思就是一个引号里面同时有几个选择器 例如：".box .b
2021-09-24 20:41:19
47
原创 学习前端第三天CSS
1.CSS语法 选择器 { CSS属性名：属性值； }2.CSS常见属性 color：文字颜色 font-size：字体大小 background-color：背景颜色 width：宽度 height：高度3.CSS引入方式 （1）内嵌式 CSS 写在style标签中 提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中 （2）外联式 CSS 写在一个单独的.css文件中 提示：需要通过link标签在网
2021-09-24 20:37:25
47
原创 学习前端第二天HTML5标签
1.无序列表显示的是无序的，前面有圆点<ul> <li></li></ul>2.有序列表显示出来是1. 2. 3. 4.<ol> <li></li></ol>3.自定义列表注意：dt和dd是平级的 dt是标题，dd是内容的描述<dl> <dt></dt> <dd><dd> <
2021-08-02 11:50:24
80
原创 学习前端第一天HTML5标签
1.web标准web有三大标准：结构（HTML）、表现（CSS）、行为（js）2.html的属性 属性名="属性值"注意： 标签的属性写在开始标签内部 标签上可以同时存在多个属性 属性之间以空格隔开 标签名与属性之间必须以空格隔开 属性之间没有顺序之分 3.html标签的关系 嵌套关系和并列关系4.排版标签 （1）标题标签 有六个标题标签，分别是h1~h6<h1>标题名称</h1><h6>
2021-08-02 11:42:20
87
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人