Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung des Ajax-Reflexionsmechanismus und des Codes zum Durchlaufen aller Objekteigenschaften und -werte

伊谢尔伦
Freigeben: 2017-07-21 13:33:57
Original
1317 Leute haben es durchsucht

Javascript-Beispiel für eine for...in-Schleife:

<html>
<head>
<title>一个使用到for...in循环的Javascript示例</title>
</head>
<body>
<script type="text/javascript">
// 创建一个对象 myObject 以及三个属性 sitename, siteurl, sitecontent。
var myObject = new Object();
myObject.sitename = "布啦布啦";
myObject.siteurl = "blabla.cn";
myObject.sitecontent = "网页教程代码图库的中文站点";
//遍历对象的所有属性
for (prop in myObject)
{
document.write("属性 &#39;" + prop + "&#39; 为 " + myObject[prop]);
document.write("<br>");
}
</script>
</body>
</html>
Nach dem Login kopieren
/*
* 用来遍历指定对象所有的属性名称和值
* obj 需要遍历的对象
* author: Jet Mah
*/
function allPrpos ( obj ) {
// 用来保存所有的属性名称和值
var props = "" ;
// 开始遍历
for ( var p in obj ){
// 方法
if ( typeof ( obj [ p ]) == " function " ){
obj [ p ]() ;
} else {
// p 为属性名称,obj[p]为对应属性的值
props += p + " = " + obj [ p ] + " \t " ;
}
}
// 最后显示所有的属性
alert ( props ) ;
}
Nach dem Login kopieren

Der JavaScript-Reflexionsmechanismus von AJAX bedeutet, dass das Programm während der Ausführung seine eigenen Informationen erhalten kann. Beispielsweise kann ein Objekt zur Laufzeit wissen, welche Methoden und Eigenschaften es hat. Verwenden Sie die for(…in…)-Anweisung, um die Reflexion in JavaScript zu implementieren. Die Syntax lautet wie folgt:

for(var p in obj){
//语句
}
Nach dem Login kopieren

Bei der Ajax-Programmierung ist es häufig erforderlich, den Stil von Schnittstellenelementen dynamisch zu ändern Dies geschieht über das Stilattribut des Objekts. Wenn Sie beispielsweise die Hintergrundfarbe in Rot ändern möchten, können Sie Folgendes schreiben:

element.style.backgroundColor="#ff0000";
Nach dem Login kopieren

Grundsätzlich können alle Eigenschaften in CSS geändert werden Wird in JavaScript verwendet:

function setStyle(_style){
//得到要改变样式的界面对象
var element=getElement();
element.style=_style;
}
Nach dem Login kopieren

Ändern Sie direkt das gesamte Stilobjekt, das als Parameter übergeben wird:

var style={
color:#ffffff,
backgroundColor:#ff0000,
borderWidth:2px
}
Nach dem Login kopieren

Zu diesem Zeitpunkt kann die Funktion wie folgt aufgerufen werden:
setStyle(style);

oder direkt geschrieben als:

setStyle({ color:#ffffff,backgroundColor:#ff0000,borderWidth:2px});
Nach dem Login kopieren

Dieser Code scheint keine Probleme zu haben, aber tatsächlich, wenn der Parameter _style verwendet wird Weisen Sie element.style innerhalb der setStyle-Funktion einen Wert zu, wenn das Element beispielsweise bereits einen bestimmten Stil hat und ausgeführt wurde:
element.style.height="20px";

Allerdings _style enthält nicht die Definition der Höhe, sodass der Höhenstil des Elements verloren geht, was nicht das ursprünglich gewünschte Ergebnis ist. Um dieses Problem zu lösen, können Sie den Reflexionsmechanismus verwenden, um die Funktion setStyle neu zu schreiben:

function setStyle(_style){
//得到要改变样式的界面对象
var element=getElement();
for(var p in _style){
element.style[p]=_style[p];
}
}
Nach dem Login kopieren

Durchlaufen Sie im Programm jedes Attribut von _style, um den Attributnamen zu erhalten, und verwenden Sie dann die eckige Klammersyntax zum Ändern das Attribut in element.style Die entsprechende Attributzuweisung ist

des entsprechenden Attributs in _style

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Ajax-Reflexionsmechanismus und des Codes zum Durchlaufen aller Objekteigenschaften und -werte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage