Heim >Web-Frontend >js-Tutorial >Teilen der JavaScript-Nutzung

Teilen der JavaScript-Nutzung

巴扎黑
巴扎黑Original
2017-07-18 15:51:25979Durchsuche

Ein Überblick

1. Was ist JavaScript

Objektbasiert und ereignisbasiert? angetriebene interpretierte Skriptsprache.

2. JavaScript-Syntaxfunktionen

  • unterscheiden zwischen Groß- und Kleinschreibung, was sich von HTML unterscheidet.

  • Das Semikolon am Ende ist optional.

  • Variablen sind schwach typisiert: Variablen sind bei der Definition einheitlich var, und der Typ wird bei der Zuweisung bestimmt.

3. UI-Thread

Es gibt einen Thread im Browser für die Seitenanzeige, der UI-Thread genannt wird Beim Senden an den Server löscht der UI-Thread die Seite und wartet auf Rückmeldung vom Ladeserver. Wenn die Wartezeit zu lang ist, ist die Seite leer.

4.Dieses

wird hauptsächlich in Methoden verwendet, um das aktuelle Objekt darzustellen, dh den direkten Aufrufer der Methode.

Zwei Datentypen

1. JavaScript-Datentypen

String, Zahl, Mathematik, Array, boolescher Wert, Datum, Objekt, RegExp, null.

2. Variablendefinition

  • Globale Variablen: Außerhalb der Funktion deklarierte Variablen sind globale Variablen und werden überall verwendet Seite Der Bereich ist gültig. Weisen Sie einer nicht deklarierten Variablen einen Wert zu, der in eine globale Variable umgewandelt wird.

  • Lokale Variablen: Innerhalb einer Funktion deklarierte Variablen sind lokale Variablen und nur innerhalb der Funktion gültig.

  • Dies: Wenn diese Referenz beim Deklarieren einer Variablen innerhalb einer Funktion verwendet wird, kann die Variable über ein Objekt außerhalb der Funktion referenziert werden.

3.String

Gängige Methoden:

  • Länge: Ermitteln Sie die Länge der Zeichenfolge.

  • ==: Verwenden Sie „==“, um zu vergleichen, ob zwei Zeichenfolgen in JS gleich sind.

  • indexOf(subStr): Der Indexwert des ersten Vorkommens des angegebenen Zeichens.

  • lastIndexOf(subStr): Der Indexwert des letzten Vorkommens des angegebenen Zeichens.

  • substr(begin[len]): Ruft die Zeichen der angegebenen Länge ab der angegebenen Position ab.

  • substring(begin[end]): Ruft die Zeichen im angegebenen Indexbereich ab.

  • replace(regExp,substr): Ersetzen Sie Zeichen, die dem Format entsprechen, durch angegebene Zeichen.

  • concat(str01...): Mehrere Zeichenfolgen verketten und eine neue Zeichenfolge zurückgeben.

  • split(delim[limit]): Zeichen unter Verwendung des angegebenen Trennzeichens aufteilen und das Teilungsergebnis in Form eines Arrays zurückgeben. Limit ist die Anzahl der Teilungen , optional.

4.Zahl

  • toFixed(n): Behalten Sie n Dezimalstellen bei.

5.Math

  • random(): Gibt zufällig eine Zahl von 0-1 zurück .

  • Runde(x): Runde.

  • max(x...): Ermittelt den Maximalwert.

  • min(x...): Ermitteln Sie den Mindestwert.

6.Datum

  • getTime(): Vom 01.01.1970 abrufen Die Anzahl der Millisekunden seitdem.

  • getFullYear(): Ermittelt das vierstellige Jahr zu diesem Zeitpunkt.

  • getMonth(): Den Monat zu diesem Zeitpunkt abrufen.

  • getDate(): Den Tag des Monats abrufen.

  • getDay(): Ruft den Wochentag ab, Bereich 0-6.

  • getHours(): Ermittelt die Anzahl der Stunden zu diesem Zeitpunkt.

  • getMinutes(): Ermittelt die Anzahl der Minuten zu diesem Zeitpunkt.

  • getSeconds(): Ermittelt die Anzahl der Sekunden zu diesem Zeitpunkt.

7.RegExp

Erstellen:

var reg=/xxxx/;
var ret=new RegExp("");

常用方法:
  test(str):判断字符串是否满足指定的格式。

8.Array

⑴数据类型

   不同与java语言,JS中的数组在创建时不需要指定长度与数据类型,可以存储多种类型数据。

⑵创建(3种方式)

var arr01=[数组中的值];//创建时赋值
var arr01=new Array(数组中的值);//创建时赋值
//先声明,后赋值
var arr01=new Array();
arr01[0]=1;
arr01[1]=2;
var arr01=new Array(6);//创建时指定数组长度

