Summary and sharing of js basic knowledge points

This article mainly shares with you a summary of js basic knowledge points, hoping to help everyone.

How to write your js code on a website or page:
1.js layering (function): jquery (tool) component (ui) application (app), mvc (backboneJs )
2.js planning (): avoid global variables and methods (namespace, closure, object-oriented), modularization (seaJs, requireJs)

Commonly used internal classes: Data Array Math String

HTML attribute, CSS attribute
HTML: attribute.HTML attribute="value";
CSS: object.style.CSS attribute="value";

class and float
1.class:className
2.float:cssFloat

Get the object
id:document.getElementById("id name")

Event: User action
Mouse event:
onclick: Click
onmouseover: Put the mouse on
onmouseout: The mouse leaves
ondbclick: Double-click event
onmousedown: The mouse is pressed
onmouseup: The mouse is lifted
onmousemoveMouse movement
Form events:
onfocus: Get focus
onblur: Lose focus
onsubmit: Submit event
onchange: When a change occurs
onreset: Reset event
Keyboard events:
onkeyup:keyboard lifted
onkeydown:keyboard pressed
onkeypress:keyboard pressed once
Window time:onload event
Event executed immediately after the page is loaded
Two ways:
1.<script>window.onload=init/*Function name, no brackets*/;</script>
2.
event: Save relevant information when the event occurs
When the event occurs, event
event.clientX: The X coordinate when the event occurs
event.clientY : Y coordinate when the event occurs
event.target: Event source
event: It must be passed to the function in the form of actual parameters before it can be used

Modify the content in p
innerHTML: All content in the object (text content and label content), generally refers to double labels or containers Tag
innerText: All text content in the object

document.createElement("tag name");
document.body.appendChild(object);
removeChild(object)
document.body is the body tag object
document.documentElement is the html tag object

ECMAscript, BOM, DOM
1.window: the highest level of the object
2.BOM: browser object: browser object model
3.DOM: document object model
4.BOM: it will exist as soon as the web page is opened
5.DOM: code to operate
6.document is the link between DOM and BOM
Document has subordinates, but others have no subordinates [Multiple windows]

window.open("Link","name","Settings");
1.width: Set the window width
2.height: Set the window height
3.left: The distance from the new window to the left end
4.top: The distance from the new window to the top
5.srollbars: Scroll bar [yes, no, 1 ,0】
6.toolbar: Tool class【yes,no,0】
7.location:Address bar
window.close: Close the window
window.close()

Create timer:
One-time timer: window.setTimeout("function()", time t)
Execution: execute js code after time t [will only be executed once]
Time: In milliseconds

Recurring timer: window.setInterval("function()", time t)
Time: in milliseconds
Execution: It will be executed every time t One-time js code [n times]

Clear timer:
Clear one-time timer:window.clearTimeout(timer name)
Clear recurring timer:window.clearInterval(timer name) )
Note: To clear the timer, you must give the timer name. Anonymous timers cannot be cleared.

Method to find the object:
di:document.getElementById("id name");
Tag:document.getElementsByTagName("tag name")//What is obtained is a collection of objects (array)
Object.getElementByTagName(tag name)
name:document.getElementByName("name");/ /form collection (array)
className:document.getElementByClassName("class name");//collection (array)[firefox]
document.images;//get img object (array)
document. links;//Get link object (array)
document.forms;//Get form object (array)
document.body;//body tag object
document.documentElement;//HTML object
event: event information object
this: current object

location object
location.href: return url information [you can get url information, or you can assign a value to it to jump to the page]
location.assign(): Load a new document [Jump page]
location.reload(): Reload the current document [Refresh page]
location.replace(): Replace the current document with a new one Document【Jump page】

The difference between location.assign and location.replace:
location.assign: will generate historical records
location.replace: will not generate historical records

history object:
history. length: The number of URLs viewed
history.back(): Returns the previous page in the history
history.forward(): Loads the next page in the history
history.go(n): Jump to the page specified in the history record. If it is -1, it is actually the function of history.back()

screen object
screen.height: Get the height of the screen
screen.width: Get the width of the screen
screen.availHeight: Get the height without the taskbar
screen.availWidth: Get the width without the taskbar

navigator object
navigator.appName: browser name
navigator.appCodeName: Browser code name
navigator.appVersion: Browser version number and platform information
navigator.userAgent: Browser information

DOM: Describes the relationship between various components of the web page
var obj = document.getElementById("id name")
The blank space in Firefox is also considered a node
parentNode: parent node
childNodes: child node
firstChild: the first child Node
lastChild: the last child node
nextSibling: the next sibling node [Note: must be the same parent relationship]
previousSiblind: the previous sibling node [Note: must be the same parent relationship]

Login verification:
onsubmit: form submission event
onsubmit="return function ()"

Related recommendations:

Detailed explanation of PHP basic knowledge

Basic knowledge that JavaScript must know

Sharing of basic JavaScript interview questions

The above is the detailed content of Summary and sharing of js basic knowledge points. For more information, please follow other related articles on the PHP Chinese website!