学校网站代码模板,合肥网站推广公司排名,网页制作教学设计,ppt模板简洁大方背景#xff1a;
前端系列会收集碎片化的前端知识点#xff0c;作为自己工作和学习时的字典#xff0c;欢迎读者收藏和使用。 笔者是后端开发#x1f636;前端涉猎不深#xff0c;因此文章重在广度和实用#xff0c;对原理和性能不会过多深究。
1.html
1.1 html5网页结…背景
前端系列会收集碎片化的前端知识点作为自己工作和学习时的字典欢迎读者收藏和使用。 笔者是后端开发前端涉猎不深因此文章重在广度和实用对原理和性能不会过多深究。
1.html
1.1 html5网页结构
!DOCTYPE html
htmlheadmeta charsetutf-8title标题/titlelink relicon hrefdata:image/png;base64,i... typeimage/x-iconlink relshortcut icon hrefdata:image/png;base64,... typeimage/x-icon/headbody/body
/html1.2 html标签中包括head标签和body标签
1head标签中可以定义字符编码格式以及网页的标题和图标; 2页面显示的内容需要在body中定义。
1.3 在html中引入js
(1) 内部插入的代码格式如下
script typetext/javascript// JavaScript代码
/script(2) 引入js外部文件
script typetext/javascript src文件路径一般在body标签底部引入以保证所有的DOM元素都被加载后再加载JS文件; 注意加载多个JS文件时如果有依赖关系需要保证被依赖的文件先被引入。因此会先引入jquery等三方库再引入业务js文件。
1.4 在html中引入样式
(1) 内联样式
h1 stylemargin-left: 40px;内联样式/h1直接在DOM元素中使用style属性进行样式设置优先级最高不利于维护。
(2) 内嵌样式
headtitle内嵌样式/titlestyleh1 {margin-left: 40px;}/style
/head在head中通过style标签引入。
(3) 外部样式表
link relstylesheet href./css/index.css通过link标签的href引入。
(4) 导入样式表
link relstylesheet href./css/index.css在index.css文件中
import 1.css;
import 2.css;
import 3.css;
import 4.css;注意在一个html文件中引入的多个样式表如果选择器重复了后者会覆盖前者。
1.5 常见元素:块和内联
DOM元素整体上可以分为块元素和内联元素两类。 块元素可用于布局内联元素可用于显示。二者主要区别在于 (1) 块元素可以包含块元素、内联元素、文本内联元素只能包含内联元素和文本 (2) 块与其他元素之间有换行内联元素不会换行 (3) 块元素可以设置高度(height)和宽度(width), 内联元素不能设置; 常见的块级元素有 div, p/h, table/form, ul/ol, hr 常见的内联元素有 span, a, img, input/textarea, br
1.6 Dom原生语法
jquery出现后基本不会再用DOM的原生语句。
(1)获取DOM对象
#返回拥有指定id的对象
document.getElementById(id属性值);
#返回拥有指定类型的对象集合
document.getElementsByClassName(class属性值);
#返回拥有指定标签名的对象集合
document.getElementsByTagName(标签名);
...2.javascript
javascript作为脚本语言语法与Java存在相似之处。如注释使用双斜线(//), 使用分号(;)作为表达式的结尾…
2.1 常用类型
常用类型有StringNumberBoolean, 数组对象类型.
2.1.1 String
字符串可以使用单引号或者双引号包裹可以使用加号()对字符串进行拼接。
创建方式如下
var str1 str1;
var str2 str1;
var str3 new String(str1);
var str4 strnew String(4);常用API:
// 判断string字符串是否以str开头, 返回true或false
string.startsWith(str)// 判断string字符串是否以str开头返回true或false
string.endsWith(str)// 返回字符串string中第start1位开始的长度为len字符串内容。
string.substr(start,len)// 替换字符串内容方法:将str1替换为str2
string.replace(str1, str2)其他与java用法基本一致。
2.1.2 Number
可以表示整数也可以表示小数数值太大或者太小可以用科学计数法表示。
var y123e5; // 12300000
var z123e-5; // 0.00123Number类型中有个比较特殊对象NAN表示非数值。
typeof NaN; // numberNaN对象不等于任何对象包括自己
NaN NaN //false可以使用js内置的函数isNaN()来判断
var nan NaN;
isNaN(nan); // true
Number.isNaN(NaN); // true当字符串不能转换为数字时返回NaN表示解析失败undefined和NaN的算术操作会返回NaN; 数学函数的无效参数如负数的平方根、负数的对数时会返回NaN在js中存在无限大, 无限大乘以0会返回NaN
var result 1/0; //Infinity
var resultN -1/0; //-Infinity
isNaN(result * 0); // true2.1.3 Boolean
只有两个值true和false; 注意大小写敏感。
2.1.4 数组
js中的数组中不要求元素类型相同但尽量保持元素类型一致以方便维护。
创建方式如下
var test_arr [a, 1, null];
var carsnew Array(ET7,ES8,EC6);常用API:
//1.使用下标进行取值和赋值
cars[0]Saab;
//2.添加、删除最后一个元素
list.push(banana);
list.pop();
//3.添加、删除第一个元素
scores.shift();
scores.unshift(76);其他与java用法基本一致。
2.1.5 对象类型
var car {name:EC6, a:4.5, color:blue
};
// 有以下两种方式获取对象
car.name;
car[name];2.1.6 typeof 运算符
可以返回对象的大致类型结果是字符串
typeof new String(str1); // objecttypeof str2; // stringtypeof 123e5; // numbervar b3 true;
typeof b3; // booleanvar arr_4 [a, 1, null];
typeof arr_4; // objectvar object5 {name:EC6, a:4.5, color:blue
};
typeof object5; // object2.2 空对象
js中存在两个空对象null和undefined有以下区别 (1) null是Object类型undefined是Undefined
typeof null; // object
typeof undefined // undefined(2) undefined表示缺少了预期的值或参数使用var声明变量未赋值时为undefined, 当函数为传参时为undefined未定义函数返回值时-返回undefined
(3) null通常用于显式地表示空或无效的对象、数组或变量; 清空一个变量或者释放一个对象的引用时可以将其设置为null。
2.3 变量和作用域
在ES5及之前的js版本中使用var声明变量在ES6中引入了let和const; 常见浏览器对这两个关键字兼容可直接使用。
2.3.1 var关键字
函数级作用域变量的作用域限制在声明的函数内部从函数外部访问会报错。变量提升变量声明会被提升到作用域的顶部。可以重复声明后面的声明会覆盖前面。
2.3.2 let关键字
块级作用域变量的作用域为所在代码块即从代码块外部访问会报错。不可重复声明同一个作用域内不可以多次使用let对同一个变量反复声明。没有变量提升let声明的变量在声明语句之后才能使用。
2.3.3 const关键字
常量被赋值后不可修改。块级作用域与let相同块级作用域。不可重复声明同一个作用域内多次使用const声明同一个变量会报错。
let和const的特性和限制可以将var中可能引入发热误操作显示地提前到开发阶段从而避免bug的产生因此开发过程中建议使用let和const替代var。
2.4 字符串和JSON常见操作
//1.JSON.stringify()将对象转换为JSON格式字符串
var obj {name:seong, age: 28}
var objStr JSON.stringify(obj);
console.log(objStr);
//2.JSON.parse()将JSON格式字符串转为对象
var obj2 JSON.parse(objStr)2.5 if 和 switch-case;
if (条件表达式 1) {// 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {// 条件表达式 2 为真时执行的代码
} else if (条件表达式N) {// 条件表达式 N 为真时执行的代码
} else {// 所有条件表达式都为假时要执行的代码
}if-else语法与Java基本相同, 需要注意条件表达式为变量时零值转为false,非零值转为true;
let scoreLevel A;
switch(scoreLevel){case A://...break;case B://...break;default://...
}switch-case语法与Java相同, 穿透和break用法也相同。
2.6 try-catch异常处理;
try {//...
} catch(err) {//...console.writeln( err.name err.message);
} finally {//...
}异常对象中有name和message信息。
2.7 for循环和while循环
for (var i 1; i 5; i) {if (i 3) {break;}console.log(提示信息 i);
}continue、breakvar num 1;
while (num 10) {console.log(num \n);num;
}for和while用法同Java, continue和break用法也相同。
2.8 与或非
与() 或(||)非(!)与Java完全相同
2.9 是否相等; 仅判断值是否相等 判断值和类型是否相等。
var str1 1;
var int1 1;
console.log(str1 int1); // true
console.log(str1 int1); // false3.css
3.1 盒子模型
HTML中每个元素都是盒子模型每个盒子模型包括4个部分content、padding、border、margin如下图所示
3.1.1 内容content
content 作为元素的内容部分常见样式如下 【1】width和height 块级元素和内联元素有所区别内联元素不可设置宽/高属性由其内容(文本、图片大小)决定块级元素可设置宽/高默认宽度为父元素的100%高度默认由内容(元素内容或者子元素高度之和)决定。
div stylewidth:200px;height:100px;background-color:orange/div显示如下 说明 在设置width和height时可使用倍数(em),像素(px),百分比(%)三种类型。
【2】display none隐藏元素且不占用任何空间 block设置为块级元素允许设置width和height inline-block设置为内联元素不会独占一行同时可以设置宽度和高度。
【3】background-color和background-image background-color用于设置背景色background-image用于设置背景图片
/* 将div的背景颜色设置为红色 */
div { background-color: #ff0000;
}div { background-image: url(background.jpg);
}说明当同时设置背景色和背景图片时仅背景图片生效。 其中 CSS样式的颜色属性可以使用 1关键字如red“blue” 2十六进制值如#ff0000#00ff00等 3RGB如rgb(255,0,0)第一个数字表示红色第二个数字表示绿色第三个数字表示蓝色。
【4】color, font-size, text-align,overflow color用于设置文本颜色font-size用于设置本文大小
text-align用于设置文本的水平对齐方式常见取值有 1left文本内容将相对于元素的左边界对齐。 2right文本内容将相对于元素的右边界对齐。 3center文本内容将居中对齐。 4justify文本内容将被对齐到左右两端并在每行结束时调整单词间距使其占据整个行宽。
overflow表示当内容超过盒子内容区指定的width和height时的显示方式常见取值有 1hidden:隐藏 2visible正常显示 3scroll显示滚动条
3.1.2 内边距padding
内边距是内容区和边框之间的空间,可通过padding对内边距进行设置
div { padding: 10px;
}此时padding作用于上下左右四侧可通过下面的方式分别进行设置
div { padding-top: 1px; padding-right: 10px; padding-bottom: 1px; padding-left: 3px;
}说明设置盒子背景色属性时背景色会延伸到填充区域。 注意内联元素可以设置水平方向的内边距不可设置垂直方向的内边距。
3.1.3 边框border
边框是环绕内容区和填充的边界可以设置的属性有border-style、border-width和border-color 【1】border-style 边框样式常见有solid(实线), 虚线(dashed), 点线(dotted), 双线(double)
div { border-style: solid; /* 设置div的边框样式为实线 */
}【2】border-width 边框宽度可通过px设置
div { border-width: 2px; /* 设置div的边框宽度为2像素 */
}【3】border-color 用于设置边框颜色默认无颜色
div { border-color: #ff0000; /* 设置div的边框颜色为红色 */
}说明这三个属性可以一起使用顺序无关紧要如下所示
div { border: solid 2px #FF0000;
}3.1.4 外边距margin
外边距是边框之外的空间,可通过margin对内边距进行设置
div { margin: 10px;
}此时margin作用于上下左右四侧可通过如下的方式分别进行设置
div { margin-top: 1px; margin-right: 10px; margin-bottom: 1px; margin-left: 3px;
}注意内联元素可以设置水平方向的外边距不可设置垂直方向的外边距。 说明多个元素之间的外边距不是取和而是取并集。
3.2 定位与浮动
【1】position css使用position确定元素的定位方式有以下几种 1static 默认定位方式即文档流。
headstyle#node-1 {width: 500px;height: 100px;background-color: red;}#node-2 {width: 400px;height: 200px;background-color: orange;}#node-3 {width: 300px;height: 300px;background-color: yellow;}/style
/headbodydiv idnode-1/divdiv idnode-2/divdiv idnode-3/div
/body文档流显示如下 分析node-1(红色)、 node-2(橙色)、 node-3(黄色)分别各占一行紧密排列
2relative 相对于原来的位置进行浮动保留占用的空间。 将node-2节点的样式修改为
#node-2 {width: 400px;height: 200px;background-color: orange;position: relative;top:100px;left: 100px;
}显示为 分析node-1(红色)与node-3(黄色) 分别各占一行node-2(橙色)原来的空间保持node-2(橙色)根据top和left相对原空间进行偏移。
3absolute 相对已定位的父节点(否则相对浏览器)进行浮动不保留占用的空间。
将node-2节点的样式修改为
#node-2 {width: 400px;height: 200px;background-color: orange;position: absolute;top:100px;left: 100px;
}显示为 分析node-1(红色)与node-3(黄色) 分别各占一行node-2(橙色)原来的空间不保持node-2(橙色)根据top和left相对浏览器左上角进行偏移。
4fixed 相对浏览器)进行浮动不保留占用的空间。
将node-2节点的样式修改为
#node-2 {width: 400px;height: 200px;background-color: orange;position: fixed;top:100px;left: 100px;
}显示为 分析node-1(红色)与node-3(黄色) 分别各占一行node-2(橙色)原来的空间不保持node-2(橙色)根据top和left相对浏览器左上角进行偏移。
【2】float 使用float属性可以使元素脱离原文档流float属性取值范围如下 1left使元素浮动到左侧 2right使元素浮动到右侧 3none默认值元素不浮动
headstyle#node-1 {width: 500px;height: 100px;background-color: red;/*float: left;*/}#node-2 {width: 400px;height: 200px;background-color: orange;/*float: left;*/}#node-3 {width: 300px;height: 300px;background-color: yellow;/*float: left;*/}/style
/headbody
div stylewidth:1200px; border: black 5px soliddiv idnode-1/divdiv idnode-2/divdiv idnode-3/div
/div
/body显示如下 分析node-1(红色)、node-2(橙色) 、node-3(黄色) 分别各占一行父节点因未设置hight从而高度为三个字节点之和。
对node-2(橙色)和node-3(黄色)节点样式添加 float: left;显示如下 分析当node-2(橙色)和node-3(黄色)浮动后不再占据原来的空间父节点高度与node-1(红色)保持一致。
对node-1、node-2、node-3节点样式添加 float: left;显示如下 分析当node-1(红色)、node-2(橙色)和node-3(黄色)浮动后均不再占据原来的空间父节点高度为0。
3.3 选择器
3.3.1 id选择器
使用井号(#)拼接元素id
#id{witdh: 100px;
}3.3.2 类选择器
使用句号(.)拼接元素id
.class{witdh: 100px;
}3.3.3 标签选择器
直接使用标签名
tag{witdh: 100px;
}3.3.4 组合选择器
选择器1 选择器2 {...}表示选择器1下的所有满足选择器2的节点可以直接相连也可不连 选择器1 选择器2{...}表示选择选择器1下直接包含的选择器2而不包含间接包含的选择器2 选择器1 选择器2{...}表示选择器1同级的下一个相邻的选择器2 选择器1 ~ 选择器2{...}表示与选择器1同级的且在选择器1后面的所有的选择器2 选择器1选择器2{...}表示同时满足选择器1和选择器2的元素.
4.jquery
4.1 安装和引入
在html中通过script标签引入
script srchttps://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js/script也可以将jquery-2.0.2.min.js文件下载到本地后引入避免每次引用都需要从远程下载。 注意HTML中导入js时依赖jquery的js文件需要在jquery之后被引入。
说明 jQuery代码需要包含在$(document).ready(function(){})内部为了确保代码在DOM完全加载后才执行。 当页面加载时浏览器会逐步解析和构建DOM如果jQuery代码在DOM还没有完全加载时就执行可能会导致无法找到所需的DOM元素或执行操作。$(document).ready(function(){})会在DOM加载完成后触发执行内部的代码块。
4.2 操作DOM
4.2.1 获取jquery的DOM对象
// 直接使用字符串【用于创建新的DOM节点】
$(div/div)// 包装HTML原生DOM对象
const inputMsg document.getElementById(chat-input);
$(inputMsg)//使用css选择器获取, 支持id,标签类选择器【用于操作现有DOM节点】
$(#chat-input)4.2.2 删除节点
remove方法用于删除节点
// 删除id为chat-input的元素
$(#chat-input).remove();4.2.3 获取/设置节点内容
text方法用于获取或设置节点的内容
//设置
$(#chat-input).text(节点内容);
// 获取
var content $(#chat-input).text();4.2.4 设置样式
css方法获取和设置节点样式
// 设置背景色
$(.message-box).css(background-color:red)
// 获取背景色
$(.message-box).css(background-color)4.2.5 设置属性
attr方法获取和设置节点属性
// 设置背景色
$(.message-box).attr(display:none)
// 获取背景色
$(.message-box).attr(display)说明属性可以是元素特有的也可以是用户自定义的用于储存信息。
4.2.6 隐藏与显示
hide和show方法用于控制节点的隐藏和显示
// 隐藏detail-box元素
$(#detail-box).show();// 显示detail-box元素
$(#appRightBottom).hide();4.2.7 添加子节点
append方法用于添加子节点
const bodyDom $(span新增内容/span)
// 对id为chat-input元素添加span新增内容/span节点
$(#chat-input).append(bodyDom);4.2.8 获取子节点列表
// children()方法获取子节点列表
$(#chat-wrapper).children()//first()获取第一个子节点
$(#chat-wrapper).children().first()//last()获取最后一个子节点
$(#chat-wrapper).children().last()获取子节点后操作方式同操作节点。
4.3 事件机制
4.3.1 鼠标事件
单击和双击事件
// 为元素绑定鼠标单击事件
$(#send-btn).click(function(){console.log(单机鼠标左键);
});// 为元素绑定鼠标双击事件
$(#send-btn).dbclick(function(){console.log(双机鼠标左键);
});鼠标移入和移出事件
//用户光标进入元素上时触发
$(#send-btn).mouseenter(function(){console.log(鼠标移入);
});// 光标离开元素时触发
$(#send-btn).mouseleave(function(){console.log(鼠标移出);
});其他暂不涉及。
4.3.2 键盘事件
keydown 键盘按下时触发keyup在按键释放时触发keypress按下并抬起同一个按键时触发。
$(#xxx).keydown(function (event) {// event.keyCode可获取按键的idif (event.ctrlKey event.keyCode 13) {alert(CtrlEnter);};switch (event.keyCode) {case 37:alert(左);break;case 39:alert(右);break;};return false;
});其他暂不涉及。
4.4 ajax
使用ajax方法调用HTTP接口如下所示
$.ajax({url: /aiws/api/queryHistoryById?recordId0, type: GET, async: false, data: , dataType: json, success: function (result) {console.log(result)}, error: function (msg) {console.error(msg)}
});其中url表示服务器接口地址type表示方法类型如GET, POST; async表示请求是否异步data表示发送给服务器的数据dataType表示接受的数据类型如果为text将服务器返回的结果解析为字符串如果为json会将服务器返回的结果解析为对象类型success在请求成功时调用error在请求异常时调用。
