对象

一 对象的类型

1 对象的定义:在 ECMAScript 中，所有对象并非同等创建的。一般来说，可以创建并使用的对象有三种：本地对象、内置对象和宿主对象

1.1 本地对象: Object Function Array String Boolean Number Date 这些是基本的类(引用类型)；使用这些引用类型的时候需要进行实例化；

1.2 内置对象 : Math 对象 Global 对象，这些对象在ECMAscript程序开始执行的时候出现，也就是说，我们不必实例化该对象，便可以直接引用它们内置的方法和属性；

1.3 宿主对象，所有非本地对象都是宿主对象，比如BOM和DOM

1.4 其中内置对象Math 对象和Global对象，这些对象的方法可以直接调用，比如Math.abs()， Math.random() ; 全局的eval() Number() parseInt() parseFloat() escape() ,但是Array String Date等本地对象的一些方法只能在实例化之后，应用在实例化的对象上；

二 对象的创建

1.对象创建包括三种方式: new 一个对象；字面量创建 ； ES5新增的Object.create();

1.1 var = { } ; var obj = { “name”:”Jhon”,”age”:18 }

1.2 通过构造函数new一个对象

1
2

function CreateObj (){  }
var obj = new CreateObj () ;

1.3 通过ES5的新方法 var obj = Object.create( obj1) 需要传入一个参数，该参数是一个对象

等价于 obj.prototype = obj1 ; Object.create( ) 方法会直接给原型添加属性

1
2
3
4
5
6
7

var obj = {
       name : 'tom',
       color : 'blue'
   }
   console.log(o);
   var obj1 = Object.create(obj);//注意obj1的属性在其原型上
   console.log(o1);

三 Javascript中对象内部 key : value 形式的构成:

1 构造函数实例化的属性包括两部分，一部分是”原生属性”，一部分是”原型属性”；

• 一部分是通过构造函数内部直接创建或者obj.property = “value”直接创建，我么可以称作”原生属性”；
• 一部分是通过原型创建，obj.prototype = value ; obj.prototype.property = value ;我们可以称作”原型属性”；
• “原生属性”可以被操作，可以重新赋值，不同实例对象之间不会影响 ;
• “原型属性”由构造函数创建的所有实例对象 共享 ，”牵一发而动全身”;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
    function CreateObj(){
        this.name = "Jhon";
        this.height = "180cm"
    }
    CreateObj.prototype = {"age":12,"address":"China"};
    CreateObj.prototype.gender = "male";
    CreateObj.prototype.fn = function(){
        console.log("this is innerFunc");
    };//通过原型创建属性
    var obj1 = new CreateObj();
    obj1.favour = "singing";//构造函数的"原生属性";
    console.log(obj1);
</script>

2 对于实例对象的属性的操作由两种方式，通过操作符 和 直接操作原型属性

• 通过点操作符设置属性的时候，只能操作原生属性 值，如果实例对象有该原生属性，那么则改变值，没有的话则创建原生属性，同时添加一个值；
• 由于点操作符不能修改原型属性 的值，所以要通过实例化对象的proto属性值，通过proto属性修改的值，会应用到所有的由该构造函数创建的实例对象上，这就是”牵一发而动全身”；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<script>
    function CreateObj(){
        this.name = "Jhon";
        this.height = "180cm"
    }
    CreateObj.prototype = {"age":12,"address":"China"};//对象是复杂类型数据，传给prototype的是地址
  	//如果将原型形属性指向一个函数，那么后面创造的属性都是类似函数类型
  //如果将原形属性指向一个基础数据类型，那么，后面则无法贼通过原型添加属性
    CreateObj.prototype.gender = "male";//基础数据类型传值传的是值
  //注意 obj.prorotype = value
    CreateObj.prototype.fn = function(){
        console.log("this is innerFunc");
    };//通过原型创建属性
  //实例化两个对象
    var obj1 = new CreateObj();
    var obj2 = new CreateObj();
    console.log("通过原生属性修改后——————————");
    obj1.age = "22";
    //构造函数的"原生属性",可以直接通过点操作符直接设置和修改，点操作符只能访问原生属性，不能访问原型属性。
    console.log(obj1,obj2);
    console.log("通过原型属性修改后——————————");
    obj1.__proto__.address = "American";//等价于下面这行代码 隐藏属性__proto__ 在实际生产中尽量不要用
   //	CreateObj.prototype.address ="American";
    // 通过__proto__属性可以访问原型属性，进行设置和更改，注意如果通过原型属性修改属性的话，所有通过该构造函数创建的对象的原型属性值都会改变
    console.log(obj1,obj2);
    
    console.log(obj1.name);//Jhon
    console.log(obj1.address);//American
