自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 AJAX

AJAX定义:异步传输+js+xml,通过在后台与服务器进行少量数据交换,可以达到在不刷新整个页面的情况下实现局部刷新,提高了用户体验。缺点:①由于不刷新整个页面的情况下实现局部刷新会破坏window机制,使得无法使用后退按钮②容易暴露数据,安全性不高③ajax不能很好的支持移动设备④对搜索引擎支持较弱ajax的工作流程1.创建XHR对象2.调用open()方法创建请求...

2019-06-25 19:30:30 130

原创 Vue中的路由

什么是路由所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源在 vue 中使用 vue-router1. 导入路由模块<script src="lib/vue-router-3.0.1.js"></script>2. 创建组件模板对象let login = { template: '<h1>登录组件<...

2019-06-19 22:23:33 150

原创 页面布局

移动端常用的布局:1.流式布局2.伸缩盒布局(弹性布局)flex3.响应式布局 媒体查询(在超小屏时,也是使用的流式布局)共同点:元素只能做宽度上的适配实现宽度和高度都能做到的适配(等比缩放)适配通过rem布局--将页面中px单位都转换成rem单位em:是相对单位,相对于body的字体大小 1em=body设置字体pxrem:相对单位 r+em:r:root根 相对于HTML设置...

2019-05-22 21:27:27 151

原创 响应式布局

响应式布局 bootstrap响应式布局:根据终端的屏幕的尺寸大小,改变页面的结构优点:大大的降低了开发成本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style...

2019-05-16 21:02:07 70

原创 移动端touch事件

1)touch事件:touch,触摸,是移动端的触摸事件,是一组事件1.touchstart:当手指触摸到屏幕的时候触发--只会触发一次2.touchmove:当手指在屏幕中滑动时触发---一直触发3.touchend:当手指离开屏幕时触发---只会触发一次4.touchcancel:被迫中止滑动时触发---当来电 弹出消息2)移动端添加事件的方式:addEventListener(事...

2019-05-15 20:31:17 324

原创 移动端流动布局

1.流式布局:使用百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,成为流动布局2.视觉窗口:viewport 是移动端特有的,这是一个虚拟的区域,用于承载网页 分三类:设备视口,页面视口,理想视口:一种理想的状态,设备视口=页面视口 承载关系:浏览器-->viewport-->网页1.适配要求1)网页的宽度必须和浏览器的宽度保持一致 width='de...

2019-05-14 21:07:05 253

原创 弧度和绘图

弧度:一种长度单位,两天射线从圆心向圆周射出,形成一个夹角,而夹角所对应的那条线段就叫弧度当弧长=圆的半径r,两条射线的夹角的弧度=1一个圆的弧度:2πr/r=2π---360度 对应的弧度2π---1°=2π/360绘制圆弧的 方法:arc(x,y,r,起始弧度,结束弧度,是否逆时针)<canvas width="600" height="500" id="cvs"&gt...

2019-05-13 20:51:20 305

原创 canvas的使用

什么是Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas的属性<!DOCTYPE html><html lang="en"><head> <meta cha...

2019-05-09 21:37:08 76

原创 视差和3D切割轮播图

视差原理:在滚动的时候,内容和多层次的背景实现或不同速度或不同方向的运动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ ...

2019-05-07 21:08:26 209

原创 语义化标签和h5新标签

语义化标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> header{ width: 200px; ...

2019-05-06 19:26:19 178

原创 动画和文字阴影

文字阴影:text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;(前两项是必须写的,后两项可以选写。 )<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <styl...

2019-04-28 21:01:57 128

原创 高级选择器

高级选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*找到所有同级元素,将第一个p标签设置样式*/ /*p:fi...

2019-04-25 21:42:20 101

原创 jquery中的ajax

jquery的get()和post()方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="jquer...

2019-04-24 21:20:36 1010

原创 AJAX

什么是AJAX?不用加载整个页面只用更新部分页面----用来做数据的交互异步的JavaScript和xml原理:通过xmlHttpRequest对象向服务器发送异步请求,从而从服务器中获取数据,然后把数据通过js来操作dom从而达到渲染页面的效果用于客户端和服务器端交换数据,可以实现在不重新加载整个页面的 情况下对页面进行部分更新核心:xmlHttpRequest对象特点:异步加载,...

2019-04-23 19:20:41 73

原创 封装jquery

1.delay方法delay()//动作延迟2.each方法each(索引,数组元素)优点:可以避免遍历<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style&gt...

2019-04-18 19:24:57 112

原创 jquery节点和注册事件

1.样式操作2.属性操作3.动画方法4.节点的操作1.1css操作:修改样式css("样式属性","样式属性值")css({"属性1":"属性值1","属性2":"属性值2"})获取属性css("属性名")1.2添加类名:addClass("类名")删除类:removeClass("类名")判断是否存在:hasClass("类名")切换类:toggleClass("类名"...

2019-04-17 21:03:36 137

原创 jquery动画

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

2019-04-16 19:08:48 81

原创 jquery

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

2019-04-15 22:07:48 119

原创 深浅拷贝和正则表达式

浅拷贝:把对象中的所有内容,直接复制一份或者是将这个对象的地址给另一个对象,他们的指向是相同的,两个对象之间有共同的属性和方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></h...

2019-04-14 13:06:29 166

原创 修改this指向和高阶函数

修改this指向:call,apply,bindapply方法:函数名.apply(对象,[参数1,参数2,...]);方法名称.apply(对象,[参数1,参数2,...]);call方法函数名.call(对象,参数1,参数2,...);方法名字.call(对象,参数1,参数2,...);第二个参数:函数中或者方法中的形参对应实参bind方法:复制函数,改变this指向,所以需...

2019-04-11 19:21:27 130

原创 原型的指向和继承

原型指向可以发生变化实例对象中的原型__proto__指向的是创建这个对象的构造函数中的原型对象prototype构造函数中的原型对象prototype的指向发生了改变,实例对象中的原型__proto__指向也会发生改变构造函数中的原型对象prototype的指向发生了改变,实例对象中的原型__proto__指向也会发生改变面向对象的三大特征:封装,继承,多态封装:包装,把一个值放到...

2019-04-10 19:23:00 160

原创 贪吃蛇

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> /** * 1.绿色的小方块 * 属性特征:宽高,背...

2019-04-09 21:37:52 73

原创 js组成回顾以及原型

javascript的组成1.ECMAScript 基础语法2.DOM3.BOM什么是js?是一门解释性语言是一门脚本语言是一门弱类型语言 var是一门基于对象的语言是一门动态类型的语言动态页面:页面html+css+js向服务器发送请求,服务器没有页面,是动态生成的,返回给客户端js最初目的:解决用户和服务器端的交互问题js可以做特效,游戏,移动端,服务端编程思...

2019-04-08 22:47:26 46

原创 轮播图

旋转木马:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css/css.css"/> <script sr...

2019-04-05 18:20:21 109

原创 动画函数封装

封装变速函数:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #dv{ width: 200px; ...

2019-04-03 19:29:57 112

原创 轮播图

封装函数:function animate(element,target) { clearInterval(element.timeId); element.timeId=setInterval(function () { //获取元素当前位置 var current=element.offsetLeft; //设置每一步移动多...

2019-04-02 21:21:06 76

原创 BOM

BOM概念:指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。BOM的顶级对象:window是浏览器的顶级对象,页面的所欲内容都属于window一个按钮绑定多个事件<!DOCTYPE html><html lang="...

2019-04-01 21:28:38 44

原创 创建元素

创建元素的三种方式:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--第一种创建方式:document.write("&...

2019-03-30 20:11:09 120

原创 兼容和节点

节点的操作文档对象:document元素:element 页面中所有的标签,元素--标签--对象节点:页面中索引的内容(标签 属性 文本)节点的属性:NodeType:节点的类型 1--表示标签 2--表示属性 3--文本NodeName:节点的名字1--大写的标签名字 属性--小写的属性名字 文本节点--#textNodeValue:节点的值 标签--null ...

2019-03-28 19:09:37 192

原创 DOM获取元素

根据id获取元素,返回一个元素对象getElementById("id名")根据标签名获取元素,返回一个伪数组,数组里存的是多个DOM元素对象getElementsByTagName下面的可能有些浏览器不支持根据name属性获取元素,返回一个伪数组,数组里存的是多个DOM元素对象getElementsByName("name属性值")根据class类名获取元素,返回一个伪数组,数...

2019-03-27 23:08:25 130

原创 初识DOM

初始DOMdom文档对象模型.dom树document-->html文档对象:整个html文件就是一个文档对象根元素:html元素:html的标签,也是一个对象节点:网页中所有的内容都是节点(标签,属性,文本,注释等)属性:标签的属性体验dom操作//dom:操作页面元素的1.第一种写法:js代码在标签中完成<input type="button" value="...

2019-03-26 17:17:39 46

原创 String和Array

String对象charAt(索引)返回对应的索引字符,如索引不在范围内,返回一个空字符charcodeAt(索引)返回对应的索引Unicode码contact(字符串)返回拼接好的新的字符串,原始的字符串(str)的值是不变的indexOf("字符串",开始索引):从开始索引的位置,找字符串,找到了就返回,没找到就返回-1,开始索引省略,默认从0的位置找LastIndexOf("字符串...

2019-03-25 21:03:46 520

原创 Date

Date对象创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日(世界标准时间)起的毫秒数。// 获取当前时间,UTC世界时间,距1970年1月1日(世界标准时间)起的毫秒数var now = new Date();console.log(now.valueOf()); // 获取距1970年1月1日(世界标准时间)起的毫秒数​Date构造函数的参数1....

2019-03-22 17:01:41 43

原创 对象

Math对象Math对象不是构造函数,它具有数学常数和函数的属性和方法,都是以静态成员的方式提供跟数学相关的运算来找Math中的成员(求绝对值,取整)Math演示:Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()Math.PI ...

2019-03-20 22:24:54 76

原创 arguments的使用

arguments的使用JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有的实参。arguments是一个伪数组,因此及可以进行遍历<!DOCTYPE html><html lang="en"><head>...

2019-03-19 22:43:12 168

原创 数组和函数

数组为什么要学习数组之前学习的数据类型,只能存储一个值(比如:Number/String。我们想存储班级中所有学生的姓名,此时该如何存储?数组的概念所谓数组,就是将多个元素(通常是同一类型)按一定顺序排列放到一个集合中,那么这个集合我们就称之为数组。数组的定义数组是一个有序的列表,可以在数组中存放任意的数据,并且数组的长度可以动态的调整。通过数组字面量创建数...

2019-03-18 20:50:49 191

原创 JavaScript语句

switch语句语法格式:switch (expression) {case 常量1:语句;break;case 常量2:语句;break;case 常量3:语句;break;…case 常量n:语句;break;default:语句;break;}...

2019-03-14 22:00:33 49

原创 JavaScript变量

变量什么是变量 什么是变量 变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据 为什么要使用变量 使用变量可以方便的获取或者修改内存中的数据 如何使用变量 var声明变量 var age; 变量的赋值 var age;age = 18; 同时声明多个变量 var age, name, sex;age =...

2019-03-13 18:10:36 84

原创 javascript

JavaScript介绍JavaScript是什么HTML CSSJavaScript 编程语言 流程控制Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。Ja...

2019-03-12 18:45:52 137

原创 css基础

字体图标图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了,额不是出现了,是以前就有,是被从新"宠幸"啦。。 这就是字体图标(iconfont).字...

2019-03-07 22:06:52 51

空空如也

空空如也

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

TA关注的人

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