Ausführliche Erläuterung von Beispielen für die grundlegende Auswahlpraxis von JQuery

Der folgende Editor vermittelt Ihnen eine grundlegende Praxis für die JQuery-Auswahl (Erklärung mit Beispielen). Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Editor, um einen Blick darauf zu werfen

1. Geben Sie die Zahl in das Eingabefeld ein und klicken Sie auf die Schaltfläche, um die Funktion des entsprechenden Ereignisses zu implementieren.

HTML-Code:

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

jQuery-Code:

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

2. Wenn Sie in jedem blauen Wireframe auf das p klicken, ändern Sie den Hintergrund des Elements direkt dahinter in grün

HTML-Code:

<p class="mainbox">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
  </p>

jQuery-Code:

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

Nachdem die Seite geladen ist, machen Sie alle Zahlen ungerade p Ändern Ändern Sie die Schriftfarbe in Blau

//2.页面加载完毕后，让所有数字为奇数的p的字体颜色该为blue
      //$("p.mainbox>p:even").css("color", "blue");
      for (var i = 0; i < $(".mainbox>p").length; i++) {
        //获取到每p的集合
        var valu = $(".mainbox>p");
        //获取到每一个p中的文本内容
        var txt = $(valu[i]).text();
        //将string转换为int
        value = parseInt(txt);
        //取模进行奇偶判断
        if (value%2!=0) {
          $(valu[i]).css("color", "blue");
        }
      }

3. Schreiben Sie Javascript-Code, um die folgenden Funktionsanforderungen zu erfüllen:

Realisieren Sie die Funktionen „Alles auswählen“, „Auswahl umkehren“ und „Alles abwählen“

HTML-Code:

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

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

4. Ändern Sie die Vordergrundfarbe des Sohns p unter allen p-Tags in Rot

Ändern Sie die Vordergrundfarbe aller p-markierten Enkelbereiche in Grün

Ändern Sie die Vordergrundfarbe von i's Opa in Orange

HTML-Code:

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

    </p>
  </p>

jQuery-Code:

$(function () {
      //将所有p标记下的儿子p前景色改为red
      $("#Button1").click(function () {
        $("p>p").css("color","red");
      });
      //将所有p标记的孙子span前景色改为green
      $("#Button2").click(function () {
        $("p").children().children().css("color","green");
      });
      //将i的的爷爷的前景色改为Orange
      $("#Button3").click(function () {
        $("i").parent().parent().css("color","orange");
      });
    });

5. Bitte schreiben Sie Javascript-Code, um das zu vervollständigen folgende funktionale Anforderungen:

Alle Zahlen alle 1 Sekunde gegen den Uhrzeigersinn drehen

Der Effekt ist wie folgt:

HTML-Code:

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

jQuery-Code:

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

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die grundlegende Auswahlpraxis von JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!