手把手教会你JavaScript引擎如何执行JavaScript代码

JavaScript 在运行过程中与其他语言有所不一样,如果不理解 JavaScript 的词法环境、执行上下文等内容,很容易会在开发过程中产生 Bug,比如this指向和预期不一致、某个变量不知道为什么被改了,等等。所以今天我们就来聊一聊 JavaScript 代码的运行过程。

大家都知道,JavaScript 代码是需要在 JavaScript 引擎中运行的。我们在说到 JavaScript 运行的时候,常常会提到执行环境、词法环境、作用域、执行上下文、闭包等内容。这些概念看起来都差不多,却好像又不大容易区分清楚,它们分别都在描述什么呢?

这些词语都是与 JavaScript 引擎执行代码的过程有关,为了搞清楚这些概念之间的区别,我们可以回顾下 JavaScript 代码运行过程中的各个阶段。

JavaScript 代码运行的各个阶段

JavaScript 是弱类型语言,在运行时才能确定变量类型。JavaScript 引擎在执行 JavaScript 代码时,也会从上到下进行词法分析、语法分析、语义分析等处理,并在代码解析完成后生成 AST(抽象语法树),最终根据 AST 生成 CPU 可以执行的机器码并执行。

这个过程,我们称之为语法分析阶段。除了语法分析阶段,JavaScript 引擎在执行代码时还会进行其他的处理。以 V8 引擎为例,在 V8 引擎中 JavaScript 代码的运行过程主要分成三个阶段。

  1. 语法分析阶段。该阶段会对代码进行语法分析,检查是否有语法错误(SyntaxError),如果发现语法错误,会在控制台抛出异常并终止执行。
  1. 编译阶段。该阶段会进行执行上下文(Execution Context)的创建,包括创建变量对象、建立作用域链、确定 this 的指向等。每进入一个不同的运行环境时,V8 引擎都会创建一个新的执行上下文。
  2. 执行阶段。将编译阶段中创建的执行上下文压入调用栈,并成为正在运行的执行上下文,代码执行结束后,将其弹出调用栈。

其中,语法分析阶段属于编译器通用内容,就不再赘述。前面提到的执行环境、词法环境、作用域、执行上下文等内容都是在编译和执行阶段中产生的概念。

执行上下文的创建

执行上下文的创建离不开 JavaScript 的运行环境,JavaScript 运行环境包括全局环境、函数环境和eval,其中全局环境和函数环境的创建过程如下:

  1. 第一次载入 JavaScript 代码时,首先会创建一个全局环境。全局环境位于最外层,直到应用程序退出后(例如关闭浏览器和网页)才会被销毁。
  2. 每个函数都有自己的运行环境,当函数被调用时,则会进入该函数的运行环境。当该环境中的代码被全部执行完毕后,该环境会被销毁。不同的函数运行环境不一样,即使是同一个函数,在被多次调用时也会创建多个不同的函数环境。

在不同的运行环境中,变量和函数可访问的其他数据范围不同,环境的行为(比如创建和销毁)也有所区别。而每进入一个不同的运行环境时,JavaScript 都会创建一个新的执行上下文,该过程包括:

  • 建立作用域链(Scope Chain);
  • 创建变量对象(Variable Object,简称 VO);
  • 确定 this 的指向。

由于建立作用域链过程中会涉及变量对象的概念,因此我们先来看看变量对象的创建,再看建立作用域链和确定 this 的指向。

创建变量对象

变量对象(VO)

每个执行上下文都会有一个关联的变量对象,该对象上会保存这个上下文中定义的所有变量和函数。

在浏览器中,全局环境的变量对象是window对象,因此所有的全局变量和函数都是作为window对象的属性和方法创建的。相应的,在 Node 中全局环境的变量对象则是global对象。

创建VO的过程

创建变量对象将会创建arguments对象(仅函数环境下),同时会检查当前上下文的函数声明和变量声明。

  • 对于变量声明:此时会给变量分配内存,并将其初始化为undefined(该过程只进行定义声明,执行阶段才执行赋值语句)。
  • 对于函数声明:此时会在内存里创建函数对象,并且直接初始化为该函数对象。

