JQuery 선택 기,DOM 노드 조작 연습 실례

6502 단어 jquery선택 기dom노드
연습
1.수요 효과 분석:

2.코드 예제:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="jquery-1.9.1/jquery.js"></script>
  <script type="text/javascript">
    $(function () {
      //   ：jQuery
      //$("p").click(function () {
      //  alert(this.textcontent);
      //  //alert($(this).html());
      //});

      //   ：jQuery--for  
      for (var i = 0; i < $("p").length; i++) {
        $("p")[i].onclick = function () {
          alert($(this).html());
        };
      };
    });

    //   ：JavaScript  for  
    /*window.onload = function () {
      var temp = document.getElementsByTagName("p");
      for (var i = 0; i < temp.length; i++) {
        temp[i].onclick = function () {
          alert(this.innerHTML);
        };
      };
    }*/
  </script>
</head>
<body>
  <p>   Java      </p>
  <p>  Java      </p>

  <p>  Java       </p>
  <p>  Java        </p>
  <p>  Java       </p>
  <p>  Java      </p>
  <p>  Java      </p>

  <p>  Java      </p>
  <p>  Java      </p>
  <p>  Java      </p>
  <p>  Java      </p>
  <p>  Java      </p>

  <p>  Java      </p>
  <p>  Java      </p>
  <p>  Java      </p>
  <p>  Java      </p>
  <p>  Java      </p>

  <p>  Java      </p>
  <p>  Java      </p>
  <p>  Java      </p>

</body>
</html>
연습
1.효과 분석:

2.코드 예제

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <style type="text/css">
    p {
      display: none;
      border: 1px solid red;
    }
  </style>
  <script src="jquery-1.9.1/jquery.js"></script>
  <script type="text/javascript">
    $(function () {
      $("li").click(function () {
        debugger;
        $("li>p").hide();
        $(this.children).show();
      });
    });
    
  </script>
</head>
<body>
  <ul>
    <li>
        
      <p>  </p>
      <p>   </p>
      <p>  </p>
    </li>
    <li>
        
      <p>   </p>
      <p>   </p>
    </li>
    <li>
        
      <p>  </p>
      <p>  </p>
      <p>   </p>
    </li>
  </ul>
</body>
</html>
연습
1.효과 분석

2.코드 예제

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <style type="text/css">
    .box {
      border: 1px solid #aaccff;
      padding: 10px;
      margin: 10px;
    }

    .box1 {
      border: 1px solid #aacc66;
      padding: 10px;
      margin: 10px;
    }

    .red {
      color: Red;
    }

    p {
      padding: 10px;
      margin: 10px;
    }
  </style>
  <script src="jquery-1.9.1/jquery.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#mybox").click(function () {
        $("#mybox").css("border", "5px dotted green");
      });
      //$(".box").click(function () {
      //  $(".red").css("border", "5px dotted green");
      //});
      $(".box1").click(function () {
        $("div").css("border", "5px dotted green");
      });
      $(".box").click(function () {
        $("#mybox,p").css("border", "5px dotted green");
      });
      $("div[class='box red']").click(function () {
        $(this).siblings().hide();
        $(".box3").show();
      });
    });
    function find1() {
      $(".red").css("border", "5px dotted green");
    };
  </script>
</head>
<body>
  <div id="mybox" class="box1">
          id mybox       ：5px dotted green=》   $().css("border","5px dotted green")
  </div>


  <div class="box" onclick="find1();">
          class=red       ：5px dotted green
  </div>


  <div class="box1 red" onclick="find2();">
          div       ：5px dotted green
  </div>


  <div class="box" onclick="find3();">
        id mybox   、p      ：5px solid green
  </div>


  <div class="box red" onclick="find4(this);">
                     
  </div>

  <p>    ...</p>
</body>
</html>
이상 의 JQuery 선택 기,DOM 노드 조작 연습 인 스 턴 스 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
AngularJS 위 챗 사진 제스처 크기 조정 인 스 턴 스
Angularjs 쿠키 작업 실례 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage