Explication détaillée de la pratique du sélecteur jquery

Cet article vous apporte une pratique de base du sélecteur jquery (explication avec exemples). L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Entrez le numéro dans la zone de saisie et cliquez sur le bouton pour mettre en œuvre la fonction de l'événement correspondant.

Code html :

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

Code jQuery :

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

2. Lorsque vous cliquez sur le p dans chaque filaire bleu, changez l'élément immédiatement derrière. Le fond est vert

Code html :

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

Code jQuery :

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

Une fois la page chargée, laissez la couleur de police de tous les p avec des nombres impairs change Troisièmement, écrivez le code javascript pour le bleu

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

pour remplir les exigences fonctionnelles suivantes :

Réaliser toutes les fonctions de sélection, de sélection inverse et aucune sélection

Code 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" />张学友
          </label>
          <label>
            <input type="checkbox" id="Checkbox5" />孙燕姿
          </label>
          <label>
            <input type="checkbox" id="Checkbox6" />刘欢
          </label>
        </td>
      </tr>

Code jQuery :

$(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. Changez la couleur de premier plan du fils p sous toutes les balises p en rouge

Changez la couleur de premier plan de l'étendue du petit-fils de toutes les balises p en vert

Changez la couleur de premier plan du grand-père de i en Orange

Code HTML :

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

    </p>
  </p>

Code jQuery :

$(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. Veuillez écrire du code javascript pour remplir les exigences fonctionnelles suivantes :

Toutes les 1 secondes, faites pivoter tous les nombres dans le sens inverse des aiguilles d'une montre

L'effet est le suivant :

Code HTML :

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

Code jQuery :

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

Recommandations associées :

Explication détaillée du sélecteur d'attribut CSS

Explication détaillée de l'utilisation du sélecteur de survol en CSS

Analyse des symboles du sélecteur jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!