A basis,
Characteristics of 1.
The statement ends with a semicolon.
Start with ‘use strict; ‘Enforce var declaration!
2. Declare variables
Var, let, and const declare variables
Uppercase letters, digits and underscores: Aa_1 let
Define local variables that can be used mindlessly
Const defines constant
3. Input and output
alert('Hello, world');// Browser popup output
console.log(x);// No popup output
Copy the codeSecond, data type
1. Digital
int/float
2. The string
Single line: single lead/double lead,
Cross – line: lead back.
Format: “${x}”
string.length;// Returns the length of the string
string.toUpperCase();/ / caps
string.toLowerCase();/ / lowercase
string.indexOf("x");// Return to position
string.substring(1.3); Slice [1.3), not available3
Copy the codeUnable to assign dynamically
3. The Boolean
true/false
4. A null value
NaN, I can’t compute
Infinity, Infinity
Null, an empty value
Undefined
Three, operation
1. The calculation
= = =,! =, >, <, =>, <=
NaN and itself are not equal, using the isNaN function to determine.
Floating-point number operation process error, through the difference method to determine.
, &&, | |,!
Condition of 2.
if (xxx){ ... } else if (xxx){ ... }else{... }Copy the code3. The cycle
for(Initial conditions; End condition; Increment condition) {execute statement; }for (var key in obj)/ / object
for (var x of a)// Array, dictionary, collection
obj.forEach(function(value){console.log(value)})// loop into the function
while(conditional statement){execute statement}do{execute statement}while(Conditional statement)Copy the code4. The function
function x(i){return y}
var x=function(i){return y}
// The parameter is passed flexibly. At most, the latter is ignored and at least NaN is returned
function foo(a, b, ... rest){}
// Rest receives arguments after the third
//arguments.length Specifies the number of arguments
Copy the codeTypeof XXX, returns the data type
Array/list
var arr=[1."2".3]// This is a good ideaOr:new Array(1.2.3)
arr.length;// Check the length of the array.Directly toArrayAssigning a new value to length causesArrayChange in size. If it decreases, it takes the first X bit of the index, and if it increases, it usesundefinedY bit ARR [x] after filling;// Array values
arr.indexOf("xxx");// Subscript the index to return the position of the element
arr.slice(a);// Slice, a (inclusive) all the way to the end
arr.slice(a,b);// Slice a (inclusive) all the way to b (exclusive)
arr.push("x");// Add elements from the right
arr.pop();// Remove the element from the right and return it
arr.unshift("x");// Add elements from the left
arr.shift();// Remove and return the element from the left
arr.sort();/ / sorting
arr.reverse();/ / reverse
arr.concat([1.2.3]);// Concatenate the new array after arR and returnArr. Join () does not change the original array."-");// Concatenate the array with the string
Copy the code5. Dictionary/mapping
var map=new Map([["tom".100], ["jack".90], ["haha".80]]);// Define the dictionary
var name=map.get["tom"];// Dictionary values
map.set("admin".123456);// Add key-value pairs
map.delete("tom");/ / delete
Copy the codeSix, collections,
var set=new Set([1.2.3.1.1.1]);// Define a collection
set.add(2);
set.delete(1);
set.has(3);
Copy the codeSeven, objects,
There is no concept of class, all objects are instances, the so-called inheritance relationship is just a prototype of one object to another object.
var xiaoming={name:"xiaoming"}
xiaoming.__proto__=person
// Xiaoming inherits from person
//ES6 new expression
/ / define the class
class Student{
constructor(name){
this.name=name
}
hello(){
alert("hello")}}/ / class inheritance
class Person extends Student{
constructor(name,grade){
super(name)
this.grade=grade
}
}
// instantiate the object
var xiaoming=new Student("xiaoming")
var xiaohong=new Person("xiaohong".100)
Copy the codeCreate a new Object with object.create.
var person={
name:"A".age:3.func:function(){}
}
person.age;
person.func();// Call the method
function getAge(){
var now=new Date().getFullYear();
return now-this.birth;
}
var person={
name:"Unknown".birth:1992.age:getAge
}
person.age();// Can return a value
getAge();//NaN, this points to window
getAge.apply(person,[]);// Make this point to the Person object with an empty list
Copy the codeBy default, this points to the object on which it was called, and you can use Apply to help specify this.
An unordered collection data type consisting of several key-value pairs. Return undefined if accessing a nonexistent property can be dynamically assigned, dynamically deleted property
person.haha
delete person.name
Copy the codeAttribute method judgment
Person. HasOwnProperty ("age") // This function can return property methods that already exist in personCopy the codeJson conversion
Parse ('{"name":"quipy"}') var a= json.stringify (person) var b= json.parse ('{"name":"quipy"}'Copy the codeEight, time,
var now=new Date()
now.getFullYear()
now.getMonth()
now.getDate()
now.getDay()/ / week
now.getHours()
now.getMinutes()
now.getSeconds()
now.getTime()/ / timestamp
now=new Date(Timestamp)// Three different expressions
now.toLocaleString
now.toLocaleString()
now.toGMTString()
Copy the codeNine, DOM
Window stands for browser
// Browser size
window.innerHeight
window.innerWidth
window.outerHeight
windowOuterWidth Navigator. userAgent returns UA Navigator. platform, operating system type navigator.language, browser setting language// Computer screen resolutionScreen. width: screen width screen.height: screen height screen.colorDepth: Returns the number of color digits, for example8,16,24
Copy the codeThe Location positioning
//http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; / / '8080'
location.pathname; // '/path/index.html'
location.search; / / '? a=1&b=2'
location.hash; // 'TOP'
location.reload()// Refresh the page
location.assign(url)// Load to other sites
Copy the codeDOM
document.title// Returns the page title, which can be dynamically assigned
document.cookie/ / return the cookie
// forward and backward
history.back()
history.forward()
Copy the codeAdd and delete
<div id="js">javascript</div>
<div id="app">
<div id="i1">111</div>
<div id="i2">222</div>
</div>
Copy the codedom=document.getElementById("i1");// Obtain by location ID
dom.children/firstChild/lastChild;// Select the child node from the parent node
dom.nextElementSibling/previousElementSibling;// Select sibling nodes
// Update the node dynamically
dom.innerText="123"
dom.style.color="red"
// Remove the child node from the parent node
self=document.getElementByID("id")
father=self.parentElement
father.removeChild(self)
// If the child node is deleted by subscript, the subscript of the following node changes
father.removeChild(father.children[1]) insert the node, insert the existing label into the specified position, that is, swap ordervar js=document.getElementById("js")
var newP=document.createElement("p")
newP.id="newP"/ / the id attribute
newP.innerText="hello"// Text content
newP.setAttribute("type"."text")// universal
var list=document.getElementById("app")
list.appendChild(js)// Add it at the end
list.insertBefore(newP,i1)// Insert newP before i1
Copy the codeTen, JQ
The formula
$("selector").action()
Copy the codeLike CSS selectors, selectors are selected by ID, label, and class
Manipulating DOM nodes
$("#id").text()// Get the return value
$("#id").text("text")/ / assignment
$("#id").show()
$("#id").hidden()
Copy the code