JavaScript

Posted Neroi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript相关的知识，希望对你有一定的参考价值。

javascript

html、CSS只能写出静态效果，JS可以制作动态效果

  • JavaScript，是一门编程语言，浏览器内置了JavaScript语言的解释器，所以JavaScript代码在浏览器上就可以运行。
  • DOM，（Document Object Model）是指文档对象模型，通过它，可以操作HTML文档的相关功能，例如：对标签内容进行删除和替换等。
  • BOM，（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能，例如：浏览器设置定时器，浏览器定时刷新页面。

JavaScript是编程语言，DOM和BOM是两个模块，利用JavaScript语言再结合DOM、BOM模块可以让我们的页面出现动态的效果。

1.1 js基础

引入方式：
Script代码块，只能在当前页面使用。

    <script type="text/javascript">
    // 内部编写JavaScript代码
    </script>

独立js文件，可以被多个引入之后使用。

<script type="text/javascript" src="JavaScript文件路径"></script>

推荐把css在header引入，js代码放在body标签的底部,这样先加载页面文字和样式，体验较好。

js中单行注释用 // ；多行注释用 /* */

局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

常见数据类型

数字（Number）：JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

// 声明
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;
// 转换
parseInt("1.2");  // 将某值转换成数字，不成功则NaN
parseFloat("1.2");  // 将某值转换成浮点数，不成功则NaN
/*
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。
*/

字符串(String)

 声明
var name = "wupeiqi";
var name = String("wupeiqi");
var age_str = String(18);
// 常用方法
var name = "wupeiqi";
var value = names[0]                    // 索引
var value = name.length                 // 获取字符串长度
var value = name.trim()                 // 去除空白
var value = name.charAt(index)          // 根据索引获取字符
var value = name.substring(start,end)   // 根据索引获取子序列

布尔类型（Boolean）

var status = true;
var status = false;
/*
在js中进行比较时，需要注意：
    ==       比较值相等
    !=       不等于
    ===      比较值和类型相等
    !===     不等于
    ||        或
    &&        且
*/

数组（Array）

//声明
var names = [‘a‘, ‘b‘, ‘c‘]
var names = Array(‘anna‘, ‘nana‘)

// 常见方法
names[0]                        // 索引
names.push(ele)                 // 尾部追加元素
var ele = names.obj.pop()       // 尾部移除一个元素
names.unshift(ele)              // 头部插入元素
var ele = obj.shift()           // 头部移除一个元素
names.splice(index,0,ele)       // 在指定索引位置插入元素
names.splice(index,1,ele)       // 指定索引位置替换元素
names.splice(index,1)           // 指定位置删除元素
names.slice(start,end)          // 切片
names.reverse()                 // 原数组反转
names.join(sep)                 // 将数组元素连接起来以构建一个字符串
names.concat(val,..)            // 连接数组
names.sort()                    // 对原数组进行排序

字典（对象Object）

// 声明
info = {
    name:‘安娜‘,
    "age":18
}
// 常用方法
var val = info[‘name‘]      // 获取
info[‘age‘] = 20            // 修改
info[‘gender‘] = ‘male‘     // 新增
delete info[‘age‘]          // 删除

其他（null、undefine）

  • null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”，相当于Python的None。

  • undefined是一个特殊值，表示变量声明但未定义。

var name;
console.log(typeof(name));

条件

if,else，用于判断。

var age = 18;
if(age <18){
}else if(age>=18 and 1 == 1){
}else if(age>=30){
}else{
}

switch,case，用于判断等于某些值。

var num = 18;
switch(num){
    case 10:
        console.log(‘未成年‘);
        break;
    case 18:
        console.log(‘成年‘);
        break;
    case 35:
        console.log(‘油腻老男人‘);
        break;
    case 100:
        console.log(‘....‘);
        break;
    default:
        console.log(‘太大了‘);
}

循环语句

  • for(var i in [‘国产‘,‘日韩‘,‘欧美‘])，默认生成索引，适用于：字符串、元组、字典。

  • for(var i=0;i<10;i++)，自定义索引并设置增加步长，适用于：字符串、元组。（字典索引非有序）

异常处理

在JavaScript的异常处理中有两个注意事项：

  • 主动抛异常 throw “xx” 或 throw Error({code:1000,error:’错了’})
  • catch只能破获一次，如果想要对异常精细化处理可以在catch代码块中再做类型判断。
try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
    var name = ‘‘
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

函数

JavaScript中的函数可以简单概括为以下三类：

  • 普通函数：
function func(arg){
    return arg + 1;
}
  • 匿名函数
function (arg){
    return arg + 1;
}
// 一般用于当做参数使用，例如：设置定时器 setInterval(function(){},1000)
  • 自执行函数，自动触发执行。
 (function(arg){
     console.log(arg);
 })(‘anna‘)

json 序列化（将对象和字符串之间进行转换。）

  • JSON.stringify(object) ，序列化
  • JSON.parse(str)，反序列化

