JavaScript学习笔记（包括DOM、AJAX、JQuery等）

花火66666

已于 2022-02-26 23:22:11 修改

阅读量107

点赞数

分类专栏：笔记前端文章标签： js javascript

于 2021-08-12 17:34:29 首次发布

本文链接：https://blog.csdn.net/weixin_42225792/article/details/119649823

版权

笔记同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

本笔记参考的w3school，只记录了个人学习的未知点以及难点部分。

补充一些小技能：
Elements、Console、Sources、Network、Application这五个模块经常用
其中，Application这个是可以获取到cookie的。这个可能有很大用途
另外，Console里面可以直接编辑js代码，一般常用做输出Console.log()
Source里面可以打断点直接调试，打好断点刷新页面即可调试页面。

没有值的变量，在其它语言中为null类型，我们在js里面可以把它定义为undefined。
例子：

var test = undefined;

当然，js里面也有null类型

var test = null;

而且js中null是一种Object类型

在js中，仅仅访问没有() 的函数将返回函数定义
例子：
在这里插入图片描述
关于js对象，如果不用()访问方法，则会返回方法定义。这与上面函数是一样的。

在字符串比较时
==是代表数值相等，不用调用equal函数比较。
而===则是代表字符串不仅值要相等，类型也要相等。
例子：

var x = "Bill";             
var y = new String("Bill");

// (x === y) 为 false，因为 x 和 y 的类型不同（字符串与对象）

甚至这也不相等：

var x = new String("Bill");             
var y = new String("Bill");

// (x == y) 为 false，因为 x 和 y 是不同的对象

IE8浏览器的String没有trim函数，因此我们需要添加trim函数。

