Die systematischste Zusammenfassung der wichtigsten Punkte von JavaScript (ohne grundlegende Sprachsyntax)

1. Variablen
1. Sie können ein neues Array („1“, „2“) verwenden.
2. Sie können Variablen löschen, indem Sie ihnen Null zuweisen, wie zum Beispiel:

//首先定义一个变量
var i1=10;
i1=null;
//此时的i1就被清除了

Wenn Sie Variablen wie diese in einer Funktion definieren, achten Sie auf

funtion demo(){
     x=10;
}
//而此前的代码中都没有出现x，那么这里就是定义了x，在调用demo函数以后，x就是一个全局变量了。

2. Operatoren == und = ==

var i="5";
var j=5;
if(i==j) alert(""hello);
if(i===j) alert("world");

//Der obige Code wird nach der Ausführung nur „Hallo“ angezeigt, da die Werte von i und j gleich sind, die Datentypen von i und j jedoch nicht gleich sind. == erfordert also nur gleiche Werte, === erfordert jedoch nicht nur gleiche Werte, sondern auch gleiche Datentypen.

Drei, Ausnahmeerfassung

try{
     if() throw "";
}catch(err){
     alert(throw);
}

Viertens, Ereignis
onload-Ereignis zum Laden der Webseite
onclick-click-Ereignis
onfocus-Cursor-Sammelereignis
onselect-Textfeldauswahlereignis
Onmouseover-Mouse-Over-Ereignis
Onmouseout-Mouse-Out-Ereignis

5. DOM-Operation
1. Wenn eine Webseite geladen wird, erstellt der Browser das Dokumentobjektmodell der Seite.

2. DOM-Operation HTML
1) js kann alle HTML-Elemente auf der Seite ändern
①Ändern des Ausgabestreams: document.write(); überschreibt den gesamten Inhalt des Dokuments! Mit Vorsicht verwenden!
②Elemente abrufen: document.getElementById(); Methode eines Elements, die erhaltenen Elemente werden in der Reihenfolge angeordnet

document.getElementById("btn").addEventListener("click",function(){
  var x=document.getElementsByName("people");
  var y=x[2].value;
  alert(y);
  });

③HTML-Inhalt ändern: innerHTML; Attributinhalt ändern: Nach Erhalt the object.Attribute = „Attribute value“ dann Ja, Sie können auch die Methode setAttribute() verwenden: Der erste Parameter ist der Attributname und der zweite Parameter ist der Attributwert

document.getElementById("pid"). setAttribute("class","pid2");

Die Methode zum Erhalten des Attributwerts verwendet getAttribute();

alert(document.getElementById("name").getAttribute("name"));

Einige Methoden zur Dom-Steuerung von HTML:

          1，设置属性：如var attr=document.getElementById("demo1");
                              attr.setAttribute("title","dhello");//设置属性
                              var st=attr.getAttribute("title");//得到属性

                              alert(st);


          2.得到子节点：
                         var child=document.getElementsByTagName("ul")[1].childNodes;
                         alert(child.length);


          3得到父节点： var parent=document.getElementsByTagName("li")[0].parentNode;
                          alert(parent.nodeName);

          4创建元素节点：   var body=document.body;
                         var inp=document.createElement("input");//创建一个input节点
                         inp.type="button";//节点类型
                         inp.value="ann";
                         body.appendChild(inp);//把新的子节点添加到指定节点。（添加到末尾 ）

          5创建文本节点


          6删除子节点：<p id="p1">
                         <p id="p1">这是一个段落。</p>
                         <p id="p2">这是另一个段落。</p>
                         </p>

                         var parent=document.getElementById("p1");//找到 id="p1" 的元素：

                         var child=document.getElementById("p1");//找到 id="p1" 的 <p> 元素：

                         parent.removeChild(child);//从父元素中删除子元素：


                         第二种方法：var child=document.getElementById("p1");
                                       child.parentNode.removeChild(child);


          7动态添加节点(课选择添加的位置)
                                       var p=document.getElementById("p");
                                       var node=document.getElementById("pid");
                                       var newnode=document.creatElement("p");
                                       p.inserBefore(newnode,node);
                                                      要添加的 在这之前的

