jQuery 웹 페이지 노드 에 대한 추가 삭제 및 검사 기능 예제 실현

5448 단어 jQuery노드
본 논문 의 사례 는 jQuery 가 웹 페이지 노드 에 대한 추가 삭제 와 검사 기능 을 실현 하 는 것 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
앞에서 을 소 개 했 는데 사실은 JavaScript 가 DOM 에 대한 조작 을 정리 한 지 오래 되 었 고 jQuery 가 웹 페이지 노드 에 대한 조작 은 계속 사용 하고 있 지만 잘 정리 하지 못 해서 정말 해 서 는 안 된다.
다음은 같은 예 를 들 어 이 문 제 를 설명 한다.

위의 그림 과 같이 버튼 3 개,드 롭 다운 목록 1 개,입력 상자 1 개 를 제공 하고 삭제 와 검 사 를 위 한 작업 을 제공 합 니 다.
웹 페이지 에서 최대 10 개의 노드,최소 0 개의 노드 가 많 으 면 추가 하지 못 하고 적 으 면 줄 이지 못 한다.
우선 본 홈 페이지 의 기본 레이아웃 입 니 다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery          </title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  </head>
  <body>
    <button>    </button>
        
    <select id="nodeList"></select>
    <button>    </button>
    <input type="text" />
    <button>    </button>
    <div></div>
  </body>
</html>

먼저 jQuery 자원 을 도입 한 다음 에 드 롭 다운 목록 을 제외 한 나머지 노드 에 ID 가 없어 서 두 개의 Jquery 가 노드 를 가 져 오 는 방식 을 보 여 줍 니 다.하 나 는 id 를 통 해 직접 가 져 오고 하 나 는 하위 노드 를 가 져 오 는 방식 으로 가 져 옵 니 다.
여 기 는 특별한 것 이 없습니다.관건 은 아래 의 jQuery 프로 그래 밍 입 니 다.

<script type="text/javascript">
  var i = 1;//       id
  $("body>div").css("border","1px solid #cccccc");//  body     div  style="border:1px solid #cccccc"  。  jQuery    css  。
  $("body>button:eq(0)").click(function(){//body    0    onclick  
    if (i < 11) {//        1-10  
      $("body>div").append("<p id='p" + i + "'>text" + i + "</p>");//  body     div,       div    id=p1,p2,p3...   ,    text1,2,3...
      $("#nodeList").append("<option id='option" + i + "' value='" + i + "'>text" + i + "</p>");//          id=option1,option2....,value=1,2,3...   ,   ,      、    
      i++;//    1
      $("body>div").css("border","1px solid #cccccc");//      ,     
    }
    else {//       ,    ,     
      alert("  10   !");
      $("body>div").css("border","1px solid #ff0000");
    }
  });
  $("body>button:eq(1)").click(function(){//body    1    onclick  
    if (i > 1) {
      var removeId = $("#nodeList").val();//          
      $("#option" + removeId).remove();//       、p  
      $("#p" + removeId).remove();
      i--;//    1
      $("body>div").css("border","1px solid #cccccc");
    }
    else{
      alert("  0   !");
      $("body>div").css("border","1px solid #ff0000");
    }
  });
  $("body>button:eq(2)").click(function(){//body    2    onclick  
    if (i > 1) {
      var updateText = $("body>input[type='text']").val();//          
      var updateId = $("#nodeList").val();//          
      var updateFlag = true;//            flag
      $("body>div>p").each(function(){//  div    p  
        if(updateText==$(this).html()){//        p    
          alert("      ,    !");//     
          $("body>div").css("border", "1px solid #ff0000");
          updateFlag = false;//  flag
        }
      });
      if (updateFlag) {
        if (updateText != "") {
          $("#option" + updateId).html(updateText);//         
          $("#p" + updateId).html(updateText);//    p    
          $("body>input[type='text']").val("");//     
          $("body>div").css("border", "1px solid #cccccc");
        }
        else {
          alert("        !");
          $("body>div").css("border", "1px solid #ff0000");
        }
      }
    }
    else{
      alert("    ,    !");
      $("body>div").css("border", "1px solid #ff0000");
    }
  });
</script>

이 를 통 해 알 수 있 듯 이 jQuery 설정 css 는 수정 할 css 속성 을 먼저 가리 키 고 수정 할 내용 을 적 으 며 자바 script 수정 css 는 노드 에 대한 style 수정 입 니 다.
jQuery 는 노드 를 옮 겨 다 니 며 each 방법 을 사용 하면 됩 니 다.Javascript 은 옮 겨 다 닐 노드 에 name 을 부여 하고document.getElementbyName를 이용 하여 모든 name 을 내 려 놓 으 면 옮 겨 다 닙 니 다.
jQuery 는 하나의 노드 를 삭제 합 니 다.자바 script 보다 훨씬 간편 합 니 다.하나remove()는 모든 것 을 고려 하고 자바 script 은 자신의 부모 노드 를 찾 아 자신 을 삭제 할 수 있 습 니 다.
jQuery 는 하위 노드 를 찾 습 니 다.>기호 로 직접 볼 수 있 고 자바 script 은xx.getElementsByTagName을 통 해 찾 아야 합 니 다.
jQuery 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기