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