- 博客(36)
- 收藏
- 关注
RSS订阅原创 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关注的人