Day55:js复习和扩展

Posted maple-shaw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Day55:js复习和扩展相关的知识,希望对你有一定的参考价值。

一、复习

1、js循环:

  条件循环(推荐方式)

  for (var i=0;i<5;i++){
  循环体
  }

  遍历循环:
  for (var i in 遍历对象){
  循环体
  }

2、DOM:

DOM 定义了访问和操作html文档的标准方法

访问(查找标签)

---- 直接查找
document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)

---- 导航属性
NodeElement.parentElement // 父节点标签元素
NodeElement.children // 所有子标签
NodeElement.firstElementChild // 第一个子标签元素
NodeElement.lastElementChild // 最后一个子标签元素
NodeElement.nextElementtSibling // 下一个兄弟标签元素
NodeElement.previousElementSibling // 上一个兄弟标签元素

操作:
  1 文本操作
  取值操作
  element.innerHTML (关于标签的操作)
  element.innerText (关于文本操作)
  赋值操作:
  element.innerHTML=""
  element.innerText=""

  2 属性操作 <div key1=value1 key2=value2>DIV</div>

  取属性值: (1)element.getAttribute(属性名)
  (2)element.属性名 (推荐)

  赋值操作: (1)element.setAttribute(属性名,属性值)
  (2)element.属性名=属性值

  针对class属性:
  (1) element.classlist.add("class值")
  (2) element.classlist.remove("class值")

  关于select标签:
  ele_select.options.length=0 清空操作
  ele_select.selectedIndex 选中option的索引值

  关于style属性:实现对标签的css操作:
  element.style.样式属性="值"

  3 节点操作

  -----添加标签

  生成一个标签:var ele_create=document.createElement("标签名")   // <p></p> <img>

  添加标签: 父标签.appendChild(添加标签对象)
  insertBefore

  -----删除节点: 父标签.removeChild(查找到的标签对象)

  -----替换节点:

  父标签.replaceChild(newnode,查找到的标签对象)

  ----- 拷贝一个节点

  .clone(true)
  

DOM:

两种绑定事件方式:

  方式1

  <script>
  function foo(self){
  alert(123)
  // self: <p onclick="foo(this)"></p>
  
  }
  </script>
  <p onclick="foo(this)"></p>

  方式2:

  一个标签对象.on事件=function(){
  alert(456)
  // this:绑定事件的标签对象
  }

具体事件:
  点击事件 onclick

  获取/失去焦点 onfocus onblur

  内容发生变化 onchange (selected)

  onmouse 与鼠标相关的事件

  提交事件:onsubmit

  加载事件:onload

二、JS扩展

 1、JS是作用域

作用域是javascript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。

任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

1. 全局作用域(Global Scope)

在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域:

(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域。

var name="yuan";

    function foo(){
        var age=23;
        function inner(){
            console.log(age);
        }

        inner();
    }

    console.log(name);    // yuan
    //console.log(age);   // Uncaught ReferenceError: age is not defined
    foo();                // 23
    inner();              // Uncaught ReferenceError: inner is not defined

(2)所有末定义直接赋值的变量自动声明为拥有全局作用域,例如:

var name="yuan";

    function foo(){
        age=23;

        var sex="male"
    }
    foo();
    console.log(age);   //  23
    console.log(sex);   // sex is not defined

变量blog拥有全局作用域,而sex在函数外部无法访问到。

(3)所有window对象的属性拥有全局作用域

一般情况下,window对象的内置属性都都拥有全局作用域,例如window.alert()、window.location、window.top等等。

2. 局部作用域(Local Scope)

和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所有在一些地方也会看到有人把这种作用域成为函数作用域.

如示例1中的age与inner都只有局部作用域。(js中if、for没有自己的作用域)。

2、作用域链(Scope Chain)

在JavaScript中,函数也是对象,实际上,JavaScript里一切都是对象。函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合,这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问。

示例演示:

//-----**********************例1*********************************

var s=12;
    function f(){
        console.log(s);
         var s=12;          // if s=12
        console.log(s)
    }
    f();

//-----**********************例2*********************************

var s=10;
function foo(){
  console.log(s);
  var s=5;
  console.log(s);
  function s(){console.log("ok")}// 函数的定于或声明是在词法分析时完成的,执行时已不再有任何操作

  console.log(s);
}

foo();

//-----***********************例3********************************

function bar(age) {

        console.log(age);
        var age = 99;
        var sex= \'male\';
        console.log(age);
        function age() {
            alert(123)
        };
        console.log(age);
        return 100;
}

result=bar(5);

//-----********************************************************

结果分析:

我相信大家一定会有想不到的结果,接下来我们就以最复杂的例3来分析整个过程。

当一个函数创建后,它的作用域链会被创建此函数的作用域中可访问的数据对象填充。在函数bar创建时,它的作用域链中会填入一个全局对象,该全局对象包含了所有全局变量,如下图所示:

解析到函数调用时,即bar(5),会生成一个active object的对象,该对象包含了函数的所有局部变量、命名参数、参数集合以及this,然后此对象会被推入作用域链的前端,当运行期上下文被销毁,活动对象也随之销毁。新的作用域链如下图所示:

过程解析:

function bar(age) {

        console.log(age);
        var age = 99;
        var sex="male";
        console.log(age);
        function age(){
            alert(123);
        } ;
        console.log(age);
        return 100;
}

result=bar(5);

一 词法分析过程(涉及参数,局部变量声明,函数声明表达式):
    1-1 、分析参数,有一个参数,形成一个 AO.age=undefine;
    1-2 、接收参数 AO.age=5;
    1-3 、分析变量声明,有一个 var age, 发现 AO 上面有一个 AO.age ,则不做任何处理
    1-4 、分析变量声明,有一个 var sex,形成一个 AO.sex=undefine;
    1-5 、分析函数声明,有一个 function age(){} 声明, 则把原有的 age 覆盖成 AO.age=function(){};
二 执行过程:
    2-1 、执行第一个 console.log(age) 时,当前的 AO.age 是一个函数,所以输出的一个函数
    2-2 、这句 var age=99; 是对不 AO.age 的属性赋值, AO.age=99 ,所以在第二个输出的age是 99;
    2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。

          注意:执行阶段:
                        function age(){
                            alert(123)
                        } ;

            不进行任何操作,将执行语句复制给age这部操作是在词法分析时,即运行前完成的。

 

以上是关于Day55:js复习和扩展的主要内容,如果未能解决你的问题,请参考以下文章

python学习_day55_前端基础之JS

CGBTN2107_DAY02复习

Relay.js 没有正确解析组合片段

2022暑期复习-Day9

2022暑期复习-Day9

2022暑期复习-Day9