溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-10-06 02:00:16 來(lái)源：腳本之家 閱讀：187 作者：青衫故人1 欄目：web開發(fā)

一、在輸入框中輸入數(shù)字，點(diǎn)擊按鈕，實(shí)現(xiàn)對(duì)應(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í)中的數(shù)字應(yīng)該減一
        num = num - 1;
        $("tr:gt("+num+")").css("background-color", "green");
      });

二、點(diǎn)擊每一個(gè)藍(lán)色線框中的div時(shí)，改變它后面緊鄰的元素的背景為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");
       });

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

//2.頁(yè)面加載完畢后，讓所有數(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");
        //獲取到每一個(gè)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代碼，完成如下功能要求：

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

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

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>中國(guó)四大發(fā)明時(shí)什么：油鹽醬醋</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");
      });
    });

五、請(qǐng)編寫javascript代碼，完成如下功能要求：

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

效果如下：

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

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(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手