HTML+CSS+JavaScript基础知识

开始  :

期末了把大一下学期的Web基础知识总结一下,就当复习。有什么不好的地方多多包容~

内容:

按照教材的内容顺序整理(部分简单的省略),下面开始


教材1-2章

一、HTML4和HTML5(部分)

1.img图片

alt---图片无法显示显示替代文件

2.a超链接

  title---给链接提示文字

  rel---规定当前文档与目标文档之间的联系

  2.1可以跳转页面定位元素

<a name="标签a">书签内容</a> 
<a href="#标签a">单击此处将使浏览器跳到"标签a"处</a> 

3.dl自定义列表

  ul和ol可通过style相互转化

  dt---定义列表的标题、dd---定义列表项

4.table表格

  cellspacing---设置单元格与单元格之间的距离、cellpadding---设置单元格边框与其内部内容距离。

  4.1 tr行

    align、valign--- 行的水平、垂直对齐方式

    bordercolor---行的边框颜色、background-color---行的背景颜色

  4.2 td列

    colspan、rowspan---设置向右向下通栏数

    align、valign---单元格的对齐方式

5.表单form

  label、input、select、taxtarea---定义一个控件元素

  5.1 input type=" "

    hidden---隐藏区域,用户不能在其中输入,常用来预设某些要传送的数据

    fire---上传文件选择框

    range---一个滑动的杆

    radio---点击选中(当多个选项name值一样)

  5.2 textarea

    cols、rows---区域大小

    disabled---第一次加载禁用

    readonly---用户无法修改

6.HTML5新增form功能

 时间相关type=" "   

     date---包含日期值的输入域,可以通过一个下拉日历来选择年/月/日

     month---用于选取月和年 week 用于选取周和年

     time--- 用于选取时间

     datetime-- -用于选取时间、日、月、年(UTC 时间)

  其他属性

      autofocus---页面加载时自动获得焦点

      autocomplete---当用户在自动完成域中开始输入时,浏览器应该在该 域中显示填写的选项

      list--datalist是输入域的选项列表

      min,max,step---规定输入域允许数值范围

      multiple---规定输入域可选多个值

      required---不匀许为空

      placeholder---提供一种提示,在输入域内几个字

7.多媒体元素

       autoplay---是否自动播放

       controls---控制面板

       loop---循环次数

       poster---当视频不可用时显示

       preload---是否预加载

       source---:在video中,<source src="不同格式的文件" type="文件名/格式"/>指定多个编码方式与播放方式

8.加强版列表

    start---编号从多少开始

    reversed---编号倒序排列

9.canvas画布

    创建一个画布:<canvas id="canvas" width="" height=""></canvas>

    需要JavaScript脚本:<script type="text/javascript" src=""><script>

    最后使用draw进行绘制:<body οnlοad="draw('canvas');"

二、CSS选择器

1.css基本选择器---selctor1,selectorN--群组选择器:将每一个选择器匹配的元素合并

2.css层次选择器

E F --后代选择器 选择 E 元素的所有后代 F 元素 
E > F --子选择器 选择 E 元素下所有的子元素 F (只是子元素不包括孙元素)
E + F --相邻兄弟选择器 选择紧接在 E 元素后的 F 元素 
E ~ F --通用兄弟选择器 选择 E 元素后边的所有兄弟元素 

3.css动态伪类选择器

动态交互才能体现
E:link --链接伪类选择器 选择匹配的 E 元素,而且匹配元素被定义了超链接并未被访问过。常用于链接锚点上 
E:visited-- 链接伪类选择器 选择匹配的 E 元素,而且匹配元素被定义了超链接并已被访问过。常用于链接锚点上 
E:hover --用户行为伪类选择器 选择匹配的 E 元素,且用户鼠标在停留在元素 E 上。
E:active --用户行为伪类选择器 选择匹配的 E 元素,且匹配元素被激活。常用于锚点与按钮上  
E:focus --用户行为伪类选择器 选择匹配的 E 元素,且匹配的元素获得焦点 
:nth-child( )--可取值odd,even,2n,2n+1

