jquery之基本选择器practice(实例讲解)

<input id="txt1" type="text" value="2" /><input id="Button5" type="button" value="改变大于N的行背景为绿色" />

//改变大于N的行背景为绿色      $("#Button5").click(function () {　　　　　　　　//获取到ID为txt1的输入框的文本值        var num = $("#txt1").val();　　　　　　　　//tr的行的下标从0开始，故现实中的数字应该减一        num = num - 1;        $("tr:gt("+num+")").css("background-color", "green");      });

<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>

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

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

<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>

$(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>    <span>七大洲有哪些：大米粥、小米粥、绿豆粥、八宝粥... ...</span>    <p>      <span>中国四大发明时什么：油盐酱醋</span>    </p>    <p>      我拿什么拯救你，<span>我的<i>瞌睡虫</i></span>    </p>  </div>

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

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

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