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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
head>
<body>
<h1>标题1h1>
<p id="p1">p1p>
<p class="p2">p2p>
<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 = '1234';
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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<script src="../js/jquery-3.4.1.js">script>
head>
<body>
<ul id='ul'>
<li class="js">jsli>
<li name='python'>pythonli>
ul>
<script>
$('ul li[name=python]').text('111');
$('ul li[name=python]').css("color", "red");
script>
body>
html>