动态伪类的设置必须遵守一个“爱恨原则”LoVe/HAte,也就是link-visited-hover-active。
 

4.css属性选择器

E[attr]--定义了attr属性的元素
E[attr=val] --定义了attr="val"的元素
E[attr|=val] --等号后val开头(常用于英文字母)
E[attr^=val--等号后val开头
E[attr$=val--等号后val结尾
E[attr~=val] --多个等号,任一等号后含val
E[attr*=val] --只要等号后含"val"这三个字母

三、CSS图片边框

border-image-

source:URL()
slice切割,分成9份:数值,百分数,fill(保留边框图像中间部分)
width:数值,thin,thick,medium
repeat:stretch(默认值,拉伸),repeat平铺,round取证平铺

合并在一起:border-image: source、 slice 、width、repeat;

四、CSS圆角边框

border-radius

默认无,数值,百分数

在使用border-radius属性时,如果提供两个参数,则两个参数以“/”分隔,每个参数允许设置 1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1 个参数。

五、CSS背景

background-


color:red
image :URL()
起始位置position:left,right,center,top,bottom,长度,百分数
图像重复repeat:repeat(默认值,平铺),no-repeat,repeat-x,repeat-y
是否固定页面位置attachment:scroll滚动,fixed固定

六、CSS3新增背景

background-

orign指定绘制背景图片的起点
padding-box---(默认)从padding(边框内线)外边缘开始显示
border-box---从边框外线
content-box---内容区

clip指定绘制背景图片的显示范围
border-box---(默认)从border(边框外线)开始向外裁剪
padding-box---从边框内线
content-box--内容以外

size设置大小
auto---(默认)保留原始高度和宽度
数值---(设置一个值是宽度,两个值是宽、高度)
百分数---(计算相对于背景定位区域的百分比,一个值是宽度,两个是宽、高度)
cover---保持纵横比,并将图像缩放成完全覆盖背景定位区域的最小尺寸 
contain---保持纵横比,并将图像缩放成完全覆盖背景定位区域的最小尺寸 

多背景
background-image:url(图片1地址),url(图片2地址)---中间用逗号隔开,下边设置图片position、repeat时都用逗号隔开

七、文本

1.基本font

style :normal、italic(斜体)、blique(倾斜)
variant :small-caps(小写转成大写,即小型大写字母)、normal
weight :normal、bold、bolder、lighter
size: 数值
line-height:数值
family :"微软雅黑"

合并写法:font:style、variant、weight、size、line-height、family

2.文本类型

text-align ---水平对齐方式
vartical-align ---垂直对齐方式
  baseline(默认值)、sub(上标对齐)、super(下标对齐)、bottom(行框底端对齐)、 
  text-bottom(行内文本底端对齐)、top(顶端对齐)、middle(居中对齐)
  数值
  百分数


text-index ---首行缩进数值

text-decoration---文本修饰
  none(默认值)、underline(下划线)、overline(上划线)、 line-through(删除线)、
  blink(闪烁线)、inherit(规定应从父元素继承 text-decoration 属性的值) 

text-transform ---设置文本大小写
  none(默认值)、uppercase(大写)、lowercase(小写)、capitalize(首字母大写) 

line-height ---行高
  数值px,百分数,数字(当前字号倍数)
  通常设置line-height和height值相等来实现垂直居中

white-space---元素中空白处理方式
  normal(默认值丢掉多余的空白符)、nowrap(空白符合并、换行符忽略)、pre(空 白符、换行符保留)、 
  pre-wrap(空白符、换行符保留保留,自动换行)、pre-line(空 白符、换行符保留


word-spacing---设置字符间距,值可为负
leter-spacing---设置字符间距

direction---设置文本方向
  ltr(默认值)、rtl(从右到左)、inherit(规定应从父元素继承 direction 属性的值) 

text-sahdow---css3设置文本阴影
  textshadow:color x-offset(正值在右边) y-offset (正值在下边)blur-radius(阴影模糊半 
  径,只能正值)

word-wrap---css3文本换行
  word-wrap: break-word 在长单词或 URL 地址内部进行换行





八、盒模型及相关属性

CSS2

默认解析方式是:content-box
width、height定义的是content,不是整个盒子,整个盒子要更大
整个盒子还得加上padding、border、margin

CSS3

新增设置盒子尺寸解析方式:box-sizing

border-box(包含padding、margin、content)
resize---设置元素尺寸变化

  none:不能拖动元素修改尺寸大小 
  both:可以拖动元素,同时修改元素的宽度和高度 
  horizontal:可以拖动元素,仅修改元素的宽度,不能修改元素的高度 
  vertical:可以拖动元素,仅修改元素的高度,不能修改元素的宽度 
  inherit:继承父元素 resize 属性值 

outline---外轮廓属性

  与border效果相似,但不占网页布局空间,会叠在内容上
  outline: outline-color  outline-style  outline-width  outline-offset  inherit 

box-shadow---定义盒子阴影

  inset:设置为内投影(默认none是外投影)
  x-offset、y-offset:偏量
  blur-radius:阴影模糊半径,取值越大越模糊
  spread-radius:阴影扩展半径,正值阴影扩大,负值阴影缩小
  color:颜色

  合语句:
  box-shadow: none | [ inset  x-offset  y-offset  blur-radius  spread-radius  color]


display---设置元素的显示方式
  block
  inline

float---浮动
  left
  right
  clear:both只是对所在块级元素起作用,而不是对上面的块级元素清除,clear 属性规定元素的哪一侧不 
  允许其他浮动元素。
  

CSS3定位

position---定位
static静态定位
relative相对定位(相对正常原文位置可以移动left:数字值)
absolute绝对定位(前面的父元素要设置非static定位,相对于父元素)
fixed固定定位(固定在相对浏览器窗口某一块位置)

定位方式

 八、列表

1.list-style-type

none 无标记 
disc  默认,标记是实心圆 
circle 标记是空心圆 
square 标记是实心方块 
decimal 标记是数字 
decimal-leading-zero 0 开头的数字标记(01, 02, 03 等) 
lower-roman 小写罗马数字(i, ii, iii, iv, v 等) 
upper-roman 大写罗马数字(I, II, III, IV, V 等) 
lower-alpha 小写英文字母(a, b, c, d, e 等) 
upper-alpha 大写英文字母(A, B, C, D, E 等) 

如果ul和li都设置了,li设置的单独显示

2.list-type-image

  ul、ol、li都可以设置,但一般不用(图标与文字距离在不同浏览器不同,不整齐)

  一般用:设置list-style-type的属性值为none,li设置background(list-style-image)

3.list-style-position

list-style-position: inside | outside | inherit; 

inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside:默认值。保持标记位于文本的左侧,列表项目标记放置在文本以外,且环绕 文本不根据标记对齐。
inherit:规定应该从父元素继承 list-style-position 属性的值。

教材第三章

九、CSS样式高级篇

1.页面布局

  网页基本组成:页头header、导航nav、内容section、页脚footer

  网页大小:显示器的分辨率影响,常见800*600、1024*768

  

注:
  当设置为单列固定宽度布局,想要居中:margin:0 auto;
  HTML4里面的布局用framset

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<frameset rows="15%,*,10%" frameborder="1" border="2" noresize="noresize">
		<frame name="top" src="框架src材料/框架srctop.html" bgcolor="green">
		<frameset cols="20%,80%">
			<frame name="left" src="框架src材料/left.html"/>
			<frame name="right" src="框架src材料/right.html"/>
		</frameset>
		<frame name="bottom" src="框架src材料/bottom.html"/>
	</frameset>
</html>

2. CSS渐变

  线性渐变

  径向渐变

  重复渐变

3.CSS变形

  一系列效果的集合,如平移、旋转、缩放和倾斜。

  transform:属性让元素在一个坐标系中变形,系列的变形函数,可以移动、旋转

  transform-origin:用来指定元素中心点位置

 3D 变形中的 transform-origin 属性
 

x-offset 
设置水平方向 X 轴的偏移量,可以用 length 或 percentage 值。可以使正值(沿 X 轴向右偏移)也可以 是负值(沿 X 轴向左偏移) 

y-offset 
设置垂直方向 Y 轴的偏移量,可以用 length 或 percentage 值。可以是正值(沿 Y 轴向下偏移)也可以 是负值(沿 Y 轴向上偏移) 

x-offset-keyword     设置水平方向 X 轴的偏移量,是 left、right、center 关键词中的一个 
y-offset-keyword     设置水平方向 Y 轴的偏移量,是 top、bottom、center 关键词中的一个 
z-offset             设置 3D 变形中远离用户眼睛视点的距离,默认值为 z=0,取值为 length 

 4.实践案例(部分代码)

水平导航栏

text-shadow: 2px 2px 2px #333333;/*文字阴影*/

width: 150px; height: 26px;line-height: 26px;/*指定每个a的宽度,竖直方向居中*/

定义每个导航样式:(第几个孩子)
 nav a:nth-child(1){border-top:4px solid #ffcc00;}
 nav a:nth-child(2){border-top: 4px solid #ef5700;}
 nav a:nth-child(3){border-top:4px solid #33c0df;}
 nav a:nth-child(1):hover{color:#FFCC00}
 nav a:nth-child(2):hover{color:#ef5700}
 nav a:nth-child(3):hover{color: #33c0df;}

-webkit-transition-duration:0.5s;/* 过度动画的持续时间; */

 点击图片旋转

.background section ul li img{
	border: 3px solid rgba(255,255,255,0.5);
	box-shadow:2px 2px 3px gray;照片阴影
               -webkit-transition-duration: 0.8s;过度动画
}
.background section ul li img:hover{
	-webkit-transform:rotate(360deg) scale(1.3)/*图片旋转360度,放大1.3倍*/	
}

动态按钮

<div class="more"> <buttom></buttom></div>

/*按钮背景使用线性渐变颜色*/
.more buttom{
      background:-webkit-linear-gradient(linear,0,0,0,70%,from(#ed2800),to(#b21e00));
      background:-moz-linear-gradient(#ed2800,#b21e00 70%);
      background:linear-gradient(#ed2800,#b21e00 70%) cursor:pointer;
      -webkit-transition-duration:0.5s
}
/*鼠标悬停状态下的按钮样式*/
.more button:hover{background:rgba(233,39,0,1);border:none}

鼠标移动到某行,背景颜色改变

某行::nth-child()

某行鼠标移动变色:nth-child():hover{ background-color:red}

设置背景渐变

背景设置渐变:back-ground:linear-gradient(数值deg,起始颜色,中间色1,中间色2...,结束色)

教材第四章

十、JavaScript

1.基本介绍

分为三部分:

  ECMAScript JavaScript 的正式名称是 ECMAScript 。即欧洲计算机制造商协会通过的一种标准化的脚本程序设计语言。在这之前,脚本语言比较混乱。ECMAScript 是 JavaScript 的核心,描述了 JavaScript 语言的基本语法和对象。

  DOM DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 以树结构表达 HTML 文档。DOM 描述了作用于网页内容的方法和接口。

  BOM BOM(browser object model)窗口对象模型。BOM,即brower object model 浏览器对象模型。其实更应该叫做 WOM,即 window object model ,因为它的作用对象就是window。BOM 描述了和浏览器交互的方法和接口。

2.三种基本书写方式

  内联式:

    直接写在标签里面:

<input type="button" value="点我试试" onclick="alert('Hello World')"/>

  内部引用:

    写在head中,<script></script>

  外部引用:

    a.在head中:<script src = "js/my.js"></script>

    b.在body中:<script src = "js/my.js"></script>

3.输入输出语句

  在开发者工具控制台输出:console:("内容")\console.log(内容 );

  在浏览器弹窗输出:alert("内容");在浏览器弹窗输入:promote("内容提示");

  在页面文档输出打印:document.write("内容");

4.变量

  本质:变量是程序在内存中申请的一块用来存放数据的空间

  声明变量:var age;(variable变量,自动为变量分配空间,可声明时赋值,也可后面赋值)

  给变量赋值:age = 10;(特殊可以不声明直接赋值,属于全局变量,这种情况要避免。形参是不用声明的变量)

 5.变量运算符表达式

  优先级:括号>单目(求反、求非、递增、递减)>乘除加减>逻辑与或非>三目条件>赋值

  运算符:

    a.浮点数的精度问题:浮点数值最高精度是17位小数,但在计算时其精度远远不如整数,所以不要直接判断两个浮点数是否相等

    b.比较运算符 === 与 !== 表示全等、全不等比较,要求数据类型和数值都相同。注:' 37 ' == 37;//会得到true,==会把字符型的37转化为数字型的。

  表达式:

    位与:x&y当两个都为1 返回值为1;

    位或:x^y当有一个为1就返回值为1;

    位异或:x|y当两个数有且只有一个0,返回0,否则返回1;

6.程序流程控制

分支

  if分支:

单分支:if
双分支:if……else……
多分支:if……else if……else……(各条件等级相同)
嵌套分支:if里面可以嵌套子if和else

    switch分支

    三元表达式( ) ? 语句1:语句2;

循环

  while

  do...while

   for

跳转

  break

  continue

7.数据类型

Number:

  数字型的三个特殊值:Infinity、-Infinity、NaN(not a number)
分别表示无穷大,无穷小,非数值.

  判断变量是否为数字类型:isNaN(x);返回值为ture或false

  如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。
  
   默认情况下,JavaScript 数字为十进制显示。

   但是你可以使用 toString() 方法 输出16进制、8进制、2进制。
 实例:
 var myNumber=128;
 myNumber.toString(16);   // 返回 80
 myNumber.toString(8);    // 返回 200
 myNumber.toString(2);    // 返回 10000000

Boolen:布尔型

String:

注意:
使用单引双引都行,HTML中是双引,这里我们推荐单引
引号可以嵌套,外双内单或者外单内双

1.字符串长度 变量.length
  var strMsgv='haha';
  alert(strMsg.length);
2.字符串拼接+
  
  alert('Hello'+' '+'World!');
  alert('100'+'00'+'100');//10000100
  alert('11'+12);//1112,字符串连接数值,自动把数值转为字符串

  还有就是 字符串+变量+字符串
  var age=18;
  console.log('我今年'+age+'岁了');//我今年18岁了

  口诀:数值相加,字符相连

转义符:

\n 回车换行            \r 换行 
\b 退格                \v 水平跳格 
\’ 单引号              \” 双引号 
\ooo 八进制整数        \xHH 十六进制整数 
\f 换页                \uhhhh 十六进制编码的 Unicode 字符 

Undefined:

 var a;此时a= undefined,数据类型为Undefined。

  字符串连接时显示undefned

  字符串与数字加减运算显示NaN

Null:

  var a = null;此时a的值为null

注:type( ) 查看数据类型

8.数据类型转换

转为字符串:

1.变量名.toString( ) 
var num=1;
alert(num.toString( ))

2.string(变量名)

3.' '+变量名

转换为数字型:

1.parselnt(变量)转换为整型

2.parseFloat(变量)

3.Number(变量)

4.利用运算符号:- * / 进行隐式转换
  ‘12’ - 0,‘123’ - ‘120’。

转换为布尔型:

  Boolean(变量)

  注意:代表空、否定的值会被转化为false,如:",0,NaN,null,undefined

注:判断某个数是整数

  1.parseInt()函数和parseFloat() 函数的返回值是相同的,反之返回不同的值说明是小数

  2.用Number.isInteger(变量)来检验,根据返回值真假判断

9.数组

  创建数组:

1.使用new创建数组:var 数组名 = new Array( );

2.使用数组字面量创建数组:
var 数组名 = [ ];
var arr1 = ['1','haha','pink'];

数组的索引就是下标

给数组新增元素:

法1: 修改length长度:
  var arr = ['red','green','blue'];
  arr.length = 7;
  console.log(arr[6]);//会得到undefined


法2:修改数组索引(通过追加赋值)
  var arr = ['red','green','blue'];
  arr[4] = 'hotpink';
  console.log(arr);

函数内置数组arguments(案例:找最大数)

//利用函数求任意个数的最大值
//函数中内置自带了数组
function getMax() {
	var max = arguments[0];
	for(var i = 0; i < arguments.length; i++) {
		if(arguments[i] > max) {
			max = arguments[i];
		}
	}
	return max;
}
console.log(getMax(1,2,3));
console.log(getMax(11,2,34,444,5,100));

检查是否为数组:

  法1:instance of arr

  法2:Array.isArray(arr)

把数组看做对象的操作方法:

添加、删除数组元素的方法

  push(参数1…)	    末尾添加一个或多个元素,会修改原数组	,并返回新的长度
  pop()	      删除数组最后一个元素,把数组长度减1,无参数、会修改原数组	返回它删除的元素的值
  unshift(参数1…)	向数组的开头添加一个或更多元素,会修改原数组	,并返回新的长度
  shift()	删除数组的第一个元素,数组长度减1 ,无参数、会修改原数组,并返回第一个元素的值

数组排序

  reverse()    反转数组中元素的顺序,无参数	会改变原来的数组,返回新数组
  sort()	    对数组的元素进行排序	,会改变原来的数组,返回新数组

返回数组元素索引号的方法

  //用 indexOf(数组元素) 

  //意思是返回该数组元素的索引号 从前往后查找
  //它只返回第一个满足条件的索引号
  //它如果在该数组里面找不到该数组元素,则返回 -1
  var arr = [1,3,4,1,9];
  console.log(arr.indexOf(1));//0

数组转化为字符串
 
  toString()	  把数组转换成字符串,每项中间用逗号隔开,返回一个字符串
  join(‘分隔符’)  把数组转换成字符串,并且改变每个字符间的分隔符号,返回一个字符串

    //1,toString() 将我们的数组转换为字符串
    var arr = [1,2,3];
    console.log(arr.toString());//1,2,3

    //2,join('分隔符')
    console.log(arr.join());//1,2,3
    console.log(arr.join('-'));//1-2-3
    console.log(arr.join('&'));//1&2&3

连接 截图 删除数组元素

  concat()连接两个或多个数组arr1.concat(arr2),不影响原数组返回连接后的新数组
  slice()数组截取slice(begin的索引号, end的索引号) ,这里的索引号包含左不包含右返回被截取元素 
组成的新数组,不会影响原数组
  splice()指定删除数组的某些元素splice(第几个索引号开始,要删除几个)。
同时还可以向新数组里添加新的元素,splice(第几个索引号开始,要删除几个,要添加的元素)返回被删除项目的新数组,会影响原数组

  //1,concat()
var arr = [1,2,3,4,5];
var arr1 = [6,7];
console.log(arr.concat(arr1));//[1, 2, 3, 4, 5, 6, 7]
console.log(arr.slice(0,2));//[1, 2]
console.log(arr.splice(2,2));//[3, 4]
console.log(arr);//[1, 2, 5]
var arr1 = [5,6,7,8,9];
arr1.splice(2,0,10);
document.write(arr1);//5,6,10,7,8,9
console.log(arr1);//[5, 6, 10, 7, 8, 9]

注:使用return[ ] 可以返回多个值,JS数组中可存储不同类型的数据。

10.字符串

字符串的不可变:

  里面的之不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。

indexof(字符):

  获取某个字符在字符串中的索引(和上面对象数组操作类似)

//字符串对象  根据字符返回位置 str.indexOf('要查找的字符', [起始的索引号位置])
var str = '改革春风吹满地,春天来了';
console.log(str.indexOf('春');//不写起始位置,默认从头开始查找
console.log(str.indexOf('春', 3));
//从索引号是3的位置开始往后查找

字符串操作:

str1.concat(str2)	          concat()方法用于连接两个或多个字符串。拼接字符串,等效于 + ,但是 + 拼接法更常用

substr(start, length)	从start(索引号)位置开始,length取的个数,重点记住这个

slice(start, end)	         从start位置开始,截图到end位置,不包含end 。这里的开始和结束都是索引号

substring(start, end)	从start位置开始,截取到end位置,不包含end 。基本和slice相同,但是开始和结束位置不能是负数

简单类型(基本数据类型、值类型)和复杂类型(引用类型):

简单数据类型 / 基本数据类型:
  在存储时变量中存储的是值本身,因此叫做值类型。
  如,string , number , boolean , undefined , null

  但是null比较特殊。 null类型返回的是一个空对象。

引用数据类型:
  复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型。
  通过new关键字创建的对象,如Object,Array,Date等,都是引用类型。

11.堆栈的简单理解

12.函数

13.对象

对象简单介绍:

创建对象:

利用构造函数创建对象介绍:

使用对象:

14.深入彻底理解构造函数和原型对象(较难理解)

与原型有关的几个属性和方法:

继承属性:

组合原型模型和构造函数模型创建对象实例:

14.内置对象

内置对象种类详细介绍:

Math对象:

//取两个数之间的随机整数,并且包含这两个整数:
function getRandom(min, max) {

​     return Math.floor(Math.random()*(max-min + 1))+ min);

}

console.log(getRandom(1, 10));

Date对象:

//Date()日期对象。 是一个构造函数。
//必须使用new 来调用创建我们的日期对象
var arr = new Array();//创建要给数组对象
var obj = new Object();//创建一个对象实例
//1,使用Date 如果没有参数,返回所用电脑设备的当前时间
var date = new Date();
console.log(date);
/*2,参数常用的写法:
 	数字型 2019,10,01
 	字符串型 '2019-10-1 8:8:8'*/
var date1 = new Date(2019,10,1);
console.log(date1);//返回的是11月,不是10月,有点特殊
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);

Array对象:

//字面量创建
var arr = [ ];
var arr = [1,2,3];
console.log(arr[0]);

//newArray()创建
var arr1 = new Array( );//创建一个空数组
var arr2 = new Array(2);//创建一个数组长度为2的数组
var arr3 = new Array(2,3);//创建一个元素为2、3的数组
console.log(arr3);

String对象:

//基本包装类型:就是把简单数据类型包装成复杂数据类型这样基本数据类型就有了数据和方法。
//js会把基本数据类型包装为复杂数据类型(通过临时变量之后销毁)
var temp = new String('andy');
str = temp;
temp = null;//销毁临时变量

15.事件

通过 JavaScript 事件处理机制改变浏览器响应用户操作的方式,这样就可以开发出具有 交互性并易于操作使用的网页。表 4.17 给出了一些 JavaScript 的常用事件。 

事件类别                  描述 
1.鼠标事件 
onclick         鼠标单击时触发此事件 
onmouseover     鼠标滑入时触发此事件 
onmouseout      鼠标滑出时触发此事件 
onmousedown     鼠标按下时触发此事件 
onmouseup       鼠标按下并释放时触发此事件 

2.键盘事件 
onkeypress         键盘上某个按键按下并释放时触发此事件 
onkeydown          键盘上某个按键被按下时触发此事件 
onkeyup            键盘上某个按键按下并松开时触发此事件 

3.网页相关事件 
onload              页面载入事件,常用于 body、frameset 和 image 
onunload            页面关闭或重载时触发此事件,常用于 body 和 frameset 
onerror             脚本发生错误时触发此事件 
onresize            网页窗口大小改变时触发此事件 
onscroll            网页滚动条位置发生改变时触发此事件 
onmove              网页窗口移动时触发此事件 

4.表单元素事件 
onblur           失去键盘焦点时触发此事件,适用于几乎所有可视元素 
onfocus          获得键盘焦点时触发此事件,适用于几乎所有可视元素 
onchange         修改内容并失去焦点后触发此事件,一般用于可视表单控件 
onreset          表单重置时触发此事件 
onsubmit         表单提交时触发此事件 

猜你喜欢

转载自blog.csdn.net/qq_24654501/article/details/106815567