美文网首页
JavaScript-1

JavaScript-1

作者: 昆仑草莽 | 来源:发表于2019-05-24 13:09 被阅读0次

    JavaScript的基本使用

    JavaScript原名liveScript, 是一门动态类型,弱类型基于原型的脚本语言,他主要是做:页面特效、前后交互、后台开发(node)。在书写上,他主要写在:Script 标签里、外部的 js 文件内。

    <head>
        <title>js基础</title>
        <style>
            .div-out{
                width: 300px;
                height: 400px;
                border:1px solid red;
            }
            .div-in{
                width: 100px;
                height: 50px;
                color: black;
                background-color: aqua;
            }
        </style>
    </head>
    <body>
    <div class="div-out">
        <p class="p1">
        属性:<input  type="text" placeholder="请输入CSS属性"/>
        </p>
        <p class="p1">
        属性值:<input  type="text" placeholder="请输入CSS属性值"/>
        </p>
        <button id="btu" >设置</button>
        <div class="div-in">
            <p id="p1">我就是我</p>
        </div>
    </div>
    <script src="test.js"></script> //外部引入
    <!--<script>--> //写在body底部
        <!--var inp = document.getElementsByTagName("input")-->
        <!--var btu = document.getElementById("btu")-->
        <!--var box = document.getElementsByClassName("div-in")-->
        <!--var a = document.getElementById("p1");-->
        <!--a.onmouseenter = function () {-->
            <!--a.innerHTML = "大家好"-->
            <!--a.style.color = "white"-->
        <!--}-->
        <!--a.onmouseleave = function () {-->
            <!--a.innerHTML = "我就是我"-->
            <!--a.style.color = "black"-->
        <!--}-->
        <!--btu.onclick = function () {-->
            <!--var inn = inp[0].value-->
            <!--var ins = inp[1].value-->
            <!--box[0].style[inn] = ins-->
        <!--}-->
    <!--</script>-->
    </body>
    </html>
    

    .js文件

    var inp = document.getElementsByTagName("input")
    var btu = document.getElementById("btu")
    var box = document.getElementsByClassName("div-in")
    var a = document.getElementById("p1");
    a.onmouseenter = function () {
        a.innerHTML = "大家好"
        a.style.color = "white"
    }
    a.onmouseleave = function () {
        a.innerHTML = "我就是我"
        a.style.color = "black"
    }
    btu.onclick = function () {
        var inn = inp[0].value
        var ins = inp[1].value
        box[0].style[inn] = ins
    }
    
    运行效果图:

    可以根据属性,和属性值的修改,来改变CSS样式。
    JS的一些注意事项:
    1、JS严格的区分大小写。
    2、每一行完整语句后面加分号 。
    3、变量名不能使用关键字和保留字。
    4、代码要缩进,保持可读性。

    修改元素属性:

    1、获取元素内容:

    var Demo = document.getElementsByTagName(""); //通过标签获取元素
    var Demo = document.getElementById(""); //通过ID获取元素
    var Demo = document.getElementsByClassName(""); //通过类获取元素
    var Demo = document.getElementsByName(""); //通过name获取元素
    var Demo = document.querySelector ("");  通过CSS选择器获取一个
    var Demo = document.querySelectorAll("");通过CSS选择器获取所有
    

    2、简单事件:JS基础事件

    参数 描述
    onclick 单击事件
    ondblclick 双击事件
    onmouseenter 鼠标滑入
    onmouseleave 鼠标划出
    onresize 窗口变化
    onchange 改变下拉框
    <head>
        <title>Title</title>
    </head>
    <body>
    
    <div id="div1" class="div321">
        <p class="p1">我是第一句话</p>
        <p class="p1">我是第二句话</p>
        <p name="p123">我是第三句话</p>
    </div>
    <select>
        <option value="1">111</option>
        <option value="2">222</option>
        <option value="3">333</option>
    </select>
    
    <script type="text/javascript">
        //通过ID获取元素
        var a = document.getElementById("div1");
        //通过class类名获取元素
         var a = document.getElementsByClassName("p1");
        console.log(a);
        //通过标签名获取元素
        var a = document.getElementsByTagName("p");
        //通过name属性名获取元素
        var a = document.getElementsByName("p123");
        //通过CSS选择器获取元素
        var a = document.querySelector("p");
        var a = document.querySelectorAll(".p1")[0];
        a[0].innerHTML = '123123'
        console.log(a[0].innerText);
        //单击事件
        a[0].onclick = function () {
            alert(123)
        }
        //双击事件
        a.ondblclick = function () {
            alert(123123)
        }
        //鼠标移入移出
        a.onmouseenter = function () {
            alert("我是划入")
        };
        a.onmouseleave = function () {
            alert("我是划出")
        }
        //窗口变化
        window.onresize = function () {
            console.log("我是窗口,我变了")
        }
        //下拉框改变
        var sel = document.getElementsByTagName("select")[0];
        sel.onchange = function () {
            console.log("下拉框变动了、、、")
        }
    </script>
    </body>
    </html>
    

    3、JS修改样式
    请注意:标签属性分为两种属性,合法属性和自定义属性。

    // 通过ID获取元素
    var box = document.getElementById("div1");
    // 通过获取到的元素对象修改CSS样式
    box.style.width = '200px';
    box.style.height = '200px';
    box.style.border = '1px solid red';
    // 第二种修改的方法
    box.style['color'] = 'red'
    
    // 操作标签属性|合法属性与自定义属性
    // 无则增有则改
    box.className = 'div123';
    // 查
    console.log(box.className);
    // 删
    box.removeAttribute("id");
    
    // 无则增有则改
    box.setAttribute('class','div_box');
    //查
    box.hasAttribute("class")
    

    4、数据类型:

    参数 描述
    string 字符串
    number 数字
    boolean 布尔
    ubdefined 未定义
    null 空值
    object 对象
    var name = 'apple';
    var age = 18;
    var a = true;
    var b;
    var c = null;
    var arr = [1,2,3,4,5];
    var dic = {'a':1,'b':2};
    
    console.log(typeof name);//string
    console.log(typeof age);//number
    console.log(typeof a);//boolean
    console.log(typeof b);//undefined
    console.log(typeof c);//object
    console.log(typeof arr);//object
    console.log(typeof dic);//object
    

    相关文章

      网友评论

          本文标题:JavaScript-1

          本文链接:https://www.haomeiwen.com/subject/jblgzqtx.html