jQuery之基本选择器Practice

一、在输入框中输入数字，点击按钮，实现对应事件的功能。

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");
             });

二、点击每一个蓝色线框中的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");
                 }
             }

三、编写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;
                     }
                 }
             });
         });

四、 将所有div标记下的儿子p前景色改为red
        将所有div标记的孙子span前景色改为green
        将i的爷爷的前景色改为Orange

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");
             });
         });

五、请编写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;
             });
         }