suchen

Heim >Web-Frontend >js-Tutorial >Welche Anwendungskompetenzen gibt es im Zusammenhang mit Stücklisten in JS?

Welche Anwendungskompetenzen gibt es im Zusammenhang mit Stücklisten in JS?

亚连
亚连Original
2018-06-08 11:32:251943Durchsuche

Wir haben einmal gesagt, dass JS aus drei Teilen besteht, von denen einer die Stückliste ist, die zum Betrieb des Browsers verwendet wird. In diesem Artikel stellen wir hauptsächlich die BOM-Anwendung vor. Interessierte Freunde sollten einen Blick darauf werfen

Wir haben einmal gesagt, dass JS aus drei Teilen besteht, von denen einer die BOM ist, die zum Betrieb verwendet wird Browser. In dieser Lektion werden wir hauptsächlich Stücklisten vorstellen.

Grundlagen der Stückliste

Sehen wir uns zunächst die grundlegendsten Funktionen einer Stückliste an: Öffnen und Schließen von Fenstern: 

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
 </head>
 <body>
  <input type="button" value="打开窗口" onclick="window.open(&#39;http://www.zhinengshe.com/&#39;);" />
 </body></html>

Die open-Methode wird zum Öffnen eines Fensters und die relative close-Methode zum Schließen eines Fensters verwendet. Hier können wir die open-Methode verwenden, um eine Anwendung zu implementieren: Führen Sie den Code aus.

Zuvor möchten wir noch ein wenig Wissen über document.write hinzufügen. 

<!DOCTYPE HTML><html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
 </head>
 <body>
  <input type="button" value="write" onclick="document.write(&#39;abc&#39;)" />
 </body></html>

Wenn wir den Quellcode öffnen, können wir feststellen, dass beim Klicken auf die Schaltfläche nur noch „abc“ im Quellcode der gesamten Seite übrig ist – also wenn document.write verwendet wird In einem solchen Fall wird zunächst die Seite vollständig gelöscht und neu geschrieben.

