JS-小结
Posted zhixuChen333
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS-小结相关的知识，希望对你有一定的参考价值。
js
数据类型
- number 不区分小数和整数, NaN(not a number),Infinity(无穷大)
- 字符串
- 布尔值 true/false
- null/undefined
- 数组 var = arr[1,2,3,“hello”,true]
- 对象 var person=
name:“czx”,
age:3,
tag:[“java”,“c”,“js”]
继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
class Student
constructor(name)
this.name = name;
hello()
console.log('hello world')
class XiaoStudent extends Student
constructor(name, grade)
super(name);
this.grade = grade;
myGrade()
alert("我是一名小学生");
var czx = new Student('czx');
var xiaohong = new XiaoStudent("xiaohong", "小学生");
czx.hello();
</script>
</body>
</html>
比较运算符
- =
- == 等于（类型不一样，值也一样，也会判断true）
- === 决定等于（类型一样，值一样才会为true）
‘use strict’ 严格检查模式
局部变量建议使用let去定义
Map和Set
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var map = new Map([
["k1", "v1"],
["k2", "v2"]
]);
console.log(map.get("k1"));
map.set('admin', 123456);
var set = new Set([3, 2, 1, 1, 2, 3, 4]);
</script>
</body>
</html>
iterator ES6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1, 3, 45, 5];
for (let x of arr)
console.log(x);
var map = new Map([
["k1", "v1"],
["k2", "v2"],
["k3", "v3"]
]);
for (let x of map)
console.log(x);
var set = new Set([3, 2, 1, 1, 2, 3, 4]);
for (let x of set)
console.log(x);
</script>
</body>
</html>
函数
rest
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function out(a, b, ...rest)
console.log("a=>" + a);
console.log("b=>" + b);
console.log(rest); //剩下的参数放放进rest数组
</script>
</body>
</html>
JSON
操作BOM对象
<script>
location.assign("http://www.baidu.com"); //设置新的地址
</script>
操作DOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
<div id="box"></div>
<script>
//获取节点
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var div = document.getElementById('box');
//更新节点
p1.innerText = '6666';
div.innerHTML = '<strong id="11">1234</strong>';
div.style.color = 'red'
//删除节点 通过父节点删除子节点
//div.remove('11');
//插入节点
var create = document.createElement('p');
create.id = 'new';
create.innerText = '插入的节点';
div.append(create);
</script>
</body>
</html>
操作表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/md5.js"></script>
</head>
<body>
<form action="post">
<p>
<span>用户名:</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码:</span><input type="password" id="password" name="password">
</p>
<input type="button" value="提交" onclick="aaa()">
</form>
<script>
function aaa()
var username = document.getElementById('username');
var pwd = document.getElementById('password');
console.log(username.value);
pwd.value = md5(pwd.value);
console.log(pwd.value);
</script>
</body>
</html>
Jquery
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.4.1.js"></script>
<style>
#move
width: 500px;
height: 500px;
border: 2px solid red;
</style>
</head>
<body>
mouse:
<span id="mouseMove"></span>
<div id='move'>
在这里动鼠标试试
</div>
<script>
//当网页元素加载完毕后，响应事件
$(function()
$('#move').mousemove(function(e)
$('#mouseMove').text("x:" + e.pageX + "y:" + e.pageY)
)
);
</script>
</body>
</html>
操作DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<ul id='ul'>
<li class="js">js</li>
<li name='python'>python</li>
</ul>
<script>
$('ul li[name=python]').text('111');
$('ul li[name=python]').css("color", "red");
</script>
</body>
</html>
以上是关于JS-小结的主要内容，如果未能解决你的问题，请参考以下文章