前端学习日志-4-JS、DOM后续

原创已于 2022-02-07 12:58:27 修改 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #p2p

于 2022-02-04 10:30:23 首次发布

这篇博客主要介绍了JavaScript中的函数类型，包括普通函数、匿名函数和自执行函数。详细阐述了JavaScript的序列化、转义以及URL处理方法。此外，讨论了JavaScript的作用域特性，特别是函数作用域的创建和作用域链。还深入解析了JavaScript函数的词法分析，包括活动对象的生成。接着，讲解了DOM选择器和操作，如innerText、innerHTML、value属性，以及如何使用DOM事件处理和表单提交。最后，提到了前端面试中重要的addEventListener方法，并对比了冒泡和捕捉模型。博客还提供了前端开发中DOM操作的实践示例。

JavaScript函数：

function func(arg){console.log(arg)} 普通函数

function(arg){console.log(arg)} 匿名函数

(function(arg){console.log(arg)})(1) 自执行函数

序列化：

JSON.stringify() 将对象转为字符串

JSON.parse() 将字符串转为对象类型

转义：

decodeURL() 转义URL中已转义字符

decodeURLComponent() 转义URL组件中所有字符

encodeURL() 转义URL中的字符

unescape() 给转义字符解码

URIError 由URL的编码和解码方抛出

eval：

python：
val =eval(表达式) 有返回值

val =eval("1+1")

exec(执行代码) 无返回值

JavaScript：

eval(表达式、代码)

时间处理：

python：time模块

JavaScript：Date类

var d = new Date()    #new必须加，d获取的是当前的时间对象
d.getMinutes()    #获取
d.setMinutes()    #设置

--------------------------作用域---------------------------------------------------------------------------------------

JavaScript：以函数作为作用域

function func(){
    if(1==1){
        var name ='javascript'
    }
    comsole.log(name)
}
func()
print(name)
#print(name)报错

python：以函数作为作用域

def func():
    if 1==1:
        name ='python';
    print(name);

func()
print(name)
#print(name)报错

其他语言(C、Java)：以代码块(花括号)作为作用域

public void Func(){
    if(1==1){
        string name ='java';
    }
    console.writeline(name);
}
Func()
#console.writeline(name)报错

由上，JavaScript作用域还存在以下特点：

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

函数的作用域存在作用域链，在函数未被调用之前已经被创建；

函数内部局部变量提前声明(var 变量)

------------------------JavaScript函数词法分析-----------------------------------------------

JavaScript函数在调用之前，会首先分析，生成活动对象“active object”-AO

词法分析与作用域的作用相同

词法分析过程：

1.形式参数

2.局部变量

3.函数声明表达式

EG1-词法分析实例

<script>
    function t1(){            #由词法分析
        console.log(name);   #直接上传name，此时name是AO.name，name从AO上找（声明表达式）
        var name =27;         
        console.log(name);    #name变量被赋值，覆盖声明表达式
        function name(){}
        console.log(name);     #name变量未变化
}
</script>

>>t1(1)
function name(){}
27
27

调用之前：active object
1.形式参数
AO.name =undefined   AO.name =1
2.局部变量
AO.name =undefined
3.函数声明表达式
AO.name =function()

涉及优先级：函数声明表达式最高

EG1-词法分析实例

<script>
    function t1(){
        console.log(name);
        var name ='aaa';
}
</script>

>>t1();
undefined

词法分析：
1. AO.name =undefined;
2. AO.name =undefined;
3. 未生成函数表达式

-----------------------------------------------------------DOM选择器

操作内容：

innerText- 仅文本

innerHTML- 全部内容

<body>
    <div id="i1">
        oldboy
        <a>百度</a>
    </div>
</body>
-------------
>>obj.innerText;
"oldboy 百度"

>>obj.innerHTML;
"
    oldboy
    <a>百度</a>
"

value-

input标签-获取标签中的值

<input type="text" id="i2"/>

>>obj =document.getElementById('i2');
>>obj.value
"python"

select标签-获取选中的value属性值

    <select id="i3">
        <option value="1">bj</option>
        <option value="2">sh</option>
    </select>

>>obj =document.getElementById('i3');
>>obj.value;
"1"

textarea标签-获取标签中的值

value编程实例-文本框内文字“请输入”随光标变化效果实现

    <div style="width:500px;margin:0 auto;">
        <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="输出内容">
    </div>
    <script>
        function Focus(){
            var tag =document.getElementById('i1');
            var new_tag =tag.value;
            if(new_tag =='输出内容'){
                tag.value ='';
            }
        }
        function Blur(){
            var tag =document.getElementById('i1');
            var new_tag =tag.value;
            if(new_tag ==''){
                tag.value ='输出内容';
            }
        }
    </script>

input标签的两个方法：

οnfοcus="Focus()";-光标指向则调用

οnblur="Blur()";-光标移除则调用

标签属性操作：

Attribute()-获取所有属性

setAttribute()-创建属性

obj.setAttribute('xxx','a');

removeAttribute()-删除属性

obj.removeAttribute('xxx');

自动创建标签对象：

每次创建一个标签；

标签为P标签包含input标签；

    <input type="button" onclick="AddE();" value="+" />
     <div id="i1">
         <input type="text"/>
     </div>

    <script>
        function AddE(){
            var tag =document.createElement('input');     #生成input标签
            tag.setAttribute('type','text');                #增加类型
            tag.style.fontSize ='20px';                     #增加属性

            var p =document.createElement('p');            #生成P标签
            p.appendChild(tag);                            #P标签内包含tag标签

            document.getElementById('i1').appendChild(p);    #创建P标签对象
        }
    </script>

提交表单：

通过input提交：input+submit

<body>
    <form action="http://www.baidu.com">
        <input type="text"/>
        <input type="submit" value="提交"/>
<body/>

通过任何标签提交：JS函数+submit

<body>
    <form id="f1" action="http://www.baidu.com">
        <a onclick="SubmitFrom()">提交</a>
    </form>
    <script>
        function SubmitFrom(){
            document.getElementById('f1').submit();
        }
    </script>
</body>

console.log()- 打印至控制台

alert()- 弹窗

confirm()- 弹窗确认信息（是则true，否则false）

location.href- 获取当前URL

location.href ='http://...'- 跳转至URL

location.reload() 等同于 location.href=location.href- 页面刷新

定时器：

setlnterval(function(){},间隔时间);- 定时器

clearlnterval()- 终止定时器

setTimeout(function(){},间隔时间);- 只执行一次

-------------DOM事件（/）

οnmοuseοver="“

οnmοuseοut="”

绑定事件的两种方式：

直接绑定标签，οnclick=“func(){}”- DOM零

<body>
    <table border="1" width="300px;">
        <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>1</td><td>0</td></tr>
        <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>2</td><td>2</td><td>0</td></tr>
        <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>3</td><td>3</td><td>0</td></tr>
    </table>
    <script>
        function t1(n){
            var mytrs =document.getElementsByTagName('tr')[n];
            mytrs.style.color ='red';
        }

        function t2(n){
            var mytrs =document.getElementsByTagName('tr')[n];
            mytrs.style.color ='';
        }
    </script>

#补充：backgroundcolor效果出不来，background-color则报错，查博客也没有找到解释，因此用color代替

先获取DOM对象，再绑定事件- DOM一

<body>
    <table border="" width="300px;">
        <tr><td>1</td><td>1</td><td>0</td></tr>
        <tr><td>2</td><td>2</td><td>0</td></tr>
        <tr><td>3</td><td>3</td><td>0</td></tr>
    </table>
    <script>
        var mytrs =document.getElementsByTagName('tr');
        var len =mytrs.length;
        for(var i=0;i<len;i++){
            mytrs[i].onmouseover =function(){
                this.style.color ='red';
            }
            mytrs[i].onmouseout =function(){
                this.style.color ='';
            }
        }
    </script>
</body>

先获取DOM对象，再绑定事件(多事件)- DOM二

<body>
    <div id="test">axcge</div>
    <script>
        var mydiv =document.getElementById('test');
        mydiv.addEventListener('click',function(){console.log('aaaa')},false);
        mydiv.addEventListener('click',function(){console.log('bbbb')},false);
    </script>
</body>

---------------------------------------------前端面试重点：-------------------------------------------------------

addEventListener('',function(){},false/true)

false-冒泡模型

true-捕捉模型

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #header{
            background-color:red;
            width:300px;
            height:400px;
        }
        #content{
            background-color:pink;
            width:150px;
            height:200px;
        }
    </style>
</head>
<body>
    <div id="header">
        <div id="content"></div>
    </div>
    <script>
        var myheader =document.getElementById('header');
        var mycontent =document.getElementById('content');
       mycontent.addEventListener('click',function(){console.log(content)},false/true);
        myheader.addEventListener('click',function(){console.log(header)},false/true);
    </script>
</body>

上例中，false则先打印content，后打印header，冒泡；

true则先打印header，后打印content，捕捉；