The default behavior of unlinking :
get the parameters passed from one html page to another html interface.
Method 1: var Ohref=window.location.href;
alert(Ohref) //http://localhost:8080/route_list.html? cid=1
var arrhref=Ohref.split("?cid=");
var cid= arrhref [1];
alert(cid); // cid=1
method two: var cid = getParameter("cid");
The attribute value of the tag in html can use single quotes or double quotes. If it is used in js to output HTML statements to the interface,
use single quotes to splice strings inside.
Basic data types in JS: undefined, null, boolean, string, number to
define a variable with var i = 1; var j="happy" without specifying what data type it is,
typeof in js depends on what type of data is
The "=" in js is the full equal sign, which means that the time value and type must be equal.
"" As long as the value is equal,
the output of js:
alert() directly pop-up output
documen.write() is output to the page, which is A string of data is spliced. The value of the tag attribute is written in single quotes.
consol.log() is output to the browser's console.
Get the elements on the page:
documen.getElementById(id name)
JS declaration function:
var function name=function(){
}
Or: the name of function(){
}
JS development steps:
1. Determine the event, such as: single click, double click event.
2. Usually there is a function after the event to process the event.
3. The function body usually manipulates the elements on the page and performs corresponding operations.
Timer: window.setInterval (code block to be executed, time interval) The return value is the id of the timer, the code block is executed every certain time interval
window.setTimeout ( code block to be executed, time interval) In the time interval Execute the code block once to
clear the timer: clearInterval (id of the timer)
Change the content of the label:
//This is to get the div object based on the Id
var i=document.getElementById("name");
//This is the style that can set the font and other attributes
i.innerHTML="Already changed"
//This can only change the text Content, other attributes cannot be moved.
i.innerText="I changed it the second time";
To change the picture in the img tag is to change the value of the attribute src
var a=document.getElementById("image1");
//Re-point to another picture according to the tag's attribute src
a.src="img/4.jpg";
Other binding events:
onfocus event: get focus event
onblur event: lose focus event
onkeyup event: key up event
If the attributes in the tag are enclosed in double quotes,
if the parameters in the function are passed, use single quotes.
For the definition of the method:
there are only variable names in the parameter list, without its type
function showTips(spanId,spanContent) { var span=document.getElementById(spanId); span.innerHTML= spanContent; }
When the form is submitted, there must be an onsubmit event with a verification function in it, and this function must
return true when the return value is returned. If it returns false, the submission fails.
For example
JavaScript is a client-side scripting language that is used to verify the data sent to the server on the front-end, based on objects and events. You only need a browser to do it.
The object-oriented inheritance mechanism is based on prototypes.
A complete JavaScript should consist of the following three different parts.
1. The core (ECMAScript) is actually equivalent to the content of the javase part.
2. The Document Object Model (DOM) is for XML but has been extended for HTML application programming interface (API, Application Programming Interface), which is the body we wrote The label object.
3. The browser object model (BOM) is to access and manipulate the objects provided by the browser window.
Generally speaking, when the JS code is getting larger and larger, we'd better save it as a .js file and
import it through src . It also has the characteristics of high maintainability, cacheability (load once, no need to load), and convenient future expansion.
Literal: It is the data value directly displayed in the program
Data type:
There are 5 simple data types in ECMAScript: Undefined, Null, Boolean, Number and String.
A complex data type: —Object
typeof operator is used to detect the data type of a variable.
Undefined: Indicates that only one variable is defined without initial assignment, for example: var a; the value of this variable is undefined.
Null type: The Null type is a data type with only one value, that is, the special value null, which represents a null object reference (the typeof operator detects null and returns object).
Boolean type: The Boolean type has two values (literals): true and false.
Although the Boolean type has only two literals, true and false, all types of values in ECMAScript
have equivalent values to these two Boolean values.
The following are the rules for converting other types into Boolean types
Number type: The Number type contains two types of values: integer and floating point.
The range of Number type value is: Number.MIN_VALUE-Number.MAX_VALUE
NaN, or Not a Number, is a special value. This value is used to indicate that an
operand that originally returned a value does not return a value. (So that no errors will be thrown).
var num = 0 / 0; //NaN
var num = 12 / 0; //Infinity
var num = 12/0 * 0; //
The result of any operation on NaN with NaN is NaN, and NaN is not equal to itself (NaN Is not equal to any value).
isNaN() judges whether a variable is a numeric value, if it is not a number, it returns true, if it is a numeric value, it returns false.
Other types of data are converted into number type data
(emphasis on mastering) there are 3 functions that can convert non-numeric values Converted to numeric values: Number(), parseInt() and
parseFloat().
The Number() function is a conversion function, which can be used for any data type, while the other two are specifically used to convert a string
into a numeric value.
String type: The String type is used to represent a character sequence composed of zero or more characters, that is, a string. Strings can be represented by double quotation marks (") or single quotation marks ('). It can only be represented by double quotation marks in Java. The toString() method of
other types of data conversion string
generally does not need to pass parameters, but in the value conversion when a string, you can pass
the argument in decimal.
If you do not know whether before the transition variable is null or undefined circumstances, we can also use the transfer
type function string (), this function can be any type of value into a character string.
Object type: An object is actually a collection of data and functions (functions). Objects can be created by executing the new operator followed by the name of the object type to be created.
var obj = new Object(); Object() is an object structure, where you can pass parameters at will, you can pass numeric values, strings, Boolean values, etc.
Operator:
If the value in the arithmetic operation is not a numeric value, the background will first use the Number() conversion function to convert it to a numeric value (implicit conversion).
Logical operator
Insert picture description here.
String operator: There
is only one string operator, namely: "+". Its function is to add two strings.
Rule: At least one operand is a string.
var box = '100' + '100'; //100100
var box = '100' + 100; //100 100
var box = 100 + 100; //200
Array:
1. Use the literal method to create an array
var arr = []; //Create an empty array
var arr = ['Han Tengfei',21,'Luoyang','Sports']; //Create an array containing elements
2. Use the new keyword to create an array
var arr = new Array(); //Create an array
var arr = new Array(10); //Create an array with 10 elements
var arr = new Array('Han Tengfei ',21,'Luoyang','体育'); //Create an array and assign the elements
3. Use the index subscript to read the value of the array
alert(arr[2]); //Get the third element
arr[2] ='Student'; //Modify the third element
arr[4] ='Computer programming'; //Add the fifth element
4. Use the length property to get the amount of array elements
alert(arr.length) // Get the number of elements
arr.length = 10; //Force the number of elements
arr[arr.length] ='JS technology'; //Add an element to the array by length
Methods in the array
join() method:
If you use the join() method, you can use different separators to construct this string.
The commonly used methods of strings are the same as most of the
Math objects in java.
3. The rounding method
Math.ceil() performs rounding up, that is, it always rounds the value up to the nearest integer;
Math.floor() performs the rounding Round down, that is, it always rounds the value down to the nearest integer;
Math.round() performs standard rounding, that is, it always rounds the value to the nearest integer;
4.random() method
Math The .random() method returns a random number between 0 and 1, excluding 0 and 1. If you want to be larger than this
range, you can apply the following formula:
value = Math.floor(Math.random() * total number + first value), including the following numbers
The Date type in the Date object JavaScript is built on the basis of the java.util.Date class in early Java.
var date = new Date(); Create a date object
function produce() { // Math.floor(Math.random() * total + first value) var number=Math.floor(Math.random()*900000+100000); document.getElementById(“span01”) .innerText=number; } function timer() { setInterval(produce,1000); } Only the function name must be passed in here, and () cannot be added, otherwise, this method will only be called once
Since the html document is carried out from top to bottom, but if there is no event, you can only put javascript below the document, otherwise there is no way to put it on it. At this time, event response is required. When the event is triggered, javascript will be automatically loaded .
This model is the most traditional and simple way to handle events. In the inline model, the event handler is
an attribute of HTML tags, used to handle specified events. Although inline was used more in the early days, it was mixed
with HTML and not separated from HTML.
Event processing: In fact, it can be regarded as an attribute of the label element object, and the corresponding event processing (that is, the execution function) is executed
by calling the label object name.attribute=function(){ } to respond to the event.
1. Mouse events, all elements on the page can trigger
click: it is triggered when the user clicks the mouse button or presses the enter key.
input.onclick = function () {alert('Haha!'); };
dblclick: triggered when the user double-clicks the main mouse button.
input.ondblclick = function () {alert('Haha!'); };
mouseover: trigger when the mouse moves over an element.
input.onmouseover = function () {alert('Haha!'); };
mouseout: trigger when the mouse moves over an element.
input.onmouseout = function () {alert('Haha!'); };
mousemove: trigger when the mouse pointer moves on the element.
input.onmousemove = function () {alert('Haha!'); };
2. Keyboard event
keydown: When the user presses any key on the keyboard, it will be triggered, if it is held down, it will be triggered repeatedly.
onkeydown = function () {alert('Haha!'); };
keypress: Triggered when the user presses a character key on the keyboard, if it is held down, it will be triggered repeatedly.
onkeypress = function () {alert('haha!'); };
keyup: triggered when the user releases the key on the keyboard.
onkeyup = function () {alert('haha!'); };
3.
HTML event load: fired on the window when the document page in HTML is fully loaded, or fired on the frame set after the frame set is loaded. Can be used to initialize the page to send ajax request data
window.onload = function () {alert('Haha!'); };
select: trigger when the user selects one or more characters in the text box (input or textarea).
input.onselect = function () {alert('Haha!'); };
change: triggered when the content of the text box (input or textarea) changes and loses focus.
input.onchange = function () {alert('Haha!'); };
focus: Triggered on the window and related elements when the page or element gets the focus.
input.onfocus = function () {alert('Haha!'); };
blur: Triggered on the window and related elements when the page or element loses focus.
input.onblur = function () {alert('Haha!'); };
submit: Triggered on the element when the user clicks the submit button.
form.onsubmit = function () { must have a return value, return true or false
alert('Haha!'); };
reset: Triggered when the user clicks the reset button on the element.
form.οnreset = function () {alert('Haha!'); };
For the checked, disabled, hidden and other attributes in the input box, as long as there is this attribute in it, it is true, regardless of what is written in the attribute value behind, it is generally written as checked="checked", disabled="disabled" in js When judging inside, use the attribute value true/false to judge.
Node operation
An element node includes an attribute node and a text node, these two are the child nodes of the element node.
1.1 The method of finding the node The method of
obtaining the element function
document.getElementById("id") Get the unique element by id
document.getElementsByName("name") Get a set of tags via the name attribute
document.getElementsByTagName ("tag name") Pass the tag name Get a set of tags
document.getElementsByClassName("class name") Get a set of tags by class name
1.2 DOM method of
creating elements The method of creating elements
document.createElement("tag name") Create an element
element object.setAttribute("Attribute Name", "attribute value") set the attribute of the element
document.createTextNode("text content") to create a text node
1.2.1 The method of modifying the DOM tree The effect of the method of
hanging an element on the DOM tree
Parent element.appendChild(child element) Append the child element to the last element of the
parent element Parent element.removeChild(child element) Delete a child element
element .remove() remove yourself