2020-05-19

JavaScript在开中的基本操作小结

文章目录

1. js操作元素属性
1. 1.1. 通过js直接修改
2. 1.2. 定义button触发修改
2. 封闭函数
1. 2.1. 将闭包函数赋值给变量
3. jQuery
1. 3.1. jQuery加载

本篇主要基于JavaScript在开发中的常用操作进行小结。

后端框架篇指路：Django在开发中的基本操作小结

long long ago以前写的JavaScript基础，JavaScript基础学习，害，这篇可以说写得偏烂（所以我要放出来干嘛？（划掉）），以本篇为准。

在我的毕设里JavaScript的主要功能就是前后端数据的交互以及数据可视化，但是这篇里，我想把JavaScript写得尽量详细一些，会包含类型，各种使用，语法，执行这些，毕竟NLP干不下去准备跑路的时候还能转前端或者可视化不是吗！（划掉，理直气壮）

最后说一句，本篇侧重于jQuery。

js操作元素属性

本节不涉及jQuery

通过js直接修改

首先以最基础的一个html代码为例，给出初始化的方块颜色值：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js操作元素属性</title>
    <style type="text/css">
        #box1{
            width:100px;
            height:100px;
            background-color: red;
        }
        .box2{
            width:100px;
            height:100px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div class="box2"></div>
</body>
</html>

上述代码在浏览器中如下图所示：

下面需要通过js控制来分别修改两个框的颜色，js加载页面方法：window.onload。
可以看出，上面的两个框，box1的样式由id定义，box2的样式由class定义。
js获取id元素：document.getElementById
js获取class元素：document.getElementsByClassName
定义的元素加上style，就可修改对应的css元素，css元素中带有-的部分，修改为驼峰命名法即可。
所以，完整版的修改代码如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js操作元素属性</title>
    <style type="text/css">
        #box1{
            width:100px;
            height:100px;
            background-color: red;
        }
        .box2{
            width:100px;
            height:100px;
            background-color:blue;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oBox1=document.getElementById('box1');
            oBox1.style.backgroundColor='yellow';
            var oBox2=document.getElementsByClassName('box2');
            oBox2[0].style.backgroundColor='red';
        }
    </script>
</head>
<body>
    <div id="box1"></div>
    <div class="box2"></div>
</body>
</html>

注意，通过class获取的元素，要注意标明取的是第一个class，否则会报错，修改后的结果如下：

定义button触发修改

同理，仍然初始化两个高和宽都为100px的盒子。
定义两个切换按钮，按钮1，box1变黄色，按钮2，box2变绿色。

js需要注意的一点是，经由var定义的变量，函数的操作可以直接赋值过去。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-Button</title>
    <style type="text/css">
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oBtn1=document.getElementById('btn1');
            var oBtn2=document.getElementById('btn2');

            oBtn1.onclick=btn01;
            oBtn2.onclick=btn02;
        }
        function btn01(){
            var oBox1=document.getElementById('box1');
            oBox1.style.backgroundColor='yellow';
        }
        function btn02(){
            var oBox2=document.getElementById('box2');
            oBox2.style.backgroundColor='green';
        }
    </script>
</head>
<body>
    <input type="button" value="切换1" id="btn1">
    <input type="button" value="切换2" id="btn2">
    <div>
        <div id="box1"></div>
        <div id="box2"></div>
    </div>
</body>
</html>

原页面：

切换后：

封闭函数

js封闭函数的定义：(function(){…})();
如下代码所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js封闭函数</title>
    <script type="text/javascript">
        (function(){
            var str="啦啦啦啦啦啦~";
            alert(str);
        })();
    </script>
</head>
<body>
    
</body>
</html>

运行结果：

封闭函数的其他写法：
写法一：

!function(){
	var str="啦啦啦啦啦啦啦~";
	alert(str);
}();

写法二：

~function(){
	var str="啦啦啦啦啦啦啦~";
	alert(str);
}();

将闭包函数赋值给变量

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包的用途</title>
    <script type="text/javascript">
        var count=(function(){
            var a=1;
            function test(){
                a+=1;
                return a;
            }
            return test;
        })();
        alert(count());
        alert(count());
    </script>
</head>
<body>
    
</body>
</html>

jQuery

jQuery加载

和上述原生js的引用存在一定区别，使用jQuery需要引入外部文件，可以通过src的方式引入。

1	<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>

jQuery和原生js的区别，害，就是基本的一个美刀符号$，取出某个元素下面的内容并赋值给变量：$(‘#div1’)：
#：id名称；
.：class名称.

完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery加载</title>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            var $div=$('#div1');
            alert('jquery弹出的'+$div);
        })
    </script>
</head>
<body>
    <div id="div1">这是一个div</div>
</body>
</html>

Klaus's Blog

MIA SAN MIA