栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Python

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

Python 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

前端学习日志-4-JS、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-词法分析实例



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

调用之前:active object
1.形式参数
AO.name =undefined   AO.name =1
2.局部变量
AO.name =undefined
3.函数声明表达式
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


    

                通过任何标签提交:JS函数+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中,称为“相分离”!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/738495.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号