⑶常用操作

  • arr[0]:获取指定索引位置的元素,也可以为指定索引位置赋值。

  • arr.length:获取数组长度。

  • push(data):向数组尾部添加元素并返回操作完成后的数组长度。

  • unshift(data):向数组头部添加一个元素并返回数组长度。

  • pop():删除数组的最后一个元素并返回删除的元素。

  • shift():删除并返回数组的第一个元素。

  • for(index in arr):遍历数组,arr[index]获取数组中的元素。

  • sort(function(a,b){return a-b;}):如果数组中存储的是字符,不需要指定函数,按照字母升序排序;如果数组中存储的是数字,需要设定排序函数,a-b升序排列,b-a降序排列。

  • reverse():反转排序。

  • join(connector):使用指定的连接符将数组连接成字符串,未指定连接符时默认采用","作为连接符。

  • toString():等效于join(),将数组转化为一个由","连接的字符串。

  • slice(begin,end):获取指定索引范围的元素,包含begin,不包含end。

  • splice(begin,howmany,newValue...):从指定索引位置(包含该位置)开始删除howwmany个元素,插入新的元素。

  • concat(anotherArr...):将参数数组的元素依次追加到该数组中并返回一个新的数组,原数组不变。

9.Object

⑴用于自定义对象,对象的创建方式:

//第一种方式,对象的声明与实例化一体
var obj={name:"张三",age:20,myFunction:function(){}};
//第二种方式,将函数当做构造方法
function person(name,age){
this.name=name;
this.age=age;
this.myfunction=function(){
alert(this.name);
     }
}
var tom=new function("tom",20);
//第三种方式
person=function(){
this.name=name;
this.age=age;
this.myfunction:function(){
      }
}
var tom=new function("tom",20);

⑵fn01: Die Bedeutung von fn02

Weisen Sie fn02 zu fn01 zu, fn01 hat genau den gleichen Inhalt wie fn02.

Drei Attribute

Der Benutzer beschreibt die Eigenschaften des Objekts und instanziiert das Objekt.
Gemeinsame Attribute:

  • href="#": zum Anfang der Seite springen.

  • Titel wird direkt als Text des Elements angezeigt. Wenn das Element keinen Text direkt anzeigen kann, wird er als Aufforderungsmeldung angezeigt, wenn die Maus darüber bleibt .

Vier Fenster

Das Browserfensterobjekt ist ein globales Objekt und das oberste Objekt aller Objekte. Referenzeigenschaften oder -funktionen können weggelassen werden.

1. Gemeinsame Attribute

  • Dokument: ein Objekt, das alle HTML-Elemente im Fenster darstellt.

  • geschlossen: boolescher Typ, der verwendet wird, um zu bestimmen, ob das aktuelle Fenster geschlossen wurde.

  • Standort: Rufen Sie die URL der aktuellen Seite ab; greifen Sie auf die angegebene Ressource zu, bei der es sich um HTML, Servlet oder andere Serverressourcen handeln kann >Auf der vorherigen Seite öffnen. location=url hat die gleiche Funktion wie location.href=url.

  • Verlauf: Ein Objekt, das den Browserverlauf des aktuellen Fensters darstellt. Unter der Voraussetzung, einen Browsing-Datensatz zu erstellen, können Sie zur vorherigen und nächsten Seite springen, History.go(-1) springt zur

    vorherigen Seite und History.go(1) springt zur nächsten Seite .

  • übergeordnetes Fenster: Gibt das übergeordnete Fenster an, das das aktuelle Fenster enthält.

  • Öffner: Bedeutet das Öffnen des übergeordneten Fensters des aktuellen Fensters, das häufig bei der Kommunikation zwischen Eltern-Kind-Fenstern verwendet wird.

2. Gängige Methoden:

  • Warnung (Inhalt): Eine Warnung wird angezeigt Dialogbox.

  • bestätigen(Inhalt): Öffnet ein Bestätigungsdialogfeld und gibt das Bestätigungsergebnis zurück, wahr oder falsch.

  • Eingabeaufforderung: Eingabeaufforderungsdialogfeld, das für Benutzereingaben und die Rückgabe von Eingabeergebnissen verwendet wird.

  • setTimeout(): geplante Ausführung.

  • setInterval(): wird regelmäßig ausgeführt.

  • open(): Die angegebene URL in ein neues Fenster laden.

  • close(): Schließt das aktuelle Fenster.

  • parseInt(): Konvertiert Zeichen in int-Zahlen.

  • eval: Analysieren Sie gewöhnliche Zeichenfolgen in JS-Code.

  • typeof: Gibt den Datentyp zurück.

  • isNaN: Bestimmen Sie, ob es sich bei den Daten um eine Zahl handelt.

Fünf DOM

Das Dokumentobjektmodell ist eine Technologie zum Bearbeiten von Dokumenten, bei der das Dokument als Baumobjekt behandelt wird Bei der hierarchischen Ergebnisanordnung ist das Dokument ein Objekt, das

das Dokument darstellt.

1. Element

Beschriftungsknoten im Dokument.

Untergeordnete Knoten: Elementknoten, Textknoten, Kommentarknoten, ausgenommen Attributknoten.

2. Objekt erstellen

document.createElement(tagName): Erstellen Sie ein Element basierend auf dem Tag-Namen Ein Parameter hat kein <>.

