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

    1.filter():筛选函数
    1>:筛选单个元素,
    object.filter("selector")
    2>筛选多个元素:
    object.filter("selector,selector")
    <span class="yes"></span>
    <span>no or yes</span>
    <span class="no"></span>
     $("span").filter(".yes,.no").text("yes or no");
    3>,通过一个函数返回值来确定筛选的selector
    <span class="yes"></span>
    <span><p>no or yes</span>
    <span class="no"></span>
    $("span").filter(function(){
            return $("p",this).length==0;
    }).text("return一个selector");
     
    2.is()函数:根据选择器、DOM元素,jq对象来检测匹配元素的集合
    1>,根据选择器
    <div class="box" id="new"></div>
    console.log($(".box").is("#new"));
    2>,根据DOM元素
    <form><input type="checkbox" /></form>
    $("input[type='checkbox']").parent().is("form")
    3>,function检测
    <ul>
                <li><strong>1</strong></li>
                <li><strong>1</strong>+<strong>2</strong></li>
    </ul>
    $("li").on("click",function(e){
                    var $li=$(e.target);
                    var onoff=$li.is(function(){
                        return $("strong",this).length==2;
                    })
                    if (onoff) {
                        $li.css("background","red");
                    } else{
                        $li.css("background","green");
                    }
    })
    3,map函数:将一组元素转化成其他数组,也可以认为是一个遍历函数
    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") ); 
    在p中插入一个 以“,”为间隔并且由所有input元素的value值而组成的数组,
    get()函数是一个获得选择器指定的DOM元素
    4,not(selector||DOMelement||原生js所指定的元素)函数,从指定的集合中删除selector指定||DOMelement的元素
    <ul>
      <li>list item 1</li>
      <li>list item 2</li>
      <li id="notli">list item 3</li>
      <li>list item 4</li>
      <li>list item 5</li>
    </ul>
    $('li').not(document.getElementById('notli')).css('background-color', 'red');
    <p>1</p>
    <p class="p1">2</p>
    <p>3</p>
    $("p").not("p.p1").css("background","#FF0000");
    
    
    5,has(selector||element)函数:保留包含特定后代的元素,
    <ul><li>1</li></ul>
    <ul><li class="li1">1</li></ul>
    $("ul").has("li.li1").css("background","red");
    6,slice(index,index)函数截取一个集合的一部分。
    index是正数时,以0为起点,从左到右
    index是负数时,以-1为起点,从右到左。
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    1>,slice(index),从index后的元素开始,到结尾。
    $("p").slice(2).css("background","aqua"); //3 ,4 的背景还换成aqua的颜色
    2>,slice(index1,index2) 从index1开始到index2-1的元素片段
    $("p").slice(0,2).css("background","aqua");//0 ,1 的背景还换成aqua的颜色
     
    7,object.children(selector):children可以选择性的选择元素的某个子元素
    <ul>
                <li>1</li>
                <li class="theli">2</li>
                <li>3</li>
    </ul>
    console.log($("ul").children(".theli").text());
    但是children只是针对于他的儿子辈的元素,对孙子辈的元素没有作用
    <ul>
    <li class="theli">2</li>
    <li><p class="theli">2-1</p></li>
    </ul>
    console.log($("ul").children(".theli").css("color", "red"));
    仅仅 li.theli 换了颜色,而p.theli没有换颜色
    8.find()函数: find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。
    9,:animate伪类筛选:匹配所有正在执行动画效果的元素,各伪类之间可以相互配合
    $("*:not(:animated)").animate({
                    left:"+=200"
    },2000);
    10,lang伪类:lang是指的是语言编码,有时并不起作用
    11,:contains(text) 匹配包含给定文本的元素
    <p>王瑞睿</p>
    <p>莱索</p>
    <p>苏 莱索</p>
    console.log($("p:contains('莱索')").length); //2 返回一个数组对象
    12,:empty :匹配所有不包含文本或者不包含子元素的空元素
    <p></p>   //empty
    <p></p>   //empty
    <p></p>   //empty
    $("p:empty").text("empty");
    相反的是:parent伪类 筛选的是非空元素
    13,object.has(element):在object集合中寻找has element 的元素并且进行操作
    <p><em></em></p> //莱索
    <p></p>
    $("p:has(em)").find("em").text("莱索");
    14,复合属性选择器,需要同时满足多个条件使用
    <p class="new">1</p>
    <p class="new" type="p">2</p>
    <p class="new" id="new" type="p">3</p>
    $("p[class='new'][id='new'][type='p']").text() //3
    15.[attribute] :是否拥有 attribute 这个属性
    [attribute=value] :attribute 是否等于value值
    [attribute!=value]:匹配所有不含有指定的属性,或者属性不等于特定值的元素。
    [attribute^=value]:正则语法
    [attribute$=value]:同上
    [attribute *=value1]  :attribute的值包括value1的值
    16,:first-child||:last-child  匹配元素集合中的第一个||最后一个子元素
    <ul>
                <li>John</li>
                <li>Karl</li>
                <li>Brandon</li>
    </ul>
    <ul>
                <li>Glen</li>
                <li>Tane</li>
                <li>Ralph</li>
    </ul> 
    $("ul li:first-child").css("background","red"); 
    $("ul li:last-child").css("background","red");
    17,:first-of-child||:last-of-child
    选择器匹配在文档树中,具有相同的父元素,并且位置处于第一个||最后一个
    <p>
                <span>1</span> //saddlebrown
                <span>2</span>
                <span>3</span>  //saddlebrown
     </p> 
    $("span:last-of-type").css("background","saddlebrown"); 
    $("span:first-of-type").css("background","saddlebrown");
    5,parents()函数:获取元素的所有的祖先节点,
    closest(selector)函数:通过selector来指定所在元素的祖先元素,包括元素本身
    6,siblings(selector)函数:获取所在元素的同级的selector选的兄弟元素
    nextAll()函数:获取元素的之后的所有的同级元素,相反的,prevAll()函数是获取元素之前所有的同级元素。
    <ul>
            <li>1</li>
            <li class="theli">2</li>
            <li>3</li>
            <li>4</li>
    </ul>
    $(".theli").siblings("#theli").css("background","rosybrown");
     $(".theli").nextAll().css("background","rosybrown");
    7,until函数:
    nextUntil(selector)函数:元素之后的同级元素到selector所选中的元素截止,不包括selector所选中的元素。
    prevUntil(selector)函数:
    parentsUntil()函数:
    <ul>
                <li class="theli">1</li>
                <li >2</li>  //css("background","#0000FF")
                <li id="theli">3</li>
                <li>4</li>
    </ul>
     $(".theli").nextUntil("li:nth-child(3)").css("background","#0000FF");
     $(".theli").parentsUntil("body").css("background","saddlebrown");//父级的取值截止

     

    :first-child

  • 相关阅读:
    uniapp、小程序之swiperitem内容过多显示不全的解决方案
    PingFang(苹方)字体的引用
    Vue项目中使用websocket
    uniapp页面跳转传递参数过长
    uniapp开发的h5,使用微信授权登录(前置条件+具体代码)
    Maven工具安装使用
    Lombok代码生成插件使用
    对不起,我的文章暂时无法公开!
    [iOS]学习笔记7(CATransform3DFlip效果)
    [iOS]学习笔记8 (iOS之阻塞)
  • 原文地址:https://www.cnblogs.com/laiso/p/7872938.html
Copyright © 2011-2022 走看看