js、css基础总结

变量的申明 在 JavaScript 在中间，声明变量是关键字 var 开头，空一格后再接变量的名字；当然，可以一次申明多个变量。

var myvar1;     //申报变量"myvar1"  var myvar2,myvar3,myvar4;     ///一次申报三个变量  

注：经过多次赋值后，变量值为最后一次赋值

全局变量 在函数外部申明的变量称为全局变量，全局变量的作用自申明的地方起，到整个 JavaScript 文件的末尾(包括所有函数的内部)

var wholeVar = 12;     ///申报并初始化全局变量  function() { 
               var localVar = 1;     //局部变量      console.log(wholeVar localVar); //输出13  }   console.log(wholeVar);     //输出12  

局部变量

局部变量是指表示在函数内部的变量，其作用域在函数内，不能在函数外使用。 若局部变量与全局变量名称相同，则函数内的全局变量将被局部变量覆盖。

var myVar = 1;     ///全局变量  function scope() { 
               var myVar = 2;     ///局部变量覆盖上述值      console.log(myVar);     //输出2  }   

申明提前

var wholeVar = 1;     ///全局变量  function myTest() { 
               console.log(wholeVar);       var wholeVar = 2;       console.log(wholeVar);   }   

关于第三行的输出，你的第一反应一定是1。正确答案是 undefined。这是因为在函数中，无论变量在哪里声明，都应该被视为第一个声明（赋值不会被视为第一个赋值，这就是为什么不输出2），这是提前声明，因此上述代码等于：

var wholeVar = 1;  
function myTest() { 
          
    var wholeVar;     //申明提前了，覆盖了全局变量 
    console.log(wholeVar);     //上面只申明，没赋值 
    wholeVar = 2;  
    console.log(wholeVar);  
}  

JavaScript 的数据类型有数字、字符串、布尔型、对象类型、数组、null 和 undefined。

JavaScript 中的数字类型指整数和浮点数，不刻意区分二者。

JavaScript 还支持16进制的整数，在所要表示的16进制数前面加上 0x 或者 0X 即可，如 0x1f 表示整数31。

对于较大或较小的数，JavaScript 还支持科学记数法，如 2e3 表示2000。

var number1 = 0X11;     //17 
var number2 = 2.01e-2;     //2.01*0.01 
var number3 = Math.sqrt(9);     //计算9的平方根 

使用parseInt() 方法，参数为字符串，结果为该字符串转换而来的整数； 转化规则是：如果字符串的首字符不是一个数字，转换失败，返回 NaN；否则，转换到字符串中第一个不是数字的字符止，即，遇到字母、小数点下划线等字符立即停止转换。需要注意的是，16 进制的符号 0x 不会让转换停止。 parseInt() 还可以有第二个参数，表示待转换字符串的进制。下面给一些例子：

parseInt("12");  
parseInt("12.2");  
parseInt("C",16);  
parseInt("12a2");  
parseInt("0XC");     //以上均返回数字12 
parseInt("a12");     //失败 

Number() 进行强制类型转换；

使用 Number() 转换一个字符串，这个字符串必须是只含有数字的字符串，即数字的字符串形式。与上面的 parseInt() 方法对比可知，Number() 实现的是更加严格的字符串转换为数字操作。因为对于 12a3 这种含有字母等非数字字符的字符串，Number() 会报错。下面是一些例子。

Number("12");     //返回12 
Number("12a2");   //返回NaN 
Number("");       //返回0 

与整数相同，字符串转小数也有两种方式：parseFloat() 和 Number()

toString() 实现一般的数字转字符串，String() 则是强制类型转换。

toString() 括号内有一个可选的参数，指以几进制的形式转换该字符串，如数字12调用 toString(16) 得到的结果就是 C，即12的16进制表示方式。

String() 可以转换 null 和 undefined，而 toString() 不可以。

var myNum = 15;  
console.log(myNum.toString());       //输出"15" 
console.log(myNum.toString(16));     //输出"F" 
console.log(String(myNum));          //输出"15" 

布尔型的值只有两个 true 和 false 。转换规则如下：

• 布尔型转为字符串直接就是字符串 true 或者 false；

• 布尔型中的 true 转换为数字 1，布尔型中的 false 转换为数字 0;

• 数字 0、null、undefined、空字符串转换为布尔型的 false，其他所有都是转换为 true

var myBool = ture;  
myBool.toString();     //返回"true" 
Number(true);          //返回1 
Boolean("js");         //返回true 
Boolean("");           //返回false 

注意，上面讲的空字符串是""，而不是空格字符串" "，这两个不同，后者双引号之间有一个英文字符的大小的空位，他们转为布尔型的结果不同：

