>  기사  >  웹 프론트엔드  >  완벽한 jquery 처리 메커니즘_jquery

완벽한 jquery 처리 메커니즘_jquery

WBOY
WBOY원래의
2016-05-16 15:14:371014검색

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.