</script>

看下图便于大家理解

四 “一切皆对象”:

1 数组、函数、String包装对象都是对象，对象的操作同样适用于这些

五 : 对象中原型的继承

DOM 元素的继承如下

对象是由 new 运算符加上要实例化的对象的名字创建的

###1 作用域以及作用域链

1 .1作用域

• 在JavaScript中，我们可以将作用域定义为一套规则,这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。

  这里的标识符，指的是变量名或者函数名

• JavaScript中只有全局作用域与函数作用域

• 作用域与执行上下文是完全不同的两个概念。

  JavaScript代码的整个执行过程，分为两个阶段，代码编译阶段与代码执行阶段。

  • 编译阶段由编译器完成，将代码翻译成可执行代码，这个阶段作用域规则会确定以及语法分析，词法分析，可执行的代码生成；
  • 执行阶段由引擎完成，主要任务是执行可执行代码，执行上下文在这个阶段创建以及垃圾回收；

1.2 作用域链

作用域链，是由当前环境与上层环境的一系列变量对象组成，它保证了当前执行环境对符合访问权限的变量和函数的有序访问。

• 作用域链在函数执行之前就已经创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

	var cs = "zero";
    function foo(){
        var cs = "one" ;
        function innerFoo1 (){
 
            console.log(cs);
        }
        return innerFoo1;
    }
//作用域链  全局作用域---> foo函数作用域---> innerFoo1函数作用域，当函数innerFoo1执行的时候，会顺着这条作用域链去找变量，一层一层向上找，直到全局变量对象处，如果找不到，则会抛出 未定义异常
    var ret = foo(); 	//这个返回的是innerFoo1函数 innerFoo1函数执行的时候，现在innerFoo1函数作用域里面找cs变量，找不到的时候，向上一层foo函数作用域找cs变量，这个时候找到了 one,然后输出，结束函数执行；
    ret();		//one
//如果作用域链是在函数执行的时候才创建，那么应该是如下作用域链 
//全局作用域--->foo()作用域(其实就是innerFoo1作用域，foo函数执行了)---> 
//ret()执行后应该输出zero,很明显不是的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    var cs = "zero" ;
    function innerFoo1 (){
        console.log(cs);
    }
    function innerFoo2 (){
        var cs = "one" ;
        return innerFoo1;
    }
//创建了两条作用域链(作用域链由函数作用域和全局作用域组成，全局作用域是作用域链的最顶端，变量查找的最后区域)
//全局作用域---> innerFoo1作用域--->
//全局作用域---> innerFoo2作用域--->
//作用域链在执行之前就已经创建
var ret = innerFoo2();	//返回的是 innerFoo1函数，这个函数执行的时候，其作用域链已经确定，innerFoo1函数作用域里没有cs变量，然后去全局作用域去找，找到了 zero
ret(); //zero

1.3 延长作用域链

1
2
3

try---catch
with

1.4 需要注意在if语句块和for语句块中声明的变量，是其所运行的环境的内的变量，如果在全局作用域运行for或者if，那么if和for中声明的变量就是全局window的属性，如果在函数内部运行if或者for循环，在if和for循环中声明的变量就是该函数作用域的局部变量；以下栗子，for也是一样的道理；

1
2
3
4
5
6
7
8
9
10
11
12
13
14

if(true){
      var color= "blue";
      
  } 
  console.log(color);
  
  function f1(){
      if(true){
          var color= "red";
      }
      console.log(color);
  }
  f1();
  console.log(color);

2 变量声明提升

2.1”链式作用域” : 子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

