As a rookie never come into contact with Javascript before, start with the following aspects, to spend a little time Javascript preliminary understanding, then the system comprehensive learning Javascript.
Javascript is what
Javascript can do
Javascript how to use
Javascript is what
JavaScript is a scripting language that can be inserted into the HTML page programming code. After Javascript into the HTML page, it can be performed by all modern browsers.
Javascript can do
JavaScript is a scripting language inserted into web pages, so the role of JavaScript in the web page. JavaScript is very powerful:
JavaScript can change page for all HTML elements
JavaScript can change all HTML attributes page
JavaScript can change all the CSS style pages
JavaScript can respond to page all events
Javascript how to use
JavaScript in the HTML using <script> </ script> identity, typically placed in the <head> or at the bottom of the page.
JS file may be introduced through the external <script src = "xx.js"> </ script>.
JavaScript is case-sensitive.
Declare variables var does not indicate the type of variable, the variable value is determined by its type. Var name = "a";
not to declare a variable value, which value is actually undefined. If the variable is re-declared value is not lost.
JavaScript has dynamic data types: X = var. 6; var X = "A";
JavaScript string available single or double quotes.
JavaScript array: var A = new new the Array ();
var A = new new the Array ( "A", "B", "C");
var A = [ "A", "B", "C"];
the rest of the basic usage similar to the java.
Objects are separated by braces. Within brackets, the name and attribute of the object in the form of value pairs (name: value) is defined. Properties are separated by commas:
var Person = {FirstName: "Bill", LastName: "Gates", ID: 5566};
Undefined variable does not contain this value represents the value. By setting the value of the variable to null to clear variable.
Everything is an object in JavaScript: numbers, strings, arrays, date ...... ..
JavaScript objects is to have data attributes and methods.
JavaScript Object Create: create a new object in two different ways:
1) defining and creating an instance of the object
2) function to define the object, and then create a new object instance of
method: define and create instances of the object
person = new Object ( );
Person.firstName = "Bill";
person.lastname = "Gates";
person.age = 56 is;
person.eyecolor = "Blue";
Or person = {firstname: "John" , lastname: "Doe", age: 50, eyecolor: "blue"};
two: object constructor
function Person (FirstName, LastName, Age, EyeColor)
{
this.firstname = FirstName;
this.lastname = LastName;
this.age = Age;
this.eyecolor = EyeColor;
function name () {} can be nested into the constructor
}
the JavaScript language is object-oriented, but does not use class JS, not with class to create objects. JavaScript-based prototype, rather than class-based.
Can be used in a loop through the object for attributes for (variable in object) {} block of code in the loop body is executed once for each attribute.
JavaScript function function name () {}. JavaScript can directly call can also be called at any position during a time of occurrence.
When JavaScript function return value, to return XX together.
Global variables in JavaScript after the page is closed delete, delete local variables in the function after the operation.
JavaScript operator if switch for while break and the like java.
JavaScript abnormalities similar errors in java, throw try {} catch (err ) {}.
JavaScript is only one type of digital, all figures are 64. Properties and methods of the following figures:
the JavaScript string usage example:
length: length attribute indexOf () method: locating a position of a character first appears
Match () method: Find specific character string.
toUpperCase () method: string converted to uppercase.
Boolean (logical) objects for non-converted logical value is a logical value (true or false).
If no initial value of the logical object or a value of 0, -0, null, "" , false, undefined , or NaN, the object is false. Otherwise, its value is true (even when the argument is the string "false" time)!
HTML DOM (Document Object Model)
when the page is loaded, the browser will create a page of a document object model (Document Object Model). HTML DOM model is constructed as an object tree.
Find HTML elements, there are three ways: by id find HTML elements. Find HTML elements by tag name. Find HTML elements by class name.
Id HTML elements found by: var x = document.getElementById ( "id ");
If found, x element object that, if not found, return null.
HTML elements found by the tag name: var X = document.getElementById ( "main");
var x.getElementsByTagName Y = ( "P"); the main find <p> Element tag.
Found HTML element class name: invalid IE 5 6 7 8 in.
Change the HTML output stream: document.write () may be used to write to the output stream directly into HTML content.
HTML content changes: document.getElementById (ID) = .innerHTM new new HTML
= "XXX"
change innerHTML
change the HTML attributes: document.getElementById (id) .attribute = new value
, such as:. Document.getElementById ( "image") sr c = "landscape.jpg";
change the HTML style: document.getElementById (id) .style.property = new style
such as: document.getElementById ( "P2") style.color = "Blue";.
the onclick = "document.getElementById ( ' p1 '). style.visibility =' hidden ' " click to hide p1
onclick =" document.getElementById (' p1 '). style.visibility =' visible ' "
Click to show p1 HTML events:
the onload and onunload event is triggered when users enter or leave the page.
onload event can be used browser type and version detection visitor's browser, and based on this information to load the correct version of the page.
onload and onunload event can be used to handle cookie.
onchange event often combined validation of input fields to use.
onmouseover and onmouseout event can be used when the user's mouse is moved over the HTML element or elements out of the trigger function.
onmousedown, onmouseup and onclick constitute a part of all mouse click events. First, when you click the mouse button, the trigger onmousedown event, when the mouse button is released, it will trigger onmouseup event, finally, when the completion of a mouse click, it will trigger the onclick event.
Create a new HTML element:
var para = document.createElement ( "P");
var = document.createTextNode Node ( "This is a new paragraph.");
Para.appendChild (Node);
or:
var = document.getElementById Element ( "div1");
element.appendChild (para);
remove the existing HTML elements: find the child element you want to delete, and then use its properties to find parentNode parent element, then delete child elements from the parent element. (Must be removed by the parent node)
var Node = document.getElementById ( "P1");
node.parentNode.removeChild (Node);
Continue to learn DOM tree: in the HTML DOM, everything is a node. DOM node tree is regarded as the HTML. All nodes in the tree can be accessed via JavaScript through the HTML DOM. All HTML elements (nodes) can be modified, or you can create or delete nodes.
All HTML element is defined as an object, and the programming interface is an object method and object properties.
DOM objects commonly used methods:
The easiest way to get the element content is to use the innerHTML property. innerHTML property to get or replace the content of HTML elements is useful.
nodeName property specifies the name of the node.
nodeName is a read-only
nodeName with the same tag name of an element node
nodeName attribute with the same name attribute node
nodeName text node is always #text
nodeName document node is always #document
nodeValue property:
value nodeValue attribute of a given node.
NodeValue element node is null or undefined
nodeValue text node is the text itself
nodeValue attribute node is an attribute value
nodeType property returns the type of node. nodeType is read-only.
jQuery
jQuery is a JavaScript library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
jQuery library contains the following features:
HTML elements selected HTML elements operating manipulate HTML CSS JavaScript effects and animation event function HTML DOM traversal and modification Utilities AJAX
jQuery adding
<head>
<Script of the type = "text / JavaScript" src = "jquery.js" > </ Script>
</ head>
jQuery basic syntax: $ (seletor) .action ()
$ (the this) .hide () - hide the current element
. $ ( "p") hide () - hides all paragraphs
$ ( " .test ") hide () -. Hide all class =" test "of all elements
$ (" # test ") hide () -. Hide all id =" test "element
$ ( "# id") function uses to perform the function id and $ # of attention.
jQuery selector: Note # and [] usage
jQuery Event: Note selector usage.
jQuery has a strong operational methods of HTML elements and attributes.
Obtain content - text (), html () and Val ()
three simple and practical method for jQuery DOM operations:
text () - sets or returns the text content of the selected element
html () - Set the selected element or returns the content (HTML tags)
val () - set or return values val form field ( "123");
to obtain attributes: attr () method
set property: $ ( "# w3s") attr ({.
"the href": "http://www.w3school.com.cn/jquery",
"title": "W3Schools jQuery the Tutorial"
});
Javascript code jQuery jQuery used as shorthand notation $.
Learning Ajax
Ajax = Async javascript and xml for exchanging data with the server front end can be a part of an asynchronous update pages without loading the entire page. You can quickly create dynamic web technology.
The XMLHttpRequest object is the cornerstone of Ajax.
Create Object:
sending a request:
get the response:
Asynchronous communications, asynchronous with the server between Ajax: transmission data is not updated, a part of the page to be updated when the data update is complete. HTTP-based protocol, the connection can not maintain a permanent HTTP protocol, which makes Ajax must set the frequency of server interaction.