初见JavaScript

初识JavaScript

JavaScript 一种脚本语言，是一种动态类型、弱类型（弱类型可以自动转换，不需要手工。动态类型python可以做任何类型的变量）
JavaScript通常用来操作HTML页面的
html骨架(页面结构)，css是样式(元素大小、颜色、位置、隐藏或显示等)，js是行为(部分动画效果、页面与用户交互等)

js代码位置

JavaScript代码可以写在页面的script标签里面，或者单独的js文件里面，或者标签属性里面（不推荐）

写在页面的script标签里面

<script>
        alert(2);//弹窗  用来调试代码
        console.log(888);//打印到控制台 用来调试代码
</script>

写在外部.js后缀文件里面，通过script标签引入

<script src="5-js02.js">/*引入外部js文件*/</script>
# 注意：在引入js文件的script标签里面，一定不能再写js代码

#外部js文件5-js02.js
alert("我是外部6-js02.js文件");

script标签的位置：

一般script标签会被放在头部或尾部。头部就是<head>里面，尾部一般指<body>里。不同位置要注意加载顺序，如果没有什么特殊要求，通常放在body 结束之前。
如果script里面涉及到操作后面的元素，而script又非得放在前面的话，需要加上window.onload（一个页面中只能出现一次window.onload）

<head>
    <meta charset="UTF-8">
    <title>初识JavaScript</title>
    <script>
        alert("script写在head里面");
        //如果script里面涉及到操作后面的元素，而又非得把script放在前面的话，需要加上window.onload：
        window.onload = function(){
            alert("我是加上window.onload里面的"); //这里再写代码（意思是：当整个页面加载完成之后，再执行这里的代码）
        }//一个页面中只能出现一次window.onload
    </script>
</head>

html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面的效果的实现，是需要预先动态的加载一些js脚本，所以这些脚本应该放在<body>之前。其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效。就是因为这个，在dom没生成好时我就给它添加了方法，才导致这样。

写js代码需要注意什么？

注释里面是没有要求的
严格区分大小写
语句字符都是半角字符（字符串里面可以使用任意字符）
某些完整语句后面要写分号
代码要缩进，缩进要对齐
引号里面代表字符串，字符串是没有代码的功能的，所以不需要满足上述要求。

注释

多行注释 /* */
单行注释 //

js里的系统弹窗代码

alert("内容");

js里的打印

console.log(1);

js获取元素及修改内容

其实，要操作页面，就是操作标签，JS要操作标签，就要先获取标签

独有标签的获取：

document.title   document.title
document.body    document.body.innerHTML(会解析标签) 
                 document.body.innerText(不会会解析标签) 
document.head    document.head.innerHTML

其他标签的获取

通过id获取元素，document.getElementById("box");

        //获取的是确切的某个元素，可以直接操作这个元素
        var oBox = document.getElementById('box');
        console.log(oBox)
        oBox.innerHTML +="我是通过id获取来改变的"

通过class获取getElementsByClassName()（不兼容IE8及以下）

#获取的是一堆元素的集合，设置操作的时候要通过下标（索引、序号）拿到对应的某一个
        var oBox = document.getElementsByClassName("box");
        console.log(oBox);
        console.log(oBox.length);//长度
        oBox[0].innerHTML += "我是通过ClassName获取来改变的"; //即便长度为1也要用索引

通过标签名获取，getElementsByTagName()

      var oP = document.getElementsByTagName("p");
        console.log(oP.length);
        oP[1].innerHTML += "我我我";

通过选择器的写法获取元素：（不兼容IE7及以下）
.querySelector();
.querySelectorAll();
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

         //获取第一个对应的元素
        var oI = document.querySelector("#box1");
        oI.innerHTML +="ahhh"; //获取是第一个元素，只是一个而已，不需要用索引引用
        var oI2 = document.querySelectorAll("#box1");
        console.log(oI2.length); //2;
        oI2[1].innerHTML +="哈哈";

通过name获取

