Heim  >  Artikel  >  Web-Frontend  >  Perfekter JQuery-Verarbeitungsmechanismus_jquery

Perfekter JQuery-Verarbeitungsmechanismus_jquery

WBOY
WBOYOriginal
2016-05-16 15:14:37975Durchsuche

Die Verwendung von jQuery-Selektoren ist nicht nur viel einfacher als die Verwendung der herkömmlichen Funktionen getElementById() und getElementsByTagName(), sondern kann auch bestimmte Fehler vermeiden. Bitte sehen Sie sich das Beispiel unten an:

 <script>
  document.getElementById("div").style.color ="red";
 </script>

Nachdem der obige Code ausgeführt wurde, meldet der Browser einen Fehler, da auf der Webseite kein Element mit der ID div vorhanden ist.

Der verbesserte Code lautet wie folgt:

<script>
   if(document.getElementById("div")){ //用了IF语句来判断是否有ID为div的元素,如果有,执行下面代码 
    document.getElementById("div").style.color ="red"
   }
</script>

Dadurch können Browserfehler vermieden werden. Wenn jedoch viele Elemente bedient werden müssen, muss möglicherweise jedes Element einmal beurteilt werden. JQuery löst das Problem sehr gut, selbst wenn JQUERY zum Abrufen nicht vorhandener Webseiten verwendet wird Elemente melden keinen Fehler.

Der Code lautet wie folgt:

 <script>
  $("#div").css("color","red");
 </script>

Mit dieser vorbeugenden Maßnahme besteht kein Grund zur Sorge, dass das JavaScript dieser Webseite einen Fehler meldet, selbst wenn ein zuvor verwendetes Element auf der Webseite aus irgendeinem Grund in der Zukunft gelöscht wird.

Hinweis:

$("div") ruft immer ein Jquery-Objekt ab, auch wenn es kein solches Element auf der Webseite gibt. Wenn Sie also jquery verwenden möchten, um zu überprüfen, ob ein Element auf der Webseite vorhanden ist.

Der folgende Code kann nicht verwendet werden:

<script>
 if($("#div")){
   $("#div").css("color",red) //这样游览器会报错
  }
</script>

Es sollte anhand der erhaltenen Länge beurteilt werden.

Der Code lautet wie folgt:

<script>
 if($("#div").length >0){
   $("#div").css("color",red)
 }
</script>

Zu diesem Zeitpunkt kann es zur Beurteilung auch in ein DOM-Objekt konvertiert werden.

Der Code lautet wie folgt:

<body>
  <div id="div">ccccccc</div>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var $div = $("#div");
  var div = $div[0];
  if(div){
    $div.css("color","red")  //此时DIV的颜色就变为red
  }
</script>
</body>

Dies ist der perfekte Verarbeitungsmechanismus von JQuery. Ich hoffe, dass er für alle hilfreich ist, die JQuery-Programmierung zu erlernen.

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