zoukankan      html  css  js  c++  java
  • jquery 筛选

    end()

    <p><span>Hello</span>, how are you?</p>
    <script>$("p").find("span").end().css("border", "2px red solid");</script>

    找到p 的子元素span ,end() 返回去找到p 设置p 元素的样式

    <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');</script>
    
     先找到类名为 first  的ul,在
    在类名为 first 的ul 下面找到类名为foo 的元素,设置它的样式,

    返回去找到ul ,在ul下面找到类名为bar的元素,设置它的样式 </body>

      andSelf()

    <style>
      p, div { margin:5px; padding:5px; }
      .border { border: 2px solid red; }
      .background { background:yellow; }
    </style>
    </head>
    <body>
    <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>
    <script>
    $("li.third-item").nextAll().andSelf().css("background-color", "red");    最后三个li 的背景颜色成红色
    </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  都被添加类 
        $("div").find("p").addClass("background");     p 添加类
    </script>
    

      siblings()

    <body>
    <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>
    
    <script>
    $('li.third-item').siblings().css('background-color', 'red');
    类名为third-item 的li 元素  的同级元素  的样式
    $(
    'li.third-item').siblings().andSelf().css('background-color', 'red'); 类名为third-item 的li 元素 的同级元素 包括它自己的样式

    $("li.start").siblings().css({"color":"red","border":"2px solid red"});

    $("div").siblings(".selected")

      找到每个div的所有同辈元素中带有类名为selected的元素

    </script>
    </body>
    $("p").prev()    找到每个段落紧邻的前一个同辈元素。
    
    $("p").prev(".selected")   
    找到每个段落紧邻的前一个同辈元素中类名为selected的元素。
    $("div:last").prevAll().addClass("before");
    给最后一个之前的所有div加上一个类

    <script>$("div:last").prevAll('.aa').addClass("before");</script>
    <!DOCTYPE html>
    <html>
    <head>
      <script type="text/javascript" src="/jquery/jquery.js"></script>
    </head>
    <body>
    <dl>
      <dt id="term-1">term 1</dt>
      <dd>definition 1-a</dd>
      <dd>definition 1-b</dd>
      <dd id='ha'>definition 1-c</dd>
      <dd>definition 1-d</dd>
    
      <dt id="term-2">term 2</dt>
      <dd>definition 2-a</dd>
      <dd>definition 2-b</dd>
      <dd>definition 2-c</dd>
    
      <dt id="term-3">term 3</dt>
      <dd>definition 3-a</dd>
      <dd>definition 3-b</dd>
    </dl>
    
    <script>
    $("#term-2").prevUntil("dt")
      .css("background-color", "red");
    
    id为term-2 的元素前面所有的元素,知道dt  结束
      
    var term1 = document.getElementById('ha');
    $("#term-3").prevUntil(term1, "dd")
      .css("color", "blue");
    id为term-3  往前到id为ha 的元素,这之间的dd 元素
    </script>
    </body>
    </html>
    next()
    
    nextAll()
    
    nextUntil()

    parent()

    parents()

    parentsUntil()

    $("div").children()
    $("div").children(".selected")

    $("p").find("span")  从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同。  
     
     
    $("p").eq(1)  查找索引为1 的 p 元素 ,即第二个 p 元素
    $("p").eq(-2)  查找倒数第二个p元素
    $('li').first()   获取匹配的第一个元素
    $('li').last()    获取最后个元素


    检查当前的元素是否含有某个特定的类,如果有,则返回true。
      if ( $(this).hasClass("protected") )
    <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")
        .css("border-color", "red");
    </script>
    
    </body>
    $("p").filter(".selected, :first")     保留第一个以及带有select类的元素
    
    
    $("input[type='checkbox']").parent().is("form")   返回 true 或false
     
    slice() 把匹配元素集合缩减为指定的指数范围的子集。
    
    <body>
    <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>
    
    <script>
    $('li').slice(0,2).css('background-color', 'red');    索引从1开始,直到索引为2结束不包括2
    查找所有的li元素 ,在其中选取索引为0和1 的元素,即选取第一和第二个

    $('li').slice(-4,-2).css('background-color', 'red');
    slice(负数,负数),从最后的开始数,-1,-2,-3,-4 ,选取-4到-2 不包括-2
    </script>
    
    
    
    <body>
    <ul>
      <li>list <strong>item 1</strong></li>
      <li><span>list item 2</span></li>
      <li>list item 3</li>
    </ul>
    
    <script>
    $("ul").click(function(event) {
      var $target = $(event.target);
      if ( $target.is("li") ) {
        $target.css("background-color", "red");
      }
    });
    </script>
    
    </body>

      

    $("input[type='checkbox']").parent().is("form")   由于input元素的父元素是一个表单元素,所以返回true。

     map()

      $(function(){
               var arr1=[0,3,5];
                var arr2= $.map(arr1,function(item){return item*2;});
                document.write(arr2)
                alert(arr2);
            });
     
    保留包含特定后代的元素,去掉那些不含有指定后代的元素。
    
    $('li').has('ul').css('background-color', 'red');
    给含有ul的li加上背景色
    
    
    查找DIV中的每个子元素。
    $("div").children()
    在每个div中查找 .selected 的类。
    $("div").children(".selected")
    
    
     
     
  • 相关阅读:
    pat 甲级 1065. A+B and C (64bit) (20)
    pat 甲级 1064. Complete Binary Search Tree (30)
    pat 甲级 1010. Radix (25)
    pat 甲级 1009. Product of Polynomials (25)
    pat 甲级 1056. Mice and Rice (25)
    pat 甲级 1078. Hashing (25)
    pat 甲级 1080. Graduate Admission (30)
    pat 甲级 团体天梯 L3-004. 肿瘤诊断
    pat 甲级 1099. Build A Binary Search Tree (30)
    Codeforce 672B. Different is Good
  • 原文地址:https://www.cnblogs.com/MdpHappyForEver/p/5391798.html
Copyright © 2011-2022 走看看