js学习之路 | mayylu's blog

前言

闲来无事，简单总结学习中遇到的与js相关的知识，因为暂时用的不多，记的比较随意

js基础

引用方法

标签引用

1
2
3

<script>
    alert("Hello,World!");
</script>

文件引用

1	<script defer="defer" src="https://www.yuketang.cn/static/lesson/html/sentry.js"></script>

常用的js宿主对象

JavaScript 的宿主对象是指在 JavaScript 运行环境中提供的对象，这些对象通常不是由 JavaScript 语言本身定义的，而是由宿主环境（如浏览器、Node.js等）提供的。宿主对象提供了与外部环境的交互能力，例如访问文档、控制网络请求等。

浏览器对象

window对象

window.close()//关闭当前的窗口
window.open('链接地址')//打开窗口
//以下可以不带 window 前缀
window.alert("sometext")//警告框
window.confirm("sometext")//确认框
window.prompt("sometext","defaultText");//提示输入框

window.setTimeout(function, milliseconds);//延时器
window.setInterval(function, milliseconds);//定时器
// 清除定时器
// clearInterval(timer);

Navigator对象

1	var ua = navigator.userAgent;//获取浏览器信息,同http中的User-agent

Location对象

location属性
{
  "href": "http://127.0.0.1:5500/jstext.html?1=1",
  "origin": "http://127.0.0.1:5500",
  "protocol": "http:",
  "host": "127.0.0.1:5500",
  "hostname": "127.0.0.1",
  "port": "5500",
  "pathname": "/jstext.html",
  "search": "?1=1",
}

方法
location.assign("https://www.baidu.com");//作用和直接修改location
location.reload(true);//重新加载当前页面,方法中传递一个true，作为参数，则会强制清空缓存刷新页面
location.replace("https://www.baidu.com");//调用完毕也会跳转页面，它不会生成历史记录，不能使用回退按钮回退

History对象

1 2	history.back(); history.forward();

consolo对象

<script>
    console.log("输出一条日志");//最常用
    console.info("输出一条信息");
    console.warn("输出一条警告");
    console.error("输出一条错误");
</script>

Document对象

查找元素节点

<button id="btn">我是按钮</button>
document.getElementById("btn");        //通过元素 id 来查找元素。

<button class="btn" href="">我是按钮</button>
document.getElementsByTagName("button");//通过标签名来查找元素。
document.getElementsByClassName("btn");	//通过类名来查找元素。
document.querySelector(".btn")	//通过CSS选择器选择一个元素。
document.querySelectorAll(CSS选择器)	//通过CSS选择器选择多个元素。

查看改变元素

var all_radio = document.getElementById("door_form").elements;//elements 集合以数组形式返回 form 表单所有的元素。
if(all_radio[i].checked) //判断是否被选中

btn.innerText = "我是JavaScript的按钮";
box.innerHTML = "<h1>我是Box中的大标题</h1>";
a.href="https://www.baidu.com";
a.setAttribute("href", "https://www.baidu.com");
box.style.background = "green";

节点操作

document.createElement(tagName)//1、创建元素节点：
document.createTextNode="str"//2、创建文本节点：
parent.appendChild(ele)//3、追加子节点：
parent.insertBefore(a,b)//4、追加子节点：
parent.removeChild(ele)//5、删除子节点：
ele.remove( )//6、删除自身节点：
parent.replaceChild(a,b)//7、替换节点：
ele.cloneNode("true|false")//8、复制节点：

原生对象

javaScript 的原生对象是 JavaScript 语言本身定义的对象，它们提供了基本的功能和数据结构。原生对象不依赖于宿主环境（如浏览器或 Node.js），可以在任何 JavaScript 环境中使用

事件

在 JavaScript 中，事件是用户与网页交互时触发的动作

鼠标事件

//需要点击触发
var textInput = document.getElementById("text");

    /* 当文本框获取焦点，文本框背景为红色 */
    textInput.onfocus = function () {
        this.style.background = "red";…
function onblur()

//此外还有
//onclick	当单击鼠标时运行脚本。
//ondblclick	当双击鼠标时运行脚本。
//onscroll	当滚动元素的滚动条时运行脚本。

键盘事件

//onkeydown	当按下按键时运行脚本。
//onkeyup	当松开按键时运行脚本。
//onkeypress	当按下并松开按键时运行脚本

//键盘属性
//ctrlKey	返回当事件被触发时，“CTRL” 键是否被按下。

//确定单击鼠标按钮时是否按下了 "CTRL" 键：
if (event.ctrlKey) {
  alert("The CTRL key was pressed!");
} else {
  alert("The CTRL key was NOT pressed!");
}

事件绑定

使用 addEventListener() 方法来绑定事件

  var form = document.getElementById('mkdir');
form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为

  var formData = new FormData(form); // 获取表单数据

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'mkdir.php'); // 设置请求目标
  xhr.send(formData); // 发送表单数据

  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) { // 请求完成
      if (xhr.status === 200) { // 请求成功
        alert('创建成功', 'info'); // 处理响应结果
      } else { // 请求失败
        alert(json['error'], 'danger');
      }
    }
  };
});

