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的样式改一下
     
    
    





  • 相关阅读:
    【poj2478-Farey Sequence】递推求欧拉函数-欧拉函数的几个性质和推论
    【poj1284-Primitive Roots】欧拉函数-奇素数的原根个数
    【hdu2815-Mod Tree】高次同余方程-拓展BadyStepGaintStep
    【poj3243-Clever Y】高次同余方程-拓展BabyStepGiantStep
    数论之高次同余方程(Baby Step Giant Step + 拓展BSGS)
    POJ1094-Sorting It All Out
    POJ-2299 Ultra-QuickSort
    NYOJ542-试制品
    POJ1936-All in All
    POJ3080-Blue Jeans
  • 原文地址:https://www.cnblogs.com/xiaoyunyun/p/4907278.html
Copyright © 2011-2022 走看看