变量声明和函数声明的处理过程,便是我们常说的变量提升和函数提升,其中函数声明提升会优先于变量声明提升。因为变量提升容易带来变量在预期外被覆盖掉的问题,同时还可能导致本应该被销毁的变量没有被销毁等情况。因此 ES6 中引入了let和const关键字,从而使 JavaScript 也拥有了块级作用域。

作用域

在各类编程语言中,作用域分为静态作用域和动态作用域。JavaScript 采用的是词法作用域(Lexical Scoping),也就是静态作用域。词法作用域中的变量,在编译过程中会产生一个确定的作用域。

词法作用域中的变量,在编译过程中会产生一个确定的作用域,这个作用域即当前的执行上下文,在 ES5 后我们使用词法环境(Lexical Environment)替代作用域来描述该执行上下文。因此,词法环境可理解为我们常说的作用域,同样也指当前的执行上下文(注意,是当前的执行上下文)。

在 JavaScript 中,词法环境又分为词法环境(Lexical Environment)和变量环境(Variable Environment)两种,其中:

  • 变量环境用来记录var/function等变量声明;
  • 词法环境是用来记录let/const/class等变量声明。

也就是说,创建变量过程中会进行函数提升和变量提升,JavaScript 会通过词法环境来记录函数和变量声明。通过使用两个词法环境(而不是一个)分别记录不同的变量声明内容,JavaScript 实现了支持块级作用域的同时,不影响原有的变量声明和函数声明。

这就是创建变量的过程,它属于执行上下文创建中的一环。创建变量的过程会产生作用域,作用域也被称为词法环境。

建立作用域链

作用域链,就是将各个作用域通过某种方式连接在一起。作用域就是词法环境,而词法环境由两个成员组成。

  1. 环境记录(Environment Record):用于记录自身词法环境中的变量对象。
  2. 外部词法环境引用(Outer Lexical Environment):记录外层词法环境的引用。

通过外部词法环境的引用,作用域可以层层拓展,建立起从里到外延伸的一条作用域链。当某个变量无法在自身词法环境记录中找到时,可以根据外部词法环境引用向外层进行寻找,直到最外层的词法环境中外部词法环境引用为null,这便是作用域链的变量查询。

JavaScript 代码运行过程分为定义期和执行期,前面提到的编译阶段则属于定义期,代码示例如下:

function foo() { // 定义全局函数foo
    console.dir(bar);
    var a = 1;
    function bar() { // 在foo函数内部定义函数bar
        a = 2;
 }
}
console.dir(foo);
foo();

前面我们说到,JavaScript 使用的是静态作用域,因此函数的作用域在定义期已经决定了。在上面的例子中,全局函数foo创建了一个foo[[scope]]属性,包含了全局[[scope]]

foo[[scope]] = [globalContext];

而当我们执行foo()时,也会分别进入foo函数的定义期和执行期。

在foo函数的定义期时,函数bar的[[scope]]将会包含全局[[scope]]和foo的[[scope]]:

bar[[scope]] = [fooContext, globalContext];

运行上述代码,我们可以在控制台看到符合预期的输出:

可以看到:

  • foo的[[scope]]属性包含了全局[[scope]]
  • bar的[[scope]]将会包含全局[[scope]]和foo的[[scope]]

也就是说,JavaScript 会通过外部词法环境引用来创建变量对象的一个作用域链,从而保证对执行环境有权访问的变量和函数的有序访问。除了创建作用域链之外,在这个过程中还会对创建的变量对象做一些处理。

在编译阶段会进行变量对象(VO)的创建,该过程会进行函数声明和变量声明,这时候变量的值被初始化为 undefined。在代码进入执行阶段之后,JavaScript 会对变量进行赋值,此时变量对象会转为活动对象(Active Object,简称 AO),转换后的活动对象才可被访问,这就是 VO -> AO 的过程,示例如下:

