suchen

Heim  >  Artikel  >  Web-Frontend  >  Detailliertes Verständnis jeder Verwendung in JQuery

Detailliertes Verständnis jeder Verwendung in JQuery

高洛峰
高洛峰Original
2016-12-29 11:10:501456Durchsuche

1 Möglichkeit, li durch jedes zu durchlaufen, um den gesamten Inhalt von li zu erhalten

<!-- 1种 -->
  <ul class="one">
    <li>11a</li>
    <li>22b</li>
    <li>33c</li>
    <li>44d</li>
    <li>55e</li>
  </ul>
  <button>输出每个li值</button>
<script>
  // 1种 通过each遍历li 可以获得所有li的内容
  $("button").click(function(){ 
    $(".one > li").each(function(){
      // 打印出所有li的内容
      console.log($(this).text());
    })
  });
</script>

2 Möglichkeiten, li durch jedes zu durchlaufen und Ereignisse zu jedem li durch $(this) hinzuzufügen

<!-- 2种 -->
  <ul class="two">
    <li>2222</li>
    <li>22b</li>
    <li>3333</li>
    <li>44d</li>
    <li>5555</li>
  </ul>
<script>
  // 2种 通过each遍历li 通过$(this)给每个li加事件
  $(&#39;.two > li&#39;).each(function(index) {
    console.log(index +":" + $(this).text());
    // 给每个li加click 点那个就变颜色
    $(this).click(function(){
      alert($(this).text());
      $(this).css("background","#fe4365");
    });
  });
</script>

4 Möglichkeiten, alle li zu durchlaufen. Klassennamen zu allen li hinzufügen 

<!-- 4种 -->
  <ul class="ctn3">
    <li>Eat</li>
    <li>Sleep</li>
    <li>3种</li>
  </ul>
  <span>点击3</span>
<script>
  // 4种 遍历所有li 给所有li添加 class类名
  $(&#39;span&#39;).click(function(){
    $(&#39;.ctn3 > li&#39;).each(function(){
      $(this).toggleClass(&#39;example&#39;);
    })
  });
</script>

5 Möglichkeiten In every() Schleifenelement == $(this)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>each练习2</title>
  <style>
    div {
      width: 40px;
      height: 40px;
      margin: 5px;
      float: left;
      border: 2px blue solid;
      text-align: center;
    }
    span {
      width: 40px;
      height: 40px;
      color: red;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div id="stop">Stop here</div>
  <div></div>
  <div></div>
  <button>Change colors</button>
  <span></span>
</body>
<script src="jquery-1.11.1.min.js"></script>
<script >
   // 在each()循环里 element == $(this)
  $(&#39;button&#39;).click(function(){
    $(&#39;div&#39;).each(function(index,element){
      //element == this;
      $(element).css("background","yellow");
 
      if( $(this).is("#stop")){
        $(&#39;span&#39;).text("index :" + index);
        return false;
      }
    })
  })
</script>
</html>

Das Obige ist Der gesamte Artikelinhalt, ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder bei der Arbeit helfen kann, und ich hoffe auch, die chinesische PHP-Website zu unterstützen!

Für ein tieferes Verständnis der einzelnen Verwendungen in jquery beachten Sie bitte die chinesische PHP-Website!


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery verwendet jede Methode, um Dateninstanzen im JSON-Format zu durchlaufenNächster Artikel：jquery verwendet jede Methode, um Dateninstanzen im JSON-Format zu durchlaufen

In Verbindung stehende Artikel

Mehr sehen