JS simple operations and forms and events

Source: Internet
Author: User

HTML: Used primarily to place the desired controls on the page.

CSS: Used primarily to control the style of the page and the controls above.

JS: Mainly used to control the effects on the page and data interaction.

JS is also divided into order, condition (IF () ... ELSE ()), Loop (for ()) three statements, basically consistent with C #.

JS defines variables uniformly with Var, which defines an array of non-fixed lengths and types, similar to collections in C #.

Simple operation of JS:

Dom Operation:

First, window:
1, window.onload page open and then perform the subsequent operation

2, window.open (1,2,3,4)-Open a new page,
1-Open the page's address: ' http://www ... '
2-target:_blank Open in New page
3-Open the window style, Toolbar=no: no toolbar; Menubar=no: no menu bar; Status=no: no status bar;
Width,height: Width and height when open;
LEFT=100: Open the window to the left margin of the screen;
Resizable=no: The open window size is not adjustable;
scrollbars=no; no scroll bar appears;
location=no; no address bar appears;

Note: window.open (' xxx ', ' ', ')

3, Window.opener-open page 2 of the original page, you can control the original page in page 2

4, Window.close (); -Close the current page

5, Window.setinterval (' Code to execute ', interval of execution-milliseconds); -Duplicate Execution code
6, Window.settimeout (' Code to execute ', execution wait Time-ms); -Wait for some time before executing the code

Both of them can be received with a variable, var a = window.setinterval (' xxx ', 1000);
If you want it to stop, Window.clearinterval (a);

7, window.navigate (' url '); -Page Jump
8, Window.moveto (x, y); -Position your browser's location
9, Window.resizeto (x, y); -Write!!!!! First
10, Window.scrollto (x, y); -It's like an anchor.

Second, window.history
Window.history.back ();

Third, window.location
Window.location.href-Used as a value to return the address of the current page

Document object:

1, the ID to take the value-document.getElementById (' to take the id '); -The return is an object
3, class to take Value-document.getelementsbyclassname (' xxx '); -Returns a bunch of objects

4, the tag name to take the value-document.document.getElementsByTagName (' xxx '); -Returns a bunch of objects
2, name to take the value-document.getelementsbyname (' name to take '); -Returns a bunch of objects

InnerHTML = "; If the assignment is marked, it will compile the markup to display
InnerText = "; put what you see, put the mark will not compile for you

The normal tag can rely on the above method to fetch the content, but the form element needs to use the Value property to get the content inside

1, add, delete, modify, Get Properties
SetAttribute (' attribute name ', ' attribute value '); -Add, modify
RemoveAttribute (' attribute name '); -delete
getattribute (' attribute name '); --Get Properties
2, add, delete, modify style
object. style. style name = value;

12 types of forms in HTML

Text class:
Password-Password box
TextArea-Text field
Hidden-Hidden fields
Button class:
Button-Normal buttons
Image-Image button
Reset-Reset button
Select class:
Radio-Radio Box
CheckBox-check box
Select option-drop-down list
File-Upload dialog box

The value corresponding to the radio and checkbox should be placed in a label, and the for= corresponding id!!! of the label should be set.

HTML events
OnClick-click event
OnDblClick-Double-click event
Onmouseover/onmouseout-mouse Move in/remove events
OnMouseMove-triggers when the mouse moves
OnChange-Triggers when content changes (triggered when focus is lost)
Onfocus-Focus Entry Event
Onblur-Focus Loss Event
Onkeydown/onkeyup/onkeypress-Press, lift, press and lift the button

form element, add runat = "server", it becomes the server control, the server can see it,
The onclick event for this form element is a JS code event, OnServerClick is a C # server code event
server control, OnClick is a C # server event, OnClientClick is a JS event

JS simple operations and forms and events

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.