js初识

js初识

js起源

1.js最初是由布兰登·艾奇开发 LiveScript =》JavaScript

微软：发布了一个浏览器IE3.0，搭载了一个克隆版JScript

2.ECMA：欧洲计算机制造商协会 =》 制定标准

 ECMAScript1.0：（标准） =》  ECMAScript9.0

js的引入方式

A：行间引入
onclick ： 点击事件
alert(“警告信息”) : 在页面弹出警告信息
注意：相同引号不能嵌套
B：内嵌<script>
（1）script标签可以有任意多个，可以存放在任意的位置。
（2）一般放在head标签中或者body的末尾，建议加在body的末尾。
（3）执行顺序：从上到下执行，遇到script标签以后会暂停往下执行，先执行script标签中的内容等script标签中的内容执行完以后，才会继续往下执行。
C：外链引入

<script type src='地址'></script>

注意：

<script src="script.js">
        alert("兄弟，蹦迪吗？"); //如果引入的是外面的js文件，script标签中就不要再放其他的js代码，不会执行
</script>

js注释

单行注释：Ctrl+/
多行注释：Ctrl+Shift+/

js的应用

1、简单三部曲：
A:找到谁：document.getElementById(“id名”)
在文档中 获取 标签 通过 id

document.getElementById("id名")
document.getElementById("btn");
alert(document.getElementById("btn"));

B:添加什么事件：onclick
标签.事件

document.getElementById("btn").onclick

C:要做什么事情
标签.事件 = function (){ 要做的事情 }

document.getElementById("btn").onclick = function(){
        alert("小可爱，你好帅");
    }

2、js在head里要写window.onload（等文档和资源都加载完成后调用）。

<script>
        //window.onload :等文档和资源都加载完成后调用
        window.onload = function () {
            /*
             Cannot set property 'onclick' of null/of undefined
             标签错了
             */
            alert(document.getElementById("btn"));//null
            document.getElementById("btn").onclick = function(){
                alert("饿了...........");
            };
        }
        console.log("212");
</script>

2.变量 ：储存数据的容器。
声明变量：var 变量名 = 值
var a = 10;

变量的命名规则：
	A：只能以字母、_   、$开头
	B：不能使用关键字和保留字
	C：见名知意，遵循驼峰标识
	D：不要重名

（1）声明一个变量。

var a = 10;
alert(a);

（2）先声明，后赋值。

var b;
alert(b); //undefined  未初始化 声明了没有赋值
b = 10;
alert(b); // 10

（3）多个变量同时声明

var a,b,c,d;

（4）连等

var a = b = 20;

3.调试：看出值得多少，值的变化

alert(); 在页面弹，一次只能弹一个
console.log(); 在控制台打印

鼠标事件

//1.获取元素
    var oDiv = document.getElementById("box");

    //2.点击事件
    oDiv.onclick = function () {
        console.log("点击事件");
    }
    //3.onmousedown
    oDiv.onmousedown = function () {
        console.log("鼠标按下");
    }

    //4.onmouseup
    oDiv.onmouseup = function () {
        console.log("鼠标抬起");
    }

    //5.onmouseover
    oDiv.onmouseover = function () {
        console.log("鼠标移入");
    }

    //6.onmouseout
    oDiv.onmouseout = function () {
        console.log("鼠标移出");
    }

    //7.onmousemove
    oDiv.onmousemove = function () {
        console.log("鼠标移动");
    }
    //8.ondblclick
    oDiv.ondblclick = function () {
        console.log("双击");
    }
    //9.oncontextmenu
    oDiv.oncontextmenu = function () {
        alert("右击");
    }


    /*onclick : 点击事件
    onmouseover ： 鼠标移入 / onmouseenter
    onmouseout ： 鼠标移出 / onmouseleave
    onmousemove ： 鼠标移动
    onmousedown : 鼠标按下
    onmouseup : 鼠标抬起

    ondblclick ： 双击
    oncontextmenu : 右击*/

// onmouseover/onmouseout ：子元素可以触发父元素的事件（冒泡）
// onmouseenter/onmouseleave ：子元素不会触发父元素的事件

操作标签内容

/*
  1.操作标签内容：开始标签和结束标签中间的都是内容
   操作input标签内容：
     获取：标签.value
     设置：标签.value = 值
   操作闭合标签内容
     获取：var i = 标签.innerHTML
     设置：标签.innerHTML = 值
   特点：
        1.innerHTML会覆盖，后面的会覆盖前面
        2.可以识别标签
     innerText：不能识别标签
*/
//1.获取input的内容  标签.value
   var oIn = document.getElementById("in");
   var v = oIn.value;
   console.log(v);

//2.设置input的内容 标签.value = 值
   oIn.value = "666666";
   

操作标签属性

<!--
 操作标签属性 <div id="box" class="active"> id class
 获取：var c = 标签.属性名
 设置：标签.属性名 = 属性值

 特殊：class--标签.className
-->
 //1.获取标签
    var oDiv = document.getElementById("box");

    //2.获取var c = 标签.属性名
    var id = oDiv.id;
    console.log(id);

    var cl = oDiv.className




//1.获取标签
    var oImg = document.getElementById("img");
    var n = 1;
    //2.点击图片 切换图片
    oImg.onclick = function () {
        n++; //+1
        console.log(n);
        //标签.属性名 = 属性值  +连接
        oImg.src ="img/" +  n  +  ".jpg" ; //引号中的内容，原样输出
    }

操作标签样式

<!--
       样式：style标签中的
       获取：标签.style.属性名
       设置：标签.style.属性名 = 属性值
       注意：只设置，不获取

       特殊：js中不允许出现- font-size使用驼峰标识
    -->

cssText

var oDiv = document.getElementById("box");
    oDiv.onmouseover = function () {
        //操作class
        //oDiv.className = "active";
        oDiv.style.width = "200px";
        //相当于是一个style属性，设置cssText会覆盖掉之前行间的style属性
        oDiv.style.cssText ="width:200px;background:skyblue;font-size:26px;";
    }

    oDiv.onmouseout = function () {
        //oDiv.className = "";
        oDiv.style.cssText ="width:100px;background:orange;font-size:16px;";
    }