function foo(a) {
    var b = 2; 
    function c() {}
    var d = function() {};
}


foo(1);

在执行foo(1)时,首先进入定义期,此时:

  • 参数变量a的值为1
  • 变量b和d初始化为undefined
  • 函数c创建函数并初始化
AO = {
 arguments: {
  0: 1,
  length: 1
 },
 a: 1,
 b: undefined,
 c: reference to function() c() {}
 d:undefined
}

前面我们也有提到,进入执行期之后,会执行赋值语句进行赋值,此时变量b和d会被赋值为 2 和函数表达式:

AO = {
   arguments: {
    0: 1,
    length: 1
  },
  a: 1,
  b: 2,
  c: reference to function c(){},
  d: reference to FunctionExpression "d"
}

这就是 VO -> AO 过程。

  • 在定义期(编译阶段):该对象值仍为undefined,且处于不可访问的状态。
  • 进入执行期(执行阶段):VO 被激活,其中变量属性会进行赋值。

实际上在执行的时候,除了 VO 被激活,活动对象还会添加函数执行时传入的参数和arguments这个特殊对象,因此 AO 和 VO 的关系可以用以下关系来表达:

AO = VO + function parameters + arguments

现在,我们知道作用域链是在进入代码的执行阶段时,通过外部词法环境引用来创建的。总结如下:

  • 在编译阶段,JavaScript 在创建执行上下文的时候会先创建变量对象(VO);
  • 在执行阶段,变量对象(VO)被激活为活动对象( AO),函数内部的变量对象通过外部词法环境的引用创建作用域链。

通过作用域链,我们可以在函数内部可以直接读取外部以及全局变量,但外部环境是无法访问内部函数里的变量。示例如下:

function foo() {
  var a = 1;
}
foo();
console.log(a); // undefined

我们在全局环境下无法访问函数foo中的变量a,这是因为全局函数的作用域链里,不含有函数foo内的作用域。

如果我们想要访问内部函数的变量,可以通过函数foo中的函数bar返回变量a,并将函数bar返回,这样我们在全局环境中也可以通过调用函数foo返回的函数bar,来访问变量a:

function foo() {
  var a = 1;
  function bar() {
    return a;
  }
  return bar;
}
var b = foo();
console.log(b()); // 1

当函数执行结束之后,执行期上下文将被销毁,其中包括作用域链和激活对象。

在上面的实例中;当b()执行时,foo函数上下文包括作用域都已经被销毁了,但是foo作用域下的a依然可以被访问到;这是因为bar函数引用了foo函数变量对象中的值,此时即使创建bar函数的foo函数执行上下文被销毁了,但它的变量对象依然会保留在 JavaScript 内存中,bar函数依然可以通过bar函数的作用域链找到它,并进行访问。这就是闭包;

闭包使得我们可以从外部读取局部变量,常见的用途包括:

  1. 用于从外部读取其他函数内部变量的函数;
  2. 可以使用闭包来模拟私有方法;
  3. 让这些变量的值始终保持在内存中。

注意,在使用闭包的时候,需要及时清理不再使用到的变量,否则可能导致内存泄漏问题。

确定 this 的指向

在 JavaScript 中,this指向执行当前代码对象的所有者,可简单理解为this指向最后调用当前代码的那个对象。

根据 JavaScript 中函数的调用方式不同,this的指向分为以下情况。

  1. 在全局环境中,this指向全局对象(在浏览器中为window)
  2. 在函数内部,this的值取决于函数被调用的方式
  3. 函数作为对象的方法被调用,this指向调用这个方法的对象
  4. 函数用作构造函数时(使用new关键字),它的this被绑定到正在构造的新对象
  5. 在类的构造函数中,this是一个常规对象,类中所有非静态的方法都会被添加到this的原型中
  6. 在箭头函数中,this指向它被创建时的环境
  7. 使用apply、call、bind等方式调用:根据 API 不同,可切换函数执行的上下文环境,即this绑定的对象