2) js kann alle HTML-Attribute auf der Seite ändern

< ;!DOCTYPE HTML>

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

 <title>hello world</title>

9c3bca370b5104690d9ef395f2c5f8d1
< ;body>

 <a id="aid"/>
 <p id=pid>hello world!!</p>

3f1c4e4b6b16bbbd69b2ee476dc4f83a

 document.getElementById("aid").href="www.baidu.com";//改变属性值

2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

3) js kann alle CSS-Stile auf der Seite ändern

document.getElementById("pid").style.backgrouneColor="red";

4) js kann auf alle Ereignisse auf der Seite reagieren

5) DOM-Objekt steuert HTML

6. Event-Handle EventListener

Ein Event-Handle ist eine Aktion, die ein Ereignis auslöst. Onclick ist beispielsweise das Handle, wenn darauf geklickt wird.

Ereignishandler können in js hinzugefügt werden, wodurch viel Code reduziert werden kann.

Das Folgende ist beispielsweise die herkömmliche Methode zum Auslösen von Ereignissen.

f4d5e46e10f3e67579b6b3e20e30fb19Button120d611986108da972f06c8ab0c8bab5

Das im js-Code hinzugefügte Ereignishandle lautet wie folgt: Die Verarbeitungsfunktion kann keine ()-Klammern hinzufügen!
var x=document.getElementById("btn");
x.addEventListener("click",demo);//Hier gibt es zwei Parameter, einer ist das Handle des Ereignisses und der zweite ist der Funktion zum Behandeln des Ereignisses

Verwenden Sie „removeEventListener()“, um das Handle nach außen zu löschen, Ereigniserfassung (von außen nach innen).

2. Ereignisverarbeitung:
1) HTML-Ereignisverarbeitung: direkt zur HTML-Struktur hinzugefügt

<button onclick="demo()"><button>

2) Dom-Level-0-Ereignisverarbeitung: Weisen Sie einem Event-Handler-Attribut eine Funktion zu

<button id="btn"></button>
<script>
var btn1=document.getElementById("btn");
btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="red";
};     
</script>

//Level 0-Ereignisverarbeitung Die klare Ereignisverarbeitung ist sehr einfach, weisen Sie einfach onclick zu, um sie zu leeren. Beim Setzen wird die Zeit des Objekts auf Null gesetzt, nicht auf das Objekt!
btn1.onclick=null;

//Wenn es mehrere Handler für dasselbe Ereignis gibt, wird der vorherige vom späteren Ereignishandler gelöscht.

btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="red";//被覆盖
};
btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="blue";
};

3) DOM-Level-2-Ereignisverarbeitung:

 addEventListener("事件名"，“事件处理函数”，“true/false”)；

true: Ereigniserfassung

false: Ereignissprudeln
Um die Ereignisverarbeitung zu löschen, verwenden Sie „removeEventListener();“

//dom Level 2 Event-Handler wird nicht überschrieben, sondern Schritt für Schritt analysiert und ausgeführt.

4) IE-Ereignishandler. (Wird in Versionen kleiner oder gleich IE8 verwendet, ähnlich der Verwendung von addEventListener.)

Ein Ereignis hinzufügen attachmentEvent
Ein Ereignis löschen detachEvent

5) Es kann je nach unterschiedlich sein die Browserversion. Schreiben Sie verschiedene Codes

if(btn.addEventListener){

     btn.addEventListener();
}
else{

     btn.attachEventListener()
}

3. Ereignisobjekt: Ein Objekt wird generiert, wenn ein Dom-Ereignis ausgelöst wird.

Attribute des Ereignisobjekts:

1) Typ: Holen Sie sich den Ereignistyp

document.getElementById("btn").addEventListener("click",showType);
function showType(e){
     alert(e.type);
}

