简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Explication détaillée d'exemples d'opérations de sélecteur et de nœud DOM dans JQuery

Explication détaillée d'exemples d'opérations de sélecteur et de nœud DOM dans JQuery

黄舟
黄舟original
2017-09-30 11:37:421241parcourir

L'éditeur suivant vous apportera un exemple d'exercices sur le sélecteur JQuery et le fonctionnement des nœuds DOM. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Venez jeter un œil avec l'éditeur

1. Exercice 1

Analyse de l'effet de la demande :

2. Exemple de code : 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="jquery-1.9.1/jquery.js"></script>
  <script type="text/javascript">
    $(function () {
      //方法一：jQuery
      //$("p").click(function () {
      //  alert(this.textcontent);
      //  //alert($(this).html());
      //});

      //方法二：jQuery--for循环
      for (var i = 0; i < $("p").length; i++) {
        $("p")[i].onclick = function () {
          alert($(this).html());
        };
      };
    });

    //方法三：JavaScript中的for循环
    /*window.onload = function () {
      var temp = document.getElementsByTagName("p");
      for (var i = 0; i < temp.length; i++) {
        temp[i].onclick = function () {
          alert(this.innerHTML);
        };
      };
    }*/
  </script>
</head>
<body>
  <p>隔壁 Java 老师 很肥</p>
  <p>隔壁Java 老师 很胖</p>

  <p>隔壁Java 老师 很呆萌</p>
  <p>隔壁Java 老师 爱捡肥皂</p>
  <p>隔壁Java 老师 爱撒娇</p>
  <p>隔壁Java 老师 装嫩</p>
  <p>隔壁Java 老师 肾虚</p>

  <p>隔壁Java 老师 等等</p>
  <p>隔壁Java 老师 很肥</p>
  <p>隔壁Java 老师 很肥</p>
  <p>隔壁Java 老师 很肥</p>
  <p>隔壁Java 老师 很肥</p>

  <p>隔壁Java 老师 很肥</p>
  <p>隔壁Java 老师 很肥</p>
  <p>隔壁Java 老师 很肥</p>
  <p>隔壁Java 老师 很肥</p>
  <p>隔壁Java 老师 很肥</p>

  <p>隔壁Java 老师 很肥</p>
  <p>隔壁Java 老师 很肥</p>
  <p>隔壁Java 老师 很肥</p>

</body>
</html>

2. 🎜>1. Analyse des effets :

2. Exemple de code


3. Exercice 3

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <style type="text/css">
    p {
      display: none;
      border: 1px solid red;
    }
  </style>
  <script src="jquery-1.9.1/jquery.js"></script>
  <script type="text/javascript">
    $(function () {
      $("li").click(function () {
        debugger;
        $("li>p").hide();
        $(this.children).show();
      });
    });
    
  </script>
</head>
<body>
  <ul>
    <li>
      中国
      <p>台湾</p>
      <p>钓鱼岛</p>
      <p>北京</p>
    </li>
    <li>
      米国
      <p>华盛顿</p>
      <p>洛杉矶</p>
    </li>
    <li>
      韩国
      <p>首尔</p>
      <p>釜山</p>
      <p>济州岛</p>
    </li>
  </ul>
</body>
</html>

1. Analyse des effets

2. >

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery réalise le partage des effets de carrousel gauche et droitArticle suivant：jQuery réalise le partage des effets de carrousel gauche et droit

Articles Liés

Voir plus