html触发一个按钮自减一次,javascript

css

1、文档流所有的元素默认情况下都是在文档流中存在的文档流是网页的最底层元素在文档流中的特点：默认高度和宽度都被内容撑开

在页面中自左向右水平排列，如果一行不足以容下所有的元素,则换到下一行继续从左向右默认宽度是父元素的全部

默认高度被内容(子元素)撑开

在页面中自上而下垂直排列块元素

内联元素

2.浮动使用float来设置元素的浮动1.元素设置浮动以后，会完全脱离文档流，并向页面的左上或右上浮动。直到遇到父元素的边框或其他的父元素时则停止浮动。

2.如果浮动元素上边是一个没有浮动的块元素，元素不会超过该块元素。

3.浮动元素的浮动位置不能超过他上边浮动的兄弟元素，最多一边齐

4.浮动元素不会覆盖文字，文字会围绕在浮动元素的周围，所以可以通过浮动来实现文字环绕图片的效果。none 默认值，元素不浮动，就在文档流中

left 元素向页面的左侧浮动

right 元素向页面的右侧浮动可选值：

浮动特点：

浮动以后元素会完全脱离文档流，脱离文档流以后元素会具有如下特点：1.块元素不独占一行

2.块元素的宽度和高度都被内容撑开

3.元素不在文档流占用位置

4.内联元素会变成块元素

高度塌陷BFC叫做Block Formatting Context

它是一个隐含属性，默认情况是关闭，当开启以后元素会具有如下的特性：

开启BFC的方式很多：

一般我们采取副作用比较小的方法：overflow:hidden;1.父元素的垂直外边距不会和子元素重叠

2.开启BFC的元素不会被浮动元素覆盖

3.父元素可以包含浮动的子元素 **1.设置元素浮动

2.设置元素绝对定位

3.设置元素为inline-block

4.将元素的overflow设置为一个非默认值在文档流中元素的高度默认被子元素撑开，当子元素浮动时，子元素会脱离文档流，

此时将不能撑起父元素的高度，会导致父元素的高度塌陷。父元素高度塌陷会导致其他元素的位置上移，导致页面的布局混乱。

可以通过开启元素的BFC来处理高度塌陷的问题。

3.定位通过定位可以将元素摆放到页面的任意位置

使用position来设置元素的定位可选值：static 默认值 元素不开启定位

relative 开启元素的相对定位

absolute 开启元素的绝对定位

fixed 开启元素的固定定位相对定位1.相对于元素自身在文档流中的位置进行定位

2.相对定位的元素不会脱离文档流，定位元素的性质不会改变，块还是块，内联还是内联

3.如果不设置偏移量，元素不会发生任何的变化

4.会提升元素的层级

绝对定位1.相对于离它最近的开启了定位的祖先元素进行定位，如果祖先元素都没有开启定位则相对于浏览器窗口进行定位。

2.绝对定位会使元素完全脱离文档流，会改变元素的性质，内联变成块元素，块元素的宽度被内容撑开

3.绝对定位的元素如果不设置偏移量，元素的位置不会发生变化

4.会提升元素的层级

固定定位固定定位也是一种绝对定位，它的大部分特点都和绝对定位是相同的。

不同的是：固定定位永远相对于浏览器窗口进行定位

固定定位会固定在浏览器的指定的位置，不会随页面一起滚动偏移量当元素开启了定位以后，可以通过四个偏移量来设置元素的位置

top：相对于定位位置的顶部的偏移量

bottom：相对于定位位置的底部的偏移量

left：相对于定位位置的左侧的偏移量

right：相对于定位位置的右侧的偏移量一般只需要使用两个值即可给元素进行定位

top left

top right

bottom left

bottom right偏移量也可以指定一个负值，如果是负值则元素会向相反的方向移动

层级

当元素开启定位以后，可以通过z-index 来设置层级，

它需要一个正整数作为参数，值越大层级越高，层级越高越优先显示

如果层级一样，则后边的会盖住前边的，父元素永远都不会盖住子元素。

文档流 < 浮动 < 定位

元素的透明

使用opacity来设置元素的透明度

需要一个0-1之间的值

0 表示完全透明

1 表示完全不透明

IE8及以下的浏览器不支持该样式，需要使用如下方式来设置

filter:alpha(opacity=透明度);

需要一个0-100之间的值

0 表示完全透明

100 表示完全不透明

html

1.表格在网页中可以通过表格来表示一些格式化的数据

表格相关的标签属性：colspan 横向的合并单元格

rowspan 纵向的合并单元格

表示表头中的单元格	表示表格中的单元格 长表格

