导图社区 Web前端开发

Web前端开发

HTML5，CSS3，JavaScript以及JQuery基础，作为前端入门基础，主要列举了其基础内容。

提示: 本内容由社区用户上传并分享。平台不对内容的真实性、合法性、知识产权归属及是否侵害第三方权利进行事前审核或保证。本内容可能包含受版权保护的图片、字体或其他第三方素材，使用前请自行确认授权范围。

编辑于2019-06-16 16:19:48

html5

lay771880416@163.com

他的近期作品查看更多>>

Web前端开发

社区模板帮助中心，点此进入>>

lay771880416@163.com

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 41.7k
- 984
- 2.5k
- 403
- 0
MindMaster
组织架构-单商户商城webAPP 思维导图。
- 19.9k
- 3
- 187
- 8
- 1
Kacyun
域控上线
- 5.4k
- 171
- 11
- 4
- 0
jackrao
python思维导图
- 11.3k
- 560
- 243
- 6
- 0
(*^▽^*)
css
- 4.8k
- 1
- 43
- 3
- 0
A张舫
CSS
- 7.6k
- 272
- 189
- 33
- 0
journey
计算机操作系统思维导图
- 9.6k
- 361
- 210
- 15
- 0
journey
计算机组成原理
- 5.0k
- 98
- 71
- 8
- 0
journey
IMX6UL(A7)
- 3.5k
- 41
- 5
- 0
- 0
Handler XU
考试学情分析系统
- 4.7k
- 51
- 10
- 1
- 0
蒋龙

Web前端开发基础

HTML5/CSS3

HTML5

结构元素

html

<!DOCTYPE html> <!doctype html>

使用CSS

使用JavaScript

title

body

语义元素

页眉或者导航容器header

导航元素nav

内容元素

独立内容article

章节section

侧边栏aside

页脚footer

作用同div元素

注意： div通过id查询，建立html层级语义元素相比div的id方式速度更快

通用内容元素

列表

有序列表

无序列表

表格

table

表头

内容

超链接与图像

超链接

图像

表单

form-input

内容

输入框

单选框

复选框

下拉框

<select name="cars"> <option value="volvo">volvo</option> </select>

HTML5多媒体元素

canvas画布元素

audio音频元素

video视频元素

HTML5属性

基本属性

id 唯一标识

class 批量标识

style 样式设置

网页元信息元素不具有基本属性

全局属性

单元素可编辑属性

contentEditable

全文可编辑属性

designModel,需要js脚本指定

隐藏属性

hidden

Tab可浏览属性

HTML5特性

兼容特性

标记省略

必须省略结束标记 <br />

可以省略结束标记 <li />或者<li></li>

完全省略标记，即html会默认自动生成该标记 head，body等

布尔属性

使用属性，则默认为True

不使用属性，则默认为False

Selectors API

querySelector(选择器)

querySelectorAll(选择器)

在JS中使用

web存储

传统方式Cookie

HTML5方式

复杂数据WebDatabase

key/value数据WebStorage

localStorage

sessionStorage

设置获取数据

window.sessionStorage.setItem(key,value);

window.sessionStorage.getItem(key,value);

CSS3

选择器

主要对元素进行一对一，多对一以及动态的样式控制 (一个元素一个样式，多个元素一个样式，随行为变化)

一对一样式控制

ID选择器

对指定id的元素

#id{}

对指定元素类型，指定id的元素注：id唯一，所以无需指定类型

div#header{}

多对一样式控制

元素选择器

div{}

类选择器

对指定类元素起作用

.clsName{}

指定元素类型，指定class属性

div.className{}

属性选择器

元素选择器是属性选择器的特例—即对所有元素起作用属性选择器—选择满足属性条件的元素

选择具有xx属性的元素

div[id]{}

选择xx属性以**开头的元素

div[id^=""]{}

选择xx属性包含**的元素

div[id*=""]{}

选择xx属性以**结尾的元素

div[id$=""]{}

选择xx属性等于**的元素

div[id=""]{}

其他选择器

包含选择器

div #id{}

子选择器

ul>li{}对ul下的li元素

兄弟选择器(CSS3独有)

div ~ article{} 对div后面的article元素

组合选择器

通过逗号(,)对多个选择器组合

div,#id,.clsName{}

元素动态控制

伪类选择器

span:first-letter{}

常用伪类选择器

https://www.runoob.com/css/css-pseudo-classes.html

常用属性

网页布局

盒模型

所有的html元素都可以看作盒子 CSS中使用该模型进行设计和布局

盒模型属性

Margin(外边距)- 与其他元素之间的空间

Border(边框) - 元素边框的粗细

Padding(内边距) - 边框和内容之间的空间

Content(内容)

高度height

宽度width

CSS3盒布局

Bootstrap框架

Bootstrap框架实现网页设计与网页布局

JavaScript

JavaScript基础

变量与数据类型

JS变量

隐式定义变量

a = "hello world";

显式定义变量

var a,b; a = 5; b = 6;

使用var定义

可以没有初始值

JS数据类型

基本类型

数值类型

整数

浮点数

无限大

Infinity

无限小

-Infinity

非数值

NaN

isNaN()判断

布尔类型

true

false

