jquery 의 기본 선택 기 practice(인 스 턴 스 설명)

1.입력 상자 에 숫자 를 입력 하고 단 추 를 누 르 면 이벤트 에 대응 하 는 기능 을 수행 합 니 다.
html 코드:

<input id="txt1" type="text" value="2" />
<input id="Button5" type="button" value="    N       " />

jQuery 코드:

//    N       
      $("#Button5").click(function () {
　　　　　　　　//   ID txt1        
        var num = $("#txt1").val();
　　　　　　　　//tr      0  ，           
        num = num - 1;
        $("tr:gt("+num+")").css("background-color", "green");
      });

2.모든 파란색 선 상자 의 div 를 클릭 할 때 뒤에 있 는 요소 의 배경 을 green 으로 변경 합 니 다.
html 코드:

<div class="mainbox">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>

jQuery 코드:

 $("div").click(function () {
         $(this).next("div").css("background-color","green");
       });

페이지 불 러 오기 완료 후 모든 숫자 가 홀수 인 div 의 글꼴 색상 을 blue 로 변경 합 니 다.

//2.       ，         div       blue
      //$("div.mainbox>div:even").css("color", "blue");
      for (var i = 0; i < $(".mainbox>div").length; i++) {
        //    div   
        var valu = $(".mainbox>div");
        //      div      
        var txt = $(valu[i]).text();
        // string   int
        value = parseInt(txt);
        //        
        if (value%2!=0) {
          $(valu[i]).css("color", "blue");
        }
      }

3.javascript 코드 를 작성 하여 다음 과 같은 기능 요 구 를 완성 합 니 다.
전 선·반 선·전 불 선 기능 을 실현 하 다

HTML 코드:

<tr>
        <td>
          <label>
            <input type="radio" name="selectMode" id="selectAll" />  
          </label>
          <label>
            <input type="radio" name="selectMode" id="selectNotAll" />   
          </label>
          <label>
            <input type="radio" name="selectMode" id="selectRevorse" />  
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type="checkbox" id="Checkbox3" />   
          </label>
          <label>
            <input type="checkbox" id="Checkbox4" />   
          </label>
          <label>
            <input type="checkbox" id="Checkbox5" />   
          </label>
          <label>
            <input type="checkbox" id="Checkbox6" />  
          </label>
        </td>
      </tr>

jQuery 코드:

$(function () {
      //  
      //  1：
      $("#selectAll").click(function () {
        $("#Checkbox3,#Checkbox4,#Checkbox5,#Checkbox6").prop("checked",true);
      });
      //  2：
      $("#selectAll").click(function () {
        //:checkbox--       checkbox input  
        $(":checkbox").prop("checked", true);
      });
      //   
      $("#selectNotAll").click(function () {
        $(":checkbox").prop("checked", false);
      });
      //    1：
      $("#selectRevorse").click(function () {
        $(":checkbox").each(function () {
          $(this).prop("checked", !$(this).prop("checked"));
        });
      });
      //     2：
      $("#selectRevorse").click(function () {
        $("input[type=checked]").each(function (i, n) {
          n.checked = !n.checked;
        });
      });
      //    3：
      $("#selectRevorse").click(function () {
        var $bob = $("input[type=checked]");
        for (var i = 0; i < $bob.length; i++) {
          if ($bob[i].checked == true) {
            $bob[i].checked == false;
          }
          else {
            $bob[i].checked == true;
          }
        }
      });
    });

4.모든 div 에 표 시 된 아들 p 전경 색 을 red 로 변경
모든 div 표 시 된 손자 span 전경 치 를 green 으로 변경 합 니 다.
i 의 할아버지 의 전경 치 를 오렌지 로 바꾸다
HTML 코드:

<div>
    <span>      ：   、   、   、   ... ...</span>
    <p>
      <span>         ：    </span>
    </p>
    <p>
             ，<span>  <i>   </i></span>

    </p>
  </div>

jQuery 코드:

$(function () {
      //   div      p     red
      $("#Button1").click(function () {
        $("div>p").css("color","red");
      });
      //   div     span     green
      $("#Button2").click(function () {
        $("div").children().children().css("color","green");
      });
      // i          Orange
      $("#Button3").click(function () {
        $("i").parent().parent().css("color","orange");
      });
    });

5.javascript 코드 를 작성 하여 다음 과 같은 기능 요 구 를 완성 하 십시오.
1 초 간격 으로 모든 숫자 를 시계 반대 방향 으로 회전 시킨다.
효 과 는 다음 과 같 습 니 다:

HTML 코드:

<div class="box">
    <table id="table1" class="mytable">
      <tr>
        <td>
          <label id="Label1">
            1
          </label>
        </td>
        <td>
          <label id="Label2">
            2
          </label>
        </td>

jQuery 코드:

$(function () {
      window.setInterval(fun, 1000);
    });
    //   ：
    function fun() {
      $("#table1 label").each(function (i, n) {
        //     label    
        var $item = $(n).text();
        //     int 
        $item = parseInt($item);        
        if ($item == 8) {
          //   label  
          $(n).text("1");
        }
        else {
          //   label  
          $(n).text($item+1);
        }
      });
    };
    //   ：
    function fun2() {
      $("#table1 label").each(function () {
        var n = $(this).text();
        n++;
        if (n > 8) {
          n = 1;
        }
        this.textContent = n;
        //$(this).text() = n;
      });
    }

이상 의 jquery 의 기본 선택 기 practice(인 스 턴 스 설명)는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.