- 注意：如果表格中没有写thead tbody tfoot，浏览器会自动向table中添加一个tbody

并且将所有的tr都放到tbody中，tr是tbody的子元素，不是table的子元素

- 

 表格的底部

2.表单表单可以将用户的信息提交到服务器中

它可以根据不同的type属性值，生成不同的表单项

type=”text” 文本框 

type=”password” 密码框

type=”radio” 单选按钮

type=”checkbox” 多选框

type=”submit” 提交按钮

type=”reset” 重置按钮

type=”button” 普通按钮用来创建一个表单

属性：

action:需要一个服务器地址，提交表单时表单中的内容将会被提交到该地址

表单项

下拉列表

按钮功能input那几个按钮一样，但是它们要灵活一些

按钮的文字

按钮的文字

按钮的文字

JavaScriptJavaScript负责页面中的的行为。

它是一门运行在浏览器端的脚本语言。

JS的编写的位置1.可以编写到标签的指定属性中我是按钮

超链接2.可以编写到script标签中

//编写js代码

3.可以将代码编写到外部的js文件中，然后通过标签将其引入输出语句document.write(“要输出的内容”);该内容将会被写到body标签中，并在页面中显示

console.log(“要输出的内容”);

该内容会被写到开发者工具的控制台中alert(“要输出的内容”);

- 该语句会在浏览器窗口中弹出一个警告框基本的语法注释单行注释

//注释内容

多行注释

/*

注释内容

*/JS严格区分大小写

- JS中每条语句以分号(;)结尾

- JS中会自动忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化。

字面量和变量

- 字面量

- 字面量实际上就是一些固定的值，比如 1 2 3 4 true false null NaN “hello”

字面量都是不可以改变的。

- 由于字面量不是很方便使用，所以在JS中很少直接使用字面量变量可以用来保存字面量，并且可以保存任意的字面量标识符使用var关键字来声明一个变量

var a;

var b;

var c;一般都是通过变量来使用字面量，而不直接使用字面量，而且也可以通过变量来对字面量进行一个描述

声明变量

为变量赋值

a = 1;

b = 2;

c = 3;

声明和赋值同时进行 *

var d = 456;

var e = 789;变量在JS中所有的可以自主命名的内容，都可以认为是一个标识符，

是标识符就应该遵守标识符的规范。

比如：变量名、函数名、属性名规范：

1.标识符中可以含有字母、数字、_、$

2.标识符不能以数字开头

3.标识符不能是JS中的关键字和保留字

4.标识符一般采用驼峰命名法

xxxYyyZzz

**` 1.数据类型`**JS中一共分成六种数据类型String 字符串

Number 数值

Boolean 布尔值

Null 空值

Undefined 未定义

Object 对象

其中基本数据类型有JS中的字符串需要使用引号引起来双引号或单引号都行

在字符串中使用\作为转义字符

\’ ==> ’

\” ==> ”

\n ==> 换行

\t ==> 制表符

\ ==> \

使用typeof运算符检查字符串时，会返回”string”Number 数值String 字符串JS中所有的整数和浮点数都是Number类型

特殊的数字

Infinity 正无穷

-Infinity 负无穷

NaN 非法数字(Not A Number)

其他进制的数字的表示：

0b 开头表示二进制，但是不是所有的浏览器都支持

0 开头表示八进制

0x 开头表示十六进制引用数据类型使用typeof检查一个Number类型的数据时，会返回”number”

(包括NaN 和 Infinity)

Boolean 布尔值

布尔值主要用来进行逻辑判断，布尔值只有两个

true 逻辑的真

false 逻辑的假

使用typeof检查一个布尔值时，会返回”boolean”

Null 空值

空值专门用来表示为空的对象，Null类型的值只有一个null

使用typeof检查一个Null类型的值时会返回”object”

Undefined 未定义

如果声明一个变量但是没有为变量赋值此时变量的值就是undefined

该类型的值只有一个 undefined

使用typeof检查一个Undefined类型的值时，会返回”undefined”

Object 对象类型转换转换为String

转换为Number

转换为布尔值为任意的数据类型 +”“

例子：

var a = true;

a = a + “”;

原理：和String()函数一样调用String()函数

例子：

var a = 123;

a = String(a);

原理：对于Number Boolean String都会调用他们的toString()方法来将其转换为字符串，

对于null值，直接转换为字符串”null”。对于undefined直接转换为字符串”undefined”调用被转换数据的toString()方法

例子：

var a = 123;

a = a.toString();

注意：这个方法不适用于null和undefined

由于这两个类型的数据中没有方法，所以调用toString()时会报错方式一(强制类型转换)：

方式二(强制类型转换)：

