day16 js+dom

Posted 2020-09-06

图标网站 http://fontawesome.io/icon

<i class="fa fa-sort" aria-hidden="true"></i>

3.21

函数

   匿名函数

   自执行函数  创建函数并自动执行

     （function（arg）{  形参

                    console.log(arg);

               }）（1） 实参

序列化  字符串变数

   JSON.stringify()  序列化  从一个对象解析出字符串

   JSON.parse()      反序化  字符串中解析出json对象

转义

- encodeURI( )                   URI中的转义字符

- decodeURI( )                   URl中未转义的字符

     将数据经过转义后，保存在cookie

val = eval(表达式)

时间

     var d = new  Date()

     d.getMinutes()

     d.setMinutes()     

作用域

作用域为可访问变量，对象，函数的集合。

javascript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

1. 以函数作为作用域

2. 函数的作用域在函数未被调用之前，就已经创建

3. 函数的作用域 存在 作用域链，并且也是在被调用之前创建。。先找自己的，自己没有找上一层，没有再找外层。

4. 函数内的局部变量会提前声明，不进行赋值

 function func() {

     var xo = ‘hequan‘;

     function inner() {

         console.log(xo);

     }

     return inner;

 }

var ret = func()

ret()

    hequan

 function func() {

     console.log(xo);

     var xo = "hequan";

     }

func()

     undefined

面向对象

function foo(n) {

    this.name=n;

    this.sayName = function () {

        console.log(this.name)

    }

}

var obj1 = new foo("hq")

obj1.name

obj1.sayName()

     原形：

function  Foo(n) {

    this.name = n;

}

Foo.prototype = {

    ‘sayName‘:function () {

        console.log(this.name)

    }

}

obj1 = new Foo(‘we‘);

obj1.sayName()

查找

     直接查找

     var obj = document.getElementById(‘I1‘)

     间接查找

     innerText    文本

     innerhtml    全内容

     obj.value   获取值

     样式操作

     .className  

     .classList.add  .remove

     .style.color 

     

     属性操作

     obj.setAttribute("属性"，"值")

     创建标签 并添加到HTML

           字符串

           insertAdjacentHTML("beforeEnd",obj)

           

           对象的方式

              document.createElement(‘div‘)

     提交表单

          document.geElementById(‘form‘).submit()

   

     其他

console.log                 输出框

alert                       弹出框

confirm                     确认框  返回true false

// URL和刷新

location.href               获取URL

location.href = "url"       重定向

location.reload()           重新加载

// 定时器

setInterval                 多次定时器

clearInterval               清除多次定时器

setTimeout                  单次定时器

clearTimeout                清除单次定时器

     事件

          onclick,onblur,onfocus

          

document.getElementById             根据ID获取一个标签

document.getElementsByName          根据name属性获取标签集合

document.getElementsByClassName     根据class属性获取标签集合

document.getElementsByTagName       根据标签名获取标签集合

绑定事件两种方式：

     直接绑定   onclick="xx()"

     先获取DOM对象，然后进行绑定

<div  id = ‘test‘><button type="button">Click Me!</button></div>

<script>

    var mydiv = document.getElementById(‘test‘)

    console.log(mydiv)

    mydiv.onclick = function () {

        console.log(‘asdw‘);

    }

</script>

this  当前触发事件的标签

第一种绑定方式

 onclick="Chang（this)"

function  Chang(self){

     //self 当前点击的标签

}

第二种绑定方式

<input   id=‘i1‘ type=‘button‘>

document.getElementById(‘i1‘).onclick = function(){

     //this  代之当前点击的标签

}

本文出自 “何全” 博客，请务必保留此出处http://hequan.blog.51cto.com/5701886/1909384