可以看到,this在不同的情况下会有不同的指向,在 ES6 箭头函数还没出现之前,为了能正确获取某个运行环境下this对象,我们常常会使用以下代码:

var that = this;
var self = this;

这样的代码将变量分配给this,便于使用。但是降低了代码可读性,不推荐使用,通过正确使用箭头函数,我们可以更好地管理作用域。

总结

今天我们了解了 JavaScript 代码的运行过程,该过程分为语法分析阶段、编译阶段、执行阶段三个阶段。

在编译阶段,JavaScript会进行执行上下文的创建,在执行阶段,变量对象(VO)会被激活为活动对象(AO),变量会进行赋值,此时活动对象才可被访问。在执行结束之后,作用域链和活动对象均被销毁,使用闭包可使活动对象依然被保留在内存中。这就是 JavaScript 代码的运行过程。

一文带你解读​JavaScript中的变量、作用域和内存问题

一、基本类型和引用类型的值

  • 基本类型值:简单的数据段;
  • 引用类型值:多个值构成的对象;

回顾:

基本数据类型:undefined;null;number;boolean;string;按照值访问的,可以操作保存在变量中的实际的值;

引用数据类型:例如Array;不能直接访问值,它是保存在内存中的对象;

JavaScript不允许直接访问内存中的位置;即不能直接操作对象的内存空间;

我们在操作对象时,其实是操作对象的引用,而不是对象;

注意:如果我们复制保存着某个对象的变量时,那么两个变量就会指向同一个对象,当我们为对象添加属性时,操作的就是实际的对象;

1.1 动态的属性

  • 引用类型
var person = new Object() // 创建一个对象
person.name = '张三' // 设置对象属性
console.log(person.name) // 输出对象属性

这个属性会一直伴随着对象,除非对象销毁,否则该属性会一直存在;

  • 基本类型
var name = 'Nick'
name.age = 20
console.log(name.age) // undefined

只有引用值可以动态添加后面可以使用的属性;

1.2 复制变量值

  • 基本类型
var s = 'hello'
var s1 = s
console.log(s1) // 'hello'
console.log(s1 == s) // true

解释:

再新创建一个变量s1,它的值和s一样,都是字符型’hello’,所以s1 == s;两者完全独立,互不干扰;

  • 引用类型
var obj1 = new Object()
var obj2 = obj1
obj1.name = 'nick'
console.log(obj2.name)
console.log(obj2 == obj1)

图示:

一文带你解读​JavaScript中的变量、作用域和内存问题

我们的变量名obj1储存的是一个对象的引用,它指向堆里面的一个对象(object),通过复制,我们只是复制了一个变量obj2,它的指向和obj1一样都是指向object,所以设置完obj1.name = ‘nick’,之后修改的是指向的对象的属性,由于obj2也是指向这个对象,所以obj2.name = ‘nick’;

1.3 传递参数

函数的传参类似于我们变量的复制,我们来查看一下;

1.3.1 基本类型的传参

function addnum(num){
    num += 10
    return num
}
var count = 20
res = addnum(count)
console.log(count) // 20
console.log(res) // 30

解释:参数作为函数的局部变量,其实并不会对全局变量造成影响,所以count还是20;

1.3.2 引用类型的传参

function test(obj){
     obj.age = 20
}
var obj1 = new Object()
test(obj1)
console.log(obj1.age) // 20

解释:此处obj和obj1引用的是同一个对象;那么问题来了,针对于引用类型,参数的传递是按照值还是按照引用呢?看下面的例子:

function test(obj){
     obj.age = 20
     obj = new Object()
     obj.age = 21
}
var obj1 = new Object()
test(obj1)
console.log(obj1.age) // 20

这里如果是按照引用传递,obj1的指向应该变成函数内部创建的对象,并且其age值为21,但是实际输出为20,说明即使在函数内部修改了参数的值,其原始引用仍未改变;

