- CSS选择器
1、基本选择器
（1）“*”选择器：通配符
描述：将匹配所有的HTML标记，所有的标记都会改变的。
语法：*{ color:red; }
注意：“*”尽量少用，因为IE6不支持。
（2）标签选择器
描述：将匹配指定的HTML标记。
语法：h1{ color:red; }
注意：CSS标签选择器，与HTML标记的名称一样，但不能加尖括号。
（3）class选择器(类选择器)——类选择器是使用频率最高的
描述：给一类HTML标记加样式。这里所指的“一类”是：每个HTML标记都有一个class属性，且class的值一样。class属性是公共属性，每个HTML标记都有。
类选择器的名称，必须以“.”开头，后限HTML标记的class属性的值。如：.box{ color:red; }
HTML标记的class属性的值，不能以数字开头。
（4）id选择器
描述：给指定id的元素添加样式。
注意：网页中HTML标记的id属性的值，必须是唯一的。
每一个HTML标记都有一个id的公共属性。
注意：id属性一般是给JS使用的，不是让你来加样式的。class属性只能给CSS用，不能给JS用的。
id选择器的名称，必须以“#”开头，后跟HTML标记的id属性的值。
2、组合选择器
（1）多元素选择器
描述：给多个元素加同一个样式，多个选择器之间用逗号“,”隔开。
举例：h1,p,div,body{color:red;}
（2）后代元素选择器(最常用)
描述：给某个标签的某一个后代元素加样式。选择器之间用“空格”隔开。
举例：div .title{ color:red;}
（3）子元素选择器
描述：给某个元素的子元素添加样式。
举例：div > h1.title{color:red;}
4. CSS伪类选择器：给超链接加的样式(链接的不同状态加样式)
一个超链接，有四个状态：
正常状态(:link)：鼠标没放上之前链接的样式。
放上状态(:hover)：鼠标放到链接上时的样式。
激活状态(:active)：按住鼠标左键不松开的样式，这个状态特殊短暂。
访问过的状态(:visited)：按下鼠标左键，并弹起，这时的样式效果。
在平常工作中，会使用以下写法，来给链接加不同的样式：
a:link, a:visited{ color:#444; text-decoration:none; } //将“正常状态”和“访问过的状态”合二为一。
a:hover{ color:#990000; text-decoration:underline; } //“鼠标放上”单做一种效果
- CSS注释
CSS注释：/*CSS注释内容*/
HTML注释：<!—HTML注释-->
CSS尺寸属性
width：元素宽度，一定要加px单位。
height：元素高度。
CSS字体属性
font-size：文字大小。如：font-size:14px;
font-family：字体。如：font-family:微软雅黑;
font-style：斜体，取值：italic。如：font-style:italic;
font-weight：粗体，取值：bold。如：font-weight:bold;
CSS文本属性
color：文本颜色
text-decoration：文本修饰线，取值：none(无)、underline(下划线)、overline(上划线)、line-through(删除线)
text-align：文本水平对齐方式，取值：left、center、right
line-height：行高，可以用固定值，也可以用百分比。如：line-height:24px; line-height:150%;
text-indent：首行缩进。如：text-indent:28px;
letter-spacing：字间距。
CSS列表属性
list-style：列表样式，取值：none。去掉项目符号或编号前面的各种符号。
CSS边框属性：每个元素都可以加边框线
border-left：左边框线。
格式：border-left：粗细 线型 线的颜色;
线型：none(无线)、solid(实线)、dashed(虚线)、dotted(点状线)
举例：border-left：5px dashed red;
border-right：右边框线。
border-top：上边框线。
border-bottom：下边框线。
border：同时给四个边加边框线。
CSS内边距属性：边框线到内容间的距离
注意：平常我们所说的width和height属性，它们指内容的宽度和高度，不含内、外边距、边框线。
padding-left：左内填充距离，左边线到内容间的距离。
padding-right：右内填充距离，右边线到内容间的距离。
padding-top：上内填充距离，上边线到内容间的距离。
padding-bottom：下内填充距离，下边线到内容间的距离。
缩写形式
padding:10px; //四个边的内填充分别为10px
padding:10px 20px; //上下为10px，左右为20px
padding:5px 10px 20px; //上为5px，左右为10px，下为20px
padding:5px 10px 15px 20px; //顺序一定是“上右下左”
CSS外边距属性：边线往外的距离
margin-left：左边线往外的距离。
margin-right：右边线往外的距离
margin-top：上边线往外的距离。
margin-bottom：下边线往外的距离。
简写式
margin:10px; //四个外边距分别为10px
margin:10px 20px //上下外边距10px，左右外边距20px
margin:5px 10px 15px; //上外边距5px，左右外边距10px，下外边距15px
margin:5px 10px 15px 20px; //顺序一定是“上右下左”
CSS背景属性
background-color：背景颜色。
background-image：背景图片地址。如：background-image:url(images/bg.gif)
background-repeat：背景平铺方式，取值：no-repeat(不平铺)、repeat-x(水平方向)、repeat-y(垂直方向)
background-position：背景定位。格式：background-position:水平方向定位 垂直方向定位；
用英文单词定位：background-position: left|center|right top|center|bottom;
用固定值定位：background-position: 50px 50px; //背景距离容器的左边50px，容器顶端50px
用百分比定位：background-position: 50% 50%; //水平居中，垂直居中
用混合定位：background-position: left 10px; //背景靠左边齐，距离容器顶端10px
简写方式
background：背景色 背景图 平铺方式 定位方式；
举例：background:url(images/bg.gif) no-repeat center center;
举例：background: #ccc url(images/bg.gif) no-repeat left 10px;
- CSS浮动和清除
float：让元素浮动，取值：left(左浮动)、right(右浮动)
clear：清除浮动，取值：left(清除左浮动)、right(清除右浮动)、both(同时清除上面的左浮动和右浮动)
1、CSS浮动
浮动的元素，将向左或向右浮动，浮动到包围元素的边上，或上一个浮动元素的边上为止。
浮动的元素，不再占空间了，并且，浮动元素的层级要高于普通元素。
浮动的元素，一定是“块元素”。不管它原来是什么元素。
如果浮动的元素，没有指定宽度的话，浮动后它将尽可能的变窄。因此，浮动元素一般要定宽和高。
一行的多个元素，要浮动一起浮动。
浮动的功能：可以实现将多个块元素并列排版。
如何让包围元素，包住浮动元素？
你就需要在浮动元素的下边，使用清除浮动操作。
<style type="text/css">
.box .div3{
width:100px;
height:100px;
background-color:blue;
float:right;
}
.clear{clear:both;}
</style>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="clear"></div>
</div>
</body>
2、CSS清除浮动
CSS清除浮动的功能有两个：(1)可以包围元素从“视觉上”包住浮动元素(2)清除之下的其它元素将恢复默排版。
有浮动，就得有清除。
如果包围元素指定了高度了，那么可以不使用清除功能。
CSS继承性
CSS属性继承：外层元素的样式，会被内层元素进行继承。多个外层元素的样式，最终都会“叠加”到内层元素上。
什么样的CSS属性能被继承呢？
CSS文本属性都会被继承的：
color、 font-size、font-family、font-style、 font-weight
text-align、text-decoration、text-indent、letter-spacing、line-height
提示：<body>中的CSS属性，会被所有的子元素继承。
CSS优先级(权值)
（1）单个选择器的优先级
行内样式 > id选择器 > class选择器 > 标签选择器
（2）多个选择器的优先级
多个选择器的优先级，一般情况下，指向越准确，优先级越高。
特殊情况下，我们需要假设一些值：
标签选择器 优先级为1
类选择器 优先级为10
Id选择器 优先级为100
行内样式 优先级为1000
计算以下优先级：
.news h1{color:red;} 优先级：10 + 1 = 11
.title{color:blue;} 优先级：10
div.news h1{color:red;} 优先级：1 + 10 + 1 = 12
h1.title{color:blue;} 优先级：1 + 10 = 11
display属性
功能：规则网页元素如何显示的问题。
取值：none(隐藏)、block(以块元素显示)、inline(以行内元素显示)
block：可以实现将行内元素转成块元素。
inline：可以实现将块元素转成行内元素
overflow属性：当内容溢出时，该如何显示
overflow：当内容溢出时，溢出的内容该如何显示。取值：visible(可见)、hidden(隐藏)、scroll(出现滚动条)、auto(自动)
cursor光标类型
cursor：网页中光标的类型，取值：text(文本)help(帮助)、wait(等待)、pointer(手形)等
CSS定位
position：元素定位方式，取值static、fixed、relative、absolute
static：静态定位(默认状态、不定位)。
Fixed：固定定位。
Relative：相对定位。
Absolute：绝对定位。
定位方式，要与定位属性配合使用
定位坐标：指定定位的元素，偏移目标元素多远的距离。
left：定位元素，距离目标元素左边的距离。
top：定位元素，距离目标元素上边的距离。
right：定位元素，距离目标元素右边的距离。
bottom：定位元素，距离目标元素下边的距离。
1、固定定位，position:fixed
固定定位，是相对于浏览器窗口来进行的定位。
固定定位，不占空间，层级要高于普通元素。它不会随着网页的滚动而滚动。
如果不指定定位坐标的话，固定定位元素的位置在原地不动。
固定定位元素，一定是“块元素”，不管原来它是什么元素。
2、相对定位，position:relative;
相对定位，是相对于“原来的自己”进行定位。
相对定位，依然占空间，层级高于普通元素。
如果不指定定位坐标的话，相对定位元素的位置在原地不动。
相对定位，原来是行内元素，定位后还是行内元素；原来是块元素，定位后还是块元素。
3、绝对定位，position:absolute
相对于祖先定位元素(相对定位，绝对定位)，来进行的定位。
如果它的父元素没有进行任何定位的话，再往上找定位元素。
如果一直找到<body>都没有找到定位元素的话，那就相对于<body>来进行定位。
绝对定位元素，不占空间，层级要高于普通元素。
如果不指定定位坐标的话，绝对定位元素的位置在原地不动。
绝对定位元素，是一个“块元素”。
HTML引入CSS的方法
1、嵌入式
通过<style>标记，来引入CSS样式。
语法格式：<style type = “text/css”></style>
提示：<style>中的CSS样式，只能给当前网页来使用。
同一个网页中，<style>标记可以多次出现。
2、外联式
通过<link>标记，来入引一个外部的CSS文件(.css)，这样的话，可以实现公共的CSS代码被多个网页共享。
<link rel = “stylesheet” type = “text/css” href = “css/public.css” />
<link>标记的常用属性
rel：也就是引入的是什么类型的文件。取值：stylesheet
type：内容类型。
href：引入的CSS文件地址。
提示：<link>标记放在<head>标记中。
同一个网页，可以使用多个<link>来链入多个外部样式文件。
3、行内式(主要用于JS控制元素的样式)
每一个HTML标记，都有一些公共的属性：class、id、title、style。
HTML标记中的style属性的值，与CSS中样式一模一样。
提示：行内样式中，CSS代码不能写的过多；
行内样式中，多个CSS属性不能换行，也就是一行写完。
行内样式优先级是最高的，比ID选择器还要高。
CSS表格属性
border-collapse：表格边框线合并，取值：collapse。
- 盒子模型
我们可以把每一个HTML标记，都看成是一个“盒子”。
这个“盒子”有哪些特征：内容的高度或高度、边框线、内填充、外边距。
“盒子”的总宽度：内容的宽度 + 边框宽度*2 + 左填充*2 + 左外边距*2
上下外边距合并问题——这是一种现象
什么情况下？上下外边距会合并呢？
上下两个块元素，如果每一个元素都指定了四个外边距，那么上下相邻的那个外边距会发生合并的现象，合并后取其中较大的外边距。
如何要实现上下两个<div>之间的距离为100px，该如何实现呢？
1、 上下两个<div>其中一个只指定margin-bottom:100px，而另一个<div>的margin-top:0px，这样可以实现。
2、 可以在上下两个<div>中间，添加一个空的<div>，并给空<div>指定高度为100px，也可以实现。
- 全局CSS设置
1、清除所有的标记的内外边距
body,ul,li,a,img,p,input{ margin:0; padding:0; }
2、去除项目符号或编号前面的符号
ul,ol,li{ list-style:none; }
3、全局链接效果
a:link , a:visited{color:#444;text-decoration:none;}
a:hover{color:red;}
4、网页中所有的文字大小颜色
body{ font-size:12px; font-family:宋体; color:#ccc; }
5、去除图片的链接边框线
img{border:0;}
6、全局的类样式
.floatL{ float:left; }
.floatR{ float:right; }
.clear{clear:both;}
.blank10{ height:10px; clear:both; }
.red{ color:red; }
.blue{ color:blue; }
同一个class属性，可以指定多个类名样式，多个类样式之间用空格隔开。
- 常用的兼容性调试技巧
1、实现所有浏览器主页居中
Firefox下主页居中代码：.box{margin:0px auto}
IE5.5下主页居中代码：body{text-align:center;}
将以上两种代码，合在一齐书写：
body{
font-size:20px;
color:#333;
font-family:Arial;
text-align:center; /*ie5,6主页居中*/
background-color:#ccc url(../images/img.png) repeat-x;
}
.box{
width:1000px;
margin:0px auto;
text-align:left;
}
2、单行文本上下居中
h1{
height:30px;
line-height:30px;
}
3、在IE6下，左右margin会加倍，应该是IE6下的一个bug
提示：排版时，能使用padding解决的，坚决不用margin。如果实在想用的话，就使用其中一边。
解决的方案：使用 display:inline;
- CSS HACK
针对不同浏览器，书写不同的CSS代码的过程，称为“CSS HACK”。
也就是说：写一个CSS代码，让IE6识别，其它浏览器不识别。
下面，针对不同浏览器，有几个符号：
这些符号是在CSS属性的前面加的，用于分辨不同的浏览器版本。
“*”IE6和IE7都识别。如：.box{ *background-color:red; }
“_”只有IE6识别。如：.box{ _background-color:green;}
注意：CSSHACK不是W3C的标准，因此，我们尽量少用。如果你调试兼容性，调试不好时，可以偶尔用一下。
JavaScript部分
JavaScript是一种小型的、轻量级的、面向对象的、跨平台的客户端脚本语言。
JavaScript是嵌入到浏览器软件当中的去的，只要你的电脑有浏览器就可以执行JS程序了。
JavaScript是一种面向对象的程序语言。
在程序中，对象是由“属性”和“方法”构成。
在现实中，男女朋友就是一个“对象”。“东西”就是“对象”。一个“物体”就是“对象”。
“对象”有各种各样的特征(属性)，如：身高、体重、年龄、姓名、学历等。
“对象”有很多方法。“人”这个对象，可以干什么？或者“人的行为”。如：开飞机、打电脑、上网等。
注意：JS中的对象只要会用就可以了，不需要我们自己去开发对象。
跨平台：JS程序可以在多种平台下运行，如：windows、linux、mac、IOS等。
客户端脚本程序：JS只能在客户端的浏览器来运行，不能在服务器端来运行。
浏览器是一个翻译器，可以翻译三种代码：HTML代码、CSS代码、JavaScript代码。
JavaScript能干什么？
表单验证：是JS最基本的功能。
动态HTML：可以实现一些动态的、重复的效果。
交互式：人机交互，通过键盘或鼠标，与网页中的元素进行交互。
JavaScript名称的由来？
JavaScript最初叫“LiveScript”，是网景公司(Netscape)公司开发，为自己的浏览器Navigator2.0开的客户端语言。
想借助Java的名气很快成长起来，因此改名为JavaScript。
Java和JavaScript是两个公司的两个“东西”。
<script></script>标记
JS代码也是嵌入到HTML文档中去的。
同一个网页中，可以有HTML代码、CSS代码、JavaScript代码。
通过<script></script>来引入JS程序代码
常用的两个客户端输出方法
document.write(str)
描述：在网页的<body>标记，输出str的内容。
document意思“文档”，就是整个网页了。
document是一个文档对象，代表整个网页。
write()是document对象的一个输出方法。
“.”小数点：通过小数点(.)来调用对象的方法。
str：表示要输出的内容。
window.alert(str)
描述：在当前窗口中弹出一个警告对话框，str为对话框中显示的内容。
window代表当前浏览器窗口，window是一个窗口对象。
alert()方法：弹出一个对话框。
str：表示要输出的内容。
JS中的注释
HTML的注释：<!—注释内容-->
CSS注释：/* 注释 */
JavaScript的注释：// 或 /* 多行注释 */
- 变量
1、变量的概念
变量是变化的一个量。
变量可以看成是一个“未知数”。 x = 10
变量可以看成是一个“符号”“代号”。
变量可以看成是宾馆的“房间号”。
变量一般是指程序的数据。
变量是在内存中存在和运行的。
变量是临时存在的数据。我们可以把计算机内存看成是一个一个的“小格子”。每个“小格子”里可以存储一个变量的名称和变量的值。
2、变量的声明
变量的声明，就相当于预订宾馆的“房间”。
语法格式：var 变量名 = 变量值
声明变量是使用系统关键字var来进行的。
举例：
var name; //声明一个变量
var name,sex,edu; //同时声明多个变量，多个变量间用英文下的逗号隔开
var name = “张三”; //一边声明一边赋值
3、变量的命名规则
变量名可以包含字母、数字、下划线。
变量名不能以数字开头，可以以字母或下划线开头。如：var _name;(正确的) var 3abc;(错误的)
变量名不能是系统关键字。如：var、switch、for、try、case、else、while等。
JS中的变量名是区分大小写的。如：name和Name是两个变量
JS中变量的名称一定要有意义。
如果变量名由多个单词构成的话，该如何表示呢？
“驼峰式命名”：第一个单词全小写，后面的每一个单词首字母大写。如：var getUserName
“下划线式命名”：所有单词全小写，中间用下划线连接。如：var get_user_name
4、给变量赋值
给变量赋值，就是往“空间”中装东西。
使用赋值号“＝”来给变量赋值。
语法：var 变量名 = 变量值
举例：var name = “张三”;
“＝”的理解
将“=”右边的“运算结果”赋给左边的变量名。
应该是“=”右边先运算，再把运算的结果，赋给左边的变量。
“＝”左边只能是一个变量名，而不能是“运算表达式”。
变量的数据类型
变量是有数据类型的，这个类型来源于“变量的值”，换句话说：值是什么类型的，变量就是什么类型的。
JS中变量的类型有：数值型、字符型、布尔型、undefined、null、array、object、function
1、数值型：可以进行算术运算的(加、减、乘、除)
数值型包括：整型(整数)和浮点型(小数)。
2、字符型：用单引号或双引号引起来的一个字符串
注意：字符型变量不能进行算术运算，只能进行“连接”运算。
- JS中的运算符
运算时，只能进行同类型运算。如果类型不同，将进行类型转换。
1、算术运算符：+、-、*、/
var a = 10;
var b = a + 10; // b = a+10 = 10+10=20
注意：如果“+”左右两个操作数，都是数值的话，将执行“加法”运算。
（2）如果“+”左右有一个操作数是字符的话，那么，另一个值将转成字符串。这两个操作数进行的是“连接”运算。
2、赋值运算符：=、+=
赋值运算符，将“=”右边的运算结果，赋给左边的变量。
var a = 10+100;
“+=”先加后等
//声明变量，并且给变量赋值
var a = 10;
//变量a先加20，再将运算结果，赋给左边的变量
a += 20; // 展开后 a = a + 20 = 10+20=30
- JS程序的基本语法
JS是区分大小写的。如：Name和name是两个变量
JS中每一条语句，一般以英文下的分号(;)结束。这个分号不是必须的。为了向PHP兼容，最好加上分号。
运算符和变量，以及操作之间可以使用空格分开，这样的程序较容易阅读。
var a = 100 和 var a=100 是一样的
变量的类型——就是数据类型
变量的数据类型：数值型、字符型、布尔型、未定义型、空型、数组、对象、函数
变量的数据类型，分两大类：
基本数据类型：数值型、字符型、布尔型、未定义型、空型。很显著的特点：一个变量名只能存一个值。
举例：var a = 10;
复合数据类型：数组、对象、函数。显著的特点：一个变量名，可能存多个值。
举例：var arr = [10,20,30,40]
1、数值型：变量能进行数学运算的
数值型包括：整型、浮点型、NaN。
var a = 100;
var a = 0.9;
var a = 0;
数值型中还有一个很特殊的值NaN。NaN(not a number)不是一个数字。
当将其它数据类型，转成数值型，转不过去，但程序又不能报错，这时将返回一个NaN的值。
2、字符型：用单引号或双引号，引起来的一个字串。
var a = “我是一个字符串”;
var b = ‘我也是一个字符串’;
var c = “”;
单引号和双引号之间可以相互嵌套
单引号内只能嵌套双引号；
双引号内只能嵌套单引号。
3、布尔型
布尔型又称逻辑型。只有两个值：true(真)、false(假)。
布尔型只有两个状态。如：性别、婚否、灯的开关、是否列入黑名单等。
var a = true;
var b = false;
布尔型常用if条件判断语句中
4、未定义型
当一个变量定义，但未赋值时，将返回未定义型，未定义型的值只有一个undefined。
当一个对象的属性不存在，也返回未定义型。
5、空型
当一个对象不存在时，将返回空型，空型的值只有一个null。
也可以理解为：是一个对象的占位符。
如果你想清除一个变量的值的话，可以给赋一个null的值。
var a = 100;
var a = null ; //将一个null赋给一个变量，用于清除它的值
变量的数据类型转换
变量的类型转换，一般情况是JS自动转换的，但也有些时候需要手动转换。
1、其它类型转成布尔型
函数和方法的区别
Boolean(a) //函数是可以独立使用的
document.write(a) //方法不能独立使用，方法是必须要属于哪一个对象。
2、其它类型转成字符型
var a = “”;
//“+”左右只要有一个字符串，那么另一个一定得转成字符串，才能运算
var b = a + true; // b = a + true = “true”
3、其它类型转成数值型
- 全局函数(顶层函数)
二元运算符：运算符左右，应该有两个操作数。如：10 + 20
一元运算符：只有一个操作数。如：typeof a 或 typeof(a)
判断变量的数据类型：typeof()
使用一元运算符typeof()，可以测试一个变量的类型。
typeof()测试的结果是一个类型字符串。
typeof()的结果字符串有几种情况： “string” 、 “number” 、 “boolean” 、 “undefined” 、 “object” 、 “function”
另外：null、对象、数组这三种类型，都将返回 “object”。
从字符串中提取整数和浮点数函数
parseInt()系统函数、全局函数
功能：在一个字符串中，从左往右提取整型。如果遇到非整型的内容，则停止提取，并返回结果。
注意：如果第一个字符就是非整数，则立即停止，并返回NaN。
parseInt(“120px”) = 120
parseInt(“120.98”) = 120
parseInt(“a120px”) = NaN
parseFloat()系统函数、全局函数
功能：在一个字符串中，从左往右提取浮点型；遇到非浮点型内容，则停止提取，并返回结果。
注意：如果第一个字符是非浮点型，则立即停止，并返回NaN。
parseFloat(“120px”) = 120
parseFloat(“120.98”) = 120.98
parseFloat(“.98”) = 0.98
parseFloat(“a.98”) = NaN
JS运算符
要进行各种各样的运算，就要使用不同的运算符号。
1、算术运算符：+、-、*、/、%、++、--
A = 10 + 20;
A = 10 – 20;
A = 10 * 20;
A = 10 / 20;
（1）“%”取余运算符，两个数相除，取余数。
A = 10 % 3; // A = 1，如果余数不为0，则两个不能整除
A = 10 % 2; // A = 0，如果余数为0，则两个数能除尽
（2）“++”加1运算符、自加1
“++”可以作前缀(++i)，也可以作后缀(i++)。
如果不赋值的话，i++和++i的结果是一样的。
如果要赋值的话，i++和++i的结果就不一样了
（3）“--”减1运算符，自减1
“--”可以作前缀(--i)，也可以作后缀(i--)。
如果不赋值的话，i--和--i的结果是一样的。
如果要赋值的话，i++和++i的结果就不一样了
“--”的例了与“++”例子一样，自己进行测试。
2、赋值运算符：=、+=、-=、*=、/=
“+=”先加后等。如：a += 10 //展开后 a = a + 10
“-=”先减后等。如：a -= 10 //展开后 a = a - 10
“*=”先乘后等。如：a *= 10 //展开后 a = a * 10
“/=”先除后等。如：a /= 10 //展开后 a = a / 10
3、字符串运算符：+、+=
字符串只能进行“连接”运算，不能进行其它运算。
var a = “abc”;
var b = a + “def”; // 结果b = a + “def” = “abc” + “def” = “abcdef”
var a = “abc”;
a += 10; // 结果a = a + 10 = “abc” + 10 = “abc10”
4、比较运算符：>、<、>=、<=、==、!=、===、!==
比较运算符的运算结果是布尔值(true或false)。
A = 10 > 20; // 结果A=false
A = 20>=20; // 结果A=true
A = 10%2 == 0; // 结果A=true
A = 10%2 == “0”; // 结果A=true
A = 10%3 != 0; // 结果A=true
A = 10%2 === “0”; //结果A=false
“=”是赋值号。如：a = 10
“==”等于。只比较两个变量的值，而不管类型。只要值一样，就返回true，否则返回false。
“===”全等于。既比较变量，也判断类型。如果类型和值都一样，返回true，否则返回false。
5、逻辑运算符：&&、||、!
逻辑运算符的运算结果有两个true或false。
“&&”逻辑与(并且关系)。如果左右两个操作数都为true，则结果为true，否则，结果为false。
逻辑与，就是两个条件同时满足时，则结果为true。
6、三元运算符：?:
所谓“三元运算符”就是指三个操作数。
语法：条件表达式 ? 结果1 : 结果2
语法：操作数1 ? 操作数2 : 操作数3
含义：如果条件为true，则执行“结果1”的代码；如果条件为false，则执行“结果2”的代码。
其实：三元运算符，就是if else的变形形式。
- window.prompt()
功能：弹出一个输入框，让用户来输入内容。
语法：var year = window.prompt(text[,defaultText])
参数：
Text：提示信息。
defaultText：可选项，也就是可有可无。输入框中的默认内容。
返回值
如果单击“确定”按钮，返回一个字符串的数据。
如果单击“取消”按钮，返回一个null。
- if条件判断
1、语法结构——只判断true，不判断false
if(条件判断：结果只有两个true或false)
{
条件为true，将执行该代码；
}
说明：
if是系统关键字，必须全小写。
()小括号中，是条件判断语句，判断的结果只有两种可能true或false。
{}大括号中，是条件为true时，将执行的程序代码。
2、语法结构——既判断true，也判断false
if(条件判断：结果只有两个true或false)
{
条件为true，将执行该代码；
}else
{
条件为false，将执行该代码；
}
如果条件为true，则执行第一个大括号{}中的代码；
如果条件为false，则执行第二个大括号{}中的代码。
其中，if和else都是系统关键字。else表示“否则”的意思。
- 特殊运算符
new运算符：创建一个对象。如：var today = new Date(); //创建一个当前系统日期时间对象
delete运算符：删除数组的元素，或者对象的属性。
typeof运算符：一元运算符，主要功能：判断变量的类型的。如：typeof name 或 typeof(name)
点运算符(.)：主要应用在对象中，通过点运算符(.)去调用属性或方法。如：window.alert(“OK”)
[ ]中括号：主要用来访问数组元素的。如：arr[0] = 100; //找到下标为0的数组元素，并重新赋值
if条件判断语句：条件成立，执行什么代码；条件不成立，执行什么代码
结构一：只判断真(true)，条件为假，什么也不做
if(条件判断：判断结果是一个布尔值)
{
条件为真(true)，执行的代码
}
结构二：既判断真，也判断假
if(条件判断)
{
条件为真，执行的代码
}else
{
条件为假，执行的代码
}
结构三：多条件判断
if(条件1)
{
代码1；
}else if(条件2)
{
代码2;
}else if(条件3)
{
代码3;
}else
{
如果以上条件都不成立，则执行该代码；
}
注意：虽然有多个条件，但各条件之间是“或”的关系。每时每刻，只能有一个条件成立，不能同时满足多个条件。
switch分支语句
描述：根据一个变量的不同取值，来执行不同的代码。
语法结构：
switch(变量)
{
case 值1:
代码1;
break;
case 值2:
代码2;
break;
case 值3:
代码3;
break;
default:
如果以上条件都不满足，则执行该代码;
}
switch结构说明：
switch、case、break、default都是系统关键字，都必须全小写。
switch后的小括号()：小括号内一般是一个变量名，这个变量可能会有不同的取值。
每个case的值，与变量的值进行比对，如果一致就执行该case后的代码。
所有的case都是“或”的关系，每时每刻只有一个case会满足条件。
每个case中的代码执行完毕后，必须要用break语句结束，结束之后，程序将跳到switch结束大括号之后运行。
如果不写break语句的话，下面所有的case语句都会执行一遍。
if多条件判断和switch的区别
if中的条件一般是一个范围(a>100)，而switch中的条件一般是一个变量的不同取值。
while循环：只要条件成立，就重复不断的执行循环体代码
while(条件判断)
{
如果条件为true，则执行循环体代码
}
while循环结构说明：
在循环开始前，必须要对变量初始化(声明变量，给变量给个初始值)。
如果while的条件为true，则会重复不断的执行循环体中({ })的代码。如果条件为false，则退出循环。
在循环体中，必须要有“变量更新”的语句。换句话说：两次循环的变量的值不能一样，如果一样，会造成“死循环”。
for循环
for(变量初始化 ; 条件判断 ; 变量更新)
{
循环体代码；
}
break语句和continue语句
break语句
描述：break语句，用于无条件结束各种循环(退出循环)和switch。
说明：一般情况下，需要在break语句之前加一个条件判断。换句话说：就是条件成立了，就退出循环。
continue语句
描述：结束本次循环，而开始下一次循环。continue之后的代码不再执行了。
说明：一般情况下，需要在continue语句之前加一个条件判断。
- 数组
1、数组的概念
一组数的集合，称为“数组”。
var arr = [10,20,30,40,50];
var arr = [“张三” , “男” , 24, “大专” , “北京科技大学” , “0101-787656544” , “99887766” ];
2、数组元素
数组中的每个值，称为一个“数组元素”。
3、数组索引
数组中有多个值，每个值都有一个“编号”，通过“编号”可以访问到数组中的每个值。
数组中的“编号”又称“下标”或“索引号”。
数组中的“下标号”是从0开始的正整数。也就是说：第1个数组元素下标为0，第2个数组元素下标为1，第3个数组元素下标为2，依次类推。
第1个数组元素的下标一定是0，最后一个数组元素的下标是：长度－1。
使用数组的目的，就是使用循环遍历数组很方面。
4、数组元素的访问
var arr = [10,20,30,40,50];
var arr = [“张三” , “男” , 24, “大专” , “北京科技大学” , “0101-787656544” , “99887766” ];
访问的方法是：数组变量名，后跟一个中括号[]，[]中括号内是数组元素的下标。如：arr[3]
5、数组的长度:数组长度：就是指数组中元素的总个数。
数组的创建方法
1、使用new关键字和Array()来创建数组
var arr = new Array(); //创建一个空数组
var arr = new Array(“周更生” , “男” , 30); //创建一个数组，并初始化数组的元素
2、使用[]来创建
var arr = [1,2,3,4,5];
中括号[]中，使用英文下的逗号分隔多个值。
数组元素的值，可以是任何类型。如：字符型、数值型、布尔型、数组型、对象型、函数。
数组的操作
读取元素：读取已经存在下标的元素。如：var age = arr[2];
修改元素：修改已经存在下标的元素的值(重新赋值)。如：arr[2] = 26;
增加元素：添加一个不存在的下标的元素。
删除元素：使用关键字delete，只能删除元素的值，而下标还在。
数组对象属性length
一个数组，其实就是一个“数组对象”。把数组看成“对象”，是为了使用数组对象的属性或方法。
在JS中，所有的内容都是“对象”。
那么，length就是数组对象的一个属性。如：var len = arrObj.length;
length属性，可以动态获取数组的长度。
- 函数
1、函数的概念
函数，是将一段公共的代码进行封装，给它起个名字叫“函数”。
函数可以一次定义，多次调用。
函数，可以将常用的功能代码，进行封装。如：用户名的验证、验证码函数、邮箱验证、手机号码验证
2、函数的定义格式
function functionName([参数1][,参数2][,参数N]){
函数的功能代码;
[return 参数r]
}
函数定义格式的说明
function关键字是必须的，全小写。
functionName：函数的名称。函数名的命名规则与变量命名一样。
()：是定义函数时接收数据的参数。参数可有可无，多个参数之间用逗号隔开。
形参(形式参数)：定义函数时的参数就是“形参”。主要用来接收调用函数者传过来的数据。
形参的名称，与变量的命名规则一样。
但形参不能用“var”关键字定义。
参数只能存在于函数中。
参数不需要声明，直接使用。
实参(实际参数)：调用函数时的参数称为“实参”。实参就是真正的数据。
{}是函数的功能。
return语句，用于向函数调用者返回一个值，并立即结束函数的运行。
return用于中止函数的运行。
break用于中止各种循环。
3、函数的调用
函数定义是不会执行的，那么，函数必须调用，才会有效果。
函数的调用：直接写函数名后跟小括号()，如果有参数则写参数。小括号不能省略。
4、函数的参数
形参的个数，要与实参的个数一致；
形参的顺序，要与实参的顺序一致。
全局变量和局部变量
全局变量：可以在网页的任何地方(函数内部和函数外部)使用的变量，就是“全局变量”。
在函数外部定义的变量，就是“全局变量”。
“全局变量”既可以在函数外使用，也可以在函数内部使用。
“全局变量”在网页关闭时，自动消失(释放空间)。
局部变量：只能在函数内部使用的变量，称为“局部变量”。
“局部变量”在函数内部定义，在函数内部使用。
“局部变量”在函数外部无法访问。
“局部变量”在函数执完完毕就消失了。
在函数内部，省略关键字var定义的变量是“全局变量”。
注意：var关键字尽量别省略，省略后“全局变量”和“局部变量”会搞不清楚。
拷贝传值和引用传值
1、拷贝传值：基本数据类型都是“拷贝传值”。
拷贝传值，就是将一个变量的值“拷贝”一份，传给了另一个变量。
拷贝传值中，两个变量之间没有任何联系，修改其中一个变量的值，另一个不会改变。
这两个变量之间，是相互独立的，没有任何联系。
基本数据类型存在“快速内存”“栈内存”中的。因为，基本数据类型只有一个变量名和一个变量值。
2、引用传址：复合数据类型都是“引用传地址”
复合数据类型的存储分两步：
(1)将变量名和数据地址存在“快速内存”“栈内存”中。
(2)具体的数据存在“慢速内存”“堆内存”中。
引用传址：将一个变量的数据地址，“拷贝”一份，传给另了另一个变量。这两个变量，指向“同一个地址”。
大家共享同一份数据。
如果其中一个变量的值发生了改变，那么，另一个变量的值也得变。要变一起变。
因此，这两个变量是有联系的，要变大家一起变。
匿名函数：没有名字的函数。
匿名函数，不能单独定义的，也不能单独调用。
匿名函数，一般是作为数据给其它变量赋值的。可以给普通变量、数组元素、对象的属性赋值。
二维数组
给一个数组元素，赋一个数组的值，那么，这个数组就是“二维数组”。
二维数组，就得用两层循环来实现。也就是说循环套循环。
二维数组的循环，与二维表格的循环一模一样。
二维数组的访问：数组名后跟多个连续的中括号[]，第1个中括号[]代表第一维数组，第2个中括号[]代表第二维数组。
- 对象
1、对象的概念
人就是一个“对象”，人的特征：身高、体重、姓名、性别、年龄。每个人可以有不同的本身(方法)：打电脑、炒股、开汽车等。
对象是由“属性”和“方法”构成。
2、JS中对象分类
自定义对象
1、使用new关键字结合构造函数Object()来创建一个空的对象
2、使用大括号{}来创建一个对象
var obj = new Object();
obj.name = "hahaha";
obj.age = 22;
obj.show = function(){
var str = "name:" + obj.name + " age:" + obj.age;
return str;
}
document.write(obj.show());
var obj = {
name:"hahaha",
age:11,
show:function(){
var str = "name:" + obj.name + " age:" + obj.age;
return str;
}
};
- JS内置对象
String对象：字符串对象，提供了对字符串进行操作的属性和方法。
Array对象：数组对象，提供了数组操作方面的属性和方法。
Date对象：日期时间对象，可以获取系统的日期时间信息。
Boolean对象：布尔对象，一个布尔变量就是一个布尔对象。(没有可用的属性和方法)
Number对象：数值对象。一个数值变量就是一个数值对象。
Math对象：数学对象，提供了数学运算方面的属性和方法。
String对象的属性和方法
length：获取字符串的长度。如：var len = strObj.length
toLowerCase()：将字符串中的字母转成全小写。如：strObj.toLowerCase()
toUpperCase()：将字符串中的字母转成全大写。如：strObj.toUpperCase()
charAt(index)
功能：返回指定下标位置的一个字符。如果没有找到，则返回空字符串。
语法：strObj.charAt(index)
参数：index是指定的一个索引号，根据index索引号来返回一个字符。
indexOf()
功能：返回一个子字符串在原始字符串中的索引值(查找顺序从左往右查找)。如果没有找到，则返回-1。
语法：strObj.indexOf(substr)
参数：substr代表要查找的一个子字符串。
lastIndexOf()
功能：在原始字符串，从右往左查找某个子字符串。如果没找到，返回-1。
语法：strObj.lastIndexOf(substr)
参数：substr代表要查找的子字符串。
substr()
功能：在原始字符串，返回一个子字符串。
语法：strObj.substr(startIndex [ , length])
说明：从下标startIndex起，返回length个字符。
参数：
startIndex表示查找的起始索引号；
length可选，返回几个字符。如果省略，一直返回到结尾。
substring()
功能：在原始字符串，返回一个子字符串。
语法：strObj.substring(startIndex [ , endIndex])
说明：返回从startIndex开始索引值到endIndex结束索引值之间的所有字符。
参数：
startIndex：代表开始索引值。
endIndex：可选项，代表结束索引值。如果省略，一般返回到结尾的所有的字符。
提示：如果省略第二个参数，那么substr()和substring()结果一样。
注意：substring()返回的字符包含startIndex处的字符，不包含endIndex处的字符。
举例：
“abcdefgh”.substring(0,5) = “abcde”
“abcdefgh”.substr(0,5) = “abcde”
“abcdefgh”.substring(2,3) = “c”
“abcdefgh”.substr(2,3) = “cde”
split()：将一个字符串转成数组
功能：将一个字符串切割成若干段。返回一个数组。
语法：strObj.split(分割号)
参数：参数是一个分割号的字符串。用指定的分割号将字符串切成若干段。
举例： “a,b,c,d”.split(“,”) = arr[“a” , “b” , “c” , “d”]
Array对象：一个数组变量，就是一个数组对象
length属性：动态获取数组长度。如：var len = arrObj.length
join()
功能：将一个数组转成字符串。返回一个字符串。
语法：arrObj.join(连接号)
说明：将一个数组，用指定的“连接号”连接成一个字符串。
reverse()
功能：将数组中各元素颠倒顺序。
语法：arrObj.reverse()
参数：无
数组元素的删除和添加
delete运算符，只能删除数组元素的值，而所占空间还在，总长度没变(arr.length)。
以前数组元素的添加，只能向后添加，不能向前添加。
shift()：删除数组中第一个元素，返回删除的那个值，并将长度减1。
pop()：删除数组中最后一个元素，返回删除的那个值，并将长度减1。
unshift()：往数组前面添加一个或多个数组元素，长度要改变。arrObj.unshift(“a” , “b” , “c”)
push()：往数组结尾添加一个或多个数组元素，长度要改变。arrObj.push(“a” , “b” , “c”)
- Date对象
Date对象和String对象不太一样，定义了一字符串，其实就是一个String对象，就可以直接调用属性和方法。
Date对象的使用，必须使用new关键字来创建，否则，无法调用Date对象的属性和方法。
创建Date对象的方法
（1）创建当前(现在)日期对象的实例，不带任何参数
var today = new Date();
（2）创建指定时间戳的日期对象实例，参数是时间戳。
时间戳：是指某一个时间距离1970年1月1日0时0分0秒，过去了多少毫秒值(1秒=1000毫秒)。
var timer = new Date(10000); //时间是 1970年1月1日0时0分10秒
（3）指定一个字符串的日期时间信息，参数是一个日期时间字符串
var timer = new Date(“2015/5/25 10:00:00”);
（4）指定多个数值参数
var timer = new Date(2015+100,4,25,10,20,0); //顺序为：年、月、日、时、分、秒，年、月、日是必须的。
getFullYear()：获取四位的年份。
getMonth()：获取月份，取值0-11。
getDate()：获取几号，取值1-31
getHours()：获取小时数。
getMinutes()：分钟数
getSeconds()：秒数
getMilliseconds()毫秒
getDay()星期
getTime()毫秒值，距离1970年1月1日至今的毫秒值
- Math数学对象
Math对象是一个静态对象，换句话说：在使用Math对象，不需要创建实例。
Math.PI：圆周率。
Math.abs()：绝对值。如：Math.abs(-9) = 9
Math.ceil()：向上取整(整数加1，小数去掉)。如：Math.ceil(10.2) = 11
Math.floor()：向下取整(直接去掉小数)。如：Math.floor(9.888) = 9
Math.round()：四舍五入。如：Math.round(4.5) = 5; Math.round(4.1) = 4
Math.pow(x,y)：求x的y次方。如：Math.pow(2,3) = 8
Math.sqrt()：求平方根。如：Math.sqrt(121) = 11
Math.random()：返回一个0到1之间的随机小数。如：Math.random() = 0.12204467732259783
- Number数值对象
一个数值变量，就是一个数值对象(Number对象)。
toFixed()
功能：将一个数值转成字符串，并进行四舍五入，保留指定位数的小数。
语法：numObj.toFixed(n)
参数：n就是要保留的小数位数。
举例：
var a = 123.9878;
a = a.toFixed(2); // a = “123.99”
网友评论