zoukankan      html  css  js  c++  java
  • 第15周之javascript学习

    1、浏览器本身是javascript的解释器。

    2、JS代码需要放置在<body>标签内部的最下面,避免因加载js代码影响其他样式的展示。

         JS代码存在形式有两种:

     (1)将js代码写在一个js文件中,通过文件路径来调用

    <script src='js文件路径'> </script>

        (2)将js代码写到script里面

      alert(123);执行js代码时,弹窗显示123

    <script type="text/javascript"> 
      //javascript代码
      alert(123);
    </script>

    3、注释

    //  单行注释

    /*   */  多行注释

    调试代码:可以在html中调试代码;也可以在浏览器页面控制台临时调试。

    4、变量

    name="wu"    //全局变量
    var name="wu" //局部变量

    如果在函数中定义一个局部变量,也需要使用var来定义;否则定义的就是全局变量,会将函数外的全局变量覆盖。

    5、基本数据类型

    (1)数字:

    parseInt();将某值转换成数字
    <body>
        <h1>sadf</h1>
        <script>
            age = "18";
            i = parseInt(age);     //将年龄的字符串转换为数字
    </script> </body>

    执行页面,页面只显示sadf;

    打开控制台,点击回车,如下:

    (2)字符串:

    name.chartAt(索引位置)
    name.substring(起始位置,结束位置),包括起始位置,不包括结束位置
    name.lenght    获取当前字符串长度
    <body>
        <h1>sadf</h1>
        <script>
            name = 'erixs';
     </script>

    执行结果如下:

    (3)定时器:

      a.先来一个简单的定时器:

    <body>
        <script>
            setInterval("alert(123);", 5000);
        </script>
    </body>

    每隔5s界面会弹出一个显示“123”的弹窗,如下:

      b.也可以使一个函数每隔一段时间执行一次:

    <body>
        <script>
            function f1(){
                console.log(1);   //在控制台打印
            }
            setInterval("f1();", 2000);    //f1();,执行这个函数
        </script>
    </body>

    使控制台每隔2秒打印1,执行结果如下(1的次数每增加一次,就说明函数执行一次):

      c.可以利用定时器来跑一个走马灯的案例,使执行结果滚动起来
    先来一个简单的页面显示例子,然后在页面控制台调试代码:
    <body>
        <div id="i1">欢迎报考太原理工大学</div>
        <script></script>
    </body>

    控制台调试代码如下:

    如果一直这样将第一个字符串放到最后,速度快一点的话,字符串就滚动起来了。

    那么接下来就在html中写入了:

    <body>
        <div id="i1">欢迎报考太原理工大学</div>
        <script>
            function func(){
            var tag=document.getElementById('i1')    // 根据ID获取指定标签的内容,定义局部变量接收
            var content=tag.innerText;                // 获取标签内部的内容
            var f=content.charAt(0)
            var l=content.substring(1,content.length)
            var new_content=l+f
            tag.innerText=new_content
            }
            setInterval('func()',500)    // 赋值
        </script>
    </body>

    这时发现显示的字符串滚动了起来。

    (4)布尔类型:

    布尔类型在js中开头字母是小写

    (5)字典

    a = {'k1':'v1','k2':'v2'}

    (6)数组(python中所说的列表)

    a = [11,22,33]

    有一个a.splice方法需要注意一下

    a.splice(1,1,99);第一个参数:是起始位置;第二个参数:删除个数;第三个参数:插入数值; 删除个数为0的话,就是在某个位置直接插入数值;插入数值为空,则是只删除

    6、循环:

    (1)支持字典与数组的循环:

    当循环元素是索引时,局部变量为item,支持数组与字典

    (2)不支持字典的循环:

    当循环元素是数字时,局部变量为i,支持数组,不支持字典

    因为字典的key无序,所以这种循环不适用于字典

    7、条件语句:

           if(条件){
            
            }else if(条件){
                
            }else if(条件){
                
            }else{
                
            }
            
            ==   值相等
            ===  值和类型都相等
            &&   and
            ||   or

    8、函数的定义:

    function 函数名(形参){
    
    }

    9、DOM选择器

    1、找到标签
            获取单个元素        document.getElementById('i1')
            获取多个元素(列表)document.getElementsByTagName('div')
            获取多个元素(列表)document.getElementsByClassName('c1')
            a. 直接找
                document.getElementById             根据ID获取一个标签
                document.getElementsByName          根据name属性获取标签集合
                document.getElementsByClassName     根据class属性获取标签集合
                document.getElementsByTagName       根据标签名获取标签集合 
            b. 间接
                tag = document.getElementById('i1')         
                parentElement           // 父节点标签元素
                children                // 所有子标签
                firstElementChild       // 第一个子标签元素
                lastElementChild        // 最后一个子标签元素
                nextElementtSibling     // 下一个兄弟标签元素
                previousElementSibling  // 上一个兄弟标签元素            
        2、操作标签  
            a. innerText
                获取标签中的文本内容
                标签.innerText
       
                对标签内部文本进行重新赋值
                标签.innerText = ""
                
            b. className
                tag.className =》 直接整体做操作
                tag.classList.add('样式名')   添加指定样式
                tag.classList.remove('样式名')   删除指定样式
        
                PS:
                    <div onclick='func();'>点我</div>
                    <script>
                        function func(){
                        }         
                    </script>

    (1)直接选择器:直接找到想要的东西

    代码如下:

    <body>
        <div id="i1">我是i1</div>
        <a>abcd</a>
        <a>909</a>
        <a>cvbnmlk</a>
    </body>

    直接选择器调试代码如下:

     (2)间接选择器,间接找到想要的东西

    代码实例如下:

    <body>
        <div>
            <div></div>
            <div>
                c1
            </div>
        </div>
        <div>
            <div></div>
            <div id="i1">
                c2
            </div>
        </div>
        <div>
            <div></div>
            <div>
                c3
            </div>
        </div>
    </body>

    执行结果如下:

    (3)以间接选择器的代码为例,对样式做操作

  • 相关阅读:
    css设置兼容的透明样式
    mybatis 使用oracle merge into 语句踩坑实录
    eclipse导入SVN上的Maven多模块项目
    jquery.form插件中动态修改表单数据
    java的几种对象(po,dto,dao等)
    redis面试总结
    前段面试准备
    查询各科成绩最好的学生
    Github访问慢解决办法
    该文件有程序在使用
  • 原文地址:https://www.cnblogs.com/wuxiaoru/p/12397846.html
Copyright © 2011-2022 走看看