HTML
常规
HTML的拓展名为html和htm,htm是老的命名规范。
HTML文件直接由浏览器解析执行,无需编译,直接由上而下以此解析执行。
1 | <font>内容体</font> |
没有内容体的标签叫空标签,仅由一个标签组成,例如:
自关闭。
HTML标签是有属性的,格式为:属性名=”属性值”属性值用引号引起,引号包含单引号和双引号。
块标签
1 | <span></span> |
行级的块标签,有多少内容就会占用多大空间。不会自动换行,使用户少量数据展示。
1 | <div></div> |
块级的块标签,默认占满一行,会自动换行,适用于大量数据展示。
表单
1 | <body> |
<input/>
标签
表单输入项标签之一,用户在该标签上通过填写和选择进行数据的输入。类似于java的Scanner类。
type:设置该标签的种类
text:文本框,默认
password:密码框,内容为非明文
radio:单选框,在同一组内有单选效果
checkbox:复选框,在同一组内有复选效果
submit:提交按钮,用户控制表单提交数据
reset:重置按钮,用于将表单输入项恢复到默认状态
file:附件框,用于文件上传
hidden:隐藏域,一般用作提交服务器需要拿到,但用户不需要看到的数据,如id
button:普通按钮,需要和js事件一起用
选择框标签
1 | < select></ select> |
定义一个选择框
name:设置该标签对应的参数名
multiple:设置该标签选项全部显示,并且可以进行多选提交。默认为单选。
1 | <option>< option> |
选项标签,用于为一个选择框添加一个选项
value:设置需要提交的参数值。
selected:设置选项的默认选中状态
注意事项:
Option的内容体一般是用来进行展示
参数值应该是 option的value属性值
1 | <select name="aihao" id="1" > |
文本域和文本框的区别
①文本框不能换行,文本域可以
②文本框参数值是value属性,文本域参数值是标签的内容体
from的两个属性:
- action:将数据提交到何处
默认提交到本页。
本机内网路径:
相对路径
绝对路径
互联网路径
http://www.baidu.com/xxx - method:将数据以何种方式提交
默认为:get
提交方式可定义:get或者post
Get提交方式特点:把数据拼接到地址栏上
Post提交方式特点:没有把提交数据拼接到地址栏上,请求体
Get和post提交方式区别:
① get提交的参数列表拼接到了地址栏后面
post方式不会拼接地址栏
② get方式提交的数据敏感信息不安全
Post方式提交的数据相对安全
③ get方式提交的数据量有限的
Post方式从理论上提交的数据量无限大
URL编码的表现形式&本质
①你好,进行普通的编码,编码成字节数组【使用的是页面规定的字符集,例如utf-8】
②字节数组中的每一个元素,都会从10进制,转为16进制3把已经转为16进制的字节数组,以%进行拼接拼接出的字符串,就是URL编码后的结果
例如:你好,用UTF8编码,编码的字节数组为:
[-28,-67,-96,-27,-91,-67]
URL编码后:
%E4BD%%A5%BD
CSS
css(Cascading Style Sheets):层叠样式表
层叠:一层一层叠加
样式表:存储样式的地方,多个样式
设置边框的样式
格式:宽度样式颜色
例如: border:1 px solid red
,1像素粗的实线红色边框。
线条样式: solid实线,none无边, double双线
width:用于设置标签的宽度
height:用于设置标签的高度
float
通常默认的排版方式,将页面中的元素从上到下一一罗列,而实际开发中,需要左右方式进行排版,就需要使用浮动属性
格式:选择器{float:属性值;}
常用属性值:
none:元素不浮动(默认值)
left:元素向左浮动
right:元素向右浮动
注意:因为元素设置浮动属性后,会脱离原有文档流(会脱离原有的板式),从而会影响其他元素的样式,所以设置浮动以后,页面样式需要重新调整
转换
display属性可以使得元素在行内元素和块元素之间相互转换。
格式:
选择器{display:属性值}
常用的属性值:
block:此元素将显为块元素(块元素默认的display属性值)
inline:此元素将显示为行内元素(行内元素默认的 display属性值)
none:此元素将被隐藏,不显示,也不占用页面空间。
内外边距(盒子模型)
![内外边距](https://img-blog.csdnimg.cn/20200929235041979.png#pic_center)
1 | <link/> |
又称为链入式,是将所有的样式放在一个或多个以css为扩展名的外部样式表文件中,通过link标签将样式连接到HML文档中
格式:
1 | <link rel=”stylesheet" type=”text/css” href=”css文件路径"/> |
rel=”stylesheet” , 固定值,表示样式表
type=”text/css” , 固定值,表示css类型
href , 表示css文件位置
JavaScript
JavaScript是WEB上强大的脚本语言。
脚本语言: 无法独立执行。必须嵌入到其他语言中,结合使用。直接被浏览器解析执行。
Java编程语言: 独立写程序,独立运行。编译–执行作用:控制页面特效展示。
例如:
JS可以对HTML元素进行动态控制
JS可以对表单项进行校验
JS可以控制CSS的样式
注意:
- JavaScript没有访问系统文件的权限(安全)
- 由于JavaScript无需编译,是由上到下依次解释执行,所以在保证可读性的情况下,允许使用链式编程
- JavaScript和java没有任何直接关系
JavaScript的组成
- ECMAScript(核心):规定了S的语法和基本对象
- DOM文档对象模型:处理网页内容的方法和接口
标记型文档。HTML - BOM浏览器对象模型:与浏览器交互的方法和接口
JavaScript书写规范
在当前页面内部写 script标签,script内部即可书写 JavaScript代码
格式:
1 | <script type="text/javascript"> |
注: script标签理论上可以书写在HTML文件的任意位置
外部引入:
在HTML文档中,通过<script src="">
标签引入js文件
格式:
1 | <script type=”text/javascript”src=”javascript文件路径”></script> |
示例1:
1 | <script type="text/javascript" src="demo.js"></script> |
注:外部引用时 script标签内不能有 script代码,即使写了也不会执行
示例2:
1 | <script type="text/javascript" src="demo. js"> |
script标签的放置位置:
开发规范规定,script标签的放置位置为:Body结束标签前。
变量
变量:标示内存中的一块空间,用于存储数据,且数据是可变的。
变量的声明:var 变量名;
变量赋子默认值,默认值为 undefined(未定义的)
变量的声明和赋值:var 变量名=值;
变量赋予对应的值
在声明 JavaScript变量时,需要遵循以下命名规范:
- 必须以字母或下划线开头,中间可以是数字、字符或下划线
- 变量名不能包含空格等符号
- 不能使用JavaScript关键字作为变量名,如:function
- JavaScript严格区分大小写
数据类型
类似于java中的基本数据类型
- string 字符串类型。””和’’都是字符串。 JavaScript中没有单个字符
- Boolean 布尔类型。固定值为true和 false
- number 数字类型。任意数字
- null 空,一个占位符。
- undefined 未定义类型,该类型只有一个固定值,即undefined,表示变量声明却未定义具体的值。
注:因为 undefined是从null中派生出来的,所以 undefined==null
JavaScript区别于java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后,是可以赋予任意类型的值。
通过 typeof运算符可以分辨变量值属于哪种基本数据类型。
对变重或值调用 typeof运算符将返回下列值之一:
- undefined - 如果变量是 Undefined类型的
- Boolean - 如果变量是 Boolean类型的
- number - 如果变量是Number类型的
- string - 如果变量是String类型的
- object - 如果变量是一种引用类型或Null类型的
引用数据类型
引用类型通常叫做类(class),但在 JavaScript中,因为不存在编译过程,所以没有类的概念,所处理的引用数据类型都是对象
标准创建方式:
1 | var str= new String(); //和java相同 |
比较运算符
与java基本类似,唯一不同,多了全等符:===
==
逻辑等。仅仅对比值===
全等。对比值并且对比类型
如果值和类型都相同,则为true;值和类型有一个不同,则为false
逻辑运算符
运算符 | 描述 | 例子 |
---|---|---|
&& |
and | (x<10&&y>1) 为true |
|| | or | (x==5||y==5)为false |
! |
not | !(x==y) 为true |
注:JavaScript逻辑运算符没有&
和|
RegExp对象
RegExp对象的创建方式
var reg=new RegExp(“表达式");
(开发中基本不用)var reg=/^表达式S/
直接量(开发中常用)
直接量中存在边界,^
即代表开始,$
代表结束
直接量方式的正则是对象,不是字符串,别用引号
test方法
正则对象.test(string);
用来校验字符是否匹配正则。
全部字符匹配返回true;有字符不匹配返回 false
1 | <script> |
1 | <script> |
正则对象使用注意事项
/^表达式$/
只要有无法成立正则的字符存在,即为 false
全部符合为true
(检查严格,眼睛不揉沙子)
适用于表单校验
/表达式/
只要有成立正则的字符存在,即为true
全部不符合为 false
(检查不严格,懒人思想)
适用于字符串查找、替换
JS数组对象
JS数组的特性
js数组可以看做Java中的 ArrayList集合。
- 数组中的每一个成员没有类型限制,及可以存放任意类型
- 数组的长度可以自动修改
JS数组的四种创建方式
var arr=[1,2,3,”a”,true];
常用的JS数组。长度5var arr new Array();
创建一个数组对象,数组长度默认为0var arr= new Array(4);
数组长度是4,相当于开辟了长度为4的空间,每个元素是 undefined(仅在显示数组时进行处理,undefined为了方便显示变成了空字符串形式,其值本质仍然是 undefined)var arr= new Array(1,2);
数组元素是1,2
JS数组的常用属性/方法
1 | <script> |
1 | <script> |
eval(String)函数
1 | <script> |
作用:用于增强程序的扩展性
注:只可以传递原始数据类型string,传递String对象无作用
编码和解码
URL编码:中文及特殊符号 %16进制
作用:保证数据传递的完整性
代码 | 解释 |
---|---|
encodeURI() | 把字符串编码为URI |
decodeURI() | 解码某个编码的URI |
1 | <script> |
URI和URL的区别
URI是统一资源标识符。 标识资源详细名称
URL是统一资源定位器。 定位资源的网络位置
资源:可以通过浏览器访问的信息统统称为资源(图片、文本、HTML、CS等等….)
URI标识资源的详细名称,包含资源名。
URL定位资源的网络位置,包含 URLhttp://
例如:
/a.html 是URl
字符串转数字
代码 | 解释 |
---|---|
parselnt() | 解析个字符串并返回一个整数 |
parseFloat() | 解析一个字符串并返回一个浮点数 |
parselnt(string);
string按照字面值转换为整数类型,小数点后面部分不关注。
parseFloat(string);
string按照字面值转换为小数类型。
注:
- 如果字符串的某个字符从字面值上无法转为数字,那么从该字符开始停止转换,仅返回前面正确的转换值。(例如:11.5a55,parseInt结果11,parseFloat结果11.5)
- 如果字符串的第一个字符就无法从字面值上转为数字,那么停止转换,返回NaN( Not A Number,一个数字类型的标识,表示不是一个正确的数字
1 | <script> |
自定义函数
函数格式
1 | function 方法名(参数列表){ |
- JavaScript函数定义必须用小写的 function;
- JavaScript函数无需定义返回值类型,直接在 function后面书写方法名;
- 参数的定义无需使用yar关键字,否则报错;
- JavaScript函数体中,return可以不写,也可以return具体值,或者仅仅写return;
函数使用的注意事项
JavaScript函数调用执行完毕一定有返回值,值及类型根据return决定,如果未 return具体值,返回值为 undefined
JavaScript函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义的函数覆盖之前的定义;
因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配,也不会影响正常调用。
如果形参未赋值,就是用默认值undefined。
自定义对象
function构造函数
我们知道,JavaScript中的引用数据类型都是对象,而对象在 JavaScript中可以用函数来表示。
相当于java中创建某个 class类
- 无形参格式:
1 | function 对象名(){ |
1 | <script> |
1 | <script> |
1 | <script> |
对象直接量
开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式称为“对象直接量”
格式:
1 | var 对象名={属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……}; |
注:该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象直接使用即可
BOM对象
BOM对象简述
BOM(Browser Object Model)浏览器对象模型
浏览器:IE、火狐、谷歌等
作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)
一般情况下, window代表了BOM对象。
window对象是 JavaScript的内置对象,使用 window对象调用方法时可以省略 window不写。
消息框
- alert()
警告框:用来弹出警告消息。
示例:
alert(“你好”);
注:不同浏览器显示的组件样式不同,无需关注。
- confirm()
确认框,用于告知用户信息并收集用户的选择
示例1:
confirm(“确定 或者 取消”);
效果:
该方法有返回值,用户通过选择“确定”或者“取消”,方法结束会返回boolean类型的值。
循环定时器的设置和取消
启动循环定时器- setInterval()
循环定时器,调用一次就会创建并循环执行一个定时器。
格式:
setInterval(调用方法,毫秒值)
//毫秒值:循环周期
示例:
1 | function run1(){ |
效果:(每隔一秒就会弹出一次对话框)
1 | <script> |
启动一次性定时器setTimeout()
一次性定时器,调用一次就会创建并执行一个定时器一次。
格式:
setTimeout(调用方法,毫秒值)
示例:
1 | function run1(){ |
1 | <script> |
location对象
location对象包含浏览器 地址栏 的信息。
常用属性:
属性 | 解释 |
---|---|
href | 设置或返回完整的URL |
设置href属性,浏览器就会跳转到对应的路径
1 | // 设置URL地址 |
DOM对象
DOM对象的简述
DOM (Document Object Model)文档对象模型
文档:标记型文档(HTML等)
DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,
通过操作对象的属性或者方法,来达到操作或者改变HTML展示效果的目的。
DOM树
其中:
- 每个标签会被加载成DOM树上的一个元素节点对象。
- 每个标签的属性会被加载成DOM树上的一个属性节点对象
- 每个标签的内容体会被加载成DOM树上的一个文本节点对象
- 整个DOM树,是一个文档节点对象,即DOM对象。
- 一个HTML文档加载到内存中就会形成一个DOM对像
DOM树的特点:
- 必定会有一个根节点
- 每个节点都是节点对象
- 常见的节点关系:父子节点关系
- 文本节点对象没有子节点—叶子节点
- 每个节点都有一个父节点,零到多个子节点
- 只有根节点没有父节点
获取元素对象的四种方式
在 Java Script中,我们可以通过DOM对象的4种方式获取对应的元素对象:
getElementByld: 通过元素ID获取对应元素对象
可以通过ID获取对应的元素对象,如果找不到,返回nullgetElementsByName: 通过元素的name属性获取符合要求的所有元素
getElementsByTagName: 通过元素的元素名属性获取符合要求的所有元素
getElementsByClassName: 通过元素的class属性获取符合要求的所有元素
可以获取到元素节点对象数组;如果找不到,返回空数组
1 |
|
注:获取某个/某些元素节点对象,必须保证元素节点对象被先加载到内存中:
1 |
|
元素对象常见属性
value
元素对象.value
获取元素对象的 value属性值元素对象.value=属性值
设置元素对象的 value属性值。
1 | <body> |
className
元素对象.className
获取元素对象的 class属性值。元素对象.className=属性值
设置元素对象的属性值。
1 | <head> |
checked
元素对象.checked
获取元素对象的 checked属性值。元素对象.checked=属性值
设置元素对象的 checked属性值。
注:HTML中 checked="checked”
,JavaScript中返回 true false
修改单选/复选的选中与否
1 | <body> |
innerHTML
元素对象.innerHTML
获取元素对象的内容体元素对象.innerHTML=值
设置元素对象的内容体
1 | <body> |
JS事件
JS事件驱动机制简述
页面上的特效,我们可以理解在JS事件驱动机制下进行。
JS事件驱动机制:
- 事件源
- 事件
- 监听器
- 注册/绑定监听器
事件源:专门产生事件的组件
事件:由事件源所产生的动作或者事情。
监听器:专门处理事件源所产生的事件。
注册/绑定监听器:让监听器时刻监听事件源是否有指定事件产生,如果事件源产生指定事件,则调用监听器处理。
1 | <body> |
点击事件(onclick)
点击事件:由鼠标或热键点击元素组件时触发
示例:
1 | <script> |
焦点事件(onfocus/onblur)
焦点事件:由鼠标的焦点的有无触发
示例:
- 获取焦点
1 | <script> |
1 | <input type="text" onfocus="run1()"/> |
- 失去焦点
1 | <script> |
1 | <input type="text" onblur="run1()"/> |
域内容改变事件(onchange)
域内容改变事件:元素组件的值发生改变时触发
示例:
1 | <select onchange="run1()"> |
加载完毕事件(onload)
加载完毕事件:元素组件加载完毕时触发。
获取元素对象,保证元素对象先加载,建议是把获取元素对象放在最后
示例:
1 | <script> |
1 | <body onload="run1()"> |
表单提交事件(onsubmit)
表单提交事件:表单的提交按钮被点击时触发
注意:该事件需要返回 boolean类型的值来执行 提交/阻止 表单数据的操作。
- 事件得到true,提交表单数据
- 事件得到 false,阻止表单数据提交
示例:
1 | <script type="text/javascript"> |
1 | <body> |
键位弹起事件(onkeyup)
键位弹起事件:在组件中输入某些内容时,键盘键位弹起时触发该事件
示例:
1 | <input type="text" onkeyup="run1()"/> |
鼠标移入/移出事件(onmouseover/onmouseout)
鼠标移入事件:鼠标移入/移出某个元素组件时触发
示例:
- 鼠标移入文本框
1 | <input type="text" onmouseover="run1()" /> |
- 鼠标移出文本框
1 | <input type="text" onmouseout="run1()" /> |
JS事件的两种绑定方式
元素事件句柄绑定
将事件以元素属性的方式写到标签内部,进而绑定对应函数。
示例:
1 | <script type="text/javascript"> |
1 | <body> |
事件句柄绑定方式
优点: ①开发快捷
②传参方便
③可以绑定多个函数
缺点: JS和HTML代码高度糅合在一起,不利于多部门的项目开发维护
DOM绑定方式
使用DOM的属性方式绑定事件
示例:
1 | <script> |
1 |
|
DOM绑定方式
优点: 使得HTML代码和JS代码完全分离
缺点: ①不能传递参数。 解决:匿名函数是可以的
②一个事件只能绑定一个函数 解决:匿名函数内部是可以绑定多个函数