zoukankan      html  css  js  c++  java
  • 潭州课堂25班:Ph201805201 WEB 之 JS 第四课 (课堂笔记)

    JS 引入方式

    在 HTML 中写入

    写在 的标签里

    <script>

    </script>
    推荐 放在 </body> 结束之前

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
        <div class="box">你好同学</div>
    
    
    
        <script>
            var box=document.querySelector('.box');             //  获取对象 
            box.innerText='我好,';
        </script>
    </body>
    </html>
    

      

    导入 js 文件

    <script src="1.js"></script>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
        <div class="box">你好同学</div>
    
    
        <script src="1.js"></script>
        <script>
            var box=document.querySelector('.box');             //  获取对象
            box.innerText='我好,';
        </script>
    </body>
    </html>
    

      

    // 1.js
    
    var box=document.querySelector('.box');             //  获取对象
    box.style.color='red';
    


    获取对象

    获取对象

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                height: 30px;
                 200px;
                background: #525d68;
            }
        </style>
    </head>
    <body>
        <div>我就是我</div>
        <div id="box1">你就是你</div>
        <div class="box2">他就是他</div>
    
        <script>
            var box = document.getElementsByTagName('div') ;     //  通过标签获取对象
            console.log(box[0].innerText);
    
            var box1 = document.getElementById('box1');         //  通过 id 获取对象
            console.log(box1.innerText);
    
            var box2 = document.getElementsByClassName('box2');
            console.log(box2[0].innerText);
    
            // CSS 选择器
            var box3 = document.querySelector('div');
            console.log(box3.innerText);
    
            var box4 = document.querySelector('#box1');
            console.log(box4.innerText);
    
            var box5 = document.querySelector('.box2');
            console.log(box5.innerText);
    
            var box6 = document.querySelectorAll('div');        // querySelectorAll 拿到全部对象 用列表
            console.log(box6[0].innerText);
    
        </script>
    </body>
    </html>
    

      

     

    样式修改

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                height: 30px;
                 200px;
                background: yellow;
            }
            .test{
                font-size: 100px;
                color: gray;
            }
        </style>
    </head>
    <body>
        <div>你好同学</div>
    
        <script>
            //单个样式修改
            var box = document.getElementsByTagName('div')[0];
            // box.style.fontSize='50px';
            // box.style.color='red';
    
            //多个样式同时修改
            // box.style.cssText='height;300px; 200px; color:blue';
            // box.style.cssText=a+ ':' +b;  ==    box.style[0]=b;          // 用于函数中变量传参,
    
            // //赋值型
            box.className='test';
            
    
        </script>
    </body>
    </html>
    

      

     鼠标事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box{
                height: 30px;
                 100px;
                background: skyblue;
                line-height: 30px;
                text-align: center;
                cursor: pointer;            /*小手*/
            }
            .box1{
                height: 200px;
                 500px;
                background: gray;
                margin-top: 20px;
            }
            .box2{
                height: 200px;
                 500px;
                background: gray;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">点击事件</div>
        <div class="box1"></div>
        <div class="box2"></div>
    
        <script>
            // 鼠标单双 击 事件
            var box = document.getElementsByClassName('box')[0];
            box.onclick=function () {
                // console.log('单击')
                var im = document.getElementsByTagName('div')[1];
                im.style.background = "url('https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg')"
            };
            box.ondblclick=function () {
                console.log('双击')
            };
    // 鼠标移入移出 var box2 = document.getElementsByTagName('div')[2]; box2.onmouseenter = function(){ // 鼠标移入 box2.style.background = 'red'; }; box2.onmouseleave = function(){ // 鼠标移出 box2.style.background = 'yellow'; } </script> </body> </html>

      

    事件操作补充

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <select id="aa">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    
    
        <script>
            window.onresize = function (ev) {       // 窗口尺寸发生变化,触发
                console.log('123456879')
            };
    
            //下拉框事件
            var sel = document.getElementById('aa');
            sel.onchange = function () {            // 下拉框事件
                console.log('000000000000')
            };
        </script>
    </body>
    </html>
    

      

    属性操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="box">属性操作</div>
    
        <script>
            // 获取元素
            var box = document.getElementById('box');
    
            //操作合法属性 (增 删 改 查)
            //增
            box.className = 'test';
            //改
            box.className = 'aa';
            // 查
            console.log(box.className);
            //删
            box.removeAttribute('class');
    
            //操作自定义属性 (增 删 改 查)
            //增
            box.setAttribute('aa','bb')   ;          // <div id="box" aa="bb">属性操作</div>
            // 改
            box.setAttribute('cc','dd')   ;          // <div id="box" cc="dd">属性操作</div>
            // 查
            console.log(box.hasAttribute('cc'))
            // 删
            box.removeAttribute('cc');
        </script>
    </body>
    </html>
    

    数据类型

     查找数据类型

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    
        <script>
            var a=5;
            console.log(typeof  a);
    
            var b = 'aaa';
            console.log(typeof b);
    
            console.log(typeof false)
    
            var c;
            console.log(typeof c);          // 当 var 了一个变量,但没给其值,就是 undefined 数据类型
    
            //对象类型  数组
            var d = [1,3,2,4];
             console.log(typeof d);   //object
    
            //
            var  e={'k1':'v1', 'k2':'v2'};   //object
            console.log(typeof e);
    
    
        </script>
    </body>
    </html>
    

      

    
    
  • 相关阅读:
    Dockerfile + Nginx.conf文件记录(用于前端项目部署)
    Dockerfile文件记录(用于后端项目部署)
    结合docker发布后端项目(基于gradle包管理)的shell脚本
    结合docker发布前端项目(基于npm包管理)的shell脚本
    Docker+Nginx使用流程(笔记)
    AntDesign getFieldDecorator 获取自定义组件的值
    c++ primer 第五版第七章
    c++ primer 第五版第六章
    c++ primer 第五版第五章
    c++ Primer 第五版习题答案第四章
  • 原文地址:https://www.cnblogs.com/gdwz922/p/9411225.html
Copyright © 2011-2022 走看看