Boolean("");      //返回false 
Boolean(" ");     //返回true 

JavaScript 是一种弱类型语言，不同类型的变量在运算符的作用下会发生类型转换。这个是编译环境下直接进行的，所以叫隐式类型转换。下面是一些转换规则：

• +运算的两个操作数是数字和字符串，数字会被转换为字符串；
• +运算的两个操作数是数字和布尔型，布尔型会被转换为数字；
• +运算的两个操作数是字符串和布尔型，布尔型会被转换为字符串；
• 减、乘、除、取余运算会把其他类型转换为数字；
• if 括号中单独的一个变量会被转换为布尔型。

JavaScript中的算术运算符除了数学中常见的加减乘除外，还有递增、递减和取余等

JavaScript中的加号除了具有数学中将两个数字相加的作用外，还能对字符串做连接操作。

对两个数字相加和数学中一样，字符串相加就是拼接字符串的意思，比如Java+Script的结果是字符串JavaScript。

当字符串和数字相加时需要进行类型转换，数字会先转为字符串，然后再做字符串的拼接。

var resultNumber = 1+1;//结果是2 
var resultString1 = "1"+"1";//结果是“11” 
var resultString2 = 1+"2";//结果是“12” 

减法、乘法、除法以及取余运算符只能用于数字之间的计算，不能做字符串操作。

-和数学中减号用法相同；

*和数学中乘号用法相同；

/表示除以，结果是浮点数，不做四舍五入；

%表示取余数，a%b返回a除以b得到的余数，结果与a的符号相同。

var floatNumber = 3/2;//结果是1.5 
var intNumber1 = 3%2;//结果是1 
var intNumber2 = -3%2; //结果是-1 

递增运算符++表示对一个数做加1的操作，递减运算符--表示对一个数做减1的操作。

++符号在数字的左边还是右边会影响运算的顺序，当++在数的左边时，表示先对数加1，再返回加1后的结果。在右边时，表示先返回该数的值，再加1。下面的例子展示了这种区别。

递减运算符--同理。

递增只对数字有效，不做字符串的拼接。

var i = 1,j = 0;  
j = i++;//j为1,i为2 
var m = 1,n = 0;  
n = ++m;//n为2,m为2 

JavaScript中的比较运算符有==,===,>,<,!=,>=等。

• ==叫做相等，===叫做严格相等。双等号和三等号的区别是：三等号要求数据类型和值都相等，双等号只需要值相等即可，相等包含严格相等。

从比较过程来看，严格相等先比较两个对象的数据类型是否相等，不相等则结束比较，返回false，相等在数据类型不同时，尝试进行数据类型转换，例如，在字符串和数字的比较中，字符串会被转为数字再比较；布尔值true转为数字1，布尔值false转为数字0。

如果数据类型相同，相等和严格相等都会直接比较值，值相等返回true。

需要特别注意的是，以上仅仅适用于非对象类型。对于对象类型，相等或者严格相等比较的都是对象的引用，而不是具体的值，就是说，一个对象和其他任何对象都是不相等的，即使两者属性、值都相等。下面给出一些例子：

var stringVariable = "2";  
var number1 = 2;  
var number2 = 2;  
console.log(stringVariable == number1);//true 
console.log(stringVariable === number1);//false 
console.log(number1 === number2);//true 
var studentA = { 
          
name:"Bob",  
age:22  
}  
var studentB = { 
          
name:"Bob",  
age:22  
}  
console.log(studentA == studentB);//false，因为不是同一个对象 
var studentC = studentA;  
console.log(studentA == studentC);//true，因为是同一个对象 

将studentA赋值给studentC，这时studentC和studentA指向内存中的同一个地址块，视为同一个对象，所以两者相等。

• 不等 对应于上面的等号，不等号也有两种：!=和!==。 !=和==互为相反，==成立，!=一定不成立。 !==和===互为相反，严格相等成立，则严格不相等不成立。

• 其它 大于，小于，大于等于，小于等于的比较规则如下： 比较的两个对象都是数字，按照数学中数字的比较方法。 数字和字符串比较，字符串转为数字后再比较。 字符串和字符串比较，从第一个字符开始，逐个比较，发现不相等立即返回。字符按照ASCII编码值的大小比较，一般只要记住：数字<大写字母<小写字母，字母a小于字母z，A小于Z， 比较过程中，当一个字符串结束另外一个字符串还有，还没有比较出大小，则长的字符串较大。

