标签：efi only 你好 添加元素 hash path document remove birt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
‘use strict‘;
let i = 1;
</script>
</head>
<body>
</body>
</html>
\u4e2d \u#### unicode字符
\x41 Ascll字符
//tab 上面 esc下面
<script>
‘use strict‘;
let name = "niyun";
let age = 26;
var msg = `你好呀
sss
hello`;
console.log(msg)
</script>
输出：
你好呀
sss
hello
<script>
‘use strict‘;
let name = "niyun";
let age = 26;
var msg = `你好呀,${name}`;
console.log(msg)
</script>
var arr = [1,2,3,4,"ss"]
若干个键值对
var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值
}
动态的删除属性，通过delete 对象.属性
判断一个属性是否在这个对象中
‘age‘ in person
true
//由于person继承了Object类，所以有toString属性
‘toString‘ in person
true
person.hasOwnProperty(‘toString‘)
false
person.hasOwnProperty(‘age‘)
true
//通过for of 遍历值，通过for in 遍历下标
<script>
‘use strict‘;
var arr =[3,4,5];
for (let number of arr) {
console.log(number)
}
</script>
<script>
‘use strict‘;
var arr =[3,4,5];
arr.name = "sss";//早期的漏洞
for (let number of arr) {
console.log(number)
}
</script>
注意：这里不能把name打印出来
<script>
‘use strict‘;
var map =[["tom",3],["jack",4],["hahha",5]];
for (let number of map) {
console.log(number)
}
</script>
<script>
‘use strict‘;
var set = new Set([3,4,5]);
for (let number of set) {
console.log(number)
}
</script>
定义函数方式一
function abs(x) {
if (x>=0){
return x;
}else {
return -x;
}
}
一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined
定义函数方式二
var abs = function(x) {
if (x>=0){
return x;
}else {
return -x;
}
}
function(x) {...}这是一个匿名函数。
arguments
arguments是一个JS免费赠送的关键字获得入参；
rest
function aaa(a,b,...rest) {
console.log(a);
console.log(b);
console.log(rest);
}
rest参数只能写在最后面，必须用...标识
提升变量的作用域
function qj(){
var x = "x" + y;
console.log(x);
var y = "y";
}
结果：xundefined
说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
全局对象window
var x = "xxx";
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下
alert（）这个函数本身也是一个window变量
规范
由于我们所有的全局变量都会绑定到window上。如果不同的js文件使用相同的全局变量，冲突~>如何能够减少冲突？
//唯一全局变量
var kuangApp = {};
//定义全局变量
kuangApp.name = "kaungshen";
kuangApp.add = function (a,b) {
return a + b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~
局部作用域let
function aaa() {
for (var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i);//问题：i出了作用域还可以用？
}
输出：0~10
使用let解决局部作用域冲突的问题
function aaa() {
for (let i = 0; i < 10; i++) {
console.log(i);
}
console.log(i);
}
输出：0~9 Uncaught ReferenceError: i is not defined
apply
在js中可以控制this指向！
<script>
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
}
var kuangshen = {
name: ‘秦疆‘,
birth: 2000,
age:getAge
}
</script>
//kuangshen.name
//方法一定要带括号()
//kuangshen.age() ok
//getAge NaN window
this是无法指向的，是默认指向调用它的那个对象；
apply
<script>
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
}
var kuangshen = {
name: ‘秦疆‘,
birth: 2000,
age:getAge
};
</script>
//getAge.apply(kuangshen,[])
//21
内部对象
标准对象：
typeof 123
"number"
typeof ‘123‘
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
Z在JavaScript一切结尾对象，任何js支持的类型都可以用JSON来表示；number，string。。。
格式：
对象都用{}
数组都用[]
所有的键值对都是用key-value
JSON字符串和JS对象的转化
//JSON字符串(JSON字符串的键都为字符串)转化为对象
var obj = JSON.parse(‘{"name":"niyun","age":26}‘);
//对象转换为JSON字符串（JSON字符串的键都变为字符串）
var user = {
name:"niyun",
age:26
};
var jsonUser = JSON.stringify(user);
原型：
var Student = {
name:"qingjiang",
age:3,
run:function () {
console.log(this.name+" is running!!!");
}
};
var xiaoming = {
name:"xiaoming",
age:3
};
var bird = {
fly: function () {
console.log(this.name + " is fly..")
}
};
xiaoming["__proto__"]=bird;
// xiaoming["__proto__"]=Student;
// xiaoming.__proto__=Student;
通过__proto__实现继承
class关键字，在ES6之后引入的
class Student {
constructor(name) {
this.name = name;
};
hello(){
alert(this.name + ": 你好啊");
}
}
var niyun = new Student("倪运");
class Student {
constructor(name) {
this.name = name;
};
hello(){
alert(this.name + ": 你好啊");
}
}
var niyun = new Student("倪运");
class Xiaohong extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
}
var xiaohong = new Xiaohong("小红",100);
浏览器介绍
JavaScript和浏览器的关系？
JavaScript诞生就是为了能够让他在浏览器中运行
BOM：浏览器对象模型
三方
window
window代表窗口
window.innerHeight
817
window.innerWidth
628
window.innerWidth
407
window.outerHeight
920
大家可以调整浏览器窗口试试。。。
Navigator
Navigator,封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36"
navigator.platform
"Win32"
大多数时候，我们不会使用navigator对象，因为会被人为修改，不建议使用这些属性来判断代码和编写代码
screen
代表屏幕尺寸
screen.width
1440
screen.height
960
location
location代表当前页面的URL信息
location
Location {ancestorOrigins: DOMStringList, href: "https://www.baidu.com/", origin: "https://www.baidu.com", protocol: "https:", host: "www.baidu.com", …}
ancestorOrigins: DOMStringList {length: 0}
assign: ? assign()
hash: ""
host: "www.baidu.com"（重点）
hostname: "www.baidu.com"
href: "https://www.baidu.com/"（重点）
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload: ? reload()（重点）--刷新网页
replace: ? replace()
search: ""
toString: ? toString()
valueOf: ? valueOf()
Symbol(Symbol.toPrimitive): undefined
__proto__: Location
location.assign(‘https://blog.kuangstudy.com‘)//所有访问百度的都会调到这个页面
document
document代表当前页面，HTML DOM文档树
document.title
"百度一下，你就知道"
document.title="kuangshen"
"kuangshen"
获取具体的文档树节点
<dl id="app">
<dt>javaSE</dt>
<dt>javaEE</dt>
<dt>java</dt>
</dl>
<script>
var dl = document.getElementById("app")
</script>
获取cookies
document.cookies
劫持cookies原理
<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到他的服务器-->
服务器端可以设置cookies：httpOnly
history
history.back()//后退
history.forward()//前进
DOM:文档对象模型
核心
浏览器网页就是一个DOM树形结构
要操作一个DOM节点，就必须先获得这个DOM节点
获得DOM节点
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName
father.children
father.firstchild
father.lastchild
更新节点
id1.innerText = ‘345‘
id1.innerHTML = ‘<strong>123</strong>‘
操作js
id1.style.color = ‘yellow‘;//属性用字符串包裹
id1.style.fontsize = ‘100px‘;//中划线用驼峰规则代替
删除节点
删除节点的步骤：首先获取父节点，再删除自己
var self = document.getElementById(‘p1‘);
var father = p1.parentElement;
father.removeChild(self)
删除多个节点的时候，children是时刻变化的
插入节点
我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以了，但是这个DOM节点已经存在元素了，不想删除原来的，通过追加
<!--插入DOM-->
<p id="js">javascript</p>
<div id="list">
<p id="se">JavasSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById("js");
var list = document.getElementById("list");
</script>
list.appendChild(js)； ----将id为js的p标签剪切到id为list的div标签的最下面
newP.setAttribute("id","newP")//万能设置属性
list.insertBefore(js,ee);//在id为ee的节点前面插入id为js的节点
MD5工具类：
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
</script>
提交表单，md5加密密码，表单优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
</script>
</head>
<body>
<!--onsubmit= 绑定一个提交测试的函数，返回true通过，返回false不提交这个表单-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名：</span><input type="text" name="username" id="username">
</p>
<p>
<span>密码：</span><input type="password" id="input-password">
</p>
<p>
<input type="hidden" name="password" id="md5-password">
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
<script>
function aaa() {
alert(1);
var uname = document.getElementById("username");
var pwd = document.getElementById("input-password");
var md5pwd = document.getElementById("md5-password");
md5pwd.value = md5(pwd.value);
return true;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jQuery-3.6.0.js"></script>
</head>
<body>
<!--
公式：$(‘选择器‘).事件
-->
<a href="" id="test-jquery">点我</a>
<script>
$(‘#test-jquery‘).click(function () {
alert("hello")
})
</script>
</body>
</html>
文档工具站：jQuery文档工具站
标签：efi only 你好 添加元素 hash path document remove birt
原文地址：https://www.cnblogs.com/yunni/p/14619923.html
