欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery之基本選擇器practice(實例講解)

 更新時間：2017年09月30日 07:42:25   作者：青衫故人1  
下面小編就為大家?guī)硪黄猨query之基本選擇器practice(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一、在輸入框中輸入數(shù)字，點(diǎn)擊按鈕，實現(xiàn)對應(yīng)事件的功能。

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的行的下標(biāo)從0開始，故現(xiàn)實中的數(shù)字應(yīng)該減一
        num = num - 1;
        $("tr:gt("+num+")").css("background-color", "green");
      });

二、點(diǎn)擊每一個藍(lán)色線框中的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");
       });

頁面加載完畢后，讓所有數(shù)字為奇數(shù)的div的字體顏色改為blue

//2.頁面加載完畢后，讓所有數(shù)字為奇數(shù)的div的字體顏色該為blue
      //$("div.mainbox>div:even").css("color", "blue");
      for (var i = 0; i < $(".mainbox>div").length; i++) {
        //獲取到每div的集合
        var valu = $(".mainbox>div");
        //獲取到每一個div中的文本內(nèi)容
        var txt = $(valu[i]).text();
        //將string轉(zhuǎn)換為int
        value = parseInt(txt);
        //取模進(jìn)行奇偶判斷
        if (value%2!=0) {
          $(valu[i]).css("color", "blue");
        }
      }

三、編寫javascript代碼，完成如下功能要求：

實現(xiàn)全選、反選、全不選功能

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" />張學(xué)友
          </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標(biāo)簽
        $(":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標(biāo)記下的兒子p前景色改為red

將所有div標(biāo)記的孫子span前景色改為green

將i的爺爺?shù)那熬吧臑镺range

HTML代碼：

<div>
    <span>七大洲有哪些：大米粥、小米粥、綠豆粥、八寶粥... ...</span>
    <p>
      <span>中國四大發(fā)明時什么：油鹽醬醋</span>
    </p>
    <p>
      我拿什么拯救你，<span>我的<i>瞌睡蟲</i></span>

    </p>
  </div>

jQuery代碼：

$(function () {
      //將所有div標(biāo)記下的兒子p前景色改為red
      $("#Button1").click(function () {
        $("div>p").css("color","red");
      });
      //將所有div標(biāo)記的孫子span前景色改為green
      $("#Button2").click(function () {
        $("div").children().children().css("color","green");
      });
      //將i的的爺爺?shù)那熬吧臑镺range
      $("#Button3").click(function () {
        $("i").parent().parent().css("color","orange");
      });
    });

五、請編寫javascript代碼，完成如下功能要求：

每隔1秒，讓所有的數(shù)字逆時針旋轉(zhuǎn)

效果如下：

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) {
        //獲取到當(dāng)前l(fā)abel的文本值
        var $item = $(n).text();
        //將其轉(zhuǎn)換為int型
        $item = parseInt($item);        
        if ($item == 8) {
          //給當(dāng)前l(fā)abel賦值
          $(n).text("1");
        }
        else {
          //給當(dāng)前l(fā)abel賦值
          $(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(實例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論