var number1 = 1;//定义变量number1 
var number2 = 2;//定义变量number2 
var string1 = "3";//string1 
var lowerLetter = "a";//定义变量lowerLetter 
var upperLetter = "A";//定义变量upperLetter 
var string1 = "aa";//定义变量string1 
var String2 = "ab";//定义变量String2 
console.log(number1<number2);//输出true 
console.log(number2<string1);//输出true 
console.log(upperLetter<lowerLetter);//输出true 
console.log(lowerLetter<string1);//输出false 
console.log(string1<string2);//输出true

在介绍逻辑运算符之前，我们必须明确逻辑运算符的操作数只能是布尔型，其他类型都会被转换为布尔型：除了0，null，undefined，""外，其他的值转换为布尔值都是true。

• 逻辑与 逻辑与有两个操作数，中间用&&连接，只有两个操作数都是true结果才是true； 其中一个操作数不是布尔型，当左操作数为真值时，返回右操作数。当左操作数为假值时，返回左操作数。

• 逻辑或 逻辑或同样有两个操作数，用||连接，至少有一个操作数为true时结果为true； 其中一个操作数不是布尔型，当左操作数为真值时，返回左操作数。当左操作数为假值时，返回右操作数。

• 逻辑非 逻辑非只有一个操作数，!后连接操作数或表达式，意思是将操作数取反； 如果操作数不是布尔型，编译器首先将其他类型转换为布尔型，然后返回true或者false。

  console.log(true&&false);//false 
  console.log(true||false);//true 
  console.log(!false);//true 
  var number1 = 1;  
  var number2 = 0;  
  var string = "a";  
  console.log(number1&&string);//输出字符串"a" 
  console.log(number1||string);//输出数字1 
  console.log(!number1);//false 
  

条件运算符由?和:构成，三个操作数分别在?的左边、右边以及:的右边，第一个操作数如果是真值，整个表达式返回第二个操作数的值；第一个操作数如果是假值，返回第三个操作数的值。

一般我们说到JavaScript中的三元运算符，指的就是条件运算符，因为它有三个操作数。条件运算符通常用来简化表达式。

var result1 = a>b?a:b;//result1赋值为a和b中大的那一个 
var result2 = (a==5)?(a+1):(a-1);//a为5，返回a+1，否则返回a-1 

赋值运算符就是=号，其实这个在前面出现过很多次了。赋值运算符的左边是一个变量或者对象的属性，右边是这个变量的值，意思是设置左边变量的值为右边的具体值。

除了基本的等号外，赋值运算符还可以和算术运算符结合。例如a+=1表示a=a+1，其中就把相加和赋值结合了起来。同理，相减、相乘、相除、取余、位运算都可以和赋值结合起来。如下：

var b = 1;  
b += 1;//等价于b = b+1 
b *= 1;//等价于b = b*1 
b /= 1;//等价于b = b/1 
b %= 1;//等价于b = b%1 
b &= 1;//等价于b = b&1 

从上到下优先级逐渐降低。第一栏数字相同的运算符优先级相同，对于这个表格，不需要全部记住，但是常见的需要记住，比如加减乘除的优先级高于比较运算符，赋值运算符的优先级几乎是最低的，下面给出例子帮助理解：

var a = 1;  var b = 2;  var c = ++a+b;  

因为++的优先级高于+，所以上面的第三个句子等价于：

var c = (++a)+b;

运算符的优先级是针对不同优先级的运算符来说的，对于同一级的运算符，运算顺序取决于运算符的结合性，比如加法和减法的优先级相同，而加法和减法都是从左向右结合，所以a+b-c式中，会先计算a+b，即按照阅读的顺序计算。

也有很多运算符是从右到左结合的，比如取反、逻辑非。

上面图中的第三栏就是结合性，R表示从右向左结合，L表示从左到右结合，从左向右的占多数，这和我们在数学中的习惯相同。

var d = a*b/c;//先计算乘法后计算除法 
var aa = 2;  
var bb = 3;  
var cc = aa *= bb;//先计算aa*=bb，再把结果赋值给cc，为6 

上面第一个式子是从左到右结合，第四个式子是从右到左结合。 分别等价于：

var d = (a*b)/c;  var cc = (aa *= bb); 

这是最常用的创建对象的方法，通过新建一个键值对的集合（对象字面量）创建对象，如下：

var song = { 
          
    name:"Liekkas",  
      time:180,  
      "song language":English,  
      singer: { 
          
        singerName:"Sofia Jannok",  
            singerAge:30  
    }  
};  

通过new关键字创建对象也是一个常用的方法。如下：

var Store = new Object();//创建对象的一个实例 
Store.name = "lofo Market";  
Store.location = "NO.13 Five Avenue";  
Store.salesVolume = 1000000;

通过上面的代码，我们就能创建一个名为Store的对象。

工厂方法就是通过函数创建对象，函数封装了创建对象的过程。

