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

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

站在用戶的角度思考問題，與客戶深入溝通，找到德城網(wǎng)站設(shè)計與德城網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋德城地區(qū)。

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

二、點擊每一個藍(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)全選、反選、全不選功能

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

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)

效果如下：

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

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)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞標(biāo)題：jquery之基本選擇器practice(實例講解)
網(wǎng)站URL：http://www.rwnh.cn/article42/ippghc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、企業(yè)建站、網(wǎng)站營銷、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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