1
2
3
4
5
6
7
8
9
10
11
12

  var tmp = new Date();
  function f() {
      console.log(tmp);//undefined
         if (false) {  //由于是false不会进入，但是变量的声明还是会提升到函数体内，体内，体内的最上面(重三遍)，所以下面在执行的时候会输出 undefined,
             var tmp = "hello world";
           //函数体内的声明会提升到  函数作用域  的最上面
         }
         console.log(tmp);//undefined
     }
     f();
     console.log(tmp);//Tue Feb 28 2017 21:24:05 GMT+0800 (中国标准时间)
console.log(typeof tmp);//object

1
2
3
4
5
6
7
8
9
10
11
12

var tmp = new Date();
function f1() {
    console.log(tmp);//undefined
    if (true) {  //true可以进入
        var tmp = "hello world";//var 声明的变量会进行变量声明提升，只是提升到函数作用域最上面，并且只在函数作用域内有效
    }
    console.log(tmp);// hello world
}
    f1();//函数执行的时候 ，输出 undefind 和 hello world
    console.log(tmp);//Tue Feb 28 2017 21:24:05 GMT+0800 (中国标准时间)  
    console.log(typeof tmp);//object

1
2
3
4
5
6
7
8
9
10
11

var tmp = new Date();
function f2() {
        console.log(tmp);//Tue Feb 28 2017 21:24:05 GMT+0800 (中国标准时间)
        if (true) {
            tmp = "hello world";//不是用var声明的变量，可以看做是全局的变量，当执行到这一行代码的时候，会改变全局变量tmp的值
        }
        console.log(tmp);// hello world
    }
    f2();
    console.log(tmp);//hello world
    console.log(typeof tmp);//string

2.2 变量名 形参 函数名重名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

console.log(typeof a);//funtion
function a(){} ;
var a=10;    	
//-----------------------------------------------
function foo(a){
  	console.log(typeof a);
  	var a =100;
  	function a(){};
}
foo(10);   //输出function   如果变量名 形参 函数重名 ，还是函数优先
//-----------------------------------------------
function foo(a){
    console.log(typeof a);
    var a = "string";
}
foo(10);   //输出number

3 执行上下文

3.1 函数每次的调用，都会形成一个执行上下文，每次调用都会形成一个新的执行上下文；

3.2 执行上下文 –> 变量对象(变量声明，函数声明，所有形参)+作用域链+this指向

3.3 生成执行上下文有三种情况

• 全局环境：JavaScript代码运行起来会首先进入该环境
• 函数环境：当函数被调用执行时，会进入当前函数中执行代码
• eval
• 每个函数都有自己的执行环境，当该函数之心完毕之后，该环境就会被销毁，保存在该函数环境中的变量和变量也会被销毁
  • 全局执行环境直到程序结束，例如关闭网页的时候才会被销毁

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var color = 'blue';
function changeColor() {
    var anotherColor = 'red';
    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }
    swapColors();
}
changeColor();

3.4 执行上下文有以下特性:

• 单线程
• 同步执行，只有栈顶的上下文处于执行中，其他上下文需要等待
• 全局上下文只有唯一的一个，它在浏览器关闭时出栈
• 函数的执行上下文的个数没有限制
• 每次某个函数被调用，就会有个新的执行上下文为其创建，即使是调用的自身函数，也是如此。

3.5 执行上下文的生命周期

• 创建阶段
  在这个阶段中，执行上下文会分别创建变量对象，建立作用域链，以及确定this的指向

• 代码执行阶段
  创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。

  

3.6 变量对象的创建

变量对象（Variable Object）

变量对象的创建，依次经历了以下几个过程。

1. 建立arguments对象。检查当前上下文中的参数，建立该对象下的属性与属性值。

2. function声明 检查当前上下文的函数声明，也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。

