初识js（第一篇）

Posted 2021-01-01 冉庆之

初识javascript

js是前端中作交互控制的语言，有了它，我们的前端页面才能“活”起来。学好这么语言显得非常重要，但是存在一定难度，所以一定要认真学习，充满耐心。

js书写规范

1.严格区分大小写
2.每一行完整的语句要用 ;
3.代码要缩进
4.js必须用半角符号

注册事件

document.getElementById获取div的id，点击发生事件

document.getElementById(‘box‘).onclick = function(){
    this.innerhtml = "<h1>this is innerhtml<h1>"
}

onmouseenter  onmouseover 鼠标划入
onmouseleave  onmouseout 鼠标划出（配对使用）

document.getElementById(‘box‘).onmouseover = function(){
            this.innerHTML = "hello!world"
        }
document.getElementById(‘box‘).onmouseout = function(){
            this.innerHTML = " "
        }

定义变量

var v_name = document.getElementById(‘id_name‘);

注：不能使用js关键字或保留字，可以使用字母、下划线、字符、数字，但不能用数字开头。

数据类型

1. number js的不区分整数和浮点数
2. string 字符串
3. boolean true / false 布尔
4. object null 数组
5. function 函数
6. undefined 未定义

例：
var a = 123;
alert(typeof a)

写入函数

document.write("hello,world!");可解析html标签
windows.onload =  function(){
    document.write("写入最后，重新生成页面")；
}注：window.onload作用是放在文档流最后解析

获取对象

获取id
var obox = document.getElementById(‘box‘);
        obox.onclick = function(){
            alert(‘123‘)
        }
获取class
var obox = document.getElementsByClassName(‘box‘)[2];
        obox.onclick = function(){
            alert(‘456‘)
        }
获取标签
var obox = document.getElementsByTagName(‘div‘)[0];
        obox.onmouseover = function(){
            this.innerHTML = "<h1>test<h1>";
        }   
先获取父级ID，然后获取子级标签
        var obox = document.getElementById(‘box‘);
        var opx = obox.getElementsByClassName(‘op‘);
获取name,在input标签里使用
var names = document.getElementsById("user")[0];
        names.value = "hello";
更改id名称
        obox.id = "qwe";

js更改样式

<style type="text/css">
            *{margin:0;padding:0;}
            #box{
                width: 100px;
                height: 100px;
                background: green;              
            }
            .op{
                border:2px solid blue;
            }
</style>
        
<div id="box"></div>
    <button id="bn1">变换</button>
    <button id="bn2">还原</button>

    <script>
        var obox = document.getElementById(‘box‘);
        var onx1 = document.getElementById(‘bn1‘);
        var onx2 = document.getElementsById(‘bn2‘);
        onx1.onclick = function(){
            obox.className = "op";
        }
        onx2.onclick = function(){
            obox.className = "";
        }
    </script>

for循环

        for(var i=0;i<4;i++){
            alert(i)
        }//循环
        
for(var i=0;i<5;i++){
            if(i == 2){
                continue;//跳过继续下一个
            }
            alert(i);
        }

附：

sublime快捷语法：#box>.op*3
效果：

<div id="box">
        <div class="op"></div>
        <div class="op"></div>
        <div class="op"></div>
</div>

ul>li*5>a[herf="#"]{$}

<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
</ul>