Wie Sie sehen können, ist es in unserem laufenden Codefall sehr angemessen, die Methode document.write zu verwenden: 

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <script>
  window.onload=function ()
  {
   var oTxt=document.getElementById(&#39;txt1&#39;);
   var oBtn=document.getElementById(&#39;btn1&#39;);
  
   oBtn.onclick=function ()
   {
    var oNewWin=window.open(&#39;about:blank&#39;, &#39;_blank&#39;);
  
    oNewWin.document.write(oTxt.value);
   };
  };
  </script>
 </head>
 <body>
  <textarea id="txt1" rows="10" cols="40"></textarea><br>
  <input id="btn1" type="button" value="运行" />
 </body></html>

wobei _blank ein neues Fenster darstellt (in diesem Fenster mit _self öffnen) , about:blank bedeutet, dass ein leeres Fenster geöffnet wird und wir dann document.write verwenden, um HTML in das neue Fenster zu schreiben, und dann kann der HTML-Code im neuen Fenster ausgeführt werden.

Nachdem wir über „Open“ gesprochen haben, sprechen wir über einige Probleme mit „Close“. Die Verwendung von close ist sehr einfach. Verwenden Sie window.close, um das Ereignis zum Schließen des Fensters auszuführen. Unter dem Firefox-Browser ist es jedoch nicht möglich, ein von einem Benutzer geöffnetes Fenster zu schließen. Nur wenn ein Fenster mit der Open-Methode geöffnet wird, kann es mit der Close-Methode geschlossen werden.

Nachdem wir über die Öffnungs- und Schließmethoden gesprochen haben, sprechen wir über zwei häufig verwendete Eigenschaften: window.nevigator.userAgent und window.location. Die Funktion des ersteren besteht darin, die Versionsinformationen des aktuellen Browsers abzurufen, und die Funktion des letzteren besteht darin, die Adresse der aktuellen Webseite (kann nicht nur gelesen, sondern auch zugewiesen werden) und die URL der aktuellen Webseite abzurufen Die Seite kann durch Ändern des Speicherorts übersprungen werden. Sie können damit einen Blick darauf werfen. Der zurückgegebene Inhalt wird hier nicht aufgeführt.

Abmessungen und Koordinaten

Hier diskutieren wir den Inhalt von JS über Abmessungen und Koordinaten.

Als erstes ist das Wissen über die Größe des visuellen Bereichs zu erwähnen. Wie groß ist der Sichtbereich? Tatsächlich handelt es sich dabei um die Größe des Teils der Webseite, den der Client auf dem Bildschirm sehen kann. Die Größe des sichtbaren Bereichs ändert sich mit der Größe des Fensters.

Über document.documentElement.clientWidth和document.documentElement.clientHeight können Sie die Breite und Höhe des visuellen Bereichs der aktuellen Seite ermitteln. 

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <script>
  window.onload=function ()
  {
   var oBtn=document.getElementById(&#39;btn1&#39;);
   oBtn.onclick=function ()
   {
    alert(&#39;宽:&#39;+document.documentElement.clientWidth+&#39;高:&#39;+document.documentElement.clientHeight);
   };
  };
  </script>
 </head>
 <body>
  <input id="btn1" type="button" value="可视区大小" />
 </body></html>

Der Effekt ist wie folgt:

Zusätzlich gibt es eine Eigenschaft namens scrollTop für den sichtbaren Bereich, der die Scrolldistanz bzw. die ist Abstand zwischen dem sichtbaren Bereich und dem Abstand vom oberen Rand der Seite. 

<!DOCTYPE HTML><html>
 <head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 <script>
 document.onclick=function ()
 {
  //IE、FF
  //alert(document.documentElement.scrollTop);
 
  //chrome
  //alert(document.body.scrollTop);
 
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 
  alert(scrollTop);
 };
 </script>
 </head>
 <body style="height:2000px;">
 </body></html>

Der Effekt ist wie folgt:

//Hier sind die Bilder

Es ist erwähnenswert, dass document.documentElement.scrollTop nur unter IE und der Schreibregel unter kompatibel ist chrome ist document.body.scrollTop , daher verwenden wir die Methode ||, um Kompatibilitätsprobleme zu lösen.
Gemeinsame Methoden und Ereignisse

Hier versuchen wir, neben „Fixed“ eine andere Methode zu verwenden, um eine feste Positionierung von Elementen zu erreichen (Fixed ist unter IE6 nicht kompatibel).

Hier zeichnen wir ein weiteres Bild:

Es ist ersichtlich, dass wir, solange wir die Länge der schwarzen Linie berechnen, dies tun können Der p-Block ist fest positioniert. Die Länge der schwarzen Linie entspricht genau der Höhe des visuellen Bereichs abzüglich der OffsetHeight des p-Blocks. 

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <style>
  #p1 {width:200px; height:150px; background:red; position:absolute; right:0; bottom:0;}
  body {height:2000px;}
  </style>
  <script>
  window.onscroll=function ()
  {
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
   var op=document.getElementById(&#39;p1&#39;);  op.style.top=document.documentElement.clientHeight-op.offsetHeight+scrollTop+&#39;px&#39;;
  };
  </script>
 </head>
 <body>
 <p id="p1"></p>
 </body></html>

Der Effekt ist wie folgt:

Sie können sehen, dass unser p-Block einen leichten Jitter aufweist, da die Onscroll-Funktion ständig ausgeführt wird und alle aufgerufen wird Mal passiert es einmal, also passiert das. Es gibt auch eine ernstere Situation: Wenn wir die Fenstergröße ändern, folgt der p-Block nicht, sondern bleibt an Ort und Stelle, sodass wir ein anderes Ereignis verwenden müssen –

window.onresize(page Ereignisse, die ausgelöst werden, wenn die Größe Änderungen:): 

window.onscroll=window.onresize=function (){...}

Lassen Sie uns abschließend über einige häufig verwendete Systemdialogfelder sprechen:

  • alert("content")-Alarmfeld, Es gibt keinen Rückgabewert

  • Bestätigen("Frageninhalt") Auswahlfeld, das die Option zum Bestätigen oder Abbrechen bietet und einen booleschen Wert zurückgibt

  • Eingabeaufforderung( " Eingabeaufforderungstext“, „Standardtext“) öffnet ein Eingabetextfeld. Der Rückgabewert ist der eingegebene Textinhalt (Zeichenfolge). Wenn er nicht eingegeben wird, ist er null

Der Oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Was sind die Unterschiede zwischen Map und ForEach in JS?

So implementieren Sie die Fortschrittsbalkenkomponente für das Laden von Seiten in Vue

So verwenden Sie JavaScript, um unterschiedliche Preise für jeden Tag innerhalb eines Datumsbereichs zu erhalten

Das obige ist der detaillierte Inhalt vonWelche Anwendungskompetenzen gibt es im Zusammenhang mit Stücklisten in JS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Js verbindet sich mit TypeScriptNächster Artikel：Js verbindet sich mit TypeScript

In Verbindung stehende Artikel

Mehr sehen