自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(36)
  • 收藏
  • 关注

原创 webpack取消严格模式

webpack取消严格模式webpack是默认开启严格模式的,当我们要取消webpack的严格模式我们需要使用到**@babel/plugin-transform-strict-mode**插件1.安装@babel/plugin-transform-strict-mode插件:npm i babel-plugin-transform-remove-strict-mode -D2.使用方式:...

2019-06-26 19:28:16 796

原创 webpack打包

webpack打包1. 创建项目描述文件. 运行npm init -y初始化项目,使用npm管理项目中的依赖包2. 创建项目基本的目录结构src 和 dist,在src里新建index.html3. 使用npm i jquery -S安装jquery类库4. 创建index.js并书写各行变色的代码逻辑:// 导入jquery类库import $ from ‘jquery’// ...

2019-06-20 23:08:43 106

原创 响应式布局

响应式布局响应式布局: 就是一个网站能够兼容多个终端,而不是每一个终端都要做一个特定的版本优点: 面对不同的分辨率特别的灵活能够快速的解决多设备的适应问题 . 仅适用于中小型网站缺点: 兼容各种设备导致工作量变大, 效率会降低代码累赘, 会出现隐藏无用的元素, 导致加载时间过长原理 : 通过媒体查询来制定某一个宽度区间的网页布局超小屏幕(移动设备) 768px以下小屏屏幕(平板设...

2019-05-17 20:15:36 172

原创 Touch事件

Touch事件​最基本的touch事件包括4个事件:touchstart:当在屏幕上按下手指时触发touchmove:当在屏幕上移动手指时触发touchend:当在屏幕上抬起手指时触发touchcancel:当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。​ ...

2019-05-15 19:09:56 498

原创 移动web

移动web/** 适配问题 : 屏幕尺寸不一样* 解决方案 : 用百分比自适应布局. 叫做流式布局, 同时还需要对移动端的viewport视口进行设置, 才能达到适配的目的* 流失布局的特点: 非固定像素, 内容向两侧填充* 视觉窗口: viewport是移动端特有的. 看成是一个虚拟的区域. 用来承载网页的. 其关系: 浏览器承载viewport, 而viewport承载网页**...

2019-05-14 19:15:50 236

原创 画布

画布/** 角度: 一个愿是360°* 半径: 从圆心到圆上任意一点的线叫半径 设置为 r* 周长: 圆边长的总和计算圆的周长 : 2πr** 弧度: 一种长度单位 , 两条射线从圆心向圆周射出, 形成的一个夹角, 而夹角所正对的那条线段叫做弧度* 当这个弧长正好等于圆的半径的时候, 两条射线的夹角的弧度为1** 一个圆有多少弧度 : 2πr /r = 2π 一个圆的角度...

2019-05-13 21:28:38 105

原创 画布

画布1.画布标签定义定义元素一般需要宽度“width”属性和“height"属性,当然者两个属性可选,还可以用DOM属性或者CSS来设置。默认是"width"=300px ”height“=150px;很多老的浏览器并不支持Canvas特性,这是需要对支持Canvas特性的浏览器给出提示:浏览器不支持Canvas元素2.画布工具对象、坐标、路径和填充画布区域其实是一个二维网格,其...

2019-05-09 21:43:40 118

原创 web 本地存储

web 本地存储 (localStorage、sessionStorage)说明对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStoragesessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载localStorage(...

2019-05-08 21:04:23 92

原创 h5的新样式

h5的新样式1.伸缩布局/让子盒子分别分布在首尾//justify-content: space-between;/display: flex;/让子盒子垂直居中//align-items:center;/flex-direction: row;flex-wrap: wrap;/让多行子容器位于父容器的位置/align-content: center;ie9以下不支持h5标...

2019-05-06 21:17:51 499

原创 js高级总结

js高级总结通常,通过 JavaScript,您需要操作 HTML 元素。1、通过 id 找到 HTML 元素2、通过标签名找到 HTML 元素3、通过类名找到 HTML 元素提示:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。var x=document.getElementById(“intro”);var y=document.getElementsByTagN...

2019-04-30 16:41:12 89

原创 动画属性

动画属性// 2.c3新增的样式属性// 1)盒子的样式: 圆角边框:border-radius// 盒子阴影:box-shadow:水平偏移量 垂直偏移量 模糊距离 阴影大小 阴影颜色 阴影的位置(outset inset)// 文字阴影:text-shadow:// 2)背景:// ...

2019-04-28 20:35:35 121

原创 api总结

api总结DOM(documen object model)dom树。节点操作获取dom接点document.getElementById(‘id’)//元素iddocument.getElementByTagName(‘div’)//集合document.getElementByClassName(’.bannerName’)//集合document.querySelectorA...

2019-04-23 19:29:08 190

原创 jq方法

jq方法1:delay()对被选元素的所有排队函数(仍未运行)设置延迟。如果当前动画还没执行完,并不会立即停止,而是等当前动画执行完,然后延迟,再执行下一个动画2:each()jQuery的$.each()函数是全局函数,用于循环遍历jQuery对象的每个元素,它对于多元素DOM操作,循环任意数组和对象属性非常有用。除了这个函数之外,jQuery还提供了一个具有相同名称的辅助函数,可以在...

2019-04-18 21:31:53 304

原创 jq-其他用法

jq-其他用法// 获取console.log(("div").text());//文本内容console.log(("div").text()); // 文本内容 console.log(("div").text());//文本内容console.log((“div”).html()); // 所选元素里的所有...

2019-04-17 21:05:21 134

原创 JQ动画函数

JQ动画函数//设置单个样式:css(属性,属性值);----js通过style属性来设置样式//添加类名:addClass("类名")//移出类名:removeClass("类名")//判断是否存在这个类名:hasClass("类名")//切换类:toggleClass("类名") //1. attr(标签属性)------用法和css(样式属性)一样 //pr...

2019-04-16 20:35:53 442

原创 JQ入门

#**# JQ入门1使用jquery的步骤①导入jquery库②写代码2. 入口函数window.function(){}$(document).ready(function(){});$(function(){})3.的实质:就是一个函数,用法:①参数为函数,入口函数②参数为DOM对象,将DOM对象转换为jquery对象③字符串,获取jquery对象∗∗4.∗∗jquery对象...

2019-04-15 19:04:57 159

原创 正则表达式

正则表达式//浅拷贝:拷贝就是复制,就相当于把一个对象中所有的内容,直接复制一份,或者是将这个对象的地址给另一个对象,他们的指向是相同,两个对象之间有共同的属性和方法//深拷贝:拷贝还是复制的意思,深,把对象中所有的属性和方法,一个一个的找到,并且在另一个对象中开辟相应的空间,一个一个的存储到另一个对象中//深拷贝:浅拷贝+递归来实现* 创建正则表达式对象:/元字符或者限v定符/* 1....

2019-04-14 19:59:21 133

原创 js高级

js高级总结:假如使用一个函数需要改变this指向值, 用call, apply, bindfn.call(需要指向的对象, 参数1, 参数2…) 参数不多的时候用fn.apply(需要指向的对象, [参数1, 参数2…]) 参数很多的时候用假设你要生成一个新的函数, 并且想绑定在某个函数对象上使用, 就可以使用bind()var newFn = fn.bind(需要指向的...

2019-04-12 21:02:49 114

原创 原型对象和原型链

原型对象和原型链//原型指向可以发生改变//实例对象中的原型__proto__指向的是创建这个对象的构造函数中的原型对象prototype//构造函数中的原型对象prototype的指向发生了改变, 实例对象中的原型__proto__指向也会发生改变//构造函数中的原型对象(prototype)和实例对象中的原型对象(proto)是相同,// 实例对象中的原型对象(proto)指向 构造...

2019-04-10 20:12:27 105

原创 面对对象

面对对象//-----使用构造函数创建对象:浪费空间,数据不能共享// 原型对象作用之一:节省空间,数据共享//原型://1. 构造函数中有一个prototype属性,是一个对象,叫原型,这个属性是给程序员,是一个标准的属性,也可以叫原型对象//2. 实例对象中有个属性:__proto__属性,也是一个对象,叫原型,这个属性给浏览器用,不是一个标准的属性,也可以叫原型对象//实例对象...

2019-04-08 21:14:53 90

原创 bom

Bomclient系列:获取可视区域的值----不带单位*clientWidth:可视区域的宽度,不带边框clientHeight:可视区域的高度,不带边框clientLeft:左边边框的宽度clientTop:上边边框的宽度offset scroll*/console.log(my("dv").clientWidth);cons...

2019-04-07 18:00:51 83

原创 变速函数

变速函数***1* offset系列**:在style标签中的属性,不能通过style.属性获取到,只能通过offset获取** offsetWidth:获取元素的宽(width+padding+border)* offsetHeight:获取元素的高(有边框)* offsetLeft:获取元素距离左边的距离* offsetRight:获取元素距离右边的距离** offsetL...

2019-04-03 20:41:46 369

原创 定时器轮播图

定时器轮播图1.动态封装函数// 如果样式的代码在style的标签中设置, 外面是获取不到的//获取div当前的位置console.log(my$(“dv”).offsetLeft);// 数字类型 没有px //点击按钮移动到400px , 每过20毫秒移动10px my$("btn").onclick = function () { ...

2019-04-02 20:18:03 710

原创 封装简单动画函数-由简到完善

封装简单动画函数-由简到完善在学习javascript动画效果的过程,动画函数一定是少不了的,所以在初级学习的过程中,封装好一个动画函数可以直接调用能够帮我们省下更多的学习时间。下面是我一步步完善动画函数的过程。1、简单的右移函数:鼠标点击按钮,box向右移动一定的位置//封装右移动画函数function animateMoveRight(element,target){//通过off...

2019-04-02 10:54:11 137

原创 BOM

BOM BOM:Browser object model* 顶级对象:window=======页面中所有的内容都属于window* window.属性/ window.方法------一般可以省略window不写* // //1.在页面中弹框,一般不用,调试的时候用// // alert("对话框");//// //2.确定框,确定和取消// var flag = confi...

2019-04-01 18:52:15 91

原创 事件

事件***1*元素创建的三种方式* 1. document.write(“内容和标签”) 页面上所存在的内容会被覆盖* 2.对象.innerHTML = “内容和标签” 对象中的内容被覆盖* 3.document.createELement(“标签的名字”) 创建完之后追加到父级元素* 对象.appendChild(要添加的标签对象) 添加到父元素的末尾*** 2...

2019-03-31 18:59:03 68

原创 节点

节点1.innerText和innerHTMLinnerText 设置文本内容 只能获取文本innerHTML 设置文本内容 可以解析标签 能获取元素内所有的内容(文本, 标签)2.自定义属性html标签没有这个属性, 我自己加的属性 —>自定义属性 (为了储存数据)获取自定义的属性 : getAttribute(“自定义属性的名字”)设置自定义的属性 : set...

2019-03-29 19:41:20 150

原创 DOM02

DOM021:* 根据id获取元素,返回一个元素对象* getElementById(“id名”);2* 根据标签名获取元素,返回一个伪数组,数组里存的是多个DOM元素对象* getElementsByTagName(“标签名”)3根据name属性获取元素,返回一个伪数组,数组里存的是多个DOM元素对象* getElementsByName(“name属性的值”)4根据cla...

2019-03-27 19:02:23 227

原创 DOM

DOM - 文档:一个网页可以称为文档 - 节点:网页中的所有内容都是节点(标签、属性、文本、注释等) - 元素:网页中的标签 - 属性:标签的属性 - *## 获取元素 - 动态创建元素 - 对元素进行操作(设置其属性或调用其方法) - 事件(什么时机做相应的操作)id获取元素document.getElementById("")标签名获取元素var str=...

2019-03-26 19:23:06 132

原创 语句

语句if-----else—语句if(…){…} if----else if---语句-------一般是适用于值得范围,从大范围 缩小到小范围,来精确确定输入的值 if(...){ ... }else if(...){ ... } switch----case---语句------一般是适用于输入的值并不确定,有多...

2019-03-14 20:58:49 72

原创 数据类型

数据类型数据类型:六种基本数据类型:string number boolean undefined null object 简单数据类型:number string boolean undefined null 复杂数据类型:object number: 数值范围:Number.MIN.VALUE...

2019-03-13 20:28:30 92

原创 字体图标

字体图标一. 1.声明字体,告诉浏览器使用的是什么字体图标在标签对里拷贝字体图标的内容–口--@font-face{@font-face {font-family: ‘lixiaoting’;src: url(‘fonts/icomoon.eot?v1i6pt’);src: url(‘fonts/icomoon.eot?v1i6pt#iefix’) format(‘embedd...

2019-03-07 19:04:02 117

原创 css样式

css样式 display:none;------完全隐藏元素,并不保留位置 visibility:---------元素是否可见,但保留位置!!! ----visible(默认值,可见) ----hidden(隐藏) overflow:-------scroll(一定会出...

2019-03-06 19:01:09 97

原创 定位

定位定位:相对定位 绝对定位 relative( 相对定位) absolute(绝对定位) fixed(固定定位) 样式属性:left top bottom right ------但一般只用 left top值偏移 相对定位:相对于自身移动位置,偏移 脱离文档流,但却没有完全脱离文档流,本身位置并不会脱离文档流,仍然占据位置 ...

2019-03-05 20:57:35 93

原创 浮动

浮动左浮动 右浮动 不浮动浮动: 脱离文档流,添加浮动的元素脱离普通文档流,将会“飘”在文档之上,并不占文档中的位置,后来的元素将顶替浮动的元素的位置float:left right none;运用:可使块元素并行在一行但浮动元素并不会飘出父级元素的内边距,当父级元素有内边距时,浮动元素并不会与父元素的边框对齐,会在除内边距外的地方对齐,即只在盒子内容区域活动!!!!!不能和 ...

2019-03-04 21:15:21 81

原创 盒子模型

盒子模型/盒子模型:内容 边界(margin) 边框(border) 填充(padding)/width:200px;/width和height : div的内容区域的宽高,并不是盒子的宽度和高度------------标准盒子模型/height:200px;/div的内容的宽高width,height(内容区域)+border+padding-------IE盒子模型/backgroun...

2019-03-03 23:03:42 59

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除