3. var声明 检查当前上下文中的变量声明，每找到一个变量声明，就在变量对象中以变量名建立一个属性，属性值为undefined。如果该变量名的属性已经存在，为了防止同名的函数被修改为undefined，则会直接跳过，原属性值不会被修改。

   

   变量对象在代码执行的时候会变成活动对象

   4 走个demo

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   function test() { console.log(foo); console.log(bar); var foo = 'Hello'; console.log(foo); var bar = function () { return 'world'; } function foo() { return 'hello'; } } test();

   1 2 3 4 5 6 7

   // 创建阶段 这个变量对象创建的过程，变量声明提升其实就是变量对象创建过程中完成的 VO = { arguments: {...}, foo: <foo reference>, bar: undefined } // 这里有一个需要注意的地方，因为var声明的变量当遇到同名的属性时，会跳过而不会覆盖

   1 2 3 4 5 6 7

   // 执行阶段 执行阶段，变量对象--->活动对象 VO -> AO VO = { arguments: {...}, foo: 'Hello', bar: <bar reference> }

   ​

字符串的方法总结(注意字符串的不可变性)

1 str.charAt(index) : 返回位于index处的字符 ；如果index不在0和str.length-1之间那么返回一个空字符 ；

2 str.charCodeAt(index): 返回位于index处的字符的Unicode编码，如果index不在0和str.length-1之间，那么返回NaN ；

3 str.indexOf(searchvalue,fromindex) : 返回被检索字符串第一次出现的位置值，如果找不到返回 -1,注意对大小写敏感

stringObject 中的字符位置是从 0 开始的。

1

console.log('item?'.indexOf('?'));//4

正则 str.search(refexp) 不执行全局匹配，返回被检索字符第一次出现的位置值 如果找不到，返回-1 ;

4 str.slice(start,end) 不改变原字符串，返回一个新的字符串 ，包括起始位置，不包括end位置，end省略则直到字符串末尾；-1表示最后一个字符；和substr(start,end) substring(start,stop)效果类似

注意索引值从0 开始 包括起始位置字符，不包括结尾的字符

1
2
3

var str = "abcdef";
   console.log(str.substring(1));//bcd
   console.log(str.slice(1));//bcd

5 str.split(seperate,howmany) : 不改变原字符串，返回一个数组 ，该数组中保存了被分割的字符串，howmany设置数组中的元素的个数；

1
2
3
4
5
6
7
8
9
10
11

var str = 'www.baidu.com?name=Jhon&age=15';
  console.log(str.indexOf('?'));
  var newArr = str.slice(str.indexOf('?')+1).split('&');
  console.log(newArr);
  console.log(newArr[0].substring(0,4));
  console.log(newArr[0].substring(5,9));
  for(var i = 0 ; i < newArr.length ; i++){
      if(newArr[i].substring(0,5) == 'name='){
          document.write('<p>welcome '+newArr[i].substring(5,9)+'</p>')
      }
  }

6 str.concat(str1,str2····) : 不改变原字符串，返回一个新的字符串；

7 正则 str.match(value) str.match(regexp) 不改变原来的字符串，找到匹配则返回匹配的数组 ，找不到匹配则返回null

match() 方法将检索字符串 stringObject，以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外，返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置，input 属性声明的是对 stringObject 的引用。

如果 regexp 具有标志 g，则 match() 方法将执行全局检索，找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串，则返回 null。如果找到了一个或多个匹配子串，则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同，它的数组元素中存放的是 stringObject 中所有的匹配子串，而且也没有 index 属性或 input 属性。

注意：在全局检索模式下，match() 即不提供与子表达式匹配的文本的信息，也不声明每个匹配子串的位置。 如果需要这些全局检索的信息，可以使用 RegExp.exec()。

1
2
3
4
5

var str = 'av fgf df';
  console.log(str.match('f'));//["f", index: 3, input: "av fgf df"] 返回一个数组，包含匹配字符的详细信息
  console.log(str.match('f')[0]);//f  
  console.log(str.match('f').index);//3 
  console.log(str.match(/f/g));//["f", "f", "f"]

8 正则 str.replace(str/regexp , replacement | function) ; 不改变原字符串，返回一个新的字符串；

8.1 如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

1
2
3
4

var str = "Jhon Jim";
var newStr =  str.replace(/J/,'G')
console.log(str);//"Jhon Jim"
console.log(newStr);//"Ghon Jim"

1
2
3
4

var str = "Jhon Jim";
var newStr =  str.replace(/J/g,'G')
console.log(str);//"Jhon Jim"
console.log(newStr);//"Ghon Gim"