.getElementsByName();     #可返回带有指定名称的对象的集合。

注意： 除了ID获取前面必须是document之外，其他的方式，前面可以是某个元素，但不能是集合。

    <script>
        //注意： 除了ID获取前面必须是document之外，其他的方式，前面可以是某个元素（不能是集合)
        var oP = document.getElementsByTagName("p");
        console.log(oP);
        var oBox = document.getElementById("box");
        console.log(oBox);
        var oP1 = oBox.getElementsByTagName("p");//获取box下的元素
        console.log(oP1);
    </script>

元素内容修改

修改页面title信息

document.title = "我要把标题改成666";

修改别的标签的内容，得用innerHTML或者innerText

innerHTML    可以识别标签
innerText    不能识别标签

获取某个确切的元素,可以直接操作这个元素

document.getElementById("box").innerHTML = "吃惊！";

获取的是一堆元素的集合，设置操作时要通过下标（索引、序号）拿到对应的某一个再用

document.getElementsByClassName("box")[0].innerHTML = "美女";

对于form元素获取值

var text = document.getElementsByTagName("textarea");
console.log(text.value);

document.write()
在文档流关闭之前，给body部分新增内容,在文档流关闭之后，修改整个HTML的内容。

<script>
     /*
        document.write()
            在文档流关闭之前，给body部分新增内容
            在文档流关闭之后，修改整个html的内容
     */
        document.write("<em>在文档流关闭之前，给body部分新增内容</em>");
        window.onload = function () {
                document.write("<em>在文档流关闭之后，修改整个html的内容</em>"); //文档流关闭可以理解为body结束
            }

</script>

事件

用户的操作元素.事件 = 函数；
鼠标事件
onclick 左键单击
ondblclick 左键双击
onmouseenter 鼠标移入
onmouseleave 鼠标移出

<body>
    <div>hahah</div>
    <script>
        /*
       所谓事件，是指 JavaScript 捕获到用户的操作，并做出正确的响应。
       在事件函数里面，有一个关键字this，代表当前触发事件的这个元素
       事件：用户的操作
       元素.事件 = 函数；
       鼠标事件：
           左键单击 onclick
           左键双击 ondblclick
           鼠标移入 onmouseover/  onmouseenter ***
           鼠标移出 onmouseout/  onmouseleave ***
        */
        var oBox = document.getElementsByTagName("div");
        oBox[0].onclick = function () {
            console.log("我被点击了");
            this.innerHTML = "我被点击了";
        };
        oBox[0].onmouseenter = function(){
            console.log("我被移入了");
            this.innerHTML = "我被移入了";
        };
        oBox[0].onmouseleave = function() {
            console.log("我被移出了");
            this.innerHTML = "我被移出了";
        };
    </script>
</body>

js操作元素的标签属性

规范的标签属性：
. 符号直接操作(可读可写)
不规范（自定义）的标签属性：
- 获取 getAttribute
- 设置 setAttribute
- 移除 removeAttribute

<body>
    <a href="5-js事件05.html" id="box" class="box" target="_blank" tz="llp182">百度下</a>
    <script>
        /*
        js操作元素的标签属性：
            规范的标签属性：
                . 符号直接操作（可读可写）
            不规范（自定义）的标签属性：
                获取：.getAttribute
                设置：.setAttribute
                移除：.removeAttribute

          注意：
          所有的 路径、颜色 获取的结果不一定是你写的内容
          通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素
          自定义标签属性的操作方式，同样可以操作符合规范的标签属性
         */
        var oA = document.getElementById("box");
        // alert(oA.id); //可读
        // alert(oA.target);
        // alert(oA.className); //class属性  要用className
        // alert(oA.tz); //undefined 自定义标签直接.获取不到
        oA.id = "wrap";
        oA.target = "_self"; //可写
        oA.className = "";
        alert(oA.getAttribute("id"));
        alert(oA.getAttribute("tz"));
        oA.setAttribute("tz","py");
        oA.setAttribute("web","pc");
        oA.removeAttribute("target"); //自定义标签属性的操作方式，同样可以操作符合规范的标签属性
        oA.removeAttribute("class");
        alert(oA.href);

        /*添加，删除类名，也可一次性添加多个*/
        sliderLi[index].classList.add("show"); 
        sliderLi[index].classList.add("show","show1","show2"); 

        cycleLi[index].classList.remove("on"); 
        cycleLi[index].classList.remove("on","on1","on2"); 
    </script>
</body>

注意：所有的路径/颜色获取的结果不一定就是你写的内容
通过ID获取的元素赋值给变量后，假设修改了ID，这个变量还是表示这个元素
自定义标签属性的操作方式，同样可以操作符合规范的标签属性

控制元素的样式

行内样式标签属性：大部分情况下，js都是通过操作行内样式达到修改样式的目的，当我需要单个属性去修改的时候,我们一般都是直接 . 操作去修改元素的行内样式
操作复合属性时，要注意用驼峰写法（去掉-号，-号后面的第一个单词大写）

<body>
    <div id="box" class="box"></div>
    <script>
        //行内样式标签属性：大部分情况下，js都是通过行内样式来达到修改样式的目的
        // <div id="box" class="box" style="width: 100px;height: 100px;background: red;"> 类似用js操作这种形式；
        //当我们需要修改单个属性的时候，我们一般都是直接.操作去修改元素的行内样式
        var oBox = document.getElementById("box")
        // oBox.style.width = "300px";
        // oBox.style.height = "300px"
        // oBox.style.background = "red";
        //样式一多，代码就很多；而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建，都会增加浏览器的开销。
        oBox.style.cssText = "width:200px;height:200px;background:red"; //cssText 的本质就是设置 HTML 元素的 style 属性值。这样会有一个问题，会把原有的cssText清掉，比如原来的style中有’display:none;’，那么执行完上面的JS后，display就被删掉了。
        //可以利用累加，在前面添加一个分号（同样属性利用后来居上覆盖）来解决这个问题
        oBox.style.cssText += ";width:200px;height:200px;background:red";
        // 操作复合属性时，要注意用驼峰写法（去掉-号，-号后面的第一个单词大写）
        oBox.style.marginLeft = "10px"; //margin-left
        oBox.style["margin-top"] = "50px";
    </script>
</body>

案例

需求：
①打开时

image.png

②点击时

image.png

image.png
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业6</title>
    <style>
        div{
            width: 200px;
            height: 50px;
            background: yellow;
            border-radius:20px 20px 20px 20px;/*左上角，右上角，右下角，左下角*/
            margin: 50px auto; /*上下50px 左右auto*/
            text-align: center; /*水平居中*/
            line-height: 50px; /*行高使字垂直居中*/
            font-size: 14px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <script>
        var oDiv = document.getElementsByTagName("div");
        oDiv[0].onclick = function(){
            this.innerHTML = "我被点击了";
            this.style.color = "red";
            oDiv[1].innerHTML = "老大被点击了";
            oDiv[1].style.color = "blue";
            oDiv[2].innerHTML = "老大被点击了+1";
            oDiv[2].style.color = "blue";
        };
        oDiv[2].onclick = function(){
            this.innerHTML = "我被点击了";
            this.style.color = "red";
            oDiv[0].innerHTML = "小弟被点击了";
            oDiv[0].style.color = "blue";
            oDiv[1].innerHTML = "小弟被点击了+1";
            oDiv[1].style.color = "blue";
            oDiv[3].innerHTML = "<a href='http://www.baidu.com'>百度下</a>";
        };
    </script>
</body>
</html>

最后编辑于：2018.07.28 13:01:02

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,902评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 84,037评论 2赞 377
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,978评论 0赞 332
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,867评论 1赞 272
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,763评论 5赞 360
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,104评论 1赞 277
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,565评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,236评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,379评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,313评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,363评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,034评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,637评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,719评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,952评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,371评论 2赞 346
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,948评论 2赞 341