一、简单了解和基础知识
1.js引入方式
第一种：直接在body标签下面引入js文件或者直接在下面写js代码；
第二种：直接在body标签里面引入js文件或者直接在里面写js代码；
第三种：直接在head标签里面引入js文件或者直接在里面写js代码；但是因为代码的执行顺序是从上到下的，避免js代码最先被执行，所以要在script标签里面加上window.onload=function(){},在这个里面写入代码。
2.js注释
单行注释的双斜杠//
多行注释/****/
注释的作用：节约交流和阅读成本
3.用于代码调试
console.log()和alert()都可以用于调试代码，但是alert会阻断线程的执行，所以不经常使用。
document.write()如果文档输出写在当前页面加载完毕之后，那么当前页面会被关闭，会新开一个页面输出信息。
4.js变量的命名规范
什么是变量？什么是常量（直接量）？
程序运行期间可以发生改变的量就是变量。
自始至终在程序的运行过程中不能改变的量就是常量。常量放在常量区，常量区的值有且只有一份，所以不能改变。
变量的命名规范：
①以数字、字母、下划线、$符组成，并且数字不能开头。
②不能以关键字或者保留字命名。
③见名知义，驼峰命名法。
④区分大小写。
⑤区别于c语言，变量名可以重复命名，但是后面的会覆盖前面的。
声明一个变量为空，有空间没有值 var num=null;
声明一个未定义的变量，没有值没有空间 var num1；
5.js数据类型
number string object undefined boolean
类型转换有两种：显式类型转换（强类型转换） 隐式类型转换（弱类型转换）
显式类型转换（强类型转换）的例子：
String()可以将一个数值转换为字符串
var a=123;
console.log(String(a),typeof String(a));//123,string
Number()可以将字符串转换为数值类型，要么字符串全是数字，要么字符串数字加一个小数点，小数点只能有一个，如果有多个，转换后的结果是NaN，但是还是number类型。如果字符串里面包含了字母，并不是全数字，那么转换后的就不是数字，而是NaN，但是还是number类型。
var str="123";
console.log(Number(str),typeofNumber(str));//123,number
var str1="123abc";//有字母转换不了
console.log(Number(str1),typeofNumber(str1));//NaN,number
parseInt将字符串转换成整型数字。必须满足第一个字符为数字，将从第一个字符取到第一个不是数字的字符为止。
var str3="12.3abc";
console.log(parseInt(str3));
与parseInt对应的是parseFloat取得浮点型
隐式类型转换（弱类型转换）的例子：
运算符重载：+号会根据式子两边式子的类型采取行为，如果两边是数值，相加，如果两边是字符串，拼接，如果一边是数值一边是字符串也是拼接。
取正操作：将数字字符串，转换成数值，必须保证全部为数字字符，否则将不起作用
var num2="12";
console.log(typeof +num2);
纯数字的字符串减0，也可以得到数字
var a="12";
console.log(typeof a-0);
隐式类型转换，先转换再运算：
var a="12";
var b="10";
alert(a-b); //7
var a=5,b="5";
alert(a==b);//true
alert(a===b);//false === 就是不转换类型，直接比较
6.js运算符
js是弱类型语言，只有数值类型，没有分浮点型和整型之分。
算术运算符 +，—，*，/,%,++,--
复合运算符 +=，-=，/=,*=,%=
关系运算符 > < <= >= === == != !== !=和==对立，!==和===对立
逻辑运算符 逻辑与&& 逻辑或 || 逻辑非 !取反
三目运算符，也叫条件运算符：var a=表达式1？表达式2：表达式3；
如果表达式1结果为真，a结果为表达式2的值，如果表达式1结果为假，a结果为表达式3的值。相当于if else语句
逻辑与 && 链接的表达式。如果前面的表达式为真，整体的值，与最后一个表达式有密切的关系。如果最后一个表达式有算术表达式链接，就是一个具体的数值。如果最后一个表达式由关系运算符链接，就是true或者false。如果最后一个表达式是0，就是0。一假则假,前面为假，后面就不走了。
逻辑或 同假为假 一真即真
只要是用关系运算符链接的表达式，返回的值类型都是boolean值
==只需要满足值相等就为真，不判断类型，还有一种理解就是，== 先转换类型，然后比较
var istrue=(3=="3");//true
var istrue=(3!="3");//false
===数值和类型都相等才为真，不仅数值要相等，类型也要相同，=== 不转换类型，直接比较
var istrue=(3==="3");//false
var istrue=(3!=="3");//true
num++, num+=1, num=num+1
++在前先++再赋值，++在后先赋值再++
先赋值再运算（i++就是i=i+1）
var b1=11;
b2=b1++;//先把b1的值赋给b2，b1在加1
console.log("b2的值是"+b2,"b1的值是"+b1)//11 12
var c1=11;
c2=++c1;//c1先加1，再赋值给c2+
console.log("c2的值是"+c2,"c1的值是"+c1)//12 12
赋值运算符“=”,将等号右边的值 赋值 给左边
多个打印内容区分时，以逗号隔开
可以单独打印变量或者常量的值，逗号隔开
可以打印格式化字符串，中间使用占位符%d %f %s ,带占位符的打印，带占位符的要放在第一个
7.js元素获取
1.通过ID名称获取，因为ID名不能重复，所以获取的元素唯一
var div=document.getElementById("myDiv");
2.通过标签名称获取元素，得到的是一个数组（就算只有一个值，也是一个数组）。如果想要将数组中的其中某一个取出来，必须需要用到数组下标。数组下标从0 开始，最大是数组长度减一。
var first=document.getElementsByTagName("div")[0];
3.通过行间属性name获取元素，得到的也是一个数组
var secondbtn=document.getElementsByName("btn")[1];
4.通过标签的类名获取元素。获取到得也是一个数组
var p=document.getElementsByClassName("text")[1];
5.通过元素的css选择器获取元素，选择器的名称一定要写全，并且css选择器名称都可以写在里面，如果获取到多个元素，只会选取第一个。
var myDiv=document.querySelector("#myDiv");
6.通过元素的css选择器名称获取元素,但是获取的是一个数组，使用的时候需要加下标
var myDiv3=document.querySelectorAll(".test")[0];
8.通过js给元素加类名
给元素加类名后，类名相当于重新赋值，所以会覆盖原来的类名，要想原来的类名也起作用，就要把原来的类名也写上。多个类名中间用空格隔开
myDiv.className="test text";
使用animate.css，就是采用添加类名的方法
在head里面引入文件
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
在script里面加类名
var div=document.getElementsByTagName("div")[0];
div.onmouseover=function(){
this.className="animated shake"
//this.style.animation="shake 2s";
}
div.onmouseout=function(){
//this.style.animation="bounce 2s";
this.className="animated bounce";
}
9.事件绑定
1.点击事件
div.onclick=function(){
alert("hahaha!");
}
2.鼠标移入事件
div.onmouseover=function(){
//this永远指向所在函数的所有者，如果没有所有者时指向window
this.style.width="800px";
}
3.鼠标移除事件
div.onmouseout=function(){
this.style.height="400px";
}
4.window.onload事件，load事件: 当页面完全加载后再window上面触发.一般用于head中的script代码段.保证在执行js代码之前, 页面已经完全加载完毕.如果没有在页面加载完毕，将获取不到元素。
UI事件指的是那些不一定与用户操作有关的事件.
二、js分支结构
1.布尔类型
布尔类型，代表非真即假的一种数据类型。它的值只有两个，true真或false假。非0即为真。0是假的，字符串“0”是真的。空为假，null是假
布尔类型的命名规则：
习惯以is，has，can开头 例如：isTrue isBoy isHight isLoading hasMoney hasBoyFriend canFly canEat
2.js分支语句
分支语句其实有两种，if语句，switch语句
if语句有三种形式：
第一种：if(条件表达式){语句}，当条件表达式为真时执行语句，否则什么都不执行
第二种：if(条件表达式){语句一}else{语句二}，当条件表达式为真时执行语句一，否则为假执行语句二
第三种：if语句集联式，if(条件表达式1){语句一}else if(条件表达式2){语句二}else{语句三}。当条件表达式1为真执行语句一，当条件表达式1为假，并且条件表达式2为真，执行语句二，否则执行语句三
如果是比较字符串之间的大小，就先从第一位开始比较，第一位最大的就是最大的
所以如果获取的值是字符串，要转换成数字
使用switch通常用来解决多分支，并且多分支的情况是值是确定的。case 里面的值是具体的。
var num=10;
switch(num){
case 10:
alert(num);
//break;
case 0://如果第一个满足条件，没有break，就会接着执行第二个，
//并且不需要进行判断，只到找到break再终止
alert("哈哈哈");
break;
default:
alert("呵呵呵");
break;
}
var n=8;
switch(n){
case8:
case9:
case10:
case11:
alert(num);
break;
default:
alert("呵呵呵");
break;
}
三、js循环结构
什么是循环？当满足特定时，反复执行同一段代码就是循环。
for循环 while循环 do..while循环
循环必不可少的四部分：
1.循环变量初始化；2.循环条件；3.循环增量；4.循环执行的语句
1.while循环
while（条件表达式）{循环语句} 当条件满足表达式的时候，反复执行语句，直到条件表达式为假跳出循环
var a=1;
while(a<101){
if((7!=a%10)&&(0!=a%7)&&(7!=parseInt(a/10))) {
console.log(a);
}
a++;
}
2.do..while..循环
do{循环语句}while（条件表达式）
先执行语句，再判断是否满足循环条件，如果满足继续循环，否则跳出循环
var num=1;
do{
if(num%7==0) {
console.log(num);
}
num++;
}while(num<101);
while循环与do..while..循环的区别在于，while循环先判断再执行，可能出现一次都不执行的情况，do..while..循环先执行再判断，至少会执行一次
3.for循环
for (循环变量初始化；循环条件；循环增量) {循环语句}
通过判断循环条件是否成立，决定是否执行循环语句。
for循环的执行次数为：不满足条件的第一个值减去满足条件的第一个值除以循环增量
for(var i=1;i<101;i++) {
if(i%7==0) {
console.log(i);
}
}
for循环与数组的联合使用非常方便。
数组有容量，数组还有下标，这两个一个作为循环条件，一个作为循环变量
for循环用于知道循环次数的情况
while循环用于只知道循环条件的情况，未知循环次数的情况
do...while循环不常用
4.js循环控制
continue跳出本次循环，循环继续
break结束本层循环，循环终止
var sum=0;
for(var i=1; i<101; i++) {
if(i%2==0) {
continue;
}
sum+=i;
}
console.log(sum);
for(var i=1; i<101; i++) {
console.log(i);
if(i%13==0) {
break;
}
}
网友评论