Detaillierte Erläuterung der JQuery-Selektorpraxis

Dieser Artikel bietet Ihnen eine grundlegende Praxis für die JQuery-Auswahl (Erklärung mit Beispielen). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Geben Sie die Nummer in das Eingabefeld ein und klicken Sie auf die Schaltfläche, um die Funktion des entsprechenden Ereignisses auszuführen.

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 Drahtmodell auf das p klicken, ändern Sie das Element direkt dahinter. Der Hintergrund ist 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");
       });

Lassen Sie nach dem Laden der Seite die Schriftfarbe aller p's mit ungeraden Zahlen Drittens: Schreiben Sie Javascript-Code für 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");
        }
      }

, um die folgenden Funktionsanforderungen zu erfüllen:

Realisieren Sie alle Auswahl-, Umkehrauswahl- und keine Auswahlfunktionen

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 der Enkelspanne aller p-Tags 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 die folgenden Funktionsanforderungen zu erfüllen:

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

Verwandte Empfehlungen:

Detaillierte Erläuterung des CSS-Attributselektors

Detaillierte Erläuterung der Verwendung des Hover-Selektors in CSS

jQuery-Selektorsymbolanalyse

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JQuery-Selektorpraxis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!