8.2 $ 1,2,3,4……99 表示与正则表达式第1 到99个子表达式相匹配的文本；子表达式是用( )括起来的那部分

1
2
3

var name = "Doe, John";
var newName = name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");
console.log(newName);//John Doe

8.4 如果replace第二个参数没有传递，那么默认传入undefined

1

console.log('str'.replace('r')); //stundefined

9 str.trim( ) 方法可以用来去掉字符串中的前面和后面的空格，底层实现

1
2
3
4

String.prototype.trim = String.prototype.trim || function(){
               if(!this) return this;
               return this.replace(/^\s+|\s+$/g,"");//使用正则表达式将空格替换为空字符串
           }

记住，String 对象的所有属性和方法都可应用于 String 原始值上，因为它们是伪对象。

元素选择器

一 : 即时匹配元素

1 document.querySelector( ) 匹配选中的第一个HTML元素，如果没有匹配到，则返回 null ;

2 document.querySelectorAll( ) 匹配的是对象并不是实时的，后续更新的文档并不会被匹配到，它只包含当前调用时刻选择器所匹配的元素，如果匹配不到则返回一个空的nodelist对象；

二 实时匹配元素

1 getElementById getElementsTagName getElementsByClassName 等获取元素都是实时的；

三 对于有id属性的元素，可以直接通过window.id 获取到该元素

1
2
3
4

<div id="div1">	</div>
<script>
	console.log(window.div1);
</script>

四 对于form表单元素，如果form表单元素有id和name属性，可以直接通过name属性和id拉访问form属性，也可以直接通过元素document.forms来访问，这个获取的是一个HTMLCollection类数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="#" id="formId" name="subName">
    <input type="text"/>
    <input type="password"/>
    <input type="button "/>
</form>
<form action="##" id="form22" name="address"></form>
<script>
    //对于有name和id属性的form可以直接通过window.id  window.name  来访问元素
    console.log(document.forms);//获取结果是一个HTML Collection集合，可以获取页面中所有的form表单
    console.log(document.forms.subName);//获取结果是一个HTML Collection集合，可以获取页面中所有的form表单
    console.log(document.forms.address);//获取结果是一个HTML Collection集合，可以获取页面中所有的form表单
  //获取form表单里面的元素
     console.log(document.forms.subName[0]);//可以通过索引来获取对应的表单元素
    //也可以直接通过 id 和  name  直接访问 form表单
    console.log(window.formId);
    console.log(window.subName);
    console.log(document.subName);
</script>
</body>
</html>

事件委派

1 jQuery事件委派:可以理解为，本来应该下属做的事情，却由领导做了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
   $(function(){
        $("ul li").click(function(){
            console.log("click绑定程序");
        });
    });
    $(function(){
        $("ul").delegate("li","click",function(){
            console.log("delegate直接绑定执行程序");
        });
    });
</script>

以上两种绑定事件的方式所实现的效果是一样的，但是需要注意

第一种绑定方式 click

• 1 很耗费资源，因为这种方式是给每个li都加上了事件，li的个数少的话还没事，如果li多的话会很耗费资源。

  2 如果后期动态添加li，不会拥有这个弹出事件。

第二种绑定方式 delegate

• 1 可以解决耗费资源的问题，只绑定给ul元素一个事件处理程序
• 2 后期动态添加的子元素，也会拥有该事件处理程序

封装函数 innerText textContent innerHTML

1 如何改变元素文本内容？innerText 和 textContent 的区别

• obj.innerHTML 可以获取元素内所有的内容，obj.innerHTML=” “可以修改元素内容，里面也可以添加其他元素标签；谷歌，火狐，IE都支持；
• obj.innerText 只能获取内容，不能获取标签；obj.innerText=” “也只能设置文本内容；谷歌火狐支持，IE不支持，所以需要兼容性封装；
• obj.textContent 只能获取内容，不能获取标签；obj.textContent=” “也只能设置文本内容；谷歌火狐支持，IE也支持；
• obj.textContent 和 obj.innerText 可以修改对象内部整体的内容，包括元素、属性、文本.

栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="dv">
   <p>通过innerText和innerHTMl获取内容的不同</p>