函数内部创建的obj会随着函数调用结束而被销毁;

二、作用域

2.1 执行环境和作用域

执行环境: 定义了变量或函数有权访问的其它数据,决定了它们的行为。

全局执行环境是最外层的执行环境。根据 ECMAScript实现的宿主环境,表示全局执行环境的对象可能不一样。在浏览器中,全局执行环境就是我们常说的 window 对象。

执行环境中的代码在执行的时候,会创建变量对象的一个作用域链(scope chain)。这个作用域链决定了各级上下文中的代码在访问变量和函数时的顺序。

代码正在执行的执行环境的变量对象始终位于作用域链的最前端。如果上下文是函数,则其活动对象(activation object)用作变量对象。活动对象最初只有一个定义变量:arguments 。(全局执行环境中没有这个变量。)

作用域链中的下一个变量对象来自包含执行环境,再下一个对象来自再下一个包含执行环境。以此类推直至全局执行环境;全局执行环境的变量对象始终是作用域链的最后一个变量对象。

代码执行时的标识符解析是通过沿作用域链逐级搜索标识符名称完成的。搜索过程始终从作用域链的最前端开始,然后逐级往后,直到找到标识符。(如果没有找到标识符,那么通常会报错。)

var color = "blue";
function changeColor() {
    let anotherColor = "red";
    function swapColors() {
        let tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
        // 这里可以访问 color、anotherColor 和 tempColor
}
    swapColors();// 这里可以访问 color 和 anotherColor,但访问不到 tempColor
}


changeColor();// 这里只能访问 color

以上代码涉及 3 个执行环境:全局执行环境、 changeColor() 的局部执行环境和 swapColors() 的局部执行环境。全局执行环境中有一个变量 color 和一个函数 changeColor() 。changeColor() 的局部执行环境中有一个变量 anotherColor 和一个函数 swapColors() ,但在这里可以访问全局上下文中的变量 color 。其它函数同理;

2.2 延长作用域链

虽然执行环境主要有全局环境和局部环境两种,但有其他方式来延长作用域链。某些语句会导致在作用域链前端临时添加一个变量对象,这个对象在代码执行后会被删除。通常在两种情况下会出现这个现象,即代码执行到下面任意一种情况时:

  • try / catch 语句的 catch 块;
  • with 语句;

这两种情况下,都会在作用域链前端添加一个变量对象。对 with 语句来说,会向作用域链前端添加指定的对象;对 catch 语句而言,则会创建一个新的变量对象,这个变量对象会包含要抛出的错误对象的声明。如下所示:

function buildUrl() {
    let qs = "?debug=true";
    with(location){
        let url = href + qs;
}
    return url;
}

这里, with 语句接收 location 对象,因此 location 会被添加到作用域链前端。buildUrl() 函数中定义了一个变量 qs 。当 with 语句中的代码引用变量 href 时,实际上引用的是location.href ,也就是自己变量对象的属性。在引用 qs 时,引用的则是定义在buildUrl() 中的那个变量,它位于函数环境的变量对象中;至于with语句内部,则定义了一个url的变量,因而url变成函数执行环境的一部分,可以作为函数的值被返回;

2.3 没有块级作用域

if(true){
    var color = 'red'
}
console.log(color) // red

这里我们很疑惑,这个color在{}中,不应该是局部变量吗?为什么在全局中也能够输出;

解释:在这里if语句声明的变量将会添加到当前的执行环境(即全局环境),使用for语句也是一样;

for(var i = 0;i < 5;i++){
   console.log('i')
}
console.log(i) // 5

声明变量

使用var声明的变量会被自动添加到最接近的环境中,在函数内部声明,最接近的环境就是函数的局部环境;在with语句中,最接近的环境就是函数环境;如果没有使用var声明变量,那么就会自动添加到全局环境中;

function test(a,b){
    var sum = a + b
    return sum
}
console.log(test(10,20)) // 30
console.log(sum) // ReferenceError: sum is not defined

