跳至主要內容

JavaScript

约 2038 字大约 7 分钟...

JavaScript 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言,最新标准是 ECMAScript 6.0open in new window。虽然它是作为开发 Web 页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,并长年居于最受欢迎编程语言排行榜榜首。

推荐学习流程:「JavaScript」>「ES6」>「TypeScriptopen in new window」。

ES6

sayHi(){console.log("Hi");} 等同于 sayHi:function(){console.log("Hi");}

let 声明的变量只在 let 命令所在的代码块内有效,尤其适合用于 for 循环的计数器。

const 声明一个只读的常量,一旦声明,常量的值就不能改变。

=> 是指箭头函数,是一种函数的简写方式,语法为 (参数)=>{函数体};

x => 2x
//等于下方函数
function (x) {
 return 2x;
}

数据结构

Set 类似于数组,但是成员的值都是唯一的,没有重复的值。向 Set 加入值的时候,不会发生类型转换。

// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

Map 类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

Map 的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键。因此有时看起来是针对同一个键,但实际上这是两个不同的数组实例,内存地址是不一样的,因此 get 方法无法读取该键,返回 undefined。

常用函数

document.getElementById()
document.getElementsByClassName("v-modal")[0]
document.getElementsByTagName("body")[0].remove();   //通过 Tagname 获取元素,删除指定元素
for (var i=0;i<cars.length;i++) {document.write(cars[i] + "<br>");}   //循环语句,i++会在代码被执行后增加一个值
break; //跳出当前循环但继续函数

//js 暂停
while (true){
    //100 毫秒延时
    setTimeout(f1,100)
    //直接跳出循环和函数
    return;
}

//截取中间的字符串,A 有多少字符就需要加多少位置
str = str.substring(str.indexOf("A") + 1,str.indexOf("B"))

//取特定字符前后的字符串
var ture_tkl01 = taokouling.value.trim().split('打')[0];
//取第 4 位后的字符串 (4 代表开始位置,相当于从 5 开始截取到尾部)
var ture_tkl = ture_tkl01.substring(4);

//报错处理
function f1(){
    try{
        if (document.getElementById("pro-operation").getElementsByClassName("product-button02 disabled")[0].innerHTML.indexOf("立即申购")!=-1) {
            window.location.reload();
        }else{
            window.location.reload();
        }
    }catch(e){
        //下单
        document.getElementById("product-operation").getElementsByClassName("product-button02")[0].click();
    }
}

//js 函数为同步处理,只有 if else、setTimeour、for each 等函数才能按序运行

//setInterval 不要包含多个函数,否则 clearInterval 容易出错

//替换,不添加/g,则替换只发生一次
text.value = text.value.replace(" ", "----");
//全局替换,如果使用/\s/g,则换行符也会被替换
text.value = text.value.replace(/ /g, "----");