</div>
document.getElementById("dv").innerText = "<p>innerText 不能显示标签</p>";
document.getElementById("dv").inerHTML = "<p>innerHTML可以显示文本和标签</p>"
两种不同的执行结果：
innerText:注意此时的 <p>是以文本的形式在页面中存在的；
<div id="dv">
  <p>innerText 不能显示标签</p>
</div>
innerHTML:此时的<p>标签是以元素的形式在页面中存在的；
<div id="dv">
   <p>innerHTML可以显示文本和标签</p>
</div>

2 如何获取元素内容？innerText 和 innerHTML 的区别

• obj.innerHTML 不仅可以获取对象的文本节点，只要是元素内的节点，包括元素节点，文本节点，都会被获取到。
• obj.innerText 只能获取对象的文本节点，不能获取元素的子元素节点

栗子：

1
2
3
4
5
6
7
8
9
10
11

<div id="dv">
   <p>通过innerText和innerHTMl获取内容的不同</p>
</div>
var result1 = document.getElementById("dv").innerText;
var result2 = document.getElementById("dv").innerHTML;
console.log(result1);
console.log(result2);
输出结果：
result1:通过innerText和innerHTMl获取内容的不同
result2:<p>通过innerText和innerHTMl获取内容的不同</p>

3 封装函数原因：因为谷歌和火狐 都支持innerText 和 textContent 但是，IE只支持textContent，所以需要封装函数，无论哪个浏览器都可以设置文本内容或者获取文本内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function setInnerText (element,content){
  if (element.innerText == undefined){
    element.textContent = content 
  }else {
    element.innerText = content 
  }
}
function getInnerText (element,content){
  if (element.innerText == undefined){
    return element.textContent
  }else {
    return element.innerText 
  }
}

这些API联系document.write( )

4 在jquery中对应的是html() 和 text (),jqueryObj.html() jqueryObj.text()，如果没有参数可以获取jquery对象的内容，如果设置了内容则可以为其设置文本内容。