这里原因就不做过多解释了,但是如果我们在该函数内部省略var,直接声明sum,那么在函数外部也是可以输出sum的,因为此时他就是一个全局变量;

在JavaScript中,不声明而直接初始化变量是一种错误做法;

三、垃圾回收

3.1 垃圾回收机制

JavaScript 是使用垃圾回收的语言,也就是说执行环境负责在代码执行时管理内存。JavaScript 通过自动内存管理实现内存分配和闲置资源回收。

  • 基本过程:确定某个变量不会再使用,然后释放它占用的内存。

这个过程是周期性的,即垃圾回收程序每隔一定时间就会自动运行。垃圾回收过程是一个近似且不完美的方案,因为某块内存是否还有用,属于“不可判定的”问题,意味着靠算法是解决不了的。

3.2 性能问题

垃圾回收程序会周期性运行,如果内存中分配了很多变量,则可能造成性能损失,因此垃圾回收的时间调度很重要。尤其是在内存有限的移动设备上,垃圾回收有可能会明显拖慢渲染的速度和帧速率。

现代垃圾回收程序会基于对 JavaScript 运行时环境的探测来决定何时运行。探测机制因引擎而异,但基本上都是根据已分配对象的大小和数量来判断的。

由于调度垃圾回收程序方面的问题会导致性能下降,它的策略是根据分配数,比如分配了 256 个变量、4096 个对象/数组字面量和数组槽位(slot),或者 64KB 字符串。只要满足其中某个条件,垃圾回收程序就会运行。

这样实现的问题在于,分配那么多变量的脚本,很可能在其整个生命周期内始终需要那么多变量,结果就会导致垃圾回收程序过于频繁地运行。

由于对性能的严重影响,IE7最终更新了垃圾回收程序。IE7 发布后,JavaScript 引擎的垃圾回收程序被调优为动态改变分配变量、字面量或数组槽位等会触发垃圾回收的阈值。IE7 的起始阈值都与 IE6 的相同。如果垃圾回收程序回收的内存不到已分配的 15%,这些变量、字面量或数组槽位的阈值就会翻倍。如果有一次回收的内存达到已分配的 85%,则阈值重置为默认值。这么一个简单的修改,极大地提升了重度依赖 JavaScript 的网页在浏览器中的性能。

3.3 管理内存

为什么需要管理内存?

在使用垃圾回收的编程环境中,JavaScript 运行在一个内存管理与垃圾回收都很特殊的环境。分配给浏览器的内存通常比分配给桌面软件的要少很多,分配给移动浏览器的就更少了。这更多出于安全考虑而不是别的,就是为了避免运行大量 JavaScript 的网页耗尽系统内存而导致操作系统崩溃。这个内存限制不仅影响变量分配,也影响调用栈以及能够同时在一个线程中执行的语句数量。

接触引用

将内存占用量保持在一个较小的值可以让页面性能更好。优化内存占用的最佳手段就是保证在执行代码时只保存必要的数据。如果数据不再必要,那么把它设置为 null ,从而释放其引用。

局部变量在超出作用域后会被自动解除引用,如下所示:

function createPerson(name){
    let localPerson = new Object();
    localPerson.name = name;
    return localPerson;
}
let globalPerson = createPerson("Nicholas"); // 解除 globalPerson 对值的引用
globalPerson = null;

在上面的代码中,变量 globalPerson 保存着 createPerson() 函数调用返回的值。在 createPerson()内部, localPerson 创建了一个对象并给它添加了一个 name 属性。然后, localPerson 作为函数值被返回,并被赋值给 globalPerson 。localPerson 在 createPerson() 执行完成超出执行环境后会自动被解除引用,不需要显式处理。但 globalPerson 是一个全局变量,应该在不再需要时手动解除其引用,最后一行就是这么做的。不过要注意,解除对一个值的引用并不会自动导致相关内存被回收。解除引用的关键在于确保相关的值已经不在执行环境里了,因此它在下次垃圾回收时会被回收。

