zoukankan      html  css  js  c++  java
  • Day14 JavaScript

    区分:

    JavaScript和JAVA一点关系没有,是一门单独的语言。(浏览器就是JavaScript的解释器)

    JavaScript代码存在形式:

    #这些代码一般都是在<head></head>里边写的
    
    第一种是直接放在head里边
    <head>
    <style>CSS代码</style>
    <script>JavaScript代码</script>
    </head>


    第二种是利用脚本引入的方式
    <head>
    <script src="*.js">JavaScript代码</script>
    </head>

    网页解释器的代码是从上向下进行,如果要把<script>的代码写到<head>上面,有可能出现地址访问不到网页一直转圈的情况,所以我们可以先让代码先执行完,再执行scipt代码。

    也就是将<script>放在<body></body>里边的最后。

    同理,<style>也一样

    单行注释://

    多行注释:/*   */

    JavaScript基础:

      基本数据类型:

    数字

     字符串

    列表

    字典

    布尔类型

    条件语句

    for循环(学语言一般要按照这个顺序写)

    全局变量:

      name=“alex”

    局部变量:

      var name="alex"

    #声明变量一定要注意全局变量和局部变量的区别。

    数字:
    age=18;//表示创建了一个数字
    <再写JavaScript代码的时候,可以在浏览器的终端写F12(console)>
    
    字符串:
            a="alex";
            //取字符串
            a.charAt(1)
            //切片,取第几个到i-1的字符串
            a.substring(1,4)
            //字符串的长度
            a.length
            
    创建一个定时器
            //setInterval("执行的操作",多少毫秒)
            setInterval("alert(123);",5000)
            或者setInterval("f1()",5000)
            
    document.getElementById("li")         
            <div id="l1">欢迎老男孩莅临指导</div>
            <script>
            document.getElementById("li");   #根据ID来判断是哪个标签
            tag=document.getElementById("li");
            tag.innerText                    #看标签里面的文本
            </script>
    
    
            #跑马灯小练习
                <script>
                function func(){
                    //根据ID获取指定标签的内容
                    var tag=document.getElementById("l1");
                    //获取标签内部的内容
                    var content = tag.innerText;
                    
                    var f = content.charAT(0);
                    var l = content.substring(l,content.length);
                    var new_content = l + f ;
                    tag.innerText=new_content;
                }
    
                setInterval("func()",1000);
                </script>
                <div id="l1">欢迎老男孩莅临指导</div>
                
                
    布尔类型:
            小写的false或true
        
    
    数组:(列表)a=[11,22,33]
            obj.splice(起始位置,删除个数,插入什么数据)    插入,删除,或替换数字的元素
            obj.slice() 切片
            obj.join("分隔符")  在js中是列表的方法
            obj.concat(value)   拼接
            
            
    字典:
            a={'k1':'v1','k2':'v2'};
    
    
    for循环:
        第一种方式:循环时循环的是索引
            a=[11,22,33,44]
            for(var item in a ){
                console.log(a[item]);
            }
            #这里输出的是列表的索引
            
        第二种方式:
            for(var i=0;i<10;i++){
            }
            
            eg:
            a=[11,22,33,44]
            for(var i=0;i<a.length;i=i+1){
                console.log(a[item]);
            }
            //不支持字典的循环
            
            
    条件语句:
            if(条件){}
            else if(条件){}
            else{}
            
            
            ==值相等
            ===值和类型都相等
            &&  and
            ||  or

    JavaScript函数:

    函数:
            function 函数名(a,b,c){
                执行代码
            }

    Dom选择器:

    1,如何去找到标签        
    Dom直接选择器:
            1,找到标签
                #获取单个元素
                document.getElementById('id')
                整个html的id不可重复
                
                #获取多个元素
                document.getElementByTagName("div")
                或者
                document.getElementByClassName('class')
            
            
    Dom间接选择器:
            也就是说先找到一个标签,然后去找他的上级,下级,父级等标签
            tag = document.getElementById('id')
            
            parentElement           // 父节点标签元素
            children                // 所有子标签
            firstElementChild       // 第一个子标签元素
            lastElementChild        // 最后一个子标签元素
            nextElementtSibling     // 下一个兄弟标签元素
            previousElementSibling  // 上一个兄弟标签元素
            可以利用tag.方法来使用
            
            
    2,操作标签
            标签.innerText=""           #对标签内的元素重新赋值    
            标签.className=""            #改掉class的值
            标签.classList.add=""        #添加指定样式
            标签.classList.remove=""    #删除指定样式

    实现一个菜单切换的小例子模型:
      

    <div onclick='func()'>点我</div>
        <script>
            function func(){
            }
        </script>
  • 相关阅读:
    MySql不允许对同一张表同时进行查询和更新
    MysSql 显示不了中文、乱码问题
    SpringBoot参数访问
    那些年我看过的好文
    关于远程调试
    算法题
    Spring Boot 注解学习
    linux 设置ssh免密登录
    ORA各种错误
    listener.ora tnsnames.ora
  • 原文地址:https://www.cnblogs.com/sexiaoshuai/p/7680671.html
Copyright © 2011-2022 走看看