web前端
文章平均质量分 70
从基础到Vue.js React的渗入研究
c_perfectworld
如果你渴望得到它,它就不再是梦想
展开
-
HTTP协议
HTTP协议简介通信:信息的传递和交换通信三要素:通信的主体 通信的内容 通信的方式通信协议:通信协议是指通信的双方完成通信所必须遵守的规则和约定网页内容又叫做超文本,因此网页内容的传输协议又叫做超文本传输协议,简称HTPP协议HTTP协议:超文本传送协议,规定了客户端与服务器之间进行网页内容传输时,必须遵守的传输格式客户端要以HTTP协议要求的格式把数据提交到服务器 服务器要以HTTP协议要求的格式把内容响应给客户端HTTP协议的交互模型HTTP协议采用了原创 2022-02-23 15:59:55 · 225 阅读 · 1 评论 -
同源策略以及JSONP
同源如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源同源策略是浏览器提供的一个安全功能限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制浏览器规定,A网站的JavaScript,不允许和非同源的网站C之间进行资源交互无法读取非同源网页的Cookie、localStorage和IndexedDB 无法接触非同源网页的DOM 无法向非同源地址发送Ajax请求跨域协议、域名和端口有一项不同,则是跨域出现..原创 2022-02-17 11:30:32 · 405 阅读 · 0 评论 -
关于Ajax
服务器上网过程中,负责存放和对外提供资源的电脑,叫做服务器客户端上网过程中,负责获取和消费资源的电脑,叫做客户端URL地址URL全称叫统一资源定位符,用于标识互联网上每个资源的唯一存放位置,浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源URL地址组成部分客户端与服务器之间的通信协议 存有该资源的服务器名称 资源在服务器上具体的存放位置客户端与服务器的通信过程客户端请求服务器 服务器处理此次请求,找到相关资源 服务器把找到的资源,响原创 2022-01-28 20:10:18 · 1042 阅读 · 0 评论 -
ES6新增语法
letlet声明的变量只在所处于的块级有效注意:使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具有块级作用域特性不存在变量提升 暂时性死区原创 2022-01-12 19:13:30 · 178 阅读 · 0 评论 -
JS原型 原型链
构造函数原型 prototype构造函数通过原型分配的函数是所有对象共享的Js规定,每一个构造函数都有一个prototype属性,指向另一个对象,这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有我们把不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法原型是什么?一个对象,也称prototype为原型对象原型的作用?共享方法一般情况,公共属性定义到构造函数里面,公共的方法我们放到原型对象身上对象原型_pro原创 2022-01-09 18:37:54 · 401 阅读 · 0 评论 -
JS高级面向对象
两大编程思想:面向过程:分析问题所需步骤,用函数吧这些步骤一步一步实现,使用时一次次调用面向对象:把事务分解成一个个对象,由对象之间分工与合作面向对象的特性:封装性 继承性 多态性面向过程和面向对象的对比:面向过程性能比面向对象高,适合跟硬件联系更紧密的东西,但没有对象更易维护,易复用,易扩展面向对象容易维护,易复用,由于面向对象有三个特性,可以使系统更易维护,性能比面向过程低面向对象思维特点:抽取对象共用属性和行为组织(封装)成一个类 对类进行实例化,获取类原创 2022-01-07 01:30:58 · 447 阅读 · 0 评论 -
数据可视化
数据可视化数据可视化主要目的:借助于图形化手段,清晰有效的传达和沟通有效信息数据可视化可以把数据从冰冷的数字转化成图形,揭示蕴含在数据中的规律和道理数据可视化使用场景...原创 2022-01-04 19:07:19 · 560 阅读 · 0 评论 -
jQuery(下)
jQuery事件原创 2022-01-03 00:17:47 · 234 阅读 · 0 评论 -
jQuery(中)
jQuery属性操作设置或获取元素固有属性值 prop()获取属性prop('属性')设置属性prop(“属性”,属性值)设置和获取自定义属性 attr()数据缓存 data()、获取 H5自定义属性 第一个 不用写data 返回数字型...原创 2022-01-01 21:36:13 · 472 阅读 · 0 评论 -
函数的定义方式 箭头函数 严格模式 闭包 正则表达式
函数的定义方式函数声明方式function关键字(命名函数) 函数表达式(匿名函数) new Function()var fn = new Function('参数1','参数2','函数体')function里面参数都必须是字符串格式 第三种方式执行效率低,不方便书写 所有函数都是Function的实例(对象) 函数也属于对象函数内的this指向改变函数内部的this指向1、call方法call()方法调用一个对象,简单理解为调用函数的方式,但是它可以改变函数的t.原创 2022-01-18 14:51:26 · 333 阅读 · 0 评论 -
ES5新增方法
数组:forEach()array.forEach(function(currentValue,index,arr))currentValue:数组当前项的值 index:数组当前项的索引 arr:数组对象本身filter()array.filter(function(currentValue,index,arr))filter()方法创建一个新数组,新数组中的元素通过检查指定数组符合条件的所有元素,主要用于筛选数组 注意它直接返回一个数组 curretValue:数组当前原创 2021-12-10 01:22:24 · 437 阅读 · 0 评论 -
jQuery(上)
JavaScript库即library,是一封装好的特定的集合,封装了许多预先定义好的函数在里面,就是一个js代码,对原生代码进行了封装jQuery概念jQuery是一个快速、简洁的js库优点:轻量级 跨浏览器兼容 链式编程、隐式迭代 对事件、样式、动画支持,简化DOM操作 支持插件扩展 免费开源JQuery使用步骤引入js文件JQuery的入口函数等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成相当于原生js中的DOMContentL.原创 2021-11-29 08:56:01 · 401 阅读 · 0 评论 -
移动端网页特效移动端轮播图
触屏事件移动端浏览器兼容性较好,无需考虑JS兼容问题,但是移动端也有自己独特之处,比如触屏事件touch(也称触摸事件)Android和IOS都有touch对象代表一个触摸点 ,触屏事件可响应用户手指(或触控笔)对屏幕或触控板操作触摸事件对象(TouchEvent)TouchEvent描述手指在触摸平面的状态变化的事件,用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少...原创 2021-11-28 13:51:26 · 1858 阅读 · 0 评论 -
关于动画函数封装以及轮播图(重点)原理的实现
动画实现原理核心原理:用定时器 setInterval()不断移动盒子位置实现步骤获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 此元素需要添加定位 , 才能使用 element . style . left动画函数简单封装注意函数需要传递2个参数 , 动画对象和移动到的距离动画函数给不同元素记录不同定时器如果多个元素都使用这个动画函数 ,每次都要var声明定时器 , 我们可以给不同的元素使用不同的定时器(自己专门用自原创 2021-11-24 17:58:34 · 732 阅读 · 0 评论 -
PC端网页特效
元素偏移量offset系列概述:offset系列相关属性可以动态得到该元素位置、大小获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度)注意:返回的数值都不带单位offset与style的区别offset可以得到任意样式表中的样式值 获得的数值是没有单位的 offsetWidth包含padding+border+width offsetWidth等属性是只读属性 , 只能获取不能赋值 想要获取元素大小位置,用offsetstyle只能得到行内样式表中的.原创 2021-11-23 21:55:16 · 196 阅读 · 0 评论 -
navigator/history对象
navigator对象navigator包含了有关浏览器的信息 , 它有很多属性 , 最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值history对象与浏览器对象进行交互 , 该对象包含用户(在浏览器窗口中)访问过的URL...原创 2021-11-23 08:33:38 · 410 阅读 · 0 评论 -
location对象
window对象提供一个location属性用于获取设置窗体的URL,并且可以解析URL。因为这个属性返回的是一个对象,所以也称这个属性为location对象URL统一资源定位符是互联网上标准资源的地址,互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它location常见属性location方法...原创 2021-11-21 20:16:46 · 188 阅读 · 0 评论 -
BOM 定时器JS执行机制
BOM即浏览器对象模型,它提供了独立于内容而与浏览器窗口交互的对象 , 其核心对象是window由一系列对象构成 , 并且每个对象都提供了很多方法和属性把浏览器当成一个对象来看 BOM的顶级对象是window BOM学习的是浏览器窗口交互的一些对象 BOM是浏览器厂商在各自浏览器上定义的 , 兼容性较差BOM的构成window对象是浏览器的顶级对象,具有双重角色它是js访问浏览器的一个接口 它是一个全局对象 , 定义在全局作用域的变量 , 函数都会变成window对象的属性和方法原创 2021-11-21 19:13:36 · 723 阅读 · 0 评论 -
JS事件高级
注册事件给元素添加事件,称为注册事件和绑定事件注册事件有两种方式:传统方式和方法监听注册方式传统注册方式利用on开头的事件onclick 特点:注册事件的唯一性 同一个元素同一个事件只能设置一个处理函数,最后处理的注册函数可以覆盖前面注册的处理函数方法监听注册方式W3C标准 推荐方式 addEventListener() 它是一个方法 ie9以前不支持,可使用 attachEvent()代替 特点:同一个元素同一个事件可以注册多个监听器 按照注册顺序依次执行addEven原创 2021-11-20 21:42:43 · 502 阅读 · 0 评论 -
Web APIS 自定义属性和节点操作
操作元素自定义属性的操作 获取属性值 element . 属性 获取属性值 element . getAttribute ('属性')区别:element . 属性获取内置属性值(元素本身自带属性)element . getAttribute ('属性') 获得自定义属性...原创 2021-11-19 19:52:59 · 421 阅读 · 0 评论 -
Web APIs(获取元素 事件基础 操作元素)
API(应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节简单理解:给程序员提供的一种工具,以便于实现某种功能Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)API 和 Web API 总结API是为我们程序员提供的一个接口,帮助我们实现某种功能,会使用就行,无需纠结内部如何实现 Web API 主要是针对于浏览器提供的接口,主要针对于浏览器做交互效原创 2021-11-15 21:38:29 · 180 阅读 · 0 评论 -
JS常用内置对象 数据类型的分类 传参 堆栈
对象的分类JS中的对象分为:自定义对象、内置对象、浏览器对象 前两种对象是JS基础内容,属于ECMAscript,第三个浏览器对象是JS独有的 内置对象是JS自带的一些对象,供开发者使用,提供常用的或基本的属性和方法 内置对象最大的优点就是帮助我们快速开发 JS提供多给内置对象:Math、Date、Array、String等MDN文档的使用查阅该方法的功能 查看里面参数的意义和类型 查看返回值的意义和类型 通过demo进行测试Math对象不是一个构造函数,所以不需要 new 来原创 2021-11-15 11:40:15 · 252 阅读 · 0 评论 -
JS中的对象
对象一个具体的事物,一组无序的相关属性和方法的集合,所有的事物都是对象对象由属性和方法组成属性:事物的特征,在对象中用属性表示(常用名词) 方法:事物的行为,在对象中用方法表示(常用动词)创建对象的三种方式利用字面量创建对象 利用 new object 创建对象 利用构造函数创建对象利用字面量创建对象对象字面量:花括号 {} 里面包含了表达这个具体事物 (对象)的属性和方法里面的属性或者方法采取键值对的形式 键 属性名 : 值 属性值 多个属性或者方法中间用逗号隔开...原创 2021-11-12 20:40:07 · 519 阅读 · 0 评论 -
JS作用域以及预解析
作用域限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局限性,增强程序的可靠性,减少名字冲突就是代码名字在这个范围起作用和效果JS作用域分为(es6之前)全局作用域 局部作用域全局作用域整个script标签或单独的一个js文件局部作用域(函数作用域)在函数内部,就是局部作用域,只在函数之内起效果变量的作用域根据作用域的不同,变量可以分为两种:全局变量 局部变量全局变量在全局作用域下的变量在函数内部未声明的变量也是全局变量原创 2021-11-12 18:00:38 · 491 阅读 · 0 评论 -
JS中的函数
函数实现代码的重复利用使用步骤声明函数 调用函数function 函数名 () { 函数体 }注意:function声明函数的关键字,全部小写 函数是做某件事,函数名一般用动词 函数不调用自己不执行调用函数函数名();函数的封装函数的封装是把一个或多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口 类似快递打包函数的参数形参和实参function 函数名 (形参1,形参2...) { //函数体}函数名 (实参1,实参2);原创 2021-11-12 16:15:34 · 504 阅读 · 0 评论 -
JS中的数组
数组指一组数据的集合,每个数据称为元素,数组中可以存放任意类型的元素,数组是一种将一组数据存储在单个变量名下的优雅方式数组的创建方式利用new创建数组 利用数组字面量创建数组...原创 2021-11-10 21:21:37 · 212 阅读 · 0 评论 -
JaveScript循环
循环目的:重复执行某些语句JS中的循环 for循环 while循环 do...while循环 for循环被重复执行的语句称为循环体,能否继续执行,取决于循环的终止条件,由循环体及循环的终止条件组成的语句,称之为循环语句语法结构:初始化变量,就是用var声明的一个普通的变量,通常用于计时器使用条件表达式用来决定每一次循环是否继续,就是终止的条件操作表达式是每次循环最后执行的代码,经常用于计数器变量进行更新(递增和递减)执行过程:断电..原创 2021-11-10 14:45:24 · 73 阅读 · 0 评论 -
JS流程控制
流程控制在程序执行过程中,各代码执行顺序对程序结果是有影响的,很多时候我们要控制代码的执行顺序来实现我们想要的功能简单理解:流程控制来控制代码按什么结构顺序来执行流程控制有三种结构,顺序结构,分支结构,循环结构,三种结构代表三种代码执行顺序顺序结构按照代码的先后顺序,依次执行分支结构从上到下执行过程中,根据不同条件,执行不同路径代码,得到不同的结果if语句 switch语句if (条件表达式) { //执行语句}如果if里面的条件表达式结果为真,则执行大括原创 2021-11-07 20:24:41 · 71 阅读 · 0 评论 -
JS运算符
运算符也被称为操作符,用于实现赋值、比较和算数运算等功能的符号JS中常见的运算符算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运算符算数运算符算数运算使用的符号,用来执行两个变量或值的算数运算尽量不要用浮点数参与运算,会有误差表达式:由数字、运算符、变量组成的式子最终都会有一个结果,返回给我们,称为返回值递增和递减运算符让数字变量反复加1和减1,可以使用递增(++)和递减(--)运算符来完成++和--放在变量前面,称为前置递增(递减)运.原创 2021-11-06 20:22:11 · 96 阅读 · 0 评论 -
JS数据类型以及相互转换
数据类型在计算机中,不同的数据所需占用的空间不同,为了便于把数据分成大小不同的数据,充分利用存储空间,于是定义了不同的数据类型JS是一种弱类型或者动态语言,意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的,运行完毕之后,变量就确定了数据类型JS拥有动态类型,同时也意味着相同的变量可用作不同的类型数据类型的分类简单数据类型(Number、String、Boolean、Undefined、Null) 复杂数原创 2021-11-06 17:24:05 · 171 阅读 · 0 评论 -
JS初识变量
JS注释单行注释 ctrl+/多行注释 shift+alt+aJS输入输出语句变量定义:变量是用于存放数据的容器。通过变量名获取数据,甚至数据可以修改变量在内存中的存储本质:变量是程序在内存中申请的一块用来存放数据的空间变量的使用(两步)1.声明变量 2.赋值var是一个JS关键字,用来声明变量(variable),使用该关键字计算机会自动为其分配内存 age是程序员定义的变量名,我们要通过变量名访问内存中分配的空间 =用来把右面的值赋给左面的变量空间..原创 2021-11-04 19:44:23 · 123 阅读 · 0 评论 -
响应式网页
媒体查询目标:能够根据设备宽度的变化,设置差异化样式开发常用写法 @media (媒体特性) { 选择器 { 样式 }} max-width (从大到小) min-width(从小到大)原创 2021-11-03 19:28:45 · 144 阅读 · 0 评论 -
移动适配的两种方案
rem目标:能够使用rem单位设置网页元素的尺寸网页效果:屏幕宽度不同,网页元素尺寸不同(等比缩放) rem单位:相对单位 rem单位是相对于HTML标签的字号计算结果 1rem=1HTML字号大小rem移动适配-媒体查询目标:能够使用媒体查询设置差异化CSS样式媒体查询能够检测视口的宽度,然后编写写法@media (媒体特性) { 选择器 { CSS属性 }}目前rem布局方案中,将网页等分成10份。HTML标签的字号为视口宽度的1/原创 2021-11-03 11:29:14 · 190 阅读 · 0 评论 -
CSS之平面转换
概念:使用transform属性实现元素的位移、旋转、缩放等效果平面转换:1、改变盒子在平面内的形态(位移、旋转、缩放)2、2D转换平面转换属性transform位移目标:使用translate实现元素位移效果语法:transform:translate(水平移动距离,垂直移动距离)取值(正负均可)1、像素单位数值2、百分比(参照物为盒子自身尺寸)注意:X轴正向为右,Y轴正向为下技巧:translate()如果只给出一个值,表示x轴方向移动距离单独原创 2021-10-27 15:50:07 · 260 阅读 · 0 评论 -
CSS之空间转换以及动画
空间转换目标:使用transform属性实现元素在空间内的位移、旋转、缩放等效果1、空间:是从坐标轴角度定义的。x、y和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。2、空间转换也叫3D转换属性:transform空间位移目标:使用translate实现元素空间位移效果语法:transform:translate3d(x,y,z); transform:translateX(值) transform:translateY(值) transform:transl原创 2021-10-28 21:34:16 · 229 阅读 · 1 评论 -
移动端Flex布局
分辨率物理分辨率是生产屏幕时固定的,不可改变逻辑分辨率是由软件(驱动)决定的原创 2021-10-31 20:33:20 · 138 阅读 · 0 评论