CSS样式更改——裁剪、Z-Index、清除、改变元素的特性

前言

上篇文章主要介绍了CSS样式更改篇中的框模型、定位、浮动、溢出基础知识,这篇文章主要分享CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识,一起来看看吧。

1.裁剪Clip

对元素某块区域就行剪切

img{
   clip:rect(23px,14px,45px,54px)
}
rect (top, right, bottom, left)  设置元素的形状
auto 不应用任何剪裁

2.Z-Index

设置元素的堆叠顺序

div{
z-index:1
}
p{
z-index:10
}
a{
z-index:-1
}
z-index 值越大,所在的元素越靠前显示

3.清除Clear

专门用来清除浮动

div{
  clear:both
}
left   清除左侧浮动
right  清除右侧浮动
both   清除左右两侧浮动
none   允许浮动

4.改变元素的特性Display

互相调换元素之间的特性

div{
    display:inline
}
none                元素不会被显示。
block                元素将显示为块级元素,此元素前后会带有换行符。
inline               元素将被显示为内联元素,元素前后没有换行符。
inline-block         行内块元素
list-item            元素会作为列表显示。
run-in               元素会根据上下文作为块级元素或内联元素显示。
table                元素会作为块级表格来显示,表格前后带有换行符。
inline-table         元素会作为内联表格来显示,表格前后没有换行符。
table-row-group       元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group    元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group    元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row             元素会作为一个表格行显示(类似 <tr>)。
table-column-group    元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column          元素会作为一个单元格列显示(类似 <col>)
table-cell            元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption         元素会作为一个表格标题显示(类似 <caption>)

此时的块级元素div就有了内联元素的特性了。
参考文档:W3C官方文档(CSS篇)

总结

这篇文章主要介绍了CSS样式更改篇中的裁剪、Z-Index、清除、改变元素的特性,希望让大家对CSS样式有个简单的认识和了解。
想要学习更多,请前往Python爬虫与数据挖掘专用网站:http://pdcfighting.com/

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你用jquery mobile设计颜色拾取器

【一、项目背景】

现实生活中,我们经常会遇到配色的问题,这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。

我们可以通过 jquery mobile去设计颜色的拾取器,得到我们想要的颜色值。同时可以验证RGB表的颜色值。

 

【二、项目准备】

框架:jquery mobile

软件:Dreamweaver

1、去官网 jQuerymobile.com 下载jquery mobile。

2、在你的网页中添加 jQuery Mobile

你可以通过以下几种方式将jQuery Mobile添加到你的网页中:

  • 从 CDN 中加载 jQuery Mobile (推荐)。
  • 从jQuerymobile.com 下载 jQuery Mobile库。

3、导入jQuery Mobile

<link href="jquery.mobile/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.mobile/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.4.5.js"></script>

 

【三、项目目标】

1、滑动滑块将对应的颜色显示在页面。

2、实现输入框,输入对应的RBG值,将结果显示在页面上。

 

【四、项目实现】

1、创建三层div块。(头部,中部,尾部)。

<body>
<div data-role="page" ">
    <div data-role="header">
        <h1>拾色器</h1>
    </div>
    <div data-role="content" class="color"> </div>
    <div data-role="footer" data-position="fixed">
       
    </div>
</div>
</body>

头部显示文字,中部颜色显示区域,尾部显示滑动条。

2、创建一个表单(用三个input来分别存放RGB这三种颜色)。

<form>
     <input name="red" id="red" min="0" max="255" value="0" type="range" " />
     <input name="green" id="green" min="0" max="255" value="0" type="range"" />
     <input name="blue" id="blue" min="0" max="255" value="0" type="range"  />
</form>

3、添加CSS样式

<style type="text/css">
.color {
    height: 100%;
    min-height: 400px;
}
</style>

4、添加 JS

1) 定义(set_color()方法)获取相对于颜色的id属性。

<script>
function set_color(){
    var red = $("#red").val();        //获取红色数值
    var green = $("#green").val();        //获取绿色数值
    var blue =$("#blue").val();        //获取蓝色数值
}
</script>