if (!String.prototype.trim) {
  	String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
var str = "       Hello World!        ";
alert(str.trim());

JS字符串api参考：JS字符串api

补充难点方法：splice方法可以用来删除数组元素：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组方法</h1> 

<h2>splice()</h2>

<p>splice() 方法向数组添加新元素，并返回包含已删除元素（如果有）的数组。</p>

<button onclick="myFunction()">试一试</button>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "原数组：<br> " + fruits;

function myFunction() {
  var removed = fruits.splice(2, 2, "Lemon", "Kiwi"); 
  document.getElementById("demo2").innerHTML = "新数组：<br>" + fruits;
  document.getElementById("demo3").innerHTML = "已删除项：<br> " + removed; 
}
</script>

<!-- 
原数组：
Banana,Orange,Apple,Mango

新数组：
Banana,Orange,Lemon,Kiwi

已删除项：
Apple,Mango
-->

</body>
</html>

关于Boolean值的一些问题：
在js中，所有不具备真实的值为false
如0、-0、“”、undefined、null、NaN等。

JS数据类型
在这里插入图片描述
typeof xxx 判断是否是这个类型

var x = 5
var isNum = x typeof Number;

JS正则表达式：
w3教程

全局变量
一般全局变量保存在自定义命名空间中
在这里插入图片描述

JS中，单独的this指的是全局对象
例如：

var x = this;

在浏览器窗口中，全局对象是 [object Window]

事件处理程序中的 this
在 HTML 事件处理程序中，this 指的是接收此事件的 HTML 元素：

<button onclick="this.style.display='none'">
  点击来删除我！
</button>

显式函数绑定
call() 和 apply() 方法是预定义的 JavaScript 方法。

它们都可以用于将另一个对象作为参数调用对象方法。

您可以在本教程后面阅读有关 call() 和 apply() 的更多内容。

在下面的例子中，当使用 person2 作为参数调用 person1.fullName 时，this 将引用 person2，即使它是 person1 的方法：

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // 会返回 "Bill Gates"

call() 方法可接受参数：

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");

JavaScript 块作用域
通过 var 关键词声明的变量没有块作用域。
在块 {} 内声明的变量可以从块之外进行访问。

在 ES2015 之前，JavaScript 是没有块作用域的。
可以使用 let 关键词声明拥有块作用域的变量。
在块 {} 内声明的变量无法从块外访问：

{ 
  let x = 10;
}
// 此处不可以使用 x

let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的：

var x = 10;       // 允许
let x = 6;       // 不允许
{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的：

let x = 10;       // 允许
var x = 6;       // 不允许
{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}

在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const

命名规范

arguments：
arguments是个参数数组，可以获取所有的参数。因此我们没有必要在函数定义中定义…类型的可变参数，可以直接只定义想展示的参数。因此这是个很方便的技能。

function findMax() {
    var i;
    var max = -Infinity;
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

请把脚本放在页面底部，使浏览器首先加载页面

脚本在下载时，浏览器不会启动任何其他的下载。此外所有解析和渲染活动都可能会被阻塞。
HTTP 规范定义浏览器不应该并行下载超过两种要素。
一个选项是在 script 标签中使用 defer=“true”。defer 属性规定了脚本应该在页面完成解析后执行，但它只适用于外部脚本。
如果可能，您可以在页面完成加载后，通过代码向页面添加脚本：

<script>
window.onload = downScripts;

function downScripts() {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

Getter与Setter方法

var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// 使用 getter 来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName;

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};

// 使用 setter 来设置对象属性：
person.lang = "en";

// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.language;

JavaScript闭包：
JS中，变量从自身函数开始，由内向外查找。如果内部存在，外部变量会被自动屏蔽。

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器目前是 3

变量 add 的赋值是自调用函数的返回值。
这个自调用函数只运行一次。它设置计数器为零（0），并返回函数表达式。
这样 add 成为了函数。最“精彩的”部分是它能够访问父作用域中的计数器。
这被称为 JavaScript 闭包。它使函数拥有“私有”变量成为可能。
计数器被这个匿名函数的作用域保护，并且只能使用 add 函数来修改。
闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。

JS DOM:
dom元素的getXxx方法，返回的都是Element对象
Element对象可以更改其中所属标签的所有属性以及标签内部的html内容。
获取Element方法为：

document.getElementById(id) //通过元素 id 来查找元素
document.getElementsByTagName(name) //通过标签名来查找元素
document.getElementsByClassName(name)  //通过类名来查找元素

element对象即可通过访问其属性，来达到修改其属性的目的

DOM API文档
W3C DOM

DOM常见事件：
onclick
onload
onunload
onchange
onmouseover
onmouseout

Event参考手册

事件监听器和上述方法类似，因此不做过多分析。查阅w3文档即可。
方法为：addEventListener()

重点在：
事件监听器可以加在任何一个DOM对象上，比如：
比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。

不过事件监听器可以用来删除

element.removeEventListener("mousemove", myFunction);

子节点和节点值
文本节点的值能够通过节点的 innerHTML 属性进行访问：

var myTitle = document.getElementById("demo").innerHTML;

等价于

var myTitle = document.getElementById("demo").firstChild.nodeValue;

也等价于

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

nodeName nodeType nodeValue
链接

添加DOM元素：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para = document.createElement("p");
//创建<p>标签
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
</script>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

可以试试有无insertBehind方法

还有removeChild()方法，replaceChild()方法用于删除和替换。
注意一下removeChild，他是动态删除。因此removeChild下标是动态变化的。删除一个标签则相应标签的下标会发生变化。尤其要注意。

JS 获得DOM的Collection

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

window对象是浏览器中的窗口对象。因此我们可以利用它来做一些事情。window这个对象几乎包括了所有的浏览器对象，比如：head、body等。因此也包括了document。我们可以利用window对象获取一切浏览器对象。

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面

常用对象：
window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档

window.history对象可以获得浏览器历史的消息，不过为了保护用户的隐私，JavaScript 访问此对象存在限制。

常用：
history.back() - 等同于在浏览器点击后退按钮
history.forward() - 等同于在浏览器中点击前进按钮

window.navigator
navigator这个对象包含有关访问者的信息

可以访问cookie可用与否

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "cookiesEnabled is " + navigator.cookieEnabled;
</script>

访问cookie

var cookie = document.cookie

因此，我们需要注意cookie劫持的问题。因此我们需要在服务器端设置cookie:httpOnly

浏览器应用名称

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "navigator.appName is " + navigator.appName;
</script>

浏览器语言：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.language;
</script>

window.confirm确认框
实例：

<html>
<body>

<h1>JavaScript 确认框</h1>


<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  if (confirm("Press a button!")) {
    txt = "您按了确定";
  } else {
    txt = "您按了取消";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

弹出输入框：一般用做页面加载前提前弹出
window.prompt

var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
    document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？";
}

setTimeout(function, milliseconds)
在等待指定的毫秒数后执行函数。
setInterval(function, milliseconds)
//等同于 setTimeout()，但持续重复执行该函数。

清除：

clearTimeout(var)
clearInterval(var)
//此处var是由set方法返回的变量

JS cookie
传送门

修改cookie建议不要用原生js。因为这个貌似只能覆盖，不能直接修改。除非改动字符串中相应字段，然后用这个字符串覆盖。也相当于修改的效果。

AJAX:
XMLHttp:
创建XMLHttp

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

在这里插入图片描述
返回特定头部信息，是有参数的。其参数为特定头部的key。

其具体内容参考w3school

JSON转String

JSON.stringify(obj);
String转JSON
JSON.parse(s);

JQuery
基础用法：
$(selector).action()
selector为选择器，参考css格式
action为操作，参考jquery的api

例如：
$(“p.test”).hide() - 隐藏所有 class=“test” 的 <p> 元素

$function(){})等同于$ (document).ready(function()),
意思很简单，就是等页面加载完毕之后，才开始执行函数

例子：

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

等价于

$(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

动画效果完之后，尽量使用回调：

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

关于简单的动画效果：隐藏/显示、淡入/淡出、滑动、自定义动画、停止动画参考菜鸟教程jquery

通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

例子：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

补充：密码加密优化版

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <!--MD5加密工具类-->
        <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
        	
        </script>
    </head>
    <body>
        <!--表达绑定提交事件
			οnsubmit= 绑定一个提交检测的函数，true，false
			将这个结果返回给表单，使用onsubmit接收
		-->
        <form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">
            <p>
            	<span>用户名：</span><input type="text" id = "username" name = "username"/>
        	</p>
            <p>
            	<span>密码：</span><input type="password" id = "password" />
        	</p>
            <input type = "hidden" id = "md5-password" name = "password"> 
            
            <!--绑定事件 onclick 被点击-->
            <button type = "submit">提交</button>
            
        </form>
        
        <script>
        	function aaa(){
                alert(1);
                var username = document.getElementById("username");
                var pwd = document.getElementById("password");
                var md5pwd = document.getElementById("md5-password");
                //pwd.value = md5(pwd,value);
                md5pwd.value = mad5(pwd.value);
                //可以校验判断表单内容，true就是通过提交，false就是阻止提交
                return false;
                
            }
        </script>
        
    </body>
</html>