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