JavaScript

Js数据类型

• 数值类型（Number）：1，1.1
• 字符串类型（string）：“zs”,‘ww’,‘5’，" "，’ '
• 布尔类型（boolean） ：true,false
• 对象类型（Object ）：new
• 未定义类型（undefined ）：声明未赋值

检测数据类型：typeof，不能检测函数呦

var num=1;         
var bool=true;         
console.log(typeof num); //Num    
console.log(typeof bool);  //Boolean  
 </script> 

运算符（也叫操作符）

一元运算符：++，–
二元运算符：=、+、-
三元运算符：a>b ? true:false ⇔ if-else
算数运算符：+，-，，/，%，=
复合运算符：+=，-=，= ，/= ，%=
关系运算符(比较运算符)：<，<=，= =，= = = ，!= ，!==
逻辑运算符：&&，||，!，&，|

&与&&区别

a&b Vs a&&b （a，b都为boolean类型），
&：a不论为true或false，b都执行
&&(短路与)：a为false，b不执行

| Vs ||

a|b Vs a||b
|：a不论为true或false，b都执行
||(短路或)：a为true，b不执行

= = = Vs = =

= = = ：引用型比较，比较数值与数值类型，内存地址比较
= = ：数值型比较
引用数据类型：Object
基本数据类型：number,string,boolean,undefined

基本语法

while Vs do-While

因为代码是自上而下执行，So while与do-while区别在于do-while至少执行一次，
代码如下：

<script>
	var i = 0;
	        var sum = 0;
	        do{
	            sum += i;
	            i++;
	        }while (i<=100);
	        console.log(sum);//1
	        
	        var j = 0;
	        var sum = 0;
	        while(j<=100){
	            sum += j;
	            j++;
	        }
	        console.log(sum);//0
 </script>

关键字：continue，break，return

continue：结束本次循环，直接进入下一次循环
break：立即跳出当前最近的循环，
return：从被调函数返回主调函数继续执行，由return后面的参数指定返回值

其他语句

if-else
switch-case
for循环

数组

创建数组的3种方式

//创建数组对于元素的类型没有限制
var arr1 = [1,"z",undefined,true,null];  //第一种
var arr2 = new Array(1,"z",undefined,true,null);  //第二种
var arr3 = new Array(10);  //第三种
arr3[0]=1
arr3[1]="Hello"

函数

一些常用函数

alert();   //弹出一个对话框的方法。
console.log();  //在浏览器的控制台打印内容的方法。
document.write();   //向浏览器页面输出内容的。
                   //docuemnt.write 在网页中输出文本，标签时，浏览器会解析成具体的效果，
                   //文本输出是原样输出。
prompt();  //浏览器输入对话框。

作用域：变量的作用范围

全局作用域：在script标签中，所有的全局作用域下的变量和方法都是window的属性和方法。
局部作用域：在函数中定义的变量，作用范围只在函数中。

创建对象

//第一种方法：调用函数new Object()来创建对象
var person = new Object();
person.age = 11;
person.dance = function () {
            console.log("跳广场舞");
}

//第二种方式：工厂模式，通过定义函数创建，传参数
 function person(height,eatName) {
	var person = new Object();
	 person.height = height;
	 person.eat = function () {
	     console.log(eatName);
	 }
	 return person;
 }
var person =createPerson(177,'羊肉串');
/*
构造函数（首字母大写）：
1.在堆内存中开辟一块空间，每个对象都有一个独立的空间
2.this指向当前的空间，this指的是具体实例化对象。
3.用this.的方式进行属性和方法的添加设置。
4.无需return返回对象。
**/
  function Person(name,age,sex) {
	this.name = name;
	this.age = age;
	this.sex = sex;
}
 var jx= new Person('jx',20,'男');
 
//第三种，Json
var zs = {name:'zs',age:18,country:'zhongguo',run:function () {
	console.log('奔跑');
	}
};

常用的对象方法（Date、Math、String）

var date = new Date();//不加描述

//Math常用方法
Math.PI(); 	//圆周率
Math.abs(-5));	//求绝对值
Math.ceil();	//向上取整 
Math.floor();	//向下取整
Math.round();	//四舍五入
Math.max(a, b, c,d);	//取最大值
Math.min(a, b, c, d,);	//取最小值
Math.pow(a, b);	//a的b次幂
Math.random();	//随机数[0-1)

//String常用方法
String.slice(a,b);  //a是字符串开始的位置，b是结束的位置，a、b可为负数
String.substr(a,b);  //a是字符串开始的位置，b是切的个数
String.substring(a,b);	//a是字符串开始的位置，b是结束的位置
String.split("x");	//以x切割
String.toLocalLowerCase();	//大写字母转化为小写字母
String.toLocaleUpperCase();	//小写字母转化为大写字母
String.trim();	//清空两边空格

DOM(文档对象模型)。

用于HTML和XML文档的应用程序编程接口、定义文档的逻辑结构、访问和操作文档的方式

操作DOM三种方式

事件三要素：
1.事件源：被触发的事务（开关）（元素）
2.事件类型 用户的操作行为
3.执行当前事件的命令：被触发后的操作（代码），叫做事件的处理函数。

//行内式
 <button onclick="alert('Hello')">按钮</button>

//第二种方式：行内式，函数定义外面
 <button onclick="fn('hello')">按钮</button>
 
//第三种：外置函数式
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn");
but.onclick=function(){
	alert("Hello,world");
}
</script>

事件的执行过程

var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
	liList[i].onclick = function(){
    	alert(i) // 执行结果： 6
	}
}

//立即执行函数（函数的自调用）
<script>
	var liList = ul.getElementsByTagName('li')
	for(var i=0; i<6; i++){
		!function(j){
    		liList[j].onclick = function(){
    			alert(j) // 执行结果：0、1、2、3、4、5
	  		}
		 }(i)
	}
</script>

js中的一些方法

//setAttribute()与getAttribute()：给元素添加指定的属性，并为其赋指定的值
//注：把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
element.setAttribute(attributename,attributevalue);
element.getAttribute(attributename);

//innerHTML 会将文本中的标签解析成html标签，innerText 不会解析文本中的标签
element.innerHTML="value";
element.innerText="value";