js随想

发表于 | 更新于:
假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河

DOM文档操作 BOM浏览器操作 ES搜索引擎操作

1. MD5算法加密（不建议，比较消耗cpu）

1
2
3
4
5
6
7
8
9
10
11
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

密码：<input type = "password" id = "input-password">
  <input type="hidden" id="md5-password" name="password">
var pwd = document.getElementById(input-password);
var md5pwd = document.getElementById(md5-password);
//md5算法
pwd.value = md5(pwd.value);

2. JQuery库：（大量javaScript函数）

公式：$(selector).action()

  1. 引入包

  2. cdncdn JQuery包下载地址

  3. 文档工具站

  4. 事件(鼠标事件，键盘事件，其他事件)

  5. 前端模板：

友人C博客

阿里ant

vue

layui弹窗

Element

bootstrap

  1. 如何巩固JS（看JQuery源码，看游戏源码）
  2. Bootstrap可视化布局

3. BOM【浏览器对象模型】

3.1 window

1
2
console.log(window.outerHeight)
> 1027

3.2 navigator

navigator很容易被用户修改，获取的值不一定正确

1
2
3
4
5
6
7
8
9
10
11
console.log(navigator.language)
> VM1377:1 zh-CN
undefined

console.log(navigator.platform)
> VM1414:1 Win32
undefined

console.log(navigator.userAgent)
> VM1468:1 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

3.3 screen

1
onsole.log(screen)

3.4 location

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
location.protocol
> "https:"
location.host
> "www.bilibili.com"
location.hostname
> "www.bilibili.com"
location.port
> ""
location.pathname
> "/video/"
location.href
> "https://www.bilibili.com/video/BV18E411a7mC"
location.search
> ""
location.hash
> ""

3.5 document

1
2
document.title = "努力"
"努力"

3.6 history

1
2
3
4
5
6
history.go
> ƒ go() { [native code] }
history.back
> ƒ back() { [native code] }
history.forward
> ƒ forward() { [native code] }

4. DOM【文档对象模型】

4.1 获取DOM

1
2
3
4
5
6
var div = document.getElementsByTagName("div");
let ul = document.querySelector(".hitokotoText ul");
let ls = document.querySelectorAll(".hitokotoText ul li");
div

div[0].click()

4.2 增加DOM

1
let li = document.createElement('li');

4.3 删除DOM

1
ul.innerHTML = '';

4.4 修改DOM

4.5 遍历DOM

5.获取api数据

5.1 原型js和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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
(function(){
    var api = {
        init() {
            let that = this;
            that.getHitokotoData();
        },
    //获取每日一言
    getHitokotoData() {
    //第一种方式（原生js）
        // let http = new XMLHttpRequest();
        // http.open("GET","https://v1.hitokoto.cn/?encode=json",true);
        // http.onload = function() {
        //     if((http.status >=200 && http.status < 300) || http.status == 304) {
        //         let data = http.responseText;
        //         let resultData = JSON.parse(data);
        //         let ul = document.querySelector(".hitokotoText ul");
        //         ul.innerHTML = '';
                
        //         for(let key in resultData) {
        //             let li = document.createElement('li');
        //             if(li == null) {
        //                  return;
        //             }
        //             console.log( key +":" +resultData[key]);
        //             li.innerHTML = key + ":" + resultData[key];
        //             ul.appendChild(li);
        //         }
        //     } else {
        //         console.log("http" + http.status);
        //         console.log(http.statusText);
        //     }
        // }
        // http.send(null);

    //第二种方式 直接用jquery的ajax
        // $.ajax({
        //     type: "POST",
        //     url: `https://v1.hitokoto.cn/?encode=json`,
        //     dataType:'json',
        //     success: function(data) {
        //         console.log(data);
        //         let ul = document.querySelector(".hitokotoText ul");
        //         ul.innerHTML = '';
        //         for(let key in data) {
        //             let li = document.createElement('li');
        //             li.innerHTML = key +":" + data[key];
        //             ul.appendChild(li);
        //         }
                
        //     },
        //     error: function(e){
        //         return e;	
        //     }
        // });

          //第三种方式获取单个元素,跨域jsonP相当于
 // 指定允许其他域名访问
// header('Access-Control-Allow-Origin:*');
// 响应类型
// header('Access-Control-Allow-Methods:POST');
// 响应头设置
// header('Access-Control-Allow-Headers:x-requested-with,content-type');


          $.ajax({
            type: "GET",
            url: "https://v1.hitokoto.cn/?encode=json",
            dataType: "jsonp",
            jsonp: 'callback',
            success: function(data){
                console.log(data);
                let resultData = JSON.parse(data);
                let ul = document.querySelector(".hitokotoText ul");
                ul.innerHTML = '';
                let li = document.createElement('li');
                let from_who = resultData.from_who == null ? "无" : resultData.from_who;
                console.log()
                li.innerHTML =  resultData.hitokoto + " 作者：" + from_who + " 作品：" + resultData.from;
                ul.appendChild(li); 
            },
            error: function(e){
                return e;	
            }
        });
          
        }
    }
    api.init();
})();

5.2 axios【通常是框架vue react】

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
// axios 中的GET请求
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// axios 中的POST请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });