• 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")
    
    
     
     
  • 相关阅读:
    MyEclipse安装教程以及配置server和运行起来
    倒计时代码-附效果图
    图片循环滚动代码-附效果图
    一个手机页面的导航代码,附效果图
    html电子书翻页效果代码,附效果演示
    唯美雪景雪花飘落代码,附效果演示
    非常漂亮的纯css3实现多彩侧边导航(非常流畅),附效果演示
    页面加密代码,附效果演示
    前端开发每天必学之HTML入门介绍
    仿网易官网顶部展出的大幅广告代码,附效果演示
  • 原文地址:https://www.cnblogs.com/MdpHappyForEver/p/5391798.html
Copyright © 2020-2023  润新知