温凉皆可-CSDN博客

原创 let和var的区别

ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。声明后未赋值，表现相同(function() { var varTest; let letTest; console.log(varTest); //输出undefined console.log(letTest

2017-11-06 14:25:53 348

原创 node.js常用dos环境命令

1输入node -v,测试是否安装成功，会输出版本信息。2.npm install -g supervisor ：自动监听服务器修改3.npm uninstall module-name 命令来卸载 Node.js 模块; 4.npm search express 搜索模块5.npm help command 可查看某条命令的详细帮助ctrl +

2017-10-16 11:28:20 1299

原创组件化开发

1. 为什么要做组件化？无论前端也好，后端也好，都是整个软件体系的一部分。软件产品也是产品，它的研发过程也必然是有其目的。绝大多数软件产品是追逐利润的，在产品目标确定的情况下，成本有两个途径来优化：减少部署成本，提高开发效率。减少部署成本的方面，业界研究得非常多，比如近几年很流行的“去IOE”，就是很典型的，从一些费用较高的高性能产品迁移到开源的易替换的产品集群，又比如使用Linux +

2017-10-09 21:14:25 1142

原创 MVC

MVC是什么？MVC全名是Model View Controller，是一种使用模型(model)+视图(view)+控制器(controller)设计创建 Web 应用程序的编程模式。Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。View（视图）是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。Controlle

2017-10-08 20:03:41 1510

原创 HTML5 地理定位

geolocation（地理定位）：允许对我们喜欢的网站分享我们的位置，在开发中使用js获取我们当前位置坐标（经纬度）getLocation是基于navigator的一个新属性，我们创建一个地理定位的方式：navigator.geolocation.getCurrentPosition(function(position){//获取当前位置getCurrentPosition：

2017-08-31 19:14:03 909

原创 HTML5 web存储

cookie:特点：通过键值对的形式存储数据。在本地浏览器上存储数据。有效期：未来的时间（expires）存储数据的容量：4kb所有的http请求都会带上cookie信息，（联想HTTP） (1)localStorage用法：1、保存数据：setItem:(key,value):有两个参数，第一个参数存储数据的键名，第二个参数存储数据的值。localSt

2017-08-31 19:12:00 800

原创拖放

1.被拖元素设置为可拖放draggable="true"div class="drag"id="drag1" draggable="true" ondragstart="drag(event)">俺是dragdiv>2.规定当被拖元素被拖动时会发生的事情ondragstart="drag(event)"把目标元素的id存放到text里面fun

2017-08-31 19:11:08 800

原创 HTML5 SVG

SVG 介绍：SVG 指可伸缩矢量图形 (ScalableVector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准SVG优势SVG 图像可通过文本编辑器来创建和修改SVG 图像可被搜索、索引、脚本化或压缩SVG 是可伸缩的SVG

2017-08-31 19:09:42 970

原创 HTML5 canvas 画布

canvas元素：width、height和style里面的width、height一样吗？如果直接设置canvas的width和height，画布和元素的宽度都是你设置的值。如果设置的是style里面的width和height，它仅表示canvas元素占文档流的位置，这时候画布的宽度和高度是默认值600,300。注意：1、设置canvas的宽度的，直接操作canvas的width

2017-08-31 19:08:37 992

原创 HTML5 audio与video

音频和视频处理为什么会有audio/video？或者说他们的出现是为了解决一些什么问题？在H5之前，如果想在浏览器上播放视频和音频的话都是需要通过一些插件的支持（比如flash），但是因为浏览器和插件之间存在一些兼容性的问题，所以为了解决这些问题，H5就退出了audio和video两种新的属性来作为现在大多数浏览器处理音频和视频的标准方法，使其可以统一化、简便化。audio

2017-08-31 19:06:15 1035

原创 H5的页面元素

details元素与summary元素details语义：详情summary语义：概要，摘要details元素可以实现类似显示/隐藏的功能，summary用于显示details的标题或者间接注意：（1）如果details下面没有summary元素，浏览器会自动添加，同时内容是“详细信息”。（2）details默认是关闭状态的，我们可以通过设置open属性让他打开。

2017-08-31 19:00:48 1169

原创 H5表单相关新增元素和属性

1表单元素新增和废弃的属性表单新增的属性可以分成两类：提交类：提交给副武器的相关属性，formaction，formmcthod，formtype控制类：required，antofocus，labels (1) form属性：在H5之前，表单内所有的从属标签（下级标签），必须书写在form标签内部。H5

2017-08-31 18:59:02 1703

原创主体结构元素与非主体结构元素

主体结构元素主体结构元素：它是为了语义可以结构化，说白了就是为了更好地SEO，也就是为了浏览器更好地抓数据，包含的元素：article,section,nav,aside,time.(1)article文章、文档、页面。article> header> h2>HTML5课程h2> header>

2017-08-31 18:55:45 829

原创 HTML5的语法和新属性

1 HTML5的变化1.1 HTML5推出的理由推出的缘由和目标：目前，web端存在一些问题，比如兼容性问题，同样的页面，在不同的浏览器上显示的效果是不一样的，那么开发人员需要做很多额外的工作去解决这一问题，需要花费大把的事件在这上面，一些特殊的权限没有开放给开发人员，比如，定位权限，拉起照相机拍照权限，动画、绘画。所以H5的推出就是为了解决这一系列的问题。H5解决了什么问题？

2017-08-22 22:16:52 970

原创 JQuery DOM

内容操作（1）text()：获取或设置文本内容（等价于DOM中的innerText）。alert($("#p1").text());//捕获alert($("#p1").text("更改成我"));//内容更改（2）html():获取或设置元素中的所有内容（html的标签。var content= "";content+="JavaScript>";

2017-08-15 15:32:09 833

原创 JQuery入门

基本概念JQuery是一个JS库，能够帮助我们轻松实现一些原本可能比较麻烦的功能。JQuery每个版本又有两个小版本：压缩版和未压缩版，压缩版文件较小，但没有排版和注释，所以不便于阅读；而未压缩版文件较大，有排版和注释，便于阅读。JQuery实际上就是一个js文件，加载到页面就可以直接使用了。scriptsrc="../jquery-3.2.1.min.js">script>

2017-08-14 21:44:46 590 1

原创 BOM

常用对象概念：B（browser）O（object）M（model）浏览器对象模型我们定义的全局变量和全局函数都是window对象的属性和方法。window：窗口var a = 2;function test(){ a = 3; alert(a); alert(window.a);}全局变量window的属性。全局函数是wi

2017-08-11 13:31:47 569

原创 DOM

概念:DOM(Document Object Model):文档对象模型整个文档是由一系列节点对象组成的一棵树。节点：节点类型、节点名、节点值节点（Node）包括元素节点（1）、属性节点（2）和文本节点（3）。var th1= document.getElementById("th1");alert(typeof (th1.nodeType));alert(typeof

2017-08-11 13:29:41 481

原创 js事件

1.1例：粤商大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，赶赴现场通过喷水作业成功灭火。事件源：粤商大酒店201房间事件名：火灾事件注册：事先已经规划好片区，粤商大酒店所属片区归南湖区消防支队负责事件处理：喷水1.2常用事件鼠标常用事件：（1）单击事件body>pid="p1"onclick="fun()">单击事件测试p>

2017-08-08 22:36:49 209

原创 js中一些常用的算法

1、累加/累积累加：将一系列的数据加到一个变量里面，最后得到累加的结果。比如：将1-100的数求累加和。var sum = 0;for(vari = 1;i100;i++){ sum +=i;} 小球从高处落下，每次返回到原来的一半，求第十次小球落地时走过的路程。var h = 100;var s = 0;for(var

2017-08-08 08:23:48 2605

原创正则表达式

正则表达式为什么要有这个正则表达式？因为查找是一个比较复杂的东西，我们想更加准确快速找到自己想要的什么是正则表达式？它可以定义一种字符串逻辑的公式，来和要查找的字符串做匹配，找到自己想要的。定义：1. 使用 /规则/修饰符var patt = /Hello CoolDog/i; 2. 新创建一个RegExp对象,给两个参数分别为规则

2017-08-06 11:06:22 501

原创字符串与日期

定义：定义一个变量，然后直接将字符串赋值给它。字符串的本质是字符组成的数组，所以数组的方法它基本上都有。（1）访问字符串里面的字符 a 数组方式：str[i]; b 字符串特有的方式:charAt[]. （2）查找 a 数组方式：indexof b 字符串方式：search()方法：传入参数（要搜索

2017-08-03 22:06:35 619

原创 JS数组的使用

计算5名同学的平均分var a1,a2,a3,a4,a5;a1=Number(prompt("请输入分数"));a2=Number(prompt("请输入分数"));a3=Number(prompt("请输入分数"));a4=Number(prompt("请输入分数"));a5=Number(prompt("请输入分数"));var ave = (a1+a2+a3+a4+a5+a6+a7+

2017-08-02 21:56:30 478

原创函数的概念、定义、调用、参数传递、作用域

函数 1.1函数的概念：为什么需要用函数？首先看一下输入100以内所有素数问题的解决方案方案一：循环的嵌套：for (var n = 2;n <= 100;n++ ) { var m = Math.ceil(Math.sqrt(n));//根据相关数学定理，查找范围可缩减至{2，sqrt（n）} var found = false;//找到因子的标记 for (

2017-08-01 19:36:09 1044

原创循环嵌套和辅助语句

循环辅助语句 break：跳出所在的switch 或者循环结构。案例：判断素数var n = Number(prompt("请输入一个自然数："));var m = Math.ceil(Math.sqrt(n));//根据相关数学定理，查找范围可缩减至{2，sqrt（n）}var found = false;//找到因子的标记for (vari = 2; i <=m; i++){

2017-08-01 19:30:25 450

原创循环结构

While循环是表示“当.....则......”，也就是当某个条件成立时，则一直重复做。（调试工具查看程序运行轨迹以及变量的变化情况）：do while 和while的区别：dowhile 是先做一次然后再循环，while是先循环然后再做。案例：在100到999的范围内找出哪些数是水仙花数var num = 100;while (num <=999)

2017-07-29 20:14:30 516

原创错误与调试

1、计算机的错误有两种：语法错误与逻辑错误。语法错误：例：var a = 3+4;alert(a);alter(a);a++;alert(a);上例中alert被拼写成了alter，显示结果为a未被定义，说明后面的代码没有执行，因为输出后遇到了语法错误，程序终止执行。上例也进一步说明了解释型语言的特点：翻译一条，执行一条，遇到错误提前终止

2017-07-28 08:12:17 618

原创程序设计思维

1、程序是什么？程序是什么呢？其实在生活中我们会接触到很多程序，比如你到餐厅吃饭，你要先拿餐盘，然后选择自己吃的饭菜，然后走到座位，最后吃饭。其实程序就是为了解决某些问题所执行的步骤或者叫指令，我们在生活中一直都在执行各种各样的指令2、什么是编程？根据业务需要，指定或编制解决问题的流程。我们的学习内容和方向（1）解决问题的思路（2）计算机语言（3）

2017-07-26 20:42:08 857

原创 JS 程序设计（数据类型、对象、运算符）

1**数据类型** js中的数据类型分为三种：一为字符串类型（string），二是数值类型（number），在一个就是布尔类型（boolean）。比如：姓名：张三 string 年龄：26 number 身高：170cm number

2017-07-25 19:36:23 535

原创 JS 概念理解及引用

1**什么是js？** 为了更好地理解这个js的定义，我们来简单的做个比喻：如果把html比作一个人的身体，那么css就是给他“穿上”各式各样的衣服，而js呢就是能够让他做出一些动作和行为。2**js的作用** 简单概括一下，Js就是把我们所要展示的内容以动态的形式实时的展示出来。3**引用方式** 我们知道css有内部样式，外部样式，还有内联样式，而js比css少了一个，它只有内部样

2017-07-25 19:10:46 567

原创去除元素间距的解决方法

例：style type="text/css"> .frame{ width: 300px; height: 300px; background-color: #71b9f1; } .left{ width: 100px; he

2017-07-18 20:15:56 764

原创关于选择器的总结与整理

我们先回想一下什么是选择器？选择器：选择施加样式目标的一种形式，也可以说是根据某个依据来选择应用样式的目标。样式：样式内容：以键值对的形式来描述样式的细节，比如字体的大小、背景颜色等。由于选择的依据不尽相同，所以就产生了各种不同的选择器。元素选择器：直接按照标签（或元素）的名称来选择相应的目标。例： div{ Background-color：red }ID选择器：根据元素

2017-07-18 17:35:33 358

原创 CSS-结构选择器和伪类伪元素

1.结构选择器1.后代选择器：可以选择一个元素的后代元素，包括儿子孙子2.子元素选择器：通过某一个元素选中直接后代元素3.并选择器：将相同的样式放在一起，类名直接用英文逗号分隔。4.通配符选择器：*可以选中页面所有的标签。注意：通配符选择器对页面所有的元素都会设置对应的样式，而实际上有很多元素默认是不带任何的样式的。5.兄弟选择器：E+F:选中最近的一个“弟弟”元素，不

2017-07-17 20:59:10 708

原创 CSS基础—定位、选择器

1、定位定位方式有：static、fixed、relative、absoluteStatic 静态定位（默认）无定位，元素正常出现了流中，不受left、right、top、bottom属性影响fixed fix定位会将元素从流中“摘”出来单独进行定位，其定位取决于left、top重新定位之后可能会出现重叠，通过z-index可以调整其顺序，但是定位z-index无效

2017-07-14 09:35:53 513

原创 CSS背景、尺寸、盒子模型

1、背景相关属性background-color：背景色background-image：设定背景图片，需要设置图片的URL地址background-repeat：图片的复制选项repeat：在水平和垂直两个方向上进行复制no-repeat：不复制repeat-x：在垂直水平方向上复制repeat-y：在垂直方向上复制也可以将这一组属性值封装到一个属性ba

2017-07-14 09:10:35 685

原创 CSS字体属性

1、字体相关属性font-family:字体属性font-size：字体大小font-style:字形（斜体等）font-weight：字体粗细可以简写：font-style font-variantfont-weight font-size font-family前面三个可缺省，使用默认值，font-size和font-family必须制定值。2、

2017-07-12 20:12:05 314

原创 CSS概念、颜色、尺寸单位

1、基本概念HTML描述了要呈现的内容，而CSS则定义了这些内容呈现的形式，比如字体，颜色等，使用CSS能够将页面内容和呈现形式有效分离，有利于分工合作，也有利于快速更换不同的呈现形式。三种方式：（1）内联样式：将样式定义在style属性中，内容和呈现形式高度耦合，维护困难，不利于分工合作。只能应用于当前标签。（2）内部样式：在标签中通过标签来定义。内容和表现形式

2017-07-12 20:02:14 387

原创 CSS选择框、下拉列表、文本域、表格

1.文件选择框input type="file"accept="image/*>accept：指定可选择文件的类型。上传的头像需指定对应表单的属性formenctype="multipart/form-data">2.下拉列表优点：（1）节省页面空间，使得页面更加简洁（2）方便输入（3）规范输入selectna

2017-07-10 21:19:38 1781

原创列表、input

列表标签（unordered list）：定义一个无序列表：定义一个列表项type ：指定无序列表的符号样式取值有disc：实心圆点（默认）circle：空心圆圈square：实心正方形（ordered list）：定义一个有序列表type：指定序号类型，取值有：1:123456.....A:ABCDE....a:abcde....I:I I

2017-07-08 16:35:53 680

原创基本概念、标签、跳转

HTML 基础知识标记语言基本概念什么是计算机语言人与人之间是通过语言进行交流，那么人和计算机之间如何交流呢？计算机只知道“0”和“1”，所以我们就通过“0”和“1”这种语系来和计算机交流，这就是机器语言。机器语言对于人来讲太难理解，编制程序太困难101011100001110001101010100011（3+6运算）为了解决这个问题，我们将一串特定的“01”进行符号化，

2017-07-06 20:35:38 562

空空如也

空空如也