方式三(隐式的类型转换): *使用一元的+来进行隐式的类型转换

例子：

var a = “123”;

a = +a;

原理：和Number()函数一样调用parseInt()或parseFloat()

这两个函数专门用来将一个字符串转换为数字的

parseInt()

parseFloat()可以将一个字符串中的有效的整数位提取出来，并转换为Number

例子：

var a = “123.456px”;

a = parseInt(a); //123

如果需要可以在parseInt()中指定一个第二个参数，来指定进制可以将一个字符串中的有效的小数位提取出来，并转换为Number

例子：

var a = “123.456px”;

a = parseFloat(a); //123.456调用Number()函数

例子：

var s = “123”;

s = Number(s);

转换的情况：

1.字符串 –> 数字

- 如果字符串是一个合法的数字，则直接转换为对应的数字

- 如果字符串是一个非法的数字，则转换为NaN

- 如果是一个空串或纯空格的字符串，则转换为0

2.布尔值 –> 数字

- true转换为1

- false转换为0

3.空值 –> 数字

- null转换为0

4.未定义 –> 数字

- undefined 转换为NaN方式一(强制类型转换)：

方式二(强制类型转换)：

方式三(隐式的类型转换)：为任意的数据类型做两次非运算，即可将其转换为布尔值

例子：

var a = “hello”;

a = !!a; //true使用Boolean()函数

例子：

var s = “false”;

s = Boolean(s); //true

转换的情况

字符串 –> 布尔

- 除了空串其余全是true

数值 –> 布尔

- 除了0和NaN其余的全是true

null、undefined —> 布尔

- 都是false

对象 —> 布尔

- 都是true方式一(强制类型转换)：

方式二(隐式类型转换)：类型转换就是指将其他的数据类型，转换为String Number 或 Boolean

运算符除了加法以外，对非Number类型的值进行运算时，都会先转换为Number然后在做运算。

而做加法运算时，如果是两个字符串进行相加，则会做拼串操作，将两个字符连接为一个字符串。

任何值和字符串做加法，都会先转换为字符串，然后再拼串一元运算符用来检查一个变量的数据类型

语法：typeof 变量

它会返回一个用于描述类型的字符串作为结果运算符也称为操作符

通过运算符可以对一个或多个值进行运算或操作

typeof运算符

算数运算符

+ 对两个值进行加法运算并返回结果

- 对两个值进行减法运算并返回结果

* 对两个值进行乘法运算并返回结果

/ 对两个值进行除法运算并返回结果

% 对两个值进行取余运算并返回结果一元运算符只需要一个操作数

一元的+就是正号，不会对值产生任何影响，但是可以将一个非数字转换为数字

例子：

var a = true;

a = +a;

一元的-就是负号，可以对一个数字进行符号位取反

例子：

var a = 10;

a = -a;自增自增可以使变量在原值的基础上自增1

自增使用 ++

自增可以使用 前++(++a)后++(a++)

无论是++a 还是 a++都会立即使原变量自增1

不同的是++a和a++的值是不同的，

++a的值是变量的新值(自增后的值)

a++的值是变量的原值(自增前的值)

自减自减可以使变量在原值的基础上自减1

自减使用 –

自减可以使用 前–(–a)后–(a–)

无论是–a 还是 a–都会立即使原变量自减1

不同的是–a和a–的值是不同的，

–a的值是变量的新值(自减后的值)

a–的值是变量的原值(自减前的值)

逻辑运算符

!非运算可以对一个布尔值进行取反，true变false false边true

当对非布尔值使用!时，会先将其转换为布尔值然后再取反

我们可以利用!来将其他的数据类型转换为布尔值&&

&&可以对符号两侧的值进行与运算

只有两端的值都为true时，才会返回true。只要有一个false就会返回false。

与是一个短路的与，如果第一个值是false，则不再检查第二个值

对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值

规则：

1.如果第一个值为false，则返回第一个值

2.如果第一个值为true，则返回第二个值

||

||可以对符号两侧的值进行或运算

只有两端都是false时，才会返回false。只要有一个true，就会返回true。

或是一个短路的或，如果第一个值是true，则不再检查第二个值

对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值

规则：

1.如果第一个值为true，则返回第一个值

2.如果第一个值为false，则返回第二个值

赋值运算符优先级：NaN不与任何值相等，报告它自身 NaN == NaN //false

判断一个值是否是NaN

- 使用isNaN()函数三元运算符：

?:由于undefined衍生自null，所以null == undefined 会返回true。

但是 null === undefined 会返回false。特殊的值：相等运算符关系运算符=

可以将符号右侧的值赋值给左侧变量

+=

a += 5 相当于 a = a+5

var str = “hello”; str += “world”;

-=

a -= 5 相当于 a = a-5

*=

a *= 5 相当于 a = a*5

/=

a /= 5 相当于 a = a/5

%=

a %= 5 相当于 a = a%5

关系运算符用来比较两个值之间的大小关系的

> >= 

关系运算符的规则和数学中一致，用来比较两个值之间的关系，

如果关系成立则返回true，关系不成立则返回false。

如果比较的两个值是非数值，会将其转换为Number然后再比较。

如果比较的两个值都是字符串，此时会比较字符串的Unicode编码，而不会转换为Number。

==

相等，判断左右两个值是否相等，如果相等返回true，如果不等返回false

相等会自动对两个值进行类型转换，如果对不同的类型进行比较，会将其转换为相同的类型然后再比较，转换后相等它也会返回true

!=

不等，判断左右两个值是否不等，如果不等则返回true，如果相等则返回false

不等也会做自动的类型转换。

===

全等，判断左右两个值是否全等，它和相等类似，只不过它不会进行自动的类型转换， 如果两个值的类型不同，则直接返回false

!==

不全等，和不等类似，但是它不会进行自动的类型转换，如果两个值的类型不同，它会直接返回true

null和undefined

NaN

语法：条件表达式?语句1:语句2;

执行流程：

先对条件表达式求值判断，

如果判断结果为true，则执行语句1，并返回执行结果

如果判断结果为false，则执行语句2，并返回执行结果

和数学中一样，JS中的运算符也是具有优先级的，

比如 先乘除 后加减 先与 后或

具体的优先级可以参考优先级的表格，在表格中越靠上的优先级越高，

优先级越高的越优先计算，优先级相同的，从左往右计算。

优先级不需要记忆，如果越到拿不准的，使用()来改变优先级。

**`2.流程控制语句`**程序都是自上向下的顺序执行的，通过流程控制语句可以改变程序执行的顺序，或者反复的执行某一段的程序。

分类：

1.条件判断语句

2.条件分支语句

3.循环语句

条件判断语句执行流程

- if…else if…else语句执行时，会自上至下依次对条件表达式进行求值判断，

如果判断结果为true，则执行当前if后的语句，执行完成后语句结束。

如果判断结果为false，则继续向下判断，直到找到为true的为止。

如果所有的条件表达式都是false，则执行else后的语句1.条件分支语句执行流程：

if…else语句执行时，会对条件表达式进行求值判断，

如果值为true，则执行if后的语句

如果值为false，则执行else后的语句执行流程：

if语句执行时，会先对条件表达式进行求值判断，

如果值为true，则执行if后的语句

如果值为false，则不执行条件判断语句也称为if语句

语法一：

if(条件表达式){

语句…

}

语法二：

if(条件表达式){

语句…

}else{

语句…

}

语法三：

if(条件表达式){

语句…

}else if(条件表达式){

语句…

}else if(条件表达式){

语句…

}else if(条件表达式){

语句…

}else{

语句…

}switch语句

语法:

switch(条件表达式){

case 表达式:

语句…

break;

case 表达式:

语句…

break;

case 表达式:

语句…

break;

default:

语句…

break;

}

执行流程：switch…case…语句在执行时，会依次将case后的表达式的值和switch后的表达式的值进行全等比较，

如果比较结果为false，则继续向下比较。如果比较结果为true，则从当前case处开始向下执行代码。

如果所有的case判断结果都为false，则从default处开始执行代码。

2.循环语句语法：

for(①初始化表达式 ; ②条件表达式 ; ④更新表达式){

③语句…

}

执行流程：

首先执行①初始化表达式，初始化一个变量，

然后对②条件表达式进行求值判断，如果为false则终止循环

如果判断结果为true，则执行③循环体

循环体执行完毕，执行④更新表达式，对变量进行更新。

更新表达式执行完毕重复②语法:

do{

语句…

}while(条件表达式)

和while的区别：

while：先判断后执行

do…while: 先执行后判断执行流程

do…while在执行时，会先执行do后的循环体，然后在对条件表达式进行判断，

如果判断判断结果为false，则终止循环。

如果判断结果为true，则继续执行循环体，依此类推do…while可以确保循环体至少执行一次。语法：

while(条件表达式){

语句…

}

执行流程：

while语句在执行时，会先对条件表达式进行求值判断，

如果判断结果为false，则终止循环

如果判断结果为true，则执行循环体

循环体执行完毕，继续对条件表达式进行求值判断，依此类推通过循环语句可以反复执行某些语句多次

while循环

do…while循环

for循环

死循环

while(true){

}

for(;;){

}