网络中数据传输本质上是基于字符串进行，如果想要把一个js的对象通过网络发送到某个网站，就需要对对象进行序列化然后发送。

1.2 DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。更直白一点讲：DOM相当于是一个模块，提供了关于HTML文档中对标签进行操作的功能，JavaScript结合DOM可以对HTML中的标签进行操作。

DOM对象：https://www.runoob.com/jsref/dom-obj-document.html

选择器

  • 直接查找
document.getElementById(arg)             // 根据ID获取一个标签对象
document.getElementsByClassName(arg)     // 根据class属性获取标签对象集合
document.getElementsByName(arg)       // 根据name属性值获取标签对象集合
document.getElementsByTagName(arg)       // 根据标签名获取标签对象集合
  • 间接查找
var tag = document.getElementById(arg);
tag.parentElement           // 找当前标签对象的父标签对象
tag.children                // 找当前标签对象的所有子标签对象
tag.firstElementChild       // 找当前标签对象的第一个子标签对象
tag.lastElementChild        // 找当前标签对象最后一个子标签对象
tag.nextElementtSibling     // 找当前标签对象下一个兄弟标签对象
tag.previousElementSibling  // 找当前标签对象上一个兄弟标签对象

DOM 元素对象

DOM元素属性和方法：https://www.runoob.com/jsref/dom-obj-all.html

  • element.appendChild() 为元素添加一个新的子元素
  • element.removeChild() 删除一个子元素
  • element.replaceChild() 替换一个子元素
  • element.remove() 删除这个元素
  • nodelist.length 返回节点列表的节点数目。（元素之间的空格是文本，文本是节点）

如删除表格一行数据：

<td>
    <input type="button" value="删除" onclick="deleteRow(this);">
</td>

<script>
//删除表格中当前行的数据
function deleteRow(self) {
    var rowTr = self.parentElement.parentElement;
    rowTr.remove();
}
</script>

文本操作

对标签内部文本进行操作时，可以通过 innerText 和 innerHTML来进行。

  • innerText
    • 标签对象.innerText，读取标签内容（仅文本）。
    • 标签对象.innerText="an"，修改标签内容（仅文本）。
  • innerHTML
    • 标签对象.innerHTML，读取标签内容（含标签）。
    • 标签对象.innerText="<a href=‘#‘>an</a>"，修改标签内容（标签、文本）。

属性对象

值操作针对与用户交互相关的标签，其中内部使用value属性进行操作。

input,textarea,select

单选框radio复选框checkbox，通过value可以取值。但在应用时常常是以选择形式出现，所以在使用过程中还会去判断他是否已被选中。
扩展：标签对象.checked可以对选中状态进行读取和设置。

var radios = document.getElementsByName(‘gender‘);
for (var i = 0; i < radios.length; i++) {
    if (radios[i].value === "male") {
        radios[i].checked = true;
    }
}

class 属性操作

