![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
服务端开发必会的前端知识
文章平均质量分 82
服务端开发必会的前端知识:HTML+CSS+JS+JQ
搬砖的乔布梭
这个作者很懒,什么都没留下…
展开
-
面向对象与闭包综合案例:附近的商家服务与推荐算法
本例结合ES6面向对象语法、设计模式、闭包,完成一个附近商家的自动推荐功能;案例需求如下:√ 封装一个地理位置类Location,属性x,y,√ 求距离方法:getDistance(anotherLocation)可以计算与另一个地理位置的直线距离√ 随意造两个地理位置实例,并求它们之间的距离√ 创建商家类Shop,继承自地理位置类,同时拥有类别属性type、单价属性price,和服务方法serve(),留白等待子类去做具体实现√ 实现饭馆类Restaurant、超市类Supermarket、原创 2021-08-20 11:39:36 · 406 阅读 · 0 评论 -
JavaScript设计模式综合应用案例
今天我们模拟小米智能家居应用场景,融合单例模式、组合模式、观察者模式做一个综合应用案例。具体场景如下:小米门铃为主人开门,触发开门事件;小米智能控制台监测到开门事件,自动启动小米空调和小米电视;思路分析小米控制台,在家庭单位内只有一个实例,我们使用单例模式;小米控制台通过startWork这一统一接口控制全部智能家居,对于有相同接口的不同实例进行统一调度,我们可以应用组合模式;小米控制台监听小米门铃的开门事件,观察者模式;定义【组合】和【组件】两个父类接口后续由小米控制台对【组合】做原创 2021-06-21 17:47:55 · 343 阅读 · 0 评论 -
2.2 Web前端:JavaScript2:变量、数组、字符串
#变量JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’ var a = 123; var b = 'asd';//同时定义多个变量可以用","隔开,公用一个‘var’关键字 var c = 45,d='qwe',f='68';##变量类型5种基本数据类型:number、string、boolean、unde...原创 2018-11-21 00:56:08 · 217 阅读 · 0 评论 -
2.1 Web前端:JavaScript1:HelloJS
#JavaScript 简介JavaScript 是一种可以给网页增加交互性的编程语言。熟悉 JavaScript 的好方法是“站在其他程序员肩膀上”,即Web 上有大量 JavaScript代码,复制一下并稍作修改,就可以供自己使用。JavaScript 脚本语言,在 HTML 页面内容是包围在 #Hello, World老习惯,我们第一个 JavaScript 是向浏览器窗口输出“H...原创 2018-11-20 14:37:15 · 159 阅读 · 0 评论 -
3.3 Web前端:静态页面布局实例
经过对前面知识点的巩固和加深,我们可以使用前面学习到的知识来制作实际开发中碰到的一些典型的布局,以此来达到综合应用知识的目的。1、特征布局:翻页(所需知识点:盒模型、内联元素)2、特征布局:导航条01(所需知识点:盒模型、行内元素布局)3、特征布局:导航条02(所需知识点:盒模型、浮动、定位、字体对齐)4、特征布局:图片列表(所需知识点:盒模型、浮动)5、特征布局:新闻列表(所需...原创 2018-11-21 01:00:24 · 1852 阅读 · 0 评论 -
1.7 Web前端:常用CSS样式4:定位
#定位##关于定位我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:relative 生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移absolute生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位,如果找不到,则相对于...原创 2018-11-20 14:28:38 · 153 阅读 · 0 评论 -
1.3 Web前端:常用HTML标签3:表单
html表单表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,实现一个特定功能的表单区域(比如:注册),首先应该用<form>标签来定义表单区域整体,在此标签中再使用不同的表单控件来实现不同类型的信息输入,具体实现及注释可参照以下伪代码:<!-- form定义一个表单区域,action属性定义表单数据提交的地址,method属性定义提交的方式。 -->&am原创 2018-11-20 14:23:10 · 201 阅读 · 0 评论 -
1.2 Web前端:常用HTML标签2:表格和列表
#html列表##有序列表在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现,代码如下:<ol> <li>列表文字一</li> <原创 2018-11-20 14:22:53 · 500 阅读 · 0 评论 -
1.1 Web前端:常用HTML标签1
#html标题通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录原创 2018-11-20 14:21:53 · 158 阅读 · 0 评论 -
1.0 Web前端:前端内容概述
前端对于网站来说,通常是指网站的前台部分,包括网站的表现层和结构层。#前端三大基础技术##HTML超文本标记语言:超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文...原创 2018-11-21 01:02:19 · 812 阅读 · 0 评论 -
1.4 Web前端:常用CSS样式1:文本样式
#css基本语法及页面引用##css基本语法css的定义方法是:选择器 { 属性:值; 属性:值; 属性:值;}选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:div{ width:100px; height:100px; color:red }##css页面引入方法:1、外联式:通过link标签,链接到外部样式表到页面中。&lt...原创 2018-11-20 14:27:10 · 217 阅读 · 0 评论 -
1.5 Web前端:常用CSS样式2:其它样式
#css颜色表示法css颜色值主要有三种表示方法:1、颜色名表示,比如:red 红色,gold 金色2、rgb表示,比如:rgb(255,0,0)表示红色3、16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00#css选择器常用的选择器有如下几种:##标签选择器标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。举例:*{margin:0;pad...原创 2018-11-20 14:27:25 · 148 阅读 · 0 评论 -
1.6 Web前端:常用CSS样式3:浮动
#浮动##文档流文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。##浮动特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种2、浮动的元素会向左或向右浮动,碰到父元素边界、浮动元素、未浮动的元素才停下来3、相邻浮动的块元素可以并在...原创 2018-11-20 14:28:14 · 174 阅读 · 0 评论 -
2.4 Web前端:JavaScript4:函数和闭包
#函数函数就是重复执行的代码片。##函数定义与执行<script type="text/javascript"> // 函数定义 function aa(){ alert('hello!'); } // 函数执行 aa();</script&am原创 2018-11-21 00:56:23 · 159 阅读 · 0 评论 -
2.5 Web前端:JavaScript5:常用DOM操作
#创建元素##创建元素使用document.createElement()可以创建新元素。这个方法只接受一个参数,即要创建元素的标签名。这个标签名在HTML文档中不区分大小写,在XHTML中区分大小写。var div = document.createElement("div");使用createElement()方法创建新元素的同时,也为新元素设置了ownerDocument属性,可以...原创 2018-11-21 00:56:29 · 345 阅读 · 0 评论 -
2.6 Web前端:JavaScript6:定时器
#定时器##定时器在javascript中的作用1、制作动画2、异步操作3、函数缓冲与节流定时器类型及语法/* 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器*/var time1 = s...原创 2018-11-21 00:56:37 · 218 阅读 · 0 评论 -
2.12 Web前端: JQuery4:鼠标事件与滚动事件
鼠标事件1.click和dblclick事件方法一般都有三种使用方式:我们就以click为例来介绍这些方式,接下来的方法不再冗余介绍,只是谈论最重要的知识点。第一种方式点击触发$("ele").click(function(){ alert('触发指定事件')})$("#test").click(function(){ $(原创 2018-11-21 00:57:24 · 500 阅读 · 0 评论 -
3.2 Web前端:实战电商页面2:幻灯片
在上一篇博客中我们实现了电商页面的搭建和样式的调整,这里我们将使用jQuery实现页面中部的幻灯片效果,我们可以点击左右按钮来切换图片,如果没有点击左右按钮,图片自动向左切换。效果图:$(function () { /*定义上一张页码,下一张页码*/ var previous = 0; var current = 0; var direction = "le...原创 2018-11-21 00:59:16 · 347 阅读 · 0 评论 -
3.1 Web前端:实战电商页面1:静态布局
使用前面学习的知识:html,css,javascript,jquery实现电商页面,使用html搭建页面,css调节页面样式,Javascript,jquery实现动态效果,使学生具备一定的企业实战能力。效果图:<!DOCTYPE html><html lang="en"><head&a原创 2018-11-21 00:59:05 · 2873 阅读 · 2 评论 -
2.8 Web前端:JavaScript8:实战案例
#1.for循环图片的应用在页面上显示一个矩形,鼠标在这个矩形的某个地方划过,则在该位置以矩形的形式显示图片的一部分。效果图:鼠标滑过之后:<!DOCTYPE html><html lang="en"><head&原创 2018-11-21 00:56:51 · 392 阅读 · 0 评论 -
2.15 Web前端:JQuery7:实战案例
#1.手风琴在页面上呈现手风琴样式得风景图,默认只有一张图片可见,其他不可见,在点击某张图片得标题时显示该张图片,隐藏之前现实的图片。效果图:点击之前:点击之后:<!DOCTYPE html><html lang="en">&amp原创 2018-11-21 00:57:40 · 398 阅读 · 0 评论 -
2.14 Web前端:JQuery6:事件委托
#事件委托事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。###一般绑定事件的写法$(function(){ $ali = $('#list li'); $ali.click(function(event) { $(this).c...原创 2018-11-21 00:57:35 · 178 阅读 · 0 评论 -
2.13 Web前端:JQuery5:事件冒泡
#事件冒泡###什么是事件冒泡在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。###事件冒泡...原创 2018-11-21 00:57:30 · 172 阅读 · 0 评论 -
2.16 Web前端:绑定自定义事件
#JQuery 自定义事件jQuery的事件自定义事件还是通过on绑定的,然后再通过trigger来触发这个事件###1. 绑定事件//给element绑定hello事件element.bind("hello",function(){ alert("hello world!");});###2. 执行事件//触发hello事件element.t原创 2018-11-21 01:06:54 · 859 阅读 · 0 评论 -
2.11 Web前端:JQuery3:动画和特效
#jquery动画通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。$('#div1').animate({ width:300, height:300},1000,swing,function(){ alert('done!');});参数可以写成数字表达式:$('#div1').animate({...原创 2018-11-21 00:57:13 · 171 阅读 · 0 评论 -
2.10 Web前端:JQuery2:节点选取与节点插入
#节点选取jQuery.parent(expr)找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元原创 2018-11-21 00:57:05 · 202 阅读 · 0 评论 -
2.9 Web前端:JQuery1:动态操作HTML和CSS
#jquery选择器###jquery用法思想一选择某个网页元素,然后对它进行某种操作###jquery选择器jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。$(document) //选择整个文档对象$('li') //选择所有的li元素$('#myId') //选择id为myId的网页元素$('.myClass') // 选...原创 2018-11-21 00:56:57 · 215 阅读 · 0 评论 -
2.7 Web前端:JavaScript7:面向对象
#面向对象##面向过程与面向对象编程1、面向过程:所有的工作都是现写现用。2、面向对象:是一种编程思想,许多功能事先已经编写好了,在使用时,只需要关注功能的运用,而不需要这个功能的具体实现过程。##javascript对象将相关的变量和函数组合成一个整体,这个整体叫做对象,对象中的变量叫做属性,变量中的函数叫做方法。javascript中的对象类似字典。##创建对象的方法1、单体&...原创 2018-11-21 00:56:43 · 176 阅读 · 0 评论 -
2.3 Web前端:JavaScript3:流程控制
#条件语句通过条件来控制程序的走向,就需要用到条件语句。##运算符1、算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)2、赋值运算符:=、 +=、 -=、 *=、 /=、 %=3、条件运算符:、=、>、>=、<、<=、!=、&&原创 2018-11-21 00:56:16 · 193 阅读 · 0 评论