JS Basic Knowledge 4

1. Array See movie cinema seats large variables inside can put a lot of value var arr = [1,3,57];    var ar = new Array ();   New Object ();  New Date () var txt = ["Song Jiang", "Zhang Fei"];     Use array: array name [index number] txt[1] = = Zhang Fei txt.length; Property Traversal array: for (Var i=0;i<txt. length;i++)  {Console.log (txt[i])} txt[i] txt array 1.2 Two small loop loops for (initialize; condition; increment) {} while () when do {} and () while (condition) {statement}var J= 1;While (j<=100){sum1+=j; j + +;} Console.log (sum1);d o while executing at least once while not necessarily 1.3 multi-branch statements Switchswitch with if else if else if else almost the same but switch efficiency is more Good. The effect is actually: multi-select 1 from a plurality of inside select 1.   Syntax format: switch (parameter) {case parameter 1: statement;    Break   Exit meaning case parameter 2: statement;    Break The meaning of the exit ... default: the statement;} <script>window.onload = function () {//get element var txt = document.getElementById ("txt");        var btn = document.getElementById ("btn");            Btn.onclick = function () {var val = txt.value;                    Switch (val) {case "Apple": Alert ("Apple Price is: 5 Yuan");                Break                    Case "banana": Alert ("Banana price is: 2 Yuan");                Break                    Case "pear": Alert ("The price of the pear is: 1.5 yuan");                Break                    Case "Chinese cabbage": alert ("The price of Chinese cabbage: 9 cents");                Break            Default:alert ("No stock Today"); }        }    }</Script>1.4 drop-down menu event onchange sele.onchange = function () {} When changing the event<Script>window.onload= function(){        varSele=document.getElementById ("Sele"); Sele.onchange= function(){           //alert (this.value);            Switch( This. Value) {                 Case "1": Document.body.style.backgroundImage= "URL (images/chun1.jpg)";  Break;  Case "2": Document.body.style.backgroundImage= "URL (images/xia1.jpg)";  Break;  Case "3": Document.body.style.backgroundImage= "URL (images/qiu1.jpg)";  Break;  Case "4": Document.body.style.backgroundImage= "URL (images/dong1.jpg)";  Break; }        }    }</Script>Effect: 1.5 Common methods of arrays we often want to operate on an array, may be appended, may be deleted, etc. 1.5.1 Add array var arr = [1,3,5]; We want it. 7 This number is placed behind this array I want to [1,3,5,7];1. Push () ★★★★★ behind pushes the push () method to add one or more elements to the end of the array and return the new length. Push push goes to put var arr =[1,3,5]→arr.push (7) → The result becomes: [1,3,5,7];2.  Unshift () puts the Unshift () method from the front of the array to add one or more elements to the beginning of the array and returns the new length of var arr = [1,3,5]→arr.unshift (0) → The result becomes [0,1,3,5] Note: Var dom  = [1,3,5];console.log (Dom.push (7)); Returns the length of the array 41.5.2 Delete array contents 1. Pop () Remove last element pop () remove last element return value is return last value var arr = [1,3,5]→arr.pop () → result [1,3] 2. Shift () removes the first element of the shift () method to remove the first element of the array and returns the value of the first element var arr = [1,3,5]→arr.shift () → result [3,5] 1.5.3 connect two arrays Co NCAT () This method is used to concatenate two or more arrays.  It does not change the existing array, but only returns a copy of the concatenated array var aa = [1,3,5]; var bb = ["A", "B", "C"];     Aa.concat (BB); Results: [1,3,5, "A", "B", "C"];1.5.4 join () converts the array to a string join () to concatenate the elements of the array into a string by specifying the delimiter. Syntax Arrayobject.join (separator) array name. Join (symbol) array conversion to string parameter separator optional. Specifies the delimiter to use. If this argument is omitted, a comma is used as the delimiter. var arr = [1,2,3];console.log (arr.joIn ("-")) The result is: The 1.5.5 string converts a string into an array split () join    <=>the split Split () method is used to split a string into a string array syntax Stringobject.split (separator,howmany) parameter separator optional. Specifies the delimiter to use. If this argument is omitted, a comma is used as the delimiter. Howmany is optional.   This parameter specifies the maximum length of the returned array 1.6 DOM (emphasis) We JS have three parts?   ECMAscript DOM BOM Core (ECMAscript) The European Computer Manufacturers Association describes the syntax and basic objects of JS. var aa var aa is not the same as the Document Object Model (DOM) learning approach and interface Browser object Model (BOM) to learn how to interact with browsers Window.alert () very large Compatibility issues 1.6.1 DOM Definition DOM provides a structured representation of the document and defines how the document structure is accessed through a script. The purpose of this is to allow JS to manipulate HTML elements to make a specification. DOM tree 1.6.2 node tag element node by the structure diagram we can see that the entire document is a document node. Each of the HMTL tags is an element node. The text in the tag is the text node. The properties of the label are attribute nodes. Everything is a node ...    1.6.3 Access Node We've learned several access nodes: getElementById () ID Access node getElementsByTagName () Tag Access node Getelementsbyclassname () class name Compatibility issues mainstream browser support IE 67 8 don't know what to do? We encapsulate our own classes ourselves.  1.6.4 encapsulates its own class principle: (CORE) We are going to take out all the boxes and use the traversal method, judging by the classname of each box. If equality is left. <Script>window.onload= function(){       //encapsulate your class name        functiongetclass (classname) {//if the browser supports it, return directly            if(document.getelementsbyclassname) {returndocument.getelementsbyclassname (classname); }            //browsers that are not supported            vararr= []; //array for storing the satisfies            varDom=document.getElementsByTagName ("*"); //alert (dom.length);             for(varI=0; I<Dom.length;i++)            {                if(Dom[i].classname==classname)                {Arr.push (dom[i]); }            }            returnarr; } console.log (GetClass ("Demo"). length); }</Script>end, split version 1.7 Judging true or false we use conditional statements to judge the true and false of the 5 big data types; Data conclusion numeric type all numbers are true, 0 is a false string all strings are true, ' strings are false objects all objects are true, NULL is false undefined Undefined is false, there is no real 1.8 relationship between the individual nodes of the access relationship 1.8.1 Parent: The first layer of the ParentNode Pro<Script>window.onload= function(){        varx=document.getElementById ("x"); X.onclick= function(){             This. ParentNode.style.display= "None"; //It's his father who turned it off.        }    }</Script>1.8.2 Brothers node nextsibling next sibling of IE 678 know nextelementsibling other browsers know previoussibling the same as the last brother Previ      Ouselementsibling we want to be compatible we can write together | | or var div = one.nextelementsibling | | One.nextsibling;div.style.backgroundcolor = "Red";  You must first write the normal browser after writing ie678 1.8.3 child node FirstChild first child ie678firstelementchild first child Normal browser var one.firstelementchild ||     One.firstchild; lastChildlastElementChild1.8.4 child node ChildNodes selects all children ChildNodes: It is a standard property that returns a collection of child elements of a specified element, including HTML nodes, all attributes, text nodes (legitimate) Firefox Valley Song and other high this version of the line will also be seen as a child node using NodeType = = 1 O'Clock is the element node to get element node tag element children important Select all children (only element node) this better and like it. (concubines) IE 678 contains the comment node this to avoid opening.   1.9 DOM node operation new node Insert node Delete node clone node and so on 1.9.1 create node var div = document.createlement ("Li");  The above meaning is to generate a new Li tag 1.9.2 insert node 1.    AppendChild ();  Add child append added meaning: Add the child to the last side of the box.   2. InsertBefore (inserted node, reference node) child node add child to write two parameters Demo.insertbefore (Test,childrens[0]); Put it in front of the first child. If the second argument is nulL default this newly generated box to the last face. Demo.insertbefore (test,null); 1.9.3 remove Node removechild () child node var da = document.getElementById ("Xiongda");d EMO.R Emovechild (DA); 1.9.4 clone node CloneNode (); Copy node parentheses inside can be with parameters, if the inside is true deep copy, in addition to copy this box, also copy child nodes if False shallow copy only copy this node does not copy child nodes.

JS Basic Knowledge 4