Home > Developer > Web Develop
How to write your JS code on a website or a page:
1.js tiering (function): jquery (Tool) component (UI) app, MVC (BACKBONEJS)
2.js planning (): Avoid global variables and methods (namespaces, closures, object-oriented), modularity (Seajs,requirejs)
Common internal classes: Data Array Math String
HTML Properties, CSS Properties
HTML: properties. HTML attribute = "value";
CSS: Object. Style.css property = "value";
Class and float
1.class:classname
2.float:cssfloat
Get Object
ID:DOCUMENT.GETELEMENTBYID ("ID name")
Event: User's action
Mouse events:
OnClick: click
onmouseover: Put the mouse on
onMouseOut: Mouse Away
Ondbclick: Double-click event
OnMouseDown: mouse button down
OnMouseUp: the mouse lifts up
OnMouseMove Mouse Movement
Form events:
Onfocus: Get Focus
Onblur: Losing focus
OnSubmit: Submit Event
OnChange: When a change occurs
OnReset: Resetting Events
Keyboard events:
OnKeyUp: Keyboard lifted
OnKeyDown: Keyboard pressed
onkeypress: Keyboard keys once
Window Time: OnLoad event
Events executed immediately after page load is complete
Two different ways:
1.<script>window.onload=init/* function name, no parentheses */;</script>
2.<body onload= "init ()" ></body>
Event: Save related information When an event occurs
When events occur, the event
Event.clientx: The coordinates of x when the event occurs
Event.clienty: The coordinates of y when an event occurs
Event.target: Event Source
Event: Must be passed to the function in the form of an actual parameter before it can be used
<input type = "button" value = "click" onclick = "fn (event)" >
Modify the contents of a Div
InnerHTML: All content in an object (text content and label content), generally referred to as double label or container label
InnerText: All text content in an object
Document.createelement ("label name");
Document.body.appendChild (object);
RemoveChild (object)
Document.body is the body tag object
Document.documentelement is an HTML tag object
Ecmascript,bom,dom
1.window: Object superlative
2.BOM: Browser objects: Brower object model
3.DOM: Document Object Model:
4.BOM: Web page will exist as soon as it opens
5.DOM: Go to the code of operation
6.document is the link dom and BOM
Document has subordinates, others have no subordinate "multi-Window"
window.open ("link", "Name", "Settings");
1.width: Set window width
2.height: Set Window height
3.left: New window to left end distance
4.top: Distance from top of new window
5.srollbars: Scroll bar "yes,no,1,0"
6.toolbar: Tool class "yes,no,0"
7.location: Address bar
Window.close: Close Window
Window.close ()
To create a timer:
Disposable Timer: Window.settimeout ("function ()", Time t)
Execution: Executes the JS code after the time T "executes only once"
Time: in milliseconds
repeatability Timer: Window.setinterval ("function ()", Time t)
Time: in milliseconds
Execution: every time t will be executed once JS code "n Times"
Clear timer:
Clear Disposable Timer: window.cleartimeout (timer name)
Clear Recurrence Timer: Window.clearinterval (timer name)
Note: To clear the timer, the timer name must be given, and the anonymous timer cannot be cleared
Ways to find objects:
DI:DOCUMENT.GETELEMENTBYID ("id name");
Tags: document.getelementsbytagname ("tag name")//Gets a collection of objects (arrays)
Object. Getelementbytagname (standard signature)
Name:document.getElementByName ("name name");//form collection (array)
ClassName:document.getElementByClassName ("class name");//Collection (array) "Firefox"
document.images;//getting an IMG object (array)
document.links;//getting a linked object (array)
document.forms;//getting Form objects (arrays)
Document.body;//body Label Objects
Document.documentelement;//html Object
Event: Events Information Object
This: current object
Location Object
Location.href: Return URL information "can get URL information, you can also assign value, implement jump page"
Location.assign (): Load New Document "Jump page"
Location.reload (): Reload the current document "Refresh page"
Location.replace (): Replaces the current document "Jump page" with a new document
The difference between location.assign and location.replace:
Location.assign: Will generate a history record
Location.replace: does not produce a historical record
History object:
History.length: Number of URLs viewed
History.back (): Returns the previous page of the history record
History.forward (): Load the next page in the history
History.go (n): Jumps to the page specified in the history, if 1 is actually the function of History.back ()
Screen Object
Screen.height: Get the height of the screen
Screen.width: Gets the width of the screen
Screen.availheight: Gets the height to drop the taskbar
Screen.availwidth: Gets the width to remove 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: Describe the relationship of each component of a Web page
var obj = document.getElementById ("ID name")
Firefox is a node in the blank Space
ParentNode: Parent Node
ChildNodes: Child nodes
FirstChild: First child node
LastChild: Last child node
NextSibling: Next Sibling node "Note: Must be a half-class relationship"
Previoussiblind: Previous Sibling node "Note: Must be a half-level relationship"
Login Verification:
OnSubmit: Form Submission Event
Onsubmit= "return function ()"
Forward
Tags: JavaScriptJS Basic Knowledge Points Summary
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
