zoukankan      html  css  js  c++  java
  • jquery遍历

    1,addSelf()

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <style>
      p, div { margin:5px; padding:5px; }
      .border { border: 2px solid red; }
      .background { background:yellow; }
    </style>
    </head>
    <body>
      <div>
        <p>First Paragraph</p>
        <p>Second Paragraph</p>
      </div>
    <script>
        $("div").find("p").andSelf().addClass("border");//找到div下的所有p标签,将p标签和div标签合并,使addClass的样式也可以应用于div
        $("div").find("p").addClass("background");//找到div下的所有p标签,将p标签的样式改为addClass的样式
    </script>
    </body>
    </html>

    注:

        <ul>

                <li>list item 1</li>

                <li>list item 2</li>

                <li class="third-item">list item 3</li>

                <li>list item 4</li>

                <li>list item 5</li>

        </ul>

    $("li.third-item").nextAll().andSelf().css("background-color", "red");//.nextAll()获得前面所指定元素的下面的所有元素,将下面的所有元素和前面的元素合并


    2,each()
    $("button").click(function(){
    $("li").each(function(){//每一个li标签都要执行这个功能
    alert($(this).text())
    });
    });

    3,end()

    <!DOCTYPE html>
    <html>
    <head>
      <script type="text/javascript" src="/jquery/jquery.js"></script>
    </head>
    <body>
      <ul class="first">
         <li class="foo">list item 1</li>
         <li>list item 2</li>
         <li class="bar">list item 3</li>
      </ul>
      <ul class="second">
         <li class="foo">list item 1</li>
         <li>list item 2</li>
         <li class="bar">list item 3</li>
      </ul>
      <script>
    $('ul.first').find('.foo').css('background-color', 'red')
        .end().find('.bar').css('background-color', 'green');//现查找ul.first下的.foo元素,将这个样式改为背景色是红色,接着个结束这个.foo元素,回到ul.first元素,继续查找.bar的元素,修改.bar的背景色为绿色
    </script>
    </body>
    </html>

     4,eq()

    $("body").find("div").eq(2).addClass("blue");//匹配body下面的div的index,这里寻找body下面的第二个div标签,再修改样式

    5,filter() 方法
    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { 60px; height:60px;
            margin:5px; float:left;
            border:2px white solid; }
      </style>
      <script type="text/javascript" src="/jquery/jquery.js"></script>
    </head>
    <body>
      <div></div>
      <div class="middle"></div>
      <div class="middle"></div>
      <div class="middle"></div>
      <div class="middle"></div>
      <div></div>
    <script>
      $("div").css("background", "#c8ebcc")
        .filter(".middle")//过滤出所有.middle的元素
        .css("border-color", "red");
    </script>
    </body>
    </html>

    注:
    <ul>
      <li>list item 1</li>
      <li>list item 2</li>
      <li>list item 3</li>
      <li>list item 4</li>
      <li>list item 5</li>
      <li>list item 6</li>
    </ul>
     
     $('li').filter(':even').css('background-color', 'red');//默认设置的是奇数行的样式

    
    
    $('li').filter(':odd').css('background-color', 'red');//默认设置的是偶数行的样式

    6,first()
    <ul>
      <li>list item 1</li>
      <li>list item 2</li>
      <li>list item 3</li>
      <li>list item 4</li>
      <li>list item 5</li>
    </ul>
    $('li').first().css('background-color', 'red');//匹配第一个li下面的元素

    7,has()
    <ul>
      <li>list item 1</li>
      <li>list item 2
        <ul>
          <li>list item 2-a</li>
          <li>list item 2-b</li>
        </ul>
      </li>
      <li>list item 3</li>
      <li>list item 4</li>
    </ul>
    $('li').has('ul').css('background-color', 'red');//将含有ul标签的li的样式改一下
     
    
    





  • 相关阅读:
    量子纠错码——Stabilizer codes
    量子计算机编程(三)——量子应用
    量子计算机编程(二)——QPU基础函数
    量子计算机编程(一)——QPU编程
    量子搜索算法 Grover search
    因数分解算法、周期查找算法(简化)
    量子傅里叶变换
    简单的量子算法(二):Simon's Algorithm
    简单的量子算法(一):Hadamard 变换、Parity Problem
    Web Scraper——轻量数据爬取利器
  • 原文地址:https://www.cnblogs.com/xiaoyunyun/p/4907278.html
Copyright © 2011-2022 走看看