2) Ziel: Holen Sie sich das Ereignis Ziel: wo dieses Ereignis ausgelöst wird, also das Objekt Dieses Ereignis ist ein HTML-Element Welche Elemente in.

document.getElementById("btn").addEventListener("click",showTarget);
function showTarget(e){
     alert(e.target);
}

3) stopPropagation(): Ereignissprudeln verhindern: Das Ereignis des innersten Elements wird ausgelöst, aber nachdem dieses Ereignis eintritt, wird auch das Ereignis des oberen Elements ausgelöst, das dieses Element enthält! Manchmal möchten wir also nicht, dass dies geschieht, wodurch verhindert wird, dass es zu einer Ereignisblase kommt.

event.stopPropagation();

4) präventDefault(): Verhindern Sie das Standardverhalten von Ereignissen
event.preventDefault();

//dom 0级事件处理
//  var btn1=document.getElementById("btn");
//  btn1.onclick= function () {
//      document.getElementById("pid").style.backgroundColor="red";
//  };
//
//   btn1.onclick=null;
////dom 2级事件处理,处理函数不能加（）括号符！
//

//var btn=document.getElementById("btn");
//btn.addEventListener("click",demo1);
//
//function demo1(){
//
//// alert("dom 2级事件处理！");
//
//   document.getElementById("pid").innerHTML="dom 2级事件处理！";
//}

//事件对象

//1.获取事件对象的类型

//document.getElementById("btn").addEventListener("click",showType);
//function showType(e){
//   alert(e.type);
//}

//2.获取事件对象的目标

//document.getElementById("btn").addEventListener("click",showTarget);
//function showTarget(e){
//   alert(e.target);
//}

八，内置对象
1.什么是对象：js中所有事物都是对象，例如字符串，数组，时间，数值，函数等，每个对象都会带有属性和方法；
2.创建对象：
1）使用new object创建
people=new objet();
people.name="krys";
people.age=20;
2）直接创建：
people={name:"krys",age:20,addres:"guangdong"};
3）使用函数创建

funtion people(name,age){
     this.name=name;this.age=age};
son=new people("jess",20);//然后创建一个对象

document.getElementById("btn").addEventListener("click",creat);
function people(name,age){
          this.name=name;
          this.age=age;
     }
 function creat(){
          var name1= document.getElementById("name").value;
          var age1=document.getElementById("age").value;
          son=new people(name1,age1);
          alert(son.name);
          alert(son.age);
          }

3.字符串对象：String：字符串可以使用双引号也可以使用单引号！

属性：length：str.length可得到字符串的长度、
 indexOf(),在字符串中查找字符串，并返回字符串所在的位置。

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){

              alert("r所在的位置是"+name.indexOf("r"));
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

match(),在字符串中匹配字符串，如果字符串1在字符串中存在，则将字符串1打印出来，如果没有就返回NULL

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){
              alert(name);
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

replace(a,b) a是要替换掉的原来的字符或字符串，b是新的字符或字符串

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){

              alert(name.replace("krys","krys小仙女"));
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

toUpperCase()转换成大写
 toLowerCase()转换成小写
 split()分隔线，将一个字符串分隔成若干部分，如str="hello,world,welcome,to";var s=str.split(","); s[0]="hello";

4.Date对象
1）创建Date对象：
var date=new Date();
alert(date);
var h=date.getHours();//时
var m=date.getMinutes();//分
var s=date.getSeconds();//秒

2)获取具体年份：getFullYear（）；
3）获取毫秒数：getTime();
4)设置具体的日期：setFullYear();
5)获取星期：getDay();

6）设置每秒更新一次
setTimeout(function(){

 showTime();},1000);

//每秒调用一次showTime函数

5.数组对象：
1)数组的创建：var a=["1","krys","ok"];
 var a=new Array(); a[0]="hell0"; a[1]="world";
 var a=new Array("hello","world","welcome");
 2)数组常用的方法：
 concat()合并数组如 a=["krys"];b=["tal"];a.concat(b)=krystal;
 sort()排序数组 var a=["a","c","b"];a.sort();->a b c (默认从低到高排序)
 设置为降序：a.sort(funtion(a,b){return a-b;})
 push()在数组末尾添加一个元素var a=["a","c","b"]; a.push("d");
 reverse()翻转，对称中心点相互交换：a.reverse()= c b a ;

