완벽한 jquery 처리 메커니즘_jquery-JS 튜토리얼-php.cn

완벽한 jquery 처리 메커니즘_jquery

WBOY

풀어 주다： 2016-05-16 15:14:37

원래의

1042명이 탐색했습니다.

jQuery 선택기를 사용하는 것은 기존 getElementById() 및 getElementsByTagName() 함수를 사용하는 것보다 훨씬 간단할 뿐만 아니라 특정 오류를 방지할 수도 있습니다. 아래 예를 참조하세요.

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

로그인 후 복사

위 코드를 실행한 후 웹페이지에 div라는 ID를 가진 요소가 없기 때문에 브라우저에서 오류를 보고합니다.

개선된 코드는 다음과 같습니다.

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

로그인 후 복사

이렇게 하면 브라우저 오류를 방지할 수 있지만, 조작해야 할 요소가 많은 경우에는 각 요소를 한 번만 판단해야 할 수도 있고, 존재하지 않는 웹 페이지를 얻기 위해 JQUERY를 사용하더라도 jquery는 문제를 매우 잘 처리합니다. 요소는 오류를 보고하지 않습니다.

코드는 다음과 같습니다.

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

로그인 후 복사

이 예방 조치를 사용하면 나중에 웹페이지에서 이전에 사용된 요소가 어떤 이유로 삭제되더라도 이 웹페이지의 JavaScript가 오류를 보고할 것이라고 걱정할 필요가 없습니다.

참고:

$("div")는 웹페이지에 해당 요소가 없더라도 항상 jquery 객체를 얻습니다. 따라서 jquery를 사용하여 웹 페이지에 요소가 존재하는지 확인하려는 경우.

다음 코드는 사용할 수 없습니다:

<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 프로그래밍을 배우는 데 도움이 되기를 바랍니다.