欢迎您访问365答案网,请分享给你的朋友!
生活常识 学习资料

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

时间:2023-06-01

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-词法分析实例

>>t1(1)function name(){}2727调用之前:active object1.形式参数AO.name =undefined AO.name =12.局部变量AO.name =undefined3.函数声明表达式AO.name =function()涉及优先级:函数声明表达式最高

        EG1-词法分析实例

>>t1();undefined词法分析:1、AO.name =undefined;2、AO.name =undefined;3、未生成函数表达式

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

操作内容:

        innerText-        仅文本

        innerHTML-        全部内容

oldboy 百度 ------------->>obj.innerText;"oldboy 百度">>obj.innerHTML;" oldboy 百度"

        value-       

                input标签-获取标签中的值

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

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

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

               textarea标签-获取标签中的值

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

        input标签的两个方法:

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

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

        标签属性操作:

                Attribute()-获取所有属性

                setAttribute()-创建属性

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

                removeAttribute()-删除属性

obj.removeAttribute('xxx');

        自动创建标签对象:

                每次创建一个标签;

                标签为P标签包含input标签;

        提交表单:

                通过input提交:input+submit

        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零

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

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

110 220 330

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

axcge

---------------------------------------------前端面试重点:-------------------------------------------------------

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

                false-冒泡模型        

                true-捕捉模型

Title #header{ background-color:red; width:300px; height:400px; } #content{ background-color:pink; width:150px; height:200px; }

上例中,false则先打印content,后打印header,冒泡;

                true则先打印header,后打印content,捕捉;

body标签内的所有属性样式全写在head标签中,称为“DOM零”操作!

若body标签内标签的所有动态属性,如onclock全写在script中,称为“相分离”!

Copyright © 2016-2020 www.365daan.com All Rights Reserved. 365答案网 版权所有 备案号:

部分内容来自互联网,版权归原作者所有,如有冒犯请联系我们,我们将在三个工作时内妥善处理。