前言

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

js基础

引用方法

  1. 标签引用
    1
    2
    3
    <script>
        alert("Hello,World!");
    </script>
  2. 文件引用
    1
    <script defer="defer" src="https://www.yuketang.cn/static/lesson/html/sentry.js"></script>

常用的js宿主对象

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

浏览器对象

window对象
1
2
3
4
5
6
7
8
9
10
11
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);
1
var ua = navigator.userAgent;//获取浏览器信息,同http中的User-agent
Location对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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对象
1
2
3
4
5
6
<script>
    console.log("输出一条日志");//最常用
    console.info("输出一条信息");
    console.warn("输出一条警告");
    console.error("输出一条错误");
</script>

Document对象

  1. 查找元素节点
    1
    2
    3
    4
    5
    6
    7
    8
    <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选择器选择多个元素。
  2. 查看改变元素
    1
    2
    3
    4
    5
    6
    7
    8
    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";
  3. 节点操作
    1
    2
    3
    4
    5
    6
    7
    8
    1、创建元素节点：document.createElement(tagName)
    2、创建文本节点：document.createTextNode="str"
    3、追加子节点：parent.appendChild(ele)
    4、追加子节点：parent.insertBefore(a,b)
    5、删除子节点：parent.removeChild(ele)
    6、删除自身节点：ele.remove( )
    7、替换节点：parent.replaceChild(a,b)
    8、复制节点：ele.cloneNode("true|false")

    原生对象

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

事件

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

鼠标事件

1
2
3
4
5
6
7
8
9
10
11
12
//需要点击触发
var textInput = document.getElementById("text");

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

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

键盘事件

1
2
3
4
5
6
7
8
9
10
11
12
onkeydown	当按下按键时运行脚本。
onkeyup	当松开按键时运行脚本。
onkeypress	当按下并松开按键时运行脚本

键盘属性
ctrlKey	返回当事件被触发时，“CTRL” 键是否被按下。
确定单击鼠标按钮时是否按下了 "CTRL" 键：
if (event.ctrlKey) {
  alert("The CTRL key was pressed!");
} else {
  alert("The CTRL key was NOT pressed!");
}

事件绑定

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  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 对象用于幕后同服务器交换数据，这意味着可以更新网页的部分，而不需要重新加载整个页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//步骤一：创建异步对象
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

1
2
3
4
5
6
7
8
9
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 的响应式扩展)

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

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 入口函数:

1
2
3
4
5
6
7
$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

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

jQuery 选择器

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

jQuery AJAX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function deletefile() {
    var filename = $(this).parent().attr("filename");
    var data = {
        "filename": filename
    };
    $.ajax({
        url: 'delete.php',
        type: 'POST',
        data: data,
        dataType: 'json', //Accept: application/json
        contentType: "application/json;charset=UTF-8", //Content-Type
        success: function (json) {
            if (json['success']) {
                toast('删除成功', 'info');
            } else {
                toast(json['error'], 'danger');
            }
            setTimeout(function () {location.reload();}, 1000);
        }
    });
}

$(document).ready(function () {
    $(".delete").click(deletefile);
    $('.fileLabe2').click(function() {
        var f = $(".fileLabe2").attr("f");
        var parts = f.split('/');
        var parentPath='/';
        if (parts.length>3) var parentPath = parts.slice(0, -2).join('/'); 
        var form = $('<form method="POST"></form>');
        form.attr('action', 'index.php');
        var input = $('<input type="hidden" name="f" value="' + parentPath + '"></input>')
        $(document.body).append(form);
        $(form).append(input);
        form.submit();
        form.remove();
    });
})