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