前端攻城狮
csdn_gyh
这个作者很懒,什么都没留下…
展开
-
前端攻城狮---node之图书管理系统(restful)
什么是RESTful风格?REST是REpresentational State Transfer的缩写(一般中文翻译为表述性状态转移),REST 是一种体系结构,而 HTTP 是一种包含了 REST 架构属性的协议,为了便于理解,我们把它的首字母拆分成不同的几个部分:表述性(REpresentational): REST 资源实际上可以用各种形式来进行表述,包括 XML、JSON 甚至 ...原创 2019-01-20 16:39:15 · 486 阅读 · 0 评论 -
前端攻城狮---css3之视口
这里我们主要讲解视口的概念。前言什么是视口呢?就是可视化窗口的,pc端就是浏览器的窗口,手机端就是手机浏览器的窗口。那么为什么我们要去了解视口?视口会在平时的开发中如何去要用到呢?别急往下看。这样子我们来做两组实验,我们可以通过浏览器的命令行来模拟pc和手机的界面,去获取界面的宽度,我们来看看具体的值。<!DOCTYPE html><html lang="...原创 2018-09-11 17:19:41 · 1444 阅读 · 0 评论 -
前端攻城狮---css3动画属性
因为知识点都需要循循渐进,故css3的一些3D特效、伸缩布局等放此处讲解transform属性我们可以通过transform去设置2D 3D动画,当然也需要配合transition,不然呈现过渡的效果。平移我们来看看几种写法transform:translate(200px,200px); 表示X轴上平移200px,Y轴上平移200px transform:transla...原创 2018-08-28 21:30:00 · 319 阅读 · 0 评论 -
前端攻城狮---AJAX(瀑布流的编写与应用)
目录瀑布流方式一:依次排列瀑布流方式二:谁低排谁下面瀑布流结合ajax的下拉刷新本章节主要是讲解瀑布流的集中编写方式和结合ajax的下拉加载更多。下面看看效果图是的瀑布流方式一:依次排列什么叫依次排列呢?就是所有的item从左到右依次排列,当超过父view的宽度时,换行继续排列。效果图如下:里面的数字其实就是一张张图片。我们先来看看布局 <...原创 2018-08-22 13:31:56 · 1830 阅读 · 2 评论 -
前端攻城狮---AJAX(3)
在ajax(2)中,我们讲解了一些基本常见的表单请求,接下来我们在延伸一下ajax的其他知识点吧AJAX&表单序列化提交好比注册界面,那么多的组件,那么多的数据,我们不可能一个个去getElementById吧,还要组织数据且将数据拼成$连接的string,太麻烦 太费事,所以我们需要用该方法,大大的简化了ajax请求的操作。先上代码//样式部分 <form acti...原创 2018-08-16 17:38:54 · 222 阅读 · 0 评论 -
前端攻城狮---AJAX(2)
本章节,咱就来了解了解ajax的几种请求方式。form---get/postget<body> <!--method属性表示表单提交方法 action处理表单的服务器程序--> <form action="08formGET.php" method="get"> <label>请输入姓名 ...原创 2018-08-10 16:28:40 · 383 阅读 · 0 评论 -
前端攻城狮---正则表达式
正则表达式首先我们要知道正则表达式是什么? -----正式表达式又称规则表达式,通常用来检索或替换那些符合某些模式(规则)的文本。正则主要用来搭配字符数的一下方法 search 查找 substring 获取子字符串 charAt 获取某个字符 spli...原创 2018-07-27 12:01:04 · 411 阅读 · 0 评论 -
前端攻城狮---AJAX(1)
服务端像一个网页,里面的数据来自哪里?如何去渲染?其实都是通过服务器来获取数据。当用户点击地址栏,它向服务器发起一个HTTP请求,服务器收到后就会做出响应。 当用户在地址栏中输入域名按回车后,发生了什么事情? a 浏览器先DNS上获取服务器的IP地址 b 浏览器向服务器发一个http请求(get/post)上...原创 2018-07-20 15:48:38 · 212 阅读 · 0 评论 -
前端攻城狮---js对象的高级使用(1)
本章节主要从讲解三个知识点,1.对象的理解 2.上下文this 3.面向对象的思想以及应用对象的理解js中对象有两种理解方式 1.狭义的理解就是{ }定义的对象,它是一组无序的属性集合 var demo = { "name":"xiaoming", "age":15, "hobby":["slee...原创 2018-07-06 15:45:25 · 350 阅读 · 0 评论 -
前端攻城狮---js对象的高级使用之日历案例
Date api在学日历案例之前,我们先来了解一下日历类的相关api Date首先我们要先new 一个Data对象 var date = new Date(); // 当前系统时间 // 获取年月日 周几 console.log(date.getFullYear()); // 2018 console.log(date.getM...原创 2018-07-18 16:55:25 · 355 阅读 · 0 评论 -
前端攻城狮---css3布局(1)
本章节主要讲解css3的一些布局,如百分比布局,弹性盒子模型。百分比布局名字就表示这使用方法。百分比布局可以来作为适配方案,因为不需要给视图设置绝对的高宽,参照父视图的高宽的百分比去动态的适配。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2018-09-03 21:16:19 · 294 阅读 · 0 评论 -
前端攻城狮---css3之布局(2)
继上面布局,我们先来讲解一下固比固模型。固比固模型上面叫固比固模型,简单的来说就是 固定宽度 剩余部分 固定宽度的模式。怎么理解?还是先上案例吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2018-09-12 17:02:10 · 200 阅读 · 0 评论 -
前端攻城狮---node之图书管理系统
图书管理系统采用单页面的后端渲染的方法,功能就是图书的增删查改。什么是单页面?直白的说就是整个项目就一个html,所有的显示都在这一个html里面。什么叫后端渲染?就是前段显示的内容有后台输出,也就是说后台会传一个完整的html的内容,让前段去渲染。主要用到art-template模板 express框架以及node自带的一些模板。先来看看我们的首页环境配置首先我们先去配置...原创 2019-01-06 20:43:22 · 1897 阅读 · 0 评论 -
前端攻城狮---node之数据库
为了后面我们的单页面图书管理系统能够正常编写,我们先来了解一下node与mysql之间的连接和操作。首先准备工作,下载mysql 和 npm install mysql,接下来配置mysql配置mysql/* 插入数据库*/// 加载数据库驱动var mysql = require('mysql');var connection = mysql.createConne...原创 2018-12-13 16:58:20 · 268 阅读 · 0 评论 -
前端攻城狮---node之express框架
express框架什么用呢?其实express框架可以帮助我快速开发,并且引入了路由和中间件等概念。就拿之前的元素node项目为例,我们是不是还要去引入http模块,然后去createserver,去声明端口号,然后根据req的url去判断请求的地址和method,再去做相应的操作,过程复杂化了,但是我们使用express框架就可以简化流程,提高开发效率。安装当然第一步是初始化项目,n...原创 2018-12-13 15:48:22 · 537 阅读 · 0 评论 -
前端攻城狮---node之http模块
本章节主要来了解http的相关知识点,那么长话短说,直接看内容。http模块的基本使用基本写法// (第一步)初步实现服务器功能 httpconst http = require("http");// (第二步)创建服务器实例对象let server = http.createServer();// (第三步)绑定请求事件server.on("request",(req,r...原创 2018-11-05 17:43:12 · 206 阅读 · 0 评论 -
前端攻城狮---node之http模块综合
登录案例这里我们主要讲解http模块的综合使用,那么先来个小案例塞塞牙缝。这个案例就是一个登录功能,通过get/post请求去分别解析输入的账号密码,从而去判断用户名密码是否正确1.登录验证js模块/* 登录验证 */const http = require("http");const qs = require("querystring");const url = ...原创 2018-11-06 17:44:43 · 187 阅读 · 0 评论 -
前端攻城狮---node入门
本章节会讲解node的全局方法,模块化的原理,path模块以及fs模块。 什么是node.jsnode.js是一个基于chrome V8 引擎的JavaScript运行时。就是说这个node.js可以用来运行js文件,这样我们就不需要在浏览器里运行js文件,只需在node中,大大方便了我们的开发。首先,大家就需要去安装好node,配置好环境变量,那么我们就可以开始学习node之...原创 2018-10-27 15:16:16 · 328 阅读 · 0 评论 -
前端攻城狮---node之npm常用语法
npmnpm(nodejs package management) 其实就是nodejs包的管理器在平时的开发中,我们会用到很多第三方的nodejs的包,同样的主要学习npm的语法不外乎对nodejs包的增删查改。社区网站nodejs包的托管平台 www.npmjs.org常用语法安装包 npm install 包名称 (安装到本地) npm...原创 2018-10-29 16:44:31 · 197 阅读 · 0 评论 -
前端攻城狮---css3之触摸事件
基础其实移动端也能响应click,只不过响应的比较慢,一般移动端都是用touch事件。touch事件一般有三个touchstart :当手指触摸屏幕的回调,即使是一只手指头。 touchmove:手指在屏幕上滑动时触发。 touchend:当手指从屏幕上移开时触发。给元素绑定触摸事件,使用dom2级方法绑定obj.addEventListener("touchstart",f...原创 2018-10-25 15:19:18 · 2048 阅读 · 0 评论 -
前端攻城狮---css3之布局(3)
本章节主要讲解box em rem 媒体和表格display:box大家可能见到很多display:box; display:flex; display:flex-box;其实可以这么理解,display:box是旧版的伸缩布局,display:flex-box是过渡板的,display:flex是最新版本。因为一些兼容性问题,所以我们还是有必要去学习一下display:box的用法,...原创 2018-09-14 13:45:00 · 196 阅读 · 0 评论 -
前端攻城狮---js对象的高级使用(3)
本章节主要讲解js的继承,in和instanceof运算符和一些方法继承继承继承,子承父业,父亲有的孩子都有。直接看实例吧,有一个people方法 和一个student 那么student要去继承people的参数和方法,咱们循循渐进的一一道来。先上代码<script type="text/javascript"> function People(name,age){ ...原创 2018-07-12 10:17:28 · 263 阅读 · 0 评论 -
前端攻城狮---jQuery的使用(3)
本章节主要讲解节点的相关操作和事件相关知识点。节点操作添加节点append 在被选元素的结尾插入元素prepend 在被选元素的开头插入元素after 在被选元素的后面插入元素before 在被选元素的前面插入元素我们这里需要区分一下append和after的区别,那么prepend和before同理 append被添加的对象是一样容器,是一个父亲。 a...原创 2018-07-04 15:07:22 · 221 阅读 · 0 评论 -
前端攻城狮---js之dom对象(2)
本章节主要讲计算后样式的相关知识点。我们可以通过dom提供的可靠的api,去获取样式计算后最终的值。计算后样式获取计算后的样式的方法有以下几种window.getComputedStyle("对象").getPropertyValue("属性");//window可以忽略getComputedStyle("对象")["属性"];对象.currentStyle.属性;/对象.currentStyle...原创 2018-06-23 15:46:28 · 484 阅读 · 0 评论 -
前端攻城狮---js之语法基础(2)
循环分支结构(选择结构)if结构 if(条件) { 条件成立时执行的语句 } else { 条件不成立时执行的语句 }else...原创 2018-06-14 11:47:37 · 176 阅读 · 0 评论 -
前端攻城狮---js之语法基础(1)
js其实就是javaScript,至于它的前身今世,咱在这就不多说,直接直奔主题。javaScriptjavaSctipt主要分为三部分 a 语言核心 ECMAscript 如变量 数组 函数 对象... b DOM 文档模型对象 c BOM 浏览器模型对象我们先来了解一下第一部分吧首先使用js也和css样式一样,有三种使用方式。行内式,内嵌式,外链式(项目中推荐)。...原创 2018-06-13 17:57:05 · 212 阅读 · 0 评论 -
前端攻城狮---css3之过渡动画
今天我们来学习一下css3的过渡动画transitiontransition我们先来看看要如何使用该属性原创 2018-06-13 10:34:14 · 197 阅读 · 0 评论 -
前端攻城狮---css3之伪类,伪元素及其他属性
伪类一说道伪类,我们可以快速想起超链接的伪类 a:link a:visited a:hover a:active,分别代表的是未点击前的样式,点击后的样式,获取焦点时的样式,点击时的样式。我们现在讲的css3的伪类可是所有标签都可以使用的,此时的link,visited,hover,active不再只针对超链接使用,其他标签也可以使用。* :hover 能够被所有的元素使用 IE7兼容就像d...原创 2018-06-12 15:10:49 · 390 阅读 · 0 评论 -
前端攻城狮---css样式之定位
为什么要学习定位呢?因为很重要。。。(ps:这不是废话嘛)这样子把,假如说我们需要在一个盒子里居中显示一个小盒子,那么就是需要定位来坐,定位用的频率还是非常高的。定位css定位分为三种:绝对定位 相对定位 固定定位。各位看官不要急,听我一一道来。相对定位:position:relative相对定位相对谁?相对的是改控件原来的位置 top 正数向下 left 正数向右 ri...原创 2018-06-05 10:58:03 · 182 阅读 · 0 评论 -
前端攻城狮---css3之选择器
css3就是层叠样式表的目前的最高版本,带来了许多的新特性,比如圆角、渐变、过渡、动画、新的布局(多列布局 伸缩盒子等),那么我们先来学习选择器相关的新增内容把。我们主要从一下5个方面去讲解,关系选择器,属性选择器,儿子选择器,伪类,伪元素。关系选择器关系选择器一共有三种表达方式。下面的aa bb可以表示标签,类,idaa > bb{ } (ie7开始兼容)表示给aa下所有的亲儿子设置样式...原创 2018-06-11 21:18:38 · 181 阅读 · 0 评论 -
前端攻城狮---css样式之超链接伪类及其他知识点
咱们长话短说,取其精华去其糟粕,本章主要讲解超链接的伪类和背景图的定位使用。超链接的伪类伪类表示改标签的不同状态。就好比超链接点击的样式,点击完后的样式,未点击的样式等。那么大家肯定会问,其他标签的伪类呢?其他的会在css3中讲到,这不现在才css2.1,慢慢来撒~。超链接的伪类一共有四个,link、visited、hover、activelinklink是什么意识?link表示未访问的超链接的样...原创 2018-06-04 17:32:38 · 505 阅读 · 1 评论 -
前端攻城狮---css样式之浮动
浮动 什么是浮动?浮动就是可以让元素并排的一个效果,但是有一点浮动的元素用了就脱离的标准流。什么意思呢?内行元素不再受标准文档流的约束了,可以设置宽高了。浮动 先说说浮动的设置方式 float:left float:right<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...原创 2018-06-04 16:19:06 · 220 阅读 · 0 评论 -
前端攻城狮---html基础标签
最近对前端特有兴趣 索性就学起了前端 。话不多说开始新的篇章开发工具对于前端的开发工具 目前我选择sublime 加上安装些插件 开发如鱼得水 如 Emmet jQuery 等等 认识html结构什么叫html? 它的全拼叫Hyper Text Markup Language(超文本标记语言)本来这就是个标记的语言,但却有超越了它本来的含义,名字取得非常的巧妙。我们先来看看一个...原创 2018-06-02 09:45:21 · 213 阅读 · 0 评论 -
前端攻城狮---css样式之选择器
前面我们了解到了html的骨架的组成,还有一些常见的标签,但是决定一个网页的漂不漂亮是需要css来控制,可以说html是一个人的身体,而css就是一个人身穿的衣服,那么接下来我们去了解一下css的奥秘所在。css常见的引入方式1.行内式 <style type="text/css"> /* css代码写在此处*/ ...原创 2018-06-02 10:40:54 · 246 阅读 · 0 评论 -
前端攻城狮---jQuery的使用(1)
我们为什么要用jQuery? 原生js开发的缺点: 查找元素比较麻烦,方法不多。 操作样式比较麻烦,需要进行iE版本的兼容。 动画麻烦。 HTML节点操作麻烦。...原创 2018-06-28 17:49:12 · 225 阅读 · 1 评论 -
前端攻城狮---js对象的高级使用(2)
原型链什么是原型链?我们先不来解释定义,我们先来看看下面几个例子。 <script type="text/javascript"> function Student(){ this.job = "student"; this.doing = function(){alert("哈哈")}; } var xiaom...原创 2018-07-09 16:07:36 · 260 阅读 · 0 评论 -
前端攻城狮---jQuery的使用(2)
本章节主要讲解jQuery的动画和节点的操作。jQuery属性的操作与设置主要有这几种方法:text(),html(),val(),attr(),prop()。text,设置或返回被选元素的文本内容。(1.)基本使用<html><head><script type="text/javascript" src="/jquery/jquery.js"></...原创 2018-07-02 16:30:55 · 188 阅读 · 0 评论 -
前端攻城狮---js之dom对象轮播图
先看一个效果轮播图一个是点击左右切换按钮,图片切换,还有一个就是下面圆形的标记,当鼠标放上是颜色变,图片也变。我们先写界面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &原创 2018-06-20 15:13:01 · 286 阅读 · 0 评论 -
前端攻城狮---js之dom对象(1)
DOMdom全程就是document object model 文档对象模型。我们可以通过dom对象去获取到div,input等标签对象,去修改样式、赋值和设置行为等。查找元素js要操作标签,第一件事就要找到这个标签,js中提供了两个最最基本的得到元素的方法document.getElementById()如 var pic = document.getElementById("...原创 2018-06-20 14:35:40 · 309 阅读 · 0 评论 -
前端攻城狮---js之语法基础(3)
数组什么是数组?数组是一组有序的数据集合。定义方式1.最简单的方式,数组字面量。var list = [1,2,3,4,5,6];2.通过new的方式创建,这里涉及到对象的概念,后面会细说。数组元素的引用现在有这个一个数组,var list = [1,2,3,4,5,6,7];此时我想要读取数组中第3个数据,要怎么读取?var num_3 = list[2],这里有人会问,我不是读取第3位吗怎么要...原创 2018-06-19 19:39:01 · 204 阅读 · 0 评论