2)生成rgb表示的颜色字符串。

var color = "RGB("+red+","+green+","+blue+")";  //生成rgb表示的颜色字符串

3)设计内容框背景色。

$(".color").css("background-color",color);       //设计内容框背景色

5、调用set_color()。

<input name="red" id="red" min="0" max="255" value="0" type="range" onchange="set_color();" />
<input name="green" id="green" min="0" max="255" value="0" type="range" onchange="set_color();" />
<input name="blue" id="blue" min="0" max="255" value="0" type="range" onchange="set_color();" />

 

【五、效果展示】

1、点击运行。

2、点击f12进入开发者模式,点击蓝色框框切换手机模式运行。

3、滑动任意一条滑动条。得到想要的颜色。

4、手动输入RGB(0-255)值,得到相对应的颜色,如下图所示。

 

【六、总结】

1、使更多的人去了解jQuery Mobile, jQuery可以快速找到文档中的html元素,并对其进行操作,如隐藏、显示、改变样式…”。

2、本项目主要学习了input标签(类型:滑动条)如何与js绑定,获取事件响应。

3、颜色拾取器项目中,随机产生颜色这个难点进行了有效的分析,并提供解决方案。

4、按照操作步骤,自己尝试去做。自己实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

5、需要本文源码的小伙伴,后台回复“颜色拾取”四个字,即可获取。

****看完本文有收获?请转发分享给更多的人****

IT共享之家

入群请在微信后台回复【入群】

—————— End ——————

往期精彩文章推荐:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

/1 前言/

selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样,是爬复杂动态网页的必备工具。支持的浏览器包括IE,Mozilla Firefox,Safari,Google Chrome,Opera等。

这里分两个场景,给大家介绍Selenium爬动态网页小技巧。

/2 场景一:替换日期控件值/

以12306网站为例,如下图所示,按照正常的方法,我们首先要定位到时间元素,然后调用selenium的click()方法进行点击。

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

这种操作也是可行的。但是,过了一段时间,我们再次运行自动化代码的时候,就会发现功能运行不正常。因为日期更改后,日历控件布局发生了变化,而且操作起来很麻烦。

我们先看一下日期框的元素,如下图所示:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

重点看一下value=‘text’,这种属性值可以通过JavaScript来改变,三行代码就能解决这个问题,如下图所示:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

第一行是要输入的日期,第二行是JavaScript代码,“documen.getElementById”是通过HTML的“id”定位元素,通过改变该元素的“value”实现值的变化。

/3 场景二:动态网页自动下拉/

一些复杂的动态网页需要下拉才能把元素显示完全,例如腾讯视频主页,如下图所示:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

如果需要自动爬取这类动态网页,我们同样可以执行JavasScript的方法来实现,用5行代码就可以连续滑动网页,将动态网页元素全部展示出来,代码如下图所示:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

小编这里采取的分步下拉的方法,每次滚动1/10,“window.scrollTo”为向下滑动的命令,“document.body.clientHeight”为整个窗口的高度,“h=(i/10)”为每次滑动的高度。

效果演示如下:

/4 结语/

将JavaScript应用到selenium中可以帮我们解决很多问题,这里举两个小例子只是抛砖引玉,希望大家以后遇到selenium不好解决的问题时可以考虑在JavaScript身上寻找突破。

欢迎大家积极尝试,消耗在家的无聊时间。本文涉及的代码都上传到了github地址上,后台回复“selenium”这个单词即可获取代码。

——————— End ———————

往期精彩文章推荐:

看完本文有收获?请转发分享给更多的人

Python爬虫与数据挖掘

入群请在微信后台回复【入群】

在公众号后台回复下列关键词可以免费获取相应的学习资料:

Python、网络爬虫 、书籍、数据分析、机器学习、数据结构、

大数据、服务器、Spark、Redis、C++、C、php、

mysql、java、Android、面试题、课堂、其他