字符串类型

字符串定义

str = "hello world"; str = 'hello world';

常用操作

大小写

字符串提取字符

字符串索引

字符串链接

字符串替换

。。。。

undefined类型

变量不存在，或者没有为其分配值

null类型

变量存在，变量值为null

复合类型

Object对象

变量+函数的集合

创建对象

new关键字创建对象

var per = new Person();

使用Object直接创建对象

var per = new Object(); per.name = "mike";

使用JSON语法创建对象

var per = { "name":"mike", "age" : 23 }

常用内置对象

数组类Array

日期类Date

错误类Error

数值类Number

对象类Object

字符串类String

Array数组

一系列数据的集合，其数据类型可以不同

数组的定义

var a = [1,2,3];

var a = []; a[0]=1; a[1]=2; a[2]=3;

var a = new Array(); a[0]=1; a[1]=2; a[2]=3;

数组的长度

a.length

Function函数

一段可执行代码的封装

函数在JS中是一等公民

函数的定义

显式定义：function func_name(参数){}

隐式定义：var f = function(参数){}

实际定义了一个Function对象

函数的参数

基本参数

function myFunc(a,b){}

默认参数

function myFunc(a,b=10){}

调用函数

直接调用的三种方式

调用者.函数()

call方式调用

函数.call(调用者，参数)

apply方式调用

调用方式同call方式

以arguments代表所有参数

对象方式调用

var f = new myFunc(1,2); 该方式调用总有返回值

函数其他特点

JS中的函数参数是通过值传递的

函数嵌套

局部函数—其特点和局部变量类似

函数是Function类，则可以定义属性和方法

表达式与运算符

算术运算符

+，-，*，/，%，++，--

比较运算符

==，===（绝对等于【值和类型均相等】）

!=,!==(不绝对等于，值和类型至少一个不等)

>,>=,<,<=

逻辑运算符

&&，||，!

三元运算符

result = (a<18)?"对":"错";

其他运算符

typeof - 返回数据类型

instanceof - 判断是否是某类型 a instanceof Array //判断a是不是数组，是则true，否则false

with(){}语句

简化代码书写

document.writeln(); document.writeln();

简化为： with(document){ writeln(); writeln(); }

条件与循环

条件语句

if语句

if-else语句

if-else if -else语句

循环语句

while循环

do-while循环

for循环

for-i循环

for-in循环

循环控制语句

break

continue

正则表达式

JavaScript网页开发

DOM模型编程

什么是DOM模型

HTML-->DOM解析器--->DOM树

操作HTML元素

查询HTML元素

根据ID获取元素

document.getElementById(id);

利用节点关系获取元素

访问表单元素

document.getElementById(form_id).elements[index|name].value;

访问下拉列表

document.getElementById(select_id).options[index]

访问表格子元素

document.getElementById(table_id).rows[index].cells[index].innerHTML

修改HTML元素

innerHTML

value

增加HTML元素

创建一个节点：document.createElement("tagName");

添加到父节点：父节点.appendChild(tagName);

删除HTML元素

获取父节点：document.getElementById(父节点);

获取要移除的子节点：var child = document.getElementById(子节点);

移除子节点：父节点.removeChild(child);

BOM模型编程

window对象

Location对象

window.location.href/hostname/pathname/...

Screen对象

window.screen

事件处理

常用事件

鼠标操作

onmousedown,鼠标点击

onmouseup,鼠标释放

onclick，鼠标点击完成

onmouseover，鼠标移入

onmouseout，鼠标移出

网页加载后

onload

图像加载后

文字改变

onchange，文字改变

onfocus，获得焦点

键盘操作

事件监听程序

element.addEventListener("click", myFunc());添加监听程序

element.removeEventListener("mousemove", myFunction);删除监听程序

JQuery

如何操作元素？

选择元素

元素选择器

#id选择器

.class类选择器

其他选择方法

按属性选取

按位置选取

$(选择器)

如何操作事件？

JQuery代码位于一个文件就绪事件函数中

$(document).ready(function(){ // 开始写 jQuery 代码... });

常见DOM事件

鼠标事件

键盘事件

表单事件

文档和窗口事件

JQuery事件方法

$("#id").click(function(){ //动作触发后执行的代码; })

JQuery常见操作

DOM效果操作

隐藏、显示、切换，滑动，淡入淡出，以及动画

DOM元素操作

增删改查

CSS操作

DOM元素遍历

Ajax

什么是Ajax？

Ajax=异步的Javascript和XML

不刷新页面就更新页面

页面加载后从服务器请求和接收数据

向服务器发送数据

JavaScript的Ajax

GET请求

var xhttp = new XMLHttpRequest(); xhttp.open("GET", "/demo/demo_get.asp", true); xhttp.send(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } };

POST请求

var xhttp = new XMLHttpRequest(); xhttp.open("POST", "/demo/demo_post.asp", true); xhttp.send(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } };

JQuery的Ajax

$.ajax({ url:"", type:"get|post", async:false, data:{},//要发送的数据 dataType:"json", //服务器返回的数据类型 success:function(result[,status,xhr]){}, error:function([xhr,status,]error){} })

$(selector).get(url,data,success(response,status,xhr),dataType)

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)