//载入完成后,自动或取焦点。textSour 为元素 id,需配合 jquery
window.onload = function(){
 textSour.focus();
};
//按钮点击后使用函数
$("#clearEmoji").click(function () {
}

//去除每行首尾空格,支持特殊字符,首尾的空格、制表符、特殊字符的组合都倍清除
strResult += split_result[i].replace(/(^[\t\s]*)|([\t\s]*$)/g, "") + '\n';

JavaScript 对象

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。 对象一定要用英文冒号来注明,否则整段代码失效。属性由逗号分隔:

var person={firstname:"John", lastname:"Doe", id:5566};
//对象属性有两种寻址方式
name=person.lastname;
name=person["lastname"];

//对象的方法定义了一个函数,并作为对象的属性存储。对象方法通过添加 () 调用 (作为一个函数)。
<p id="对象"></p>
<script>
 var person ={
  firstname:"名",
  lastname:"姓",
  fullname:function()
  {
   return this.lastname+this.firstname
  },       //不同属性间需要加逗号隔开
  eyecolor:"blue"};
 document.getElementById("对象").innerHTML=
 person.fullname()+"眼睛颜色是"+person.eyecolor  ;
</script>

全局变量

js 的全部变量要用 window. 来定义。如果变量在函数内没有声明(没有使用 var),该变量为全局变量。

局部变量:在函数中通过 var 声明的变量。全局变量:在函数外通过 var 声明的变量。

没有声明就使用的变量,默认为全局变量,不论这个变量在哪被使用。

<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML = "我可以显示 " + carName;
function myFunction()
{
    carName = "Volvo";   //如果在这添加 var,声明变量,则变为局部变量,无法调用
}
</script>

变量类型

当您声明新变量时,可以使用关键词 "new" 来声明其类型:

var carname = new String();
字符串;
var x = new Number();
数字;
var y = new Boolean();
布尔;
var cars = new Array();
数组;
var person = new Object();
对象;
var y = new String("John");
对象;

// 数据赋值
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array  通过数组字面量赋值
var person = { firstName: "John", lastName: "Doe" }; // Object 通过对象字面量赋值

运算符

//后置++是将自身的值赋给新变量,然后才自身加 1.
//前置++是将自身加 1 的值赋值给新变量,同时自身也加 1;
int a;
a=i++;//将 i 的值赋值给 a,即 a=i;然后再执行 i=i+1;也就是【a=i++;】与【a=i; i=i+1;】等价。
a=++i;//将 i+1 的值赋给 a,即 a=i+1;然后再执行 i=i+1;也就是【a=++i;】与【a=i+1;i=i+1;】等价。
// 描述 (x=5) 比较
// == 等于
x==8 false
x==5 true
// === 绝对等于(值和类型均相等)
x==="5" false
x===5 true
// != 不等于
x!=8 true
// !== 不绝对等于(值和类型有一个不相等,或两个都不相等)
x!=="5" true
x!==5 false

&& 且
|| 或

JavaScript 应用

取随机值

//[任意随机值](https://www.runoob.com/w3cnote/js-random.html)
Math.floor(Math.random() * (max - min + 1) + min);

//
var arr01 = textSour.value.split("\n");
//分割字符数组,主要用于淘口令网
var arr01 = ["打", "哒", "达"];
//循环语句,i++会在代码被执行后增加一个值
for (var x = 0; x < arr01.length; x++) {
  //存在循环后分割,并跳出循环
  if (taokouling.value.indexOf(arr01[x]) != -1) {
    ture_tkl01 = taokouling.value.trim().split(arr01[x])[0];
    break;
  }
}

// https://segmentfault.com/q/1010000006819233 //不重复获取
for (var i = 0; i < rn; ++i) {
  var index = ~~(Math.random() * count) + i;
  result[i] = split_result[index];
  split_result[index] = split_result[i];
  count--;
  strResult = strResult + result[i] + "\n";
}

文本框清空

input 文本框获取焦点后,自动清空内容。

onfocus = "this.value=''";

内部文件读取

以下代码用于服务器读取文档,本地无法直接使用。

$.ajax({
  url: "./xx.txt",
  success: function (result) {
    var strs = result.split("\n");
    addTableTR(strs, true);
  },
});

选择框状态

调用 attr 给选择框 radio、checkbox 添加 checked 属性和移调,并不能真实改变不能单选和选中框的真实状态,可用下方代码改变。[1]

//取消导航项的 checked,同类名称都会取消 checked 状态
$("input[name=daoruRadio]").prop("checked", false);
//点击对映 id 的单选框
$("input[id=Radio1]").prop("checked", true);

复制隐藏内容

clipboardjs 可复制隐藏区域内容。

//新设将粘贴板设在特定按钮上,#copyresult 为按钮 id,#CopyValue 为区域 id
var clipboard2 = new ClipboardJS("#copyresult", {
  text: function () {
    return $("#CopyValue").val();
  },
});

clipboard2.on("success", function (e) {
  toastr["success"]("复制成功!");
});

clipboard2.on("error", function (e) {
  toastr["error"]("复制失败,请手动重新复制!");
});

引入 html 页面

利用 link 标签的 rel=import 引入 html 页面

<link rel="import" href="header.html" />

视频全屏弹窗

品牌首页经常需要在动加载视频,可将下方代码放入首页源码的 body 区。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.staticfile.org/layer/3.5.1/theme/default/layer.min.css"
/>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layer/3.5.1/layer.min.js"></script>
<script type="text/javascript">
  window.onload = function () {
    //页面一打开就执行,放入 reay 是为了 Layer 所需配件(css、扩展模块)加载完毕
    layer.ready(function () {
      //iframe 层 - 多媒体
      layer.open({
        //type 值为 1 时,则可直接套用视频
        type: 2,
        title: false,
        area: ["630px", "360px"],
        shade: 0.8,
        closeBtn: 0,
        shadeClose: true,
        //视频链接
        content:
          "https://iluminage-cdn.oss-cn-shanghai.aliyuncs.com/brand-video.MP4",
      });
    });
  };
</script>

插入视频代码

<div style="line-height:0;font-size:0">
  <video
    width="100%"
    height="100%"
    controls="controls"
    autoplay="autoplay"
    autobuffer="autobuffer"
    src="https://iluminage-cdn.oss-cn-shanghai.aliyuncs.com/brand-video.MP4"
  ></video>
</div>

  1. radio、checkbox 选中状态研究open in new window ↩︎

已到达文章底部,欢迎留言、表情互动~
  • 赞一个
    0
    赞一个
  • 支持下
    0
    支持下
  • 有点酷
    0
    有点酷
  • 啥玩意
    0
    啥玩意
  • 看不懂
    0
    看不懂
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.1.3