3. Holen Sie sich das Objekt

  • document.all.id: Holen Sie sich das Objekt basierend auf der ID.

  • formId.tagId: Rufen Sie die Elemente unter dem Formular über id ab, oder Sie können die Elemente unter dem Formular über „formName.tagName“ abrufen.

  • document.getElementById(id): Holen Sie sich das Objekt basierend auf der ID.

  • document.getElementsByName(name): Holen Sie sich ein Objekt basierend auf dem Namen. Da es mehrere Objekte mit demselben Namen geben kann, sind die erhaltenen Objekte mehrere.

  •   document.getElementsByTagName(tagName):通过标签名称获取对象。

4.属性

  •  document.location:同document.location.href作用相同,用于访问指定资源,该资源可以是HTML,也可以是Servlet以及其他服务器资源,不能获取当前页面的URL。

5.常用方法

  •  document.write(content):向页面输出。

六 函数

 在JS中调用函数不必像在java中那样必须为每一个形参赋值,只需为需要的形参赋值即可,其他形参位可以空着。每一个函数都有其对应的作用范围,不同作用范围的函数定义在不同的节点上。

  1.常用函数

   javascript:void(0):保留超链接样式,只执行js代码,不进行页面跳转。

  2.动态添加函数

动态地向元素添加函数有两种方式:

⑴使用JS:

使用JS获取对象以后,通过对象调用函数不包含括号),将自定义的函数function赋给该函数

obj.action=function(){};

⑵使用JQuery:

$(selector).action(function(){});

两种方式不能混用,即不能这样使用:$(selector).action=function(){}。

3.插入

java输出代码块与EL表达式都可以插入JavaScript代码中,插入时将其视作字符串处理,包裹在单引号或者双引号中,如:

alert("<%=name%>");
alert("${name}");

Sieben Ereignisse

Das durch die Aktion verursachte Verhalten wird als Ereignis bezeichnet. Sie können einem Ereignis mehrere Funktionen hinzufügen, und die mehreren Funktionen werden nacheinander ausgeführt Reihenfolge, in der sie hinzugefügt werden. Unterschiedliche Elemente entsprechen unterschiedlichen Ereignissen .

1. Häufige Ereignisse:

  • onclick: Wird ausgelöst, wenn die Maus klickt.

  • onchange: Wird ausgelöst, wenn sich die Optionen des Dropdown-Listenfelds ändern.

  • onblur: Wird ausgelöst, wenn der Fokus verloren geht.

  • onfocus: Wird ausgelöst, wenn der Fokus erreicht wird.

  • onmouseover: Wird ausgelöst, wenn sich die Maus über das Element bewegt.

  • onmousemove: Wird ausgelöst, wenn sich die Maus über das Element bewegt.

  • onmouseout: Wird ausgelöst, wenn die Maus das Element verlässt.

  • onselect: Wird ausgelöst, wenn das Textfeld ausgewählt wird.

Acht Formulareinreichungen

1. Schaltflächeneinreichung

Einzeln Klicken Sie auf die Schaltfläche „Senden“, um das Formular abzuschicken.

2. Codeübermittlung

Führen Sie den Code document.forms["formName"].submit() aus und senden Sie das Formular über den Code .

Neun Eltern-Kind-Fensterkommunikation

Die Eltern-Kind-Fensterkommunikation bezieht sich auf die Übertragung von Informationen an das Fenster, das das Fenster öffnet ist, vom untergeordneten Fenster zum übergeordneten Fenster. Das Fenster überträgt Informationen, und die -Informationen, die vom übergeordneten Fenster zum untergeordneten Fenster übertragen werden, können über QueryString vervollständigt werden.

Der Schlüssel zur Übertragung von Informationen durch das untergeordnete Fenster an das übergeordnete Fenster besteht darin, das übergeordnete Fensterobjekt im untergeordneten Fenster abzurufen, das übergeordnete Fensterobjekt über window.opener abzurufen und es dann zu verwenden wie im übergeordneten Derselbe Vorgang findet im Fenster statt.

Zehn Tabellen

1.Allgemeine Operationen an Tabellenobjekten

  • table.rows: Array-Objekt, das alle Zeilen in der Tabelle enthält. table.rows.length erhält die Länge, also die Anzahl der Zeilen.

  • insertRow(index): Fügt eine Zeile an der angegebenen Position ein. Wenn die Position nicht angegeben ist, fügen Sie sie am Ende ein.

  • deleteRow(index): Löschen Sie die Zeile an der angegebenen Position. Wenn die Position nicht angegeben ist, löschen Sie die letzte Zeile.

2.tr Object Common Operations

  • rowIndex: Ermitteln Sie die Indexposition ist die Zeilennummer.

  • insertCell(index): Fügt eine Spalte an der angegebenen Position ein. Wenn nicht angegeben, fügen Sie sie am Ende ein.

  • deleteCell(index): Löschen Sie die Spalte an der angegebenen Position. Wenn die Position nicht angegeben ist, löschen Sie die letzte Spalte.

Das obige ist der detaillierte Inhalt vonTeilen der JavaScript-Nutzung. 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