和DOM中一样 ，html()不仅可以获取文本节点，还可以获取元素节点，而text()只能获取文本节点的内容；同样。html(“

innerHTML可以显示文本和标签

innerHTML可以显示文本和标签

1 理解其核心思想:通过组合样式对标签进行样式操作，从而到达控制页面的样式以及网页结构

2 bootstrap环境搭建:引入相应的css javascript

3 如何理解Bootstrap移动端优先，通过其媒体查询设置宽度可窥一二,Bootstrap框架代码的百分比设置优先基于

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
/*默认移动端设备优先  width < 768px*/
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
/*sm 屏幕设备  768px < width < 992px*/
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
/*md屏幕设备 992px < width < 1200px */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
/*lg 屏幕设备 width > 1200px*/

4 Bootstrap 实现移动端自适应布局的基础是根据宽度 100% 设置自适应布局，宽度基准是以父元素的宽度为基准的。

5 栅格系统:如何理解 col-xs-(超小屏<768px) col-sm-(小屏768px 992px) col-md-(1200px>中等屏 >992px) col-lg- (大屏 >1200px)

1
2
3
4
5
6
7
8

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（Bootstrap 是移动设备优先的） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div>
  	<div class="col-xs-6 col-sm-4 col-md-3">
      col-xs-6会优先作用，查看bootstrap源码可以得知，col-sm-4需要在@media(min-width : 768px){}成立的时		候，该类才会起作用，col-md-3需要在@media(min-width : 992px){}成立的时候才会起作用。
	</div>
   	<div class="col-xs-6 col-sm-4 col-md-3">
          源码中的书写顺序如下:
              .col-xs-6 {
                    width:100%;
              }
      			col-xs-*  是可以全局使用的
	</div>
   	<div class="col-xs-6 col-sm-4 col-md-3">
            @media(min-width : 768px){
                .col-sm-4 {
                     width: 33.33333333%;
                }  
            }
	</div>
   	<div class="col-xs-6 col-sm-4 col-md-3">
            @media(min-width : 992px){
                .col-md-3{
                    width: 25%;
                }
            }
	</div>
</div>

由此可见col- 类主要是改变元素的样式属性，width 的值，所以无论什么情况下，

1

col-xs-6 { width:100%}

都是可以起作用的，但是当屏幕的大小变化的时候，比如由超小屏幕变化到—>小屏幕 ,此时

1
2
3
4
5

@media(min-width : 768px){
              .col-sm-4 {
                   width: 33.33333333%;
              }  
          }

将会起作用，覆盖 掉原来的width：100%设置，变为width:33.3333333%;同理变为中等屏幕的时候，此时

1
2
3
4
5

@media(min-width : 992px){
               .col-md-3{
                   width: 25%;
               }
           }

将会起作用，覆盖掉原来的width:33.3333333%，变为width:25%.

此时在回过头来理解Bootstrap是移动设备优先的这句话，可以看出，移动设备(width<768px)的时候，类样式默认没有使用条件，不需要媒介查询判断，任何时候都可以使用，但是其他屏幕设备上就需要通过媒介查询来判断该类样式是否可以执行

6 Bootstrap源码在全局定义了box-sizing:border-box ，所有的HTML元素都是以边框为准进行的宽度计算，内容会被压缩

1
2
3
4
5
6
7
8
9
10
11

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

select 的值选择的哪一个？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            height: 20px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<select name="car" id="carId">汽车
        <option value="">福特</option>
        <option value="fort1">福特1</option>
        <option value="fort2">福特2</option>
        <option >福特3</option>
        <option value="">福特4</option>
        <option value="fort5">福特5</option>
        <option value="fort6">福特6</option>
        <option value="fort7">福特7</option>
        <option value="fort8">福特8</option>
        <option value="fort9">福特9</option>
        <option value="fort10">福特10</option>
</select>
<script>
    var selectObj = document.querySelector("select");
    selectObj.onchange = function(){
        console.log(this.value);//选择中哪个，则输出哪个option对应的value值
       
    };
</script>
</body>
</html>

每次改变选择的值的时候，都会输出 select 的value值，那么这个value的值到底指的是哪一个？

这里总结如下：

• 如果option标签有value属性，那么当选中该option选项的时候，select的value值就是option标签的value属性的值；如果value属性值为为空字符串，那么就是空字符串
• 如果option标签没有value属性，那么当选中该option选项的时候，select的value值就是option标签的文本节点的值；
• 对于select的value取值 : option标签的value属性值优先于option标签的文本节点的值

vertical-align

1 在一行中，行内元素默认是以baseline为基准进行垂直对齐的，行内元素包括 img a span 等

2 baseline 基线:可以简单的理解为是在四线格中字母x的底部的那根线

3 img标签默认对齐行内的文本的基线

4 那么由于图片默认对齐基线，会在下面出现几像素的间隙，如何去除该间隙？

5 先来看看间隙的产生：(注意浏览器默认字体大小，所以对于所有的DOM元素都有)

1
2
3
4
5
6

.div1{
  font-size:50px;
}
<div class="div1">
    <span>该行的基线以文本的baseline为基准</span> <img src="img/01.jpg" alt="" width="20px"/>
</div>

一 : 既然产生间隙的根源是行内元素 默认以文本的基线为基准的对齐方式导致的，那么只需要将改行的文本字体大小设置为font-size 为0 即可这行代码将图片所在行的文本大小设置为0 ，由于文本相关属性的继承性，该元素内所有元素的文本大小均为0px，所以此时可以消除间隙

1
2
3

.div1 {
  font-size:0px	;
}

二:既然间隙是有行内元素默认以改行的文本的baseline为基准进行垂直方向的对齐，那么将图片设置为块级元素，也可以消除间隙：

1
2
3

.div1>img{
           display: block;
       }

三 利用vertical-align属性：设置元素的对齐方式 可能值 baseline top bottom middle text-top text-bottom

1
2
3

.div1>img{
  vertical-align:bottom;
}

四 如果想要更好地理解vertical-align属性的作用，可以将图片width=”20px”，改成可以和字体比较的大小，然后文本设置font-size设置大一些，然后看效果，有助于理解vertical-align的属性。

1 onload 支持该事件的标签和JavaScript对象: HTML标签\,\, \,\