与后端交互

ajax

AJAX 的核心是 XMLHttpRequest 对象。所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于幕后同服务器交换数据，这意味着可以更新网页的部分，而不需要重新加载整个页面。

//步骤一：创建异步对象
var ajax = new XMLHttpRequest();
//步骤二：设置请求的url参数，参数一是请求的类型，参数二是请求的url
ajax.open("get", "users.json");
ajax.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);//async=true,JavaScript 无需等待服务器的响应

ajax.open("POST","/try/ajax/demo_post2.php",true);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send("fname=Henry&lname=Ford");

//步骤三：发送请求
ajax.send();
//接收响应通常使用 onreadystatechange 事件或 onload 事件来处理
ajax.onreadystatechange = function () {
    if (ajax.readyState == 4 && ajax.status == 200) {//ajax.readyState为4 (DONE): 请求完成，响应已经完全接收。2 (HEADERS_RECEIVED): 请求已发送，正在接收响应头。3 (LOADING): 正在接收响应体的内容。
   
        console.log(ajax.responseText);//输入响应的内容
    }
};

fetch

sn(e, t) {
        e && t && fetch("/check.php", {
            method: "POST",
            headers: {
                "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
            },
            body: "score=" + parseInt(e).toString() + "&checkCode=" + md5(parseInt(e).toString() + t) + "&tm=" + (+new Date).toString().substring(0, 10)
        }).then(e => e.text()).then(e => alert(e))//按照顺序进行赋值或调用
    }

async/await

async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。

await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。
await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；
如果不是Promise对象：把这个非promise的东西当做await表达式的结果

RxJS (Javascript 的响应式扩展)

o.http.post("/api/logout", null).subscribe((function () {
                               o.token = null, o.router.navigate(["/login"]).then((function () {
                                   n && o.messageService.success("退出登录")
                               }))

常见js加解密的实现

AES

const CryptoJS = require('C:\\Users\\DELL\\node_modules\\crypto-js');
var AES_CBC = {
    _KEY: "20171109124536982017110912453698",  // 32 字节（256bit）
    _IV: "2017110912453698",                  // 16 字节（128bit）
    // CBC 加密 → 返回 hex 密文
    Encrypt: function (str) {
        var key = CryptoJS.enc.Utf8.parse(this._KEY);//将普通字符串转换为 CryptoJS 可处理的 32 位无符号整数（4 字节）的数组
        var iv = CryptoJS.enc.Utf8.parse(this._IV);
        var text = CryptoJS.enc.Utf8.parse(str);
        var encrypted = CryptoJS.AES.encrypt(text, key, {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });
        // encrypted.ciphertext 是 WordArray → 默认输出 hex
        return encrypted.ciphertext.toString(CryptoJS.enc.Hex);
    },

    // CBC 解密（输入 hex 密文）
    Decrypt: function (cipherHex) {
        var key = CryptoJS.enc.Utf8.parse(this._KEY);
        var iv = CryptoJS.enc.Utf8.parse(this._IV);
        var cipherParams = {
            ciphertext: CryptoJS.enc.Hex.parse(cipherHex)//将十六进制字符串解析为 CryptoJS 可处理的WordArray据格式 
        };
        var decrypted = CryptoJS.AES.decrypt(cipherParams, key, {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });

        // 解密输出 Utf8 字符串
        return decrypted.toString(CryptoJS.enc.Utf8);
    }
};
// CBC 示例
var c = AES_CBC.Encrypt("Hello CBC!");
console.log("CBC 密文：", c);//CBC 密文： 380f000ba7e1be28e7257b7a6eba2366
console.log("CBC 解密：", AES_CBC.Decrypt(c));//CBC 解密： Hello CBC!

JQuery框架

jQuery 库可以通过一行简单的标记被添加到网页中
<script language="javascript" type="text/javascript" src="https://www.leavesongs.com/content/templates/K-BLUE1.2/js/jquery-1.8.3.min.js"></script>
jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});
//或者
$(function(){
    // 执行代码
});

基础语法： $(selector).action()

jQuery 选择器

元素选择器 $("p:first")
#id 选择器 $("#test")
.class 选择器 $(".test")
属性选择器$("[name='user']")

jQuery AJAX

jQuery 的 $.ajax 本质上就是对原生 XMLHttpRequest（XHR）封装的一层高级 API


    $.ajax({
        url: 'delete.php',
        type: 'POST',
        data: data,
        dataType: 'json', //Accept: application/json
        contentType: "application/json;charset=UTF-8", //Content-Type
        success: function (json) {//json为返回数据
            if (json['success']) {
                toast('删除成功', 'info');
            } else {
                toast(json['error'], 'danger');
            }
            setTimeout(function () {location.reload();}, 1000);
        }
    });

$.post("demo.html",{suggest:txt},function(result){
        $("span").html(result);
    });
$.get("/try/1.php",function(data,status){
        alert("数据: " + data + "\n状态: " + status);
    });

//ajaxPrefilter 可以拦截/修改每一次 $.ajax 请求。
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    options.headers = {
        token: "xxxxx"
    };
});