DOM中主要提供了三个帮助我们操作class属性值的功能：

  • 标签对象.className，class属性对应的值直接操作。
  • 标签对象.classList.remove(cls)，class属性对应值删除某个样式。
  • 标签对象.classList.add(cls)，class属性中添加样式。

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .container{
            width: 980px;
            margin: 0 auto;
        }
        .header{
            height: 48px;
            background-color: #499ef3;
        }
        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: black;
            opacity: 0.7;
        }
        .login{
            width: 400px;
            height: 300px;
            background-color: white;
            border: 1px solid #dddddd;
            position: fixed;
            top: 60px;
            left: 50%;
            margin-left: -200px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="header">
        <div style="float: right;margin: 10px;">
            <a onclick="showDialog();" style="padding: 5px 10px;background-color: goldenrod;color: white;">登录</a>
        </div>
    </div>
    <div class="body">
        <div class="container" style="text-align: center">
            <img src="https://w.wallhaven.cc/full/ox/wallhaven-ox83gp.jpg" alt="">
        </div>
    </div>
    <!--遮罩层-->
    <div id="shade" class="shade hide"></div>
    <!--登录框-->
    <div id="login" class="login hide">
        <h2 style="text-align: center">用户登录</h2>
        <a onclick="hideDialog();" style="padding: 5px 10px;background-color: cornflowerblue;color: white;">关闭</a>
    </div>
    <script type="text/javascript">
        function showDialog() {
            document.getElementById(‘shade‘).classList.remove(‘hide‘);
            document.getElementById(‘login‘).classList.remove(‘hide‘);
        }
        function hideDialog() {
            document.getElementById(‘shade‘).classList.add(‘hide‘);
            document.getElementById(‘login‘).classList.add(‘hide‘);
        }
    </script>
</body>
</html>

style 样式操作

如果想要对样式操作的粒度更细一些，可以使用style样式操作，他比class属性对样式的操作粒度更细。

document.getElementById(‘header‘).style.backgroundColor = ‘green‘;

点赞+1效果

function doFavor(self) {
    var plusTag = document.createElement(‘span‘);
    var fontSize = 10;
    var marginLeft = 10;
    var marginTop = 10;
    var opacity = 1;
    plusTag.innerText = "+1";
    plusTag.style.color = ‘green‘;
    plusTag.style.position = ‘absolute‘;
    plusTag.style.fontSize = fontSize + ‘px‘;
    plusTag.style.marginLeft = marginLeft + ‘px‘;
    plusTag.style.marginTop = marginTop + ‘px‘;
    plusTag.style.opacity = opacity;
    self.appendChild(plusTag);
    var interval = setInterval(function() {
        fontSize += 5;
        marginLeft += 5;
        marginTop -= 5;
        opacity -= 0.2;
        plusTag.style.fontSize = fontSize + ‘px‘;
        plusTag.style.marginLeft = marginLeft + ‘px‘;
        plusTag.style.marginTop = marginTop + ‘px‘;
        plusTag.style.opacity = opacity;
        if (opacity <= 0) {
            self.removeChild(plusTag);
            clearInterval(interval);
        }
    }, 100)
}

DOM属性对象（element.attributes[0]）

在 HTML DOM (Document Object Model) 中, 所有的都是 节点：

  • 文档是文档节点
  • 所有 HTML 元素是元素节点
  • 所有 HTML 属性都是属性节点
  • 插入到 HTML 元素中的文本为文本节点
  • 注释是注释节点
//获取属性值
document.getElementsByTagName("button")[0].attributes[0].value;
//改变属性值
var h=document.getElementsByTagName("H1")[0];
h.getAttributeNode("style").value="color:green";

事件

DOM中可以为标签设置事件，给指定标签绑定事件之后，只要对应事件被处罚，就会执行对应代码。常见事件有：

  • onclick，单击时触发事件
  • ondblclick，双击触发事件
  • onchange，内容修改时触发事件
  • onfocus，获取焦点时触发事件
  • onblur，失去焦点触发事件

其他事件：https://www.runoob.com/jsref/dom-obj-event.html

左侧菜单点击切换:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        body {
            margin: 0;
        }
        
        .header {
            height: 48px;
            background-color: #499ef3;
        }
        
        .body .menu {
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 220px;
            border-right: 1px solid #dddddd;
            overflow: scroll;
        }
        
        .body .content {
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 225px;
            /* 超出范围的话，出现滚轮 */
            overflow: scroll;
        }
        
        .body .menu .title {
            padding: 8px;
            border-bottom: 1px solid #dddddd;
            background-color: #5f4687;
            color: white;
        }
        
        .body .menu .child {
            border-bottom: 1px solid #dddddd;
        }
        
        .body .menu .child a {
            display: block;
            padding: 5px 10px;
            color: black;
            text-decoration: none;
        }
        
        .body .menu .child a:hover {
            background-color: #dddddd;
        }
        
        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="body">
        <div class="menu">
            <div class="item">
                <div class="title" onclick="showMenu(this);">国产</div>
                <div class="child">
                    <a href="#">少年的你</a>
                    <a href="#">我不是药神</a>
                    <a href="#">我和我的祖国</a>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="showMenu(this);">欧美</div>
                <div class="child hide ">
                    <a href="#">战争之王</a>
                    <a href="#">华尔街之狼</a>
                    <a href="#">聚焦</a>
                </div>
            </div>
        </div>
        <div class="content"></div>
    </div>
    <script type="text/javascript">
        function showMenu(self) {
            var childList = document.getElementsByClassName(‘child‘);
            for (var i = 0; i < childList.length; i++) {
                childList[i].classList.add(‘hide‘);
            }
            self.nextElementSibling.classList.remove(‘hide‘);
        }
    </script>
</body>
</html>

搜索关键字：

function getFocus(self) {
    self.className = ‘black‘;
    if (self.value === ‘请输入关键字‘ || self.value.trim().length === 0) {
        self.value = ‘‘;
    }
}
function leave(self) {
    if (self.value.length === 0) {
        self.value = ‘请输入关键字‘;
        self.className = ‘gray‘;
    } else {
        self.className = ‘black‘;
    }
}

1.3 BOM

BOM（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能。更直白一点讲：BOM相当于是一个模块，提供了关于浏览器操作的功能。

提示框

  • alert，提示框。
  • confirm，确认框（有确认，取消）。

浏览器URL

  • location.href，获取当前浏览器URL。
  • location.href = "url"，设置URL，即：重定向。
  • location.reload()，重新加载，即：刷新页面。

定时器

  • setInterval(function(){},1000)，创建多次定时器。（1000为1秒）
  • clearInterval(定时器对象)，删除多次定时器。
  • setTimeout(function(){},1000)，创建单次定时器。
  • clearTimeout(定时器对象)，删除单次定时器。

其他BOM：https://www.runoob.com/jsref/obj-window.html

以上是关于JavaScript的主要内容，如果未能解决你的问题，请参考以下文章

30秒就能看懂的JavaScript 代码片段

常用Javascript代码片段集锦

48个值得掌握的JavaScript代码片段（上）

如何将此 JavaScript 代码片段翻译成 Parenscript？

javascript 代码片段

javascript JS-常用代码片段