完璧なjquery処理機構_jquery-jsチュートリアル-php.cn

完璧なjquery処理機構_jquery

WBOY

リリース： 2016-05-16 15:14:37

オリジナル

1041 人が閲覧しました

jQuery セレクターの使用は、従来の getElementById() 関数や getElementsByTagName() 関数を使用するよりもはるかに簡単であるだけでなく、特定のエラーも回避できます。以下の例を参照してください:

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

ログイン後にコピー

上記のコードを実行すると、Web ページに div の ID を持つ要素がないため、ブラウザーはエラーを報告します。

改善されたコードは次のとおりです:

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

ログイン後にコピー

これによりブラウザーのエラーを回避できますが、操作する要素が多数ある場合、各要素を 1 回判断する必要がある場合があり、存在しない Web ページを取得するために JQUERY が使用された場合でも、jquery は問題をうまく処理します。要素はエラーを報告しません。

コードは次のとおりです:

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

ログイン後にコピー

この予防策により、Web ページ上で以前に使用されていた要素が将来何らかの理由で削除された場合でも、この Web ページの JavaScript がエラーを報告することを心配する必要はありません。

注:

$("div") は、Web ページ上にそのような要素がない場合でも、常に jquery オブジェクトを取得します。したがって、jqueryを使用してWebページ上に要素が存在するかどうかを確認したい場合。

次のコードは使用できません:

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

ログイン後にコピー

得られた長さをもとに判断してください。

コードは次のとおりです:

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

ログイン後にコピー

このとき、DOMオブジェクトに変換して判定することもできます。

コードは次のとおりです:

<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>

ログイン後にコピー

これは jquery の完璧な処理メカニズムです。皆さんが jquery プログラミングを学ぶのに役立つことを願っています。