初见JavaScript

作者: Python野路子 | 来源:发表于2018-06-11 09:16 被阅读0次

初见JavaScript
初见javascript
初见
JavaScript-01
锋利的 jQuery | 第1章_认识 jQuery
javascript学习思维导图
javaScript 基础知识
JavaScript 基础
JS——Hoisting(提升)
随笔三十｜初见

初识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>

初见JavaScript
初识JavaScript JavaScript 一种脚本语言，是一种动态类型、弱类型（弱类型可以自动转换，不需要手...
初见javascript
一.js的输出 1.使用window.alert()弹出警告框。 2.使用document.write()方法将内...
初见
初见，曾经的自己初见，曾经的回忆初见，曾经的时光初见，曾经的生活初见，曾经的书籍初见，曾经的故人初见，...
JavaScript-01
A 什么是JavaScript JavaScript 定义JavaScript JavaScript基础语法常用...
锋利的 jQuery | 第1章_认识 jQuery
一、JavaScript和JavaScript库 JavaScript简介 JavaScript是Netscape...
javascript学习思维导图
JavaScript 数据类型 JavaScript 变量 Javascript 运算符 JavaScript 流...
javaScript 基础知识
javaScript 基础知识一 JavaScript概述 JavaScript概述 JavaScript是客户...
JavaScript 基础
JavaScript基础 JavaScript简介JavaScript对象 JavaScript简介为什么使用j...
JS——Hoisting(提升)
Javascript Hoisting的概念 Javascript Hoisting：In javascript,...
随笔三十｜初见
初见是前世未完的承诺初见是心灵给予的嘱托初见是夜夜想念的积淀初见是尚未耕耘的心田初见是...

初见JavaScript

初识JavaScript

js代码位置

script标签的位置：

写js代码需要注意什么？

注释

js里的系统弹窗代码

js里的打印

js获取元素及修改内容

独有标签的获取：

其他标签的获取

元素内容修改

事件

js操作元素的标签属性

控制元素的样式

案例

相关文章

初见JavaScript

初见javascript

初见

JavaScript-01

锋利的 jQuery | 第1章_认识 jQuery

javascript学习思维导图

javaScript 基础知识

JavaScript 基础

JS——Hoisting(提升)

随笔三十｜初见

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程