本笔记参考的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
事件监听器和上述方法类似,因此不做过多分析。查阅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> 元素
(
f
u
n
c
t
i
o
n
(
)
)
等
同
于
(function(){})等同于
(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>