- 博客(36)
- 收藏
- 关注
RSS订阅原创 vue
在vue组件页面中，集成vue-router路由模块 vue-router官网 1.安装路由 npm i vue-router -S 导入路由模块： import VueRouter from 'vue-router' 安装路由模块： Vue.use(VueRouter); 导入需要展示的组件: import login from './c...
2019-06-25 22:21:52
218
原创 vue 路由
路由的基本使用 <body> <div id="app"> <!--<a href="#/login">登录</a>--> <!--5.1 使用router-link导航 to：相当于a标签的href路径 router-link在页面中会被渲染成a标签 --> ...
2019-06-19 23:18:14
177
原创 移动端..
Web Appp 屏幕适配方法有很多，比如流式布局，限死高度，响应式等方法；我认为rem为最佳的解决方案，它可以以最小的代价适配所有的屏幕 不得不说一下viewport：只有明白了viewport的概念以及meta标签的使用，才能使网页适配。 关于三个viewport（视口）理论 布局视口 默认的viewport：为什么body的宽度是980px？980为移动端的布局视口。 ...
2019-05-22 22:11:50
252
原创 we移动端
1）touch事件： touch,触摸， 是移动端的触摸事件，是一组事件 1. touchstart： 当手指触摸到屏幕的时候触发的-------只会触发一次 2. touchmove： 当手指在屏幕中滑动时触发 ---------一直触发 3. touchend： 当手指离开屏幕时触发--------只会触发一次 4. touchcancel: 被迫中止滑动时触发----...
2019-05-15 20:54:20
350
原创 画布
绘制饼图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #cvs { border: 1px solid red...
2019-05-13 19:18:50
165
原创 h5c3 视觉差
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。 原理 通过前景与背景在场景移动时产生不同的视差，从而达到简单的立体效果 页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层 例:QQtim html: ...
2019-05-07 18:52:05
385
原创 h5c3
语义化标签: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--如果浏览器的版本小于ie9， 浏览器会读取以下代码--> <!--[if lt I...
2019-05-06 19:17:19
400
原创 css3
动画(CSS3) animation 动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r @keyframes 动画名称 { from{ 开始位置 } 0%...
2019-04-28 18:27:19
121
原创 h5c3
<style> /*==============伪类选择器*/ /* !*找到所有同级元素，同级元素中第一个是p标签，设置样式*! p:first-of-type{ background-color:pink; } p:last-of-type...
2019-04-25 22:38:20
149
原创 jquery ajax
get(),post() <script src="jquery-1.8.3.min.js"></script> <script> /* * * $.get('url'，['传入的参数data{}'],successCallback(响应的内容，响应的状态),['返回的类型type']) * * $.post('url...
2019-04-24 22:14:50
195
原创 jQuery ----ajax
什么是ajax？ asynchronous JavaScript and xml 不用加载整个页面，只用更新部分页面----用来做数据交互的 ajax的原理：通过xmlHttpRequest对象向服务器发送异步请求，从而从服务器中获取到数据，然后把这个数据通过js来操作DOM从而达到渲染页面的效果 简单来说：ajax用于客户端和服务器端交换数据，可以实现在不重新加载整个页面的情况下...
2019-04-23 22:09:24
141
原创 jquery 链式编程/多库共存/制作jquery插件
dalay():延迟 delay() 方法对队列中的下一项的执行设置延迟。 语法: $(selector).delay(speed,queueName) 链式编程 通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。 end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返...
2019-04-18 19:29:35
215
原创 jQuery:节点操作(清空/删除节点) 特殊属性操作/jQuery事件机制
节点操作: empty():清空节点 ----- $("div").empty(); html():清空节点------$("div").html("")//内存泄露 remove():删除节点------$("div").remove() clone():克隆节点------- $(".cls").click(function () { alert(111); ...
2019-04-17 23:00:50
826
原创 jQuery 操作样式/操作属性/动画/节点操作
（一）jQuery操作样式 css操作: 设置单个样式：css(属性，属性值)；----js通过style属性来设置样式 $("li") .css("backgroundColor", "pink") .css("fontWeight", "700") .css("fontStyle", "italic"); //设置多个样式：css({...
2019-04-16 22:04:46
272
原创 jQuery
1.使用jquery的步骤 ①导入jquery库 ②写代码 2. 入口函数 window.onload=function(){} $(document).ready(function(){}); $(function(){}) //2. 入口函数 //ready(fn):当页面加载完成后要执行的函数(fn) $(documen...
2019-04-15 22:49:57
218
原创 浅拷贝/深拷贝 正则表达式
浅拷贝：拷贝就是复制，就相当于把一个对象中所有的内容，直接复制一份，或者是将这个对象的地址给另一个对象，他们的指向是相同，两个对象之间有共同的属性和方法 var obj = { name: "小明", age: 12, car: ["奔驰", "保时捷", "兰博基尼", "玛莎拉蒂"] } var obj1 = {}; ...
2019-04-14 14:03:05
851
原创 修改this指向,(call,apply,bind) 高阶函数()函数作为参数，函数作为返回值) 闭包，沙箱，递归....
apply和call方法: 语法分别为: /*apply()方法*/ function.apply(thisObj[, argArray]) /*call()方法*/ function.call(thisObj[, arg1[, arg2[, [,...argN]]]]); 作用:改变this指向; 它们各自的定义： apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如...
2019-04-11 22:26:00
267
原创 js高级
复习....创建对象的三种方式: <script> /* * * 创建对象的三种方式： * 1.new Object（）----内置构造函数创建 * 2.字面量方式创建 * 3.自定义构造函数创建 * * 对象：特指的某个事务，有属性和方法 * 小明： * 姓名，年龄，身高，体重，---特征...
2019-04-10 22:31:23
174
原创 js中类型转换和运算
类型转换： 其他类型转化为数字类型 方法一：parseInt（） 转为整数 只有数字前没有字母，也可以是字母 方法二：parseFloat 转为浮点数（小数）非常严格内容中有数字外的都不是 console.log(parseInt("10fhjkj"));//10console.log(parseFloat("10.88"));//10.88 其他类型转为字符串类型 方法一：变量名...
2019-04-09 21:28:38
205
原创 js的基本的数据类型
Js中的基本的数据类型： number string boolean null undefined 混合型数据类型： object Number：数字类型（整数和小数） String：字符串类型（值一般用单引号或者双引号括起来） Boolean：布尔类型（值有两个，true-- 真，false---假） Null：空值类型（值只有一个null，假如一个对象指向为空了，那么此时可以赋值为...
2019-04-08 22:16:51
164
原创 变速动画函数封装
function animate(element, attr, target) { //第一步，清除定时器 clearInterval(element.timeId); element.timeId = setInterval(function () { //获取当前元素的attr这个属性的属性值 var current = parseIn...
2019-04-03 20:48:38
169
原创 轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; ...
2019-04-02 21:40:00
127
原创 onkeyup/bom/页面加载事件/location对象/history对象/navigator对象/定时器
onkeyup ：onkeyup 键盘按键按下触发 ,当按键释放时会调用事件，但是调用事件之前已经把该按键值显示到了文本框中了。 <style> #dv { width: 400px; margin: 100px auto; } #dv #txt { widt...
2019-04-01 22:05:08
207
原创 创建元素/注册移除事件
创建元素的三种方式 document.write() document.write('新设置的内容<p>标签也可以生成</p>'); <script> function my$(id) { return document.getElementById(id) } my$("btn").onclick=function () { ...
2019-03-30 20:23:03
283
原创 兼容和节点
节点的操作 文档对象:document 元素:element 页面中所有的标签,元素--标签--对象 节点:页面中索引的内容(标签 属性 文本) 节点的属性: NodeType:节点的类型 1--表示标签 2--表示属性 3--文本 NodeName:节点的名字1--大写的标签名字 属性--小写的属性名字 文本节点--#text NodeValue:节点的值 标签--null ...
2019-03-29 19:10:21
210
原创 DOM获取元素
根据id获取元素 var div = document.getElementById('main'); console.log(div); // 获取到的数据类型 HTMLDivElement，对象都是有类型的 // HTMLDivElement <-- HTMLElement <-- Element <-- Node <-- EventTarget 例: &...
2019-03-27 22:05:25
131
原创 API dom操作
DOM DOM的概念 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JS...
2019-03-26 19:17:52
388
原创 String和Array
String对象 charAt(索引)返回对应的索引字符,如索引不在范围内,返回一个空字符 charcodeAt(索引)返回对应的索引Unicode码 contact(字符串)返回拼接好的新的字符串,原始的字符串(str)的值是不变的 indexOf("字符串",开始索引):从开始索引的位置,找字符串,找到了就返回,没找到就返回-1,开始索引省略,默认从0的位置找 LastIndexOf("字符串...
2019-03-25 22:23:39
745
原创 函数(arguments),作用域,预解析,对象
函数(arguments) JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历 function getSum(){ //arguments：伪数组 var su...
2019-03-19 22:35:06
315
原创 数组和函数
数组 为什么要学习数组 之前学习的数据类型，只能存储一个值(比如：Number/String。我们想存储班级中所有学生的姓名，此时该如何存储？ 数组的概念 所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。 数组的定义 数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。 通过数组字面量创建数组 // ...
2019-03-18 22:22:17
125
原创 Javascript 分支/循环
switch语句 语法格式: switch (expression) { case 常量1: 语句; break; case 常量2: 语句; break; case 常量3: 语句; break; … case 常量n: 语句; break; default: 语句; break; } ...
2019-03-14 21:44:40
305
原创 JavaScript变量
变量 什么是变量 什么是变量 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据 为什么要使用变量 使用变量可以方便的获取或者修改内存中的数据 如何使用变量 var声明变量 var age; 变量的赋值 var age; age = 18; 同时声明多个变量 var age, name, sex; age = 10; name = 'zs'; 同时声明多...
2019-03-13 22:02:45
110
原创 JavaScript 基础
JavaScript介绍 JavaScript是什么 HTML CSS JavaScript 编程语言 流程控制 Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。Ja...
2019-03-12 23:48:53
78
原创 css基础4
字体图标 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。。 这就是字体图标（iconfont). 字...
2019-03-07 21:31:17
304
原创 css基础3
叠放次序（z-index） 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。 在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。 比如： z-index: 2; 注意： z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。 如果取值相同，则根据书写顺序，后来居上。 后...
2019-03-06 21:05:47
357
原创 css基础2
CSS 背景(background) CSS 可以添加背景颜色和背景图片，以及来进行图片设置。 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 background-position 背景位置 background-attachment 背景固定还是滚动 ...
2019-03-03 20:44:46
366
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人