前端开发
文章平均质量分 65
向全栈冲
这个作者很懒,什么都没留下…
展开
-
git常用命令学习
一.在Windows上安装Git1.在Windows上使用Git,可以从Git官网直接下载安装程序,然后按默认选项安装即可。2.安装完成后,在开始菜单里找到“Git”->“Git Bash”,蹦出一个类似命令行窗口的东西,就说明Git安装成功!3.安装完成后,还需要最后一步设置,在命令行输入:git config --global user.name “Your Name”git config --global user.email “email@example.com”注意:git co原创 2021-11-30 10:07:34 · 372 阅读 · 0 评论 -
js高级--手写ToDoList
先上代码看效果: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style: none; } body{ background-colo原创 2021-07-17 15:48:25 · 398 阅读 · 1 评论 -
js高级--jQuery二
jQuery元素操作创建一个元素var div = $('<div></div>')内部插入元素// 向 div 元素中插入一个 p 元素,放在最后$('div').append($('<p></p>'))// 把 p 元素插入到 div 中去,放在最后$('<p>hello</p>').appendTo($('div'))// 向 div 元素中插入一个 p 元素,放在最前$('div').prepe转载 2021-07-16 19:45:12 · 75 阅读 · 0 评论 -
js高级--jQuery
jQueryjQuery 是一个前端库,也是一个方法库(99%都是方法)他里面封装着一些列的方法供我们使用我们常用的一些方法它里面都有,我们可以直接拿来使用就行了jQuery 之所以好用,很多人愿意使用,是因为他的几个优点太强大了优质的选择器和筛选器好用的隐式迭代(不用循环)强大的链式编程因为这些东西的出现,很多时候我们要做的事情被 “一行代码解决”接下来我们就来认识一下 jQuery框架:Vue React库:jquery zeptojQuery 的使用jQuer转载 2021-07-15 20:33:09 · 83 阅读 · 0 评论 -
js高级--本地存储和设计模式
localstorage和sessionStoragelocalStorage 类似 sessionStorage,但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除 。localStorage 中的键值对总是以字符串的形式存储。(需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).下面的代码片段访问了当前域名下的本地 Storage 对象转载 2021-07-15 16:45:48 · 90 阅读 · 0 评论 -
js高级--原型
构造函数与原型1.静态成员和实例化成员实例成员就是构造函数内部通过this添加的成员;静态成员:在构造函数本身上添加的成员,静态成员只能通过构造函数来访问;2.构造函数的问题通过构造函数实例化对象虽然很好用,但是他也存在一些问题,首先一个就是内存浪费的问题。我们可以给函数的原型添加函数,这样的话,函数所有的实例化对象都可以使用这个函数,大大减少函数重复占用内存。3.构造函数原型prototype构造函数通过原型分配的函数是所有对象所共享的。JavaScript 规定,每一个构造函数都有一个转载 2021-07-13 17:23:21 · 75 阅读 · 0 评论 -
js高级--jsonp跨域
一.ajax的同源策略Ajax请求限制:Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站,A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求,B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求,但是 A 网站是不能向 B 网站发送 Ajax请求的,同理,B 网站也不能向 A 网站发送 Ajax请求。XMLHttpRequestfetch() 封装了ajax同源策略:什么叫做同源如果两个页面拥有相同的协议、域名和端口,那么这两个页面就属于同原创 2021-07-13 17:08:48 · 581 阅读 · 0 评论 -
js高级--异步函数,回调函数与Promise对象
Promise对象在说promise之前先谈谈异步,前面学习了ajax就是一个异步方法,在ES6之前为了获取异步代码里面的数据用的是回调函数:function getTi(callback){ setTimeout(function(){ callback('喝茶') },2000) } getTi(function(data){ console.log(data); })这里再说下,js是单线程,所以在代码执行过程中,遇到异步代码会先放到队列里面原创 2021-07-13 16:55:50 · 401 阅读 · 0 评论 -
js高级--Http协议与cookie会话技术
一、HTTP协议程序员必备基础知识:通信协议——Http、TCP、UDP1.1 通信协议都是通信协议,也就是通信时所遵守的规则,只有双方按照这个规则“说话”,对方才能理解1.2 常见的网络协议常见的网络协议:HTTP,TCP,UDP,FTP Http是基于TCP的面向连接的一种协议。 Http是一种基于请求/响应模式的、无状态的协议。即我们通常所说的Request/Response。 前端向后端发请求,需要建立连接(三次握手),如果数据传输完成,就需要断开连接(四次挥手)原创 2021-07-12 21:19:31 · 275 阅读 · 2 评论 -
js高级--ajax
AJAX一、AJAX的概念什么是AJAXAJAX( Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下,对网页的某部分进行更新。传统网站(不使用ajax),如果需要更新内容,必须重载整个网页页面。二、AJAX的优势优点:1、用户体验好,对用户的操作做出及时的响应2、不中断用户的操作的情况下与服务器通信3、大大提升web程序的性能4、大大减轻web服务器和原创 2021-07-12 19:58:52 · 278 阅读 · 1 评论 -
js高级--Mysql数据库
数据库一、数据库的概念概念:数据库是按照数据结构来组织,存储和管理数据的仓库。库:仓库表:一个仓库被分为了很多的部分,很像类字段:很像类的属性每个字段的数据类型:int-->整数类型char--> 定长字符串varchar--->变长字符串blob--->二进制类型date-->日期类型二、常见的数据库关系型数据库oracle、mysql、SQLServer、DB2、sybase非关系型数据库Redis、HBAse、CouchDb、MongoD原创 2021-07-12 16:18:03 · 301 阅读 · 0 评论 -
js高级--PHP
PHP语言B/S架构例如:比如: 我们浏览一个新闻网站1)用户输入网址2)前端人员就要把对应的页面给到用户,在页面打开的过程中,想后端人员索要新闻信息3)后端人员接收到前端人员索要新闻信息以后,就去数据库中找到对应的新闻信息数据给前端人员4)前端人员接收到后端人员给的新闻信息以后,使用我们的办法吧新闻信息数据渲染在页面上5)页面就打开了,用户就可以看到一个新闻网站了再比如:用户登陆一个网站1) 当用户书写完表单内容以后,点击提交按钮的时候2) 前端人员拿到用户填写的内容,把数据整合原创 2021-07-12 16:12:53 · 72 阅读 · 0 评论 -
js高级---闭包
1.函数的定义方式方式一:函数声明式:function( ){ };方式二:函数表达式(匿名函数)var fn=function( ){ };方式三:new Function( )2.函数调用普通函数 function fn( ){ };fn();对象的方法:var o={say:function(){ }}o.say();构造函数:function Star() {};new Star();绑定事件函数写法一:btn.function(){};绑定事件函数写法二:funct原创 2021-07-12 14:51:40 · 73 阅读 · 0 评论 -
JavaScript13
day131.事件委托:利用冒泡机制,将时间统一交给父级处理,利用target找到点击的事件源兼容性写法:var t=e.target||e.srcEvent;这里t为事件源2.正则表达式:是用于匹配字符串中字符组合的模式,正则实质也是对象创建方法:1.构建对象var reg=new RegExp(/adc/)2.字面量var reg=/asd/3.检测方法text用法:var reg=/asd/;建立正则表达式reg.text(str);检测是否符合正则表达式,符合返回true,原创 2021-06-25 08:44:27 · 103 阅读 · 0 评论 -
JavaScript12
day121.解绑DOM0级解绑:odiv.οnclick=null;DOM2级解绑:odiv.addEventListener(type,fn,false);function fn(){代码}odiv.removeEventListener(type,fn);2.事件流:页面接受事件的顺序3.DOM事件流:事件在元素节点之间按照特定的顺序进行传播特定的顺序:IE:冒泡,最具体的元素向上逐层传播,直到最顶级元素网景:捕获 ,事件触发时,是从最顶层向下传播,直达最具体元素W3C:D原创 2021-06-23 21:00:47 · 68 阅读 · 0 评论 -
JavaScript11
day111.offsetoffsetWidth 占位宽(包括border和padding)offsetHeight 占位高(包括border和padding)clientWidth可视宽(不包括border)clientHeight可视高offsetLeft:获取具有定位属性父元素的左距离offsetTop::获取具有定位属性父元素的上距离2.事件:onclick onmouseover onmouseout onresize onscroll onload事件的组成:odiv.onX原创 2021-06-22 17:19:01 · 85 阅读 · 0 评论 -
JavaScript10
day101.获取页面滚出去的高document.scrollTop/document.documentElement.scrollTop;兼容性写法:document.scrollTop||document.documentElement.scrollToponscroll:页面滚动触发2.固有属性和自定义属性固有属性:input的固有属性有value,type…设置固有属性:元素.属性名=属性值注意:类名方法为,元素.classname=‘属性值’自定义属性:自己定义的属性语法:设原创 2021-06-22 08:49:30 · 190 阅读 · 0 评论 -
JavaScript08
BOM一.BOM:浏览器对象模型1.BOM的子对象包括:window,location,navigator,screen,history,document二.window对象:window对象是BOM的核心,它表示浏览器的实例,在浏览器中我们可以通过window对象来访问操作浏览器,同时window也可以作为全局对象存在,在全局作用域中声明的变量,对象,函数都会变成window对象的属性和方法;1.窗口大小网页窗口大小:innerWidth/innerHeight浏览器本身尺寸:outerWi原创 2021-06-19 16:36:42 · 58 阅读 · 0 评论 -
JavaScript07
day08一.String字符串常见的API和属性length:长度charAt(下标):返回当前下标所对应的字符charCodeAt(下标):返回当前下标所对应字符的ASCll码值fromCharCode: 功能:编码转换为字符;参数(String.fromCharCode(asc1,[asc2,asc3…]) 返回值:返回asc对应的字符indexof():查找字符串第一次出现的位置lastIndexOf():查找字符串最后一次出现的位置,如果没找到返回-1原创 2021-06-17 21:25:04 · 97 阅读 · 0 评论 -
JavaScript06
数组(Array)- 数组也是一个对象,是一个用来存储数据的对象和Object类似,但是它的存储效率比普通对象要高- 数组中保存的内容我们称为元素- 数组使用索引(index)来操作元素- 索引指由0开始的整数- 数组的操作:- 创建数组- var arr = new Array();- var arr = [];向数组中添加元素- 语法;数组对象[索引] = 值;arr[0] = 123;arr[1] = “hello”;创建数组时直接添加元素- 语法:var arr =原创 2021-06-16 20:12:30 · 245 阅读 · 0 评论 -
JavaScript05
day05对象(Object)- 对象是JS中的引用数据类型- 对象是一种复合数据类型,在对象中可以保存多个不同数据类型的属性- 使用typeof检查一个对象时,会返回object- 创建对象- 方式一:- var obj = new Object();- 方式二:- var obj = {};向对象中添加属性- 语法:对象.属性名 = 属性值;对象[“属性名”] = 属性值;-对象的属性名没有任何要求,不需要遵守标识符的规范,但是在开发中,尽量按照标识符的要求去写。- 属性值原创 2021-06-16 19:57:30 · 46 阅读 · 0 评论 -
JavaScript04
day041.函数的概念及作用~函数是一个对象,也具有普通对象功能,函数中可以封装一些代码,在需要的时候可以调用函数来执行这些代码;~使用typeof检查函数时会返回function2.创建函数:方法一:~函数声明 functio 函数名([形参1,形参2...]){ 语句...}方法二:~函数表达式 var 函数名=function([形参1,形参2...] ){ 语句...};3.调用函数:~语法:函数对象([实参1,实参2...]);~函数原创 2021-06-11 09:11:38 · 81 阅读 · 2 评论 -
JavaScript03
1.for循环for(初始化变量;条件表达式;操作表达式){//循环体}初始化变量:通常用于初始化一个计数器,该表达式可以使用var关键字声明新的变量;条件表达式:用于确定每一次循环是否能执行,如果是true就继续循环,否则退出循环;操作表达式:用于确定每一次循环是否能被执行。如果是true就继续执行,否则退出。2.打断点3.双重for循环 循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在for循环 语句中,可以再嵌套一个for 循环,这样的 for 循环语句我们称之为双原创 2021-06-10 08:36:12 · 61 阅读 · 1 评论 -
JavaScript02
day021.条件语句:通过判定指定表达式的值来决定执行还是跳过某些语句;2.条件语句分为:if…else:一种最基本的控制语句方式一:if(条件){ 代码块1; }方式二:if(条件){ 代码块1; }else{ 代码块2; }方式三:除了if和else还可以使用else if来创建多个条件分支;if(条件1){ }else if(条件2){ }else{ }switch…cas原创 2021-06-08 19:07:34 · 33 阅读 · 0 评论 -
JavaScript01
Day011.js概念:js是运行在浏览器中的解释型脚本语言;2.js组成包括:ECMAScript(语法),Dom(页面),Bom(浏览器的头包括滚动条等)3.js可以书写在三个位置:a.行内(以on开头)b.内嵌(一般放在body底部)c.外部外部js文件的script标签中间不可以写代码4. 浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执 行,所以 JavaScr原创 2021-06-07 19:41:29 · 61 阅读 · 0 评论 -
HTML+CSS基础17
1.雪碧图/精灵图主要应用的是背景图位置background-position优点:(1)减少图片请求次数(2)减少图片的大小2.透明度opacity:0-10完全透明,1不透明,值越小越透明rgba(0-255,0-255,0-255,0-1)区别:raga只透明背景,不会使文字透明专门针对ie的透明写法filter:alpha(opacity=50)取值为1-100之间,1完全透明,100为不透明3.权重!important:所有选择器中权重值最高,无限大浏览器的内核(解析代原创 2021-05-07 17:34:48 · 57 阅读 · 0 评论 -
HTML+CSS基础16
1.弹性盒父元素:主轴的方向flex-directionrow从左到右row-reverse从右向左column从上到下column-reverse从下往上子元素:单独子元素在交叉轴的对齐方式 align-selfflex-strat交叉轴的起点flex-end交叉轴的终点center交叉轴的中心放大比例flex-grow:数值 分配父元素剩余的空间子项宽度flex-basis子项压缩flex-shrink 数值0不压缩 数值1压缩排序order 数值复合写法flex:flex-原创 2021-05-06 20:46:29 · 104 阅读 · 0 评论 -
HTML+CSS基础15
1.BFC->块级格式化上下文->独立渲染的区域触发条件:a.overflow的值设置为hidden/auto/scrollb.float的值为left/rightc.position的值为absolute/fixedd.display的值table-caption(表格标题)/table-cell(单元格)/inline-block/flex(弹性盒)/inline-flex(行内弹性盒)特性:a.在BFC区域,浮动元素的高度不会计算在内b.BFC区域不会和浮动盒子重叠c.在原创 2021-05-05 13:57:12 · 40 阅读 · 0 评论 -
HTML+CSS基础14
1.背景图的固定(默认情况下背景图跟着滚动条滚动,固定的话内容跟着滚,但是背景图是固定的)background-attachment:scroll(滚动)/fixed(固定)2.背景图大小background-size:宽度 高度;a.数值/百分比(百分比设置会导致图片变形)b.关键字:cover:图片不断延伸,直到充满整个盒子,可能会出现背景图裁切contain:图片不断拉伸,拉伸到碰到某个边缘的时候就停止拉伸,可能会出现六百的情况复合写法background:pink url() no原创 2021-05-05 13:55:40 · 48 阅读 · 0 评论 -
HTML+CSS基础13
1.渐变A.线性渐变background-image:linear-gradient(方向,颜色1,颜色2…)方向:to bottom向下 to right向右 to top向上 to left 向左to left top左上角 to right top 右上角to left bottom左下角 to right bottom 右下角角度+degB.重复性线性渐变默认方向 向下,高度为200: 0-40红色 40-60红色到黄色渐变 60-200黄色background-image:原创 2021-05-05 13:49:25 · 47 阅读 · 0 评论 -
HTML+CSS12
补充:实现透明的方法:一:透明属性opacity:0-1;0:完全透明1:不透明值越小,越透明,且设置该属性后标签内所有显示都跟着变化二:background-colorrgbd(x,y,z,t)rgb()为三元素设置颜色,rgbd()则增加了透明度,只会修改背景色的透明度;1.固定定位position:fixed参考物:浏览器窗口移动:left/top/bottom/right+数值px特点:(1)脱离文档流(2)margin:auto;会失效2.粘性定位position:st原创 2021-04-27 20:23:37 · 104 阅读 · 0 评论 -
HTML+CSS11
1.定位属性:positionA.static默认值 静态定位B.relative 相对定位a.参考物:自己本身的位置b.移动:left/right/top/bottom:数值+pxc.特点:移动之后依然占位俗家记忆:向一个方向移动,采用的移动属性与移动方向一致时,移动属性值为父;移动方向与移动属性相反时,则移动属性值为正.C.absolute 绝对定位a.参考物:(1)有定位属性;(2)祖先元素(子绝父相)设置绝对定位的元素,会一层层向上找有属性的祖先元素,谁有就参考谁,如果找到bo原创 2021-04-26 19:36:30 · 68 阅读 · 0 评论 -
HTML+CSS基础10
1.内容补充A.引入外部样式表的方法a.在head标签里面生成一个style双标签b.@import url(css路径)两种样式表的区别a.@import只能引入css文件,link可以引入除css外的其他文件b.加载顺序的区别@import先加载结构,后加载样式;link结构和样式同时加载c.浏览器的支持性,link支持所有的浏览器,@import只有在ie6以上才支持拿图片:http://(网址)+favicon.icoB.css层叠样式表层叠行:当样式产生冲突的时候,会根据权原创 2021-04-25 22:31:39 · 52 阅读 · 0 评论 -
HTML+CSS基础09
1.表格新增的标签表格的标题:caption表格列标题th(需要将第一行的列标题里面的td换成th即可)行分组(表格结构更清晰一点)thead表头,一般只有一个tbody表体,可以有多个tfoot表尾,一般只有一个表单新增CSS属性:边框间的距离:border-spacing:一般为0边框合并:border-collapse:collapse;合并后,边框不会变粗表格固定:table-layout:fixed;单元格不会因为里面的内容而变高变宽()2.表单集form(块元素)act原创 2021-04-25 08:51:36 · 82 阅读 · 0 评论 -
HTML+CSS基础08
1.高度自适应·高度不设置/height:auto;高度由内容撑开·高度设置百分数,参考父元素·最大高度max-height:数值+px;高度内容可以被无限撑大,但不能高于该值·最小高度min-height:数值+px;高度可以由内容无限缩小,但不能低于该值2.宽度自适应·不设置宽,则和父元素一样宽·设置百分比,参考父元素·最大宽度max-width:数值+px;可以跟随父元素不断变大,但不能超过该值·最小宽度min-width:数值+px;可以跟随父元素不断变小,但不能小于该值原创 2021-04-22 16:38:01 · 34 阅读 · 0 评论 -
HTML+CSS基础07
1.margin的bug·margin的重叠:给上面的元素加下边距,给下面的元素添加上边距的时候,边距会重叠,且以最大值显示,左右会相加·margin的值传递:给父元素里面的第一个元素添加上边距的时候,会错误的加在父元素身上解决方法:·用padding代替margin·给父元素添加一个边框·给父元素或者子元素添加浮动·给父元素添加一个overflow:hidden;(溢出隐藏)2.元素类型块元素:div/p/h1-h6/ul/li/ol/dl/dt/dd/table/hr特点:·可以原创 2021-04-22 16:22:22 · 37 阅读 · 0 评论 -
HTML+CSS基础06
1.浮动float:none/left/right应用场景:让纵向排列的元素横向排列特点:·浮动元素会脱离文档流,遮挡住后面的文字,但不会遮挡文字(文字和浮动元素属于一层)·当浮动元素的父元素的宽度不足以容纳下这些浮动元素的时候,浮动元素会掉下来,且掉在浮动设置的值,比如设置的左浮动就会掉在左边2.盒模型一 :内容区(文字/图片/视频)区域由宽高决定二:内填充(padding):padding:10px;一个值在四周padding:10px 20px;两个值 上下 左右padding:原创 2021-04-21 08:49:01 · 53 阅读 · 0 评论 -
HTML+CSS基础02
Day02一:列表1.无序列表<ul type=""> <li></li> <li></li></ul>type:默认为黑心原点;应用场景:新闻列表/网页导航/商品列表2.有序列表<ol type="" start=""> <li></li> <li></li></ol>type:默认为数字排序,可以选择数字,大小写字母,i原创 2021-04-15 10:36:16 · 39 阅读 · 0 评论 -
HTML+CSS基础05
1.文本属性字体复合写法font:加粗 倾斜 字体大小/行高 字体类型·加粗 倾斜可以省略,后面三个不能省略,且不能调换顺序·字体大小和行高之间必须要“/”隔开大小写转换text-transform:capitalize 首字母大写uppercase 全部大写lowercase 全部小写鼠标样式cursor:crosshair 十字架/pointer 手型(例如,超链接)/text 文本/wait 等待/help帮助2.列表属性列表符号类型list-style-type:disc 实心原创 2021-04-19 19:55:37 · 42 阅读 · 0 评论 -
HTML+CSS基础04
1.伪类(在某种状态下)选择器:针对超链接:link:还没有访问之前visited:访问过后hover:鼠标滑过时activity:鼠标点击时·伪类中除了hover其他都针对超链接·如果link没生效,需要清理浏览器内存·如果同时对超链接设置四种状态,则必须严格执行书写顺序:link-visited-hover-activity可以简单记成爱恨法则(love hate)2.“ * ”称为通用选择器,其权重值为0,*{magin:0;padding:0}->去掉标签自带的内边距和外原创 2021-04-17 23:47:17 · 35 阅读 · 0 评论