6.math对象
 1）常用函数
 round()四舍五入 Math.round(2.5)=3;
 random()返回0~1之间的随机数 Math.random();
 可以转换成整数：parseInt(Matn.random()*10);
 max()返回最大值
 min()返回最小值
 abs()返回绝对值

九，浏览器的内置对象BOM（browser object model）
1，window对象：大部分对象的祖先，最高级别对象之一。

1）简介：Window对象是指当前的浏览器窗口，所有的js全局变量函数以及变量都是Window对象的成员。
其中，全局变量是window对象的属性，全局函数是window对象的方法。

2）获得浏览器内部窗口的尺寸（即内容区域的尺寸，不包括滚动条工具栏等）：
window.innerHeight浏览器窗口的内部高度,window.innerWidth，浏览器的内部宽度。

3）使用window.open(url)可以打开一个窗口，使用window.close()可以关闭当前窗口。

2,history对象
window.history()对象包含浏览器的历史（url）的集合
有三个方法：
1）history.back()后退，返回到前一页
2）history.forward()，前进，进入到下一页
3)history.go()，带参数，参数就是要进入的页数，-1是前一页，-2是前两页，依次类推，当前页是0.

3. Timer
verwendet js, um Code nach einem festgelegten Zeitintervall auszuführen, anstatt ihn sofort nach dem Aufruf der Funktion auszuführen
Es gibt zwei Funktionen
Eine ist setInterval() – führt den angegebenen Code kontinuierlich aus in einem Intervall der angegebenen Anzahl von Millisekunden
Eine davon ist setTimeout() – führt den angegebenen Code nach einer Pause für die angegebene Anzahl von Millisekunden aus.
Sie können setTimeout verwenden, um die Funktion von setInterval() zu implementieren: Rufen Sie sich einfach selbst im aufrufenden Funktionscode auf!
setInterval(funtion(){},1000);
setTimeout(funtion(){},1000);

Sie können clearInterval(), clearTimeout() verwenden, um diesen Aufruf zu löschen,

4. Das Standortobjekt
wird verwendet, um die Adresse der aktuellen Seite abzurufen und den Browser auf eine neue Seite umzuleiten (nach meinem Verständnis wird die aktuelle Adresse analysiert)

Eigenschaften des Location-Objekts:
location.hostname: Gibt den Domänennamen des Webhosts zurück
location.pathname: Gibt den Pfad und Dateinamen der aktuellen Seite zurück
location.port: Gibt den Port der zurück Webhost
location.protocol: Gibt das verwendete Webprotokoll zurück
location.href: Gibt die URL der aktuellen Seite zurück
location.assign() lädt ein neues Dokument und der Parameter ist der Pfad des Dokuments geladen werden.

window.location.hostname;

5, Bildschirmobjekt
window.screen-Objekt enthält Informationen über den Bildschirm des Benutzers
screen.avaiilWidth;//Verfügbare Bildschirmhöhe
screen.availHeight;//Verfügbare Bildschirmbreite
screen.height;//Bildschirmhöhe
screen.width;//Bildschirmbreite

6, Navigationsobjekt
7, Popup-Fenster , Cookie

Zehn, js objektorientiertes Denken

Verwandte Artikel:

Zusammenfassung wichtiger JavaScript-Wissenspunkte 1

Wichtige Punkte zum JavaScript-Ereignis „Ereignisobjekt“_Javascript-Kenntnisse

Verwandte Videos:

Video-Tutorial zur grundlegenden Stärkung von JavaScript

Das obige ist der detaillierte Inhalt vonDie systematischste Zusammenfassung der wichtigsten Punkte von JavaScript (ohne grundlegende Sprachsyntax). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!