这是一种通过函数创建对象的方法，函数封装了对象的创建过程，创建新对象时只需要调用该函数即可。这种方法适合于一次创建多个对象。

//对象的创建函数 
function createStoreObject(name,location,salesVolume) { 
          
    var store = new Object();  
    store.name = name;  
    store.locaion = location;  
    store.salesVolume = salesVolume;  
    store.display = function() { 
          
          console.log(this.name);  
    };  
    return store;  
}  
//利用该函数创建一个对象 
var store1 = createStoreObject("panda express","No.1,People Street",200000);

这样就创建了一个名为store1的对象，注意这个对象除了属性之外还有一个方法display。要创建更多的类似store1的对象，直接调用该函数即可。

上面虽然也是通过函数创建对象，但不是构造函数，只是普通函数。构造函数名必须以大写字母开头，函数体内没有返回语句。

//构造函数 
function Store(name,location,salesVolume) { 
          
    this.name = name;  
    this.locaion = location;  
    this.salesVolume = salesVolume;  
}  
//创建对象的实例 
var myStore = new Store("KeyExp","No.1,L.Street",540000);   

上面的代码首先是Store对象的构造函数，然后用该构造函数创建了Store对象的一个实例myStore。

当我们创建一个函数时，函数就会自动拥有一个prototype属性，这个属性的值是一个对象，这个对象被称为该函数的原型对象。也可以叫做原型。

当用new关键字加函数的模式创建一个对象时，这个对象就会有一个默认的不可见的属性[[Prototype]]，该属性的值就是上面提到的原型对象。如下图所示：

JavaScript中每个对象都有一个属性[[Prototype]]，指向它的原型对象，该原型对象又具有一个自己的[[Prototype]]，层层向上直到一个对象的原型为null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。如下图所示：

这种方法是对使用构造函数创建对象的改进，使用构造函数创建一个对象时，会把构造函数中的方法（上面的构造函数只有属性的键值对，没有方法）都创建一遍，浪费内存，使用原型不存在这个问题。

function Store() { 
        };  
Store.prototype.name = "SF Express";  
Store.prototype.locaion = "Hong Kong";  
Store.prototype.salesVolume = 1200000000;  
//创建对象 
var myStore = new Store();  
//创建一个新的对象 
var hisStore = new Store();  
hisStore.name = "STO Express";//覆盖了原来的name属性 

这种方法的好处是，创建一个新的对象时，可以更改部分属性的值。

属性的获取有两种方式，一种是使用.符号，符号左侧是对象的名字，符号右侧是属性的名字，如下：

var student = { 
        name:"Alice",gender:"girl"};  
console.log(student.name);//输出Alice 

这种情况下属性名必须是静态的字符串，即不能是通过计算或者字符串的拼接形成的字符串。

另外一种是使用[""]符号，符号的左边是对象的名字，双引号中间是属性的名字，这种情况下属性名可以是一个表达式，只要表达式的值是一个字符串即可。如下：

var student = { 
        name:"Alice",gender:"girl"};  
console.log(student["name"]);//输出Alice 

有两种情况必须使用第二种方式：

• 属性名含有空格字符，如student["first name"]，这时不能用student.first name代替，编译器无法解释后者；
• 属性名动态生成，比如用for循环获取前端连续id的值，这种id名之间一般有特定关系。如下面的例子：

for(int i = 0;i < 5;i ++) { 
          
    console.log(student["id"+i]);  
}  

属性的修改指修改已有属性的值，这个直接用赋值符号即可。

属性的新增与修改在形式上完全相同，区别仅在于编译器会根据属性的名字判断是否有该属性，有则修改，没有则新增。

var student = { 
          
    name:"Kim",  
    age:21  
};  
student.age = 20;//修改属性，覆盖了原来的值21 
student.gender = "female";//新增属性gender 

JavaScript中的属性还可以删除，这在其他的面向对象语言如Java或者C++中是无法想象的，删除通过delete运算符实现。删除成功返回布尔型true，删除失败也是返回true，所以在删除之前需要判断一个属性是否存在，这个内容将在下一关讲解。

需要注意的是，对象只能删除自己特有的属性，而不能删除继承自原型对象的属性。同时，对象在删除属性时，要防止删除被其他对象继承的属性，因为这样会导致程序出错。

var Store = new Object();  
Store.name = "lofo Market";  
Store.location = "NO.13 Five Avenue";  
console.log(delete Store.name);//删除成功，输出true 
console.log(Store.name);//已删除，返回undefined 
delete Store.prototype;//删除失败，非自有属性 

属性的检测指检查对象是否有某个属性或者方法，需要使用运算符in，in的左侧是属性或者方法名，右侧是检查对象，对象有该属性或者方法则返回true，否则返回false，如下