jQuery过滤器

jQuery过滤器

过滤器 基于选择器的基础上，进行精细的过滤

<li>0</li>
<ul>
    <span>-1</span>
    <span>s
        <span>a</span>
        <span>a</span>
        <span>a</span>
    </span>
    <span>s</span>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

// 将所有li放在一个列表中，查找它的第一个元素
$("li:first").css("color","red");
$("li").first().css("color","red");// 与上面写法相同
// 将li是父元素的第一个子元素是li的选中设置红色
$("li:first-child").css("color","red");
// li是不是它父元素中li类型列表的第一个子元素
$("li:first-of-type").css("color","red");
// 将li是父元素的第一个子元素时li的选中
$("li:nth-child(1)").css("color","red");// 0,2,5
// li是不是它父元素中li类型列表的第一个子元素
$("li:nth-of-type(1)").css("color","red");

// 查找列表中li最后一个元素
$("li:last").css("color","red");
$("li").last().css("color","red");// 与上面写法相同
// 将li是父元素的最后一个子元素是li的选中设置红色
$("li:last-child").css("color","red");
// li是不是它父元素中li类型列表的最后一个子元素
$("li:last-of-type").css("color","red");

// 过滤偶数
// 将所有的li放在一个列表中，并且获取偶数项，这个even的偶数是从0开始
$("li:even").css("color","red");
// 将每个li的父元素中所有列表的偶数项是li选中，这个even的偶数项是从1开始
$("li:nth-child(even)").css("color","red");
$("li:nth-child(2n)").css("color","red");// 等同于$("li:nth-child(even)")
// 将li父元素中li类型元素的列表中是偶数项的选中，这个even的偶数也是从1开始
$("li:nth-of-type(even)").css("color","red");
$("li:nth-of-type(2n)").css("color","red");// 等同于$("li:nth-of-type(even)")
// ul中所有子元素中偶数项
$("ul :even").css("color","red");

// 过滤奇数
// 将所有的li放在一个列表中，并且获取奇数项，这个odd的奇数是从0开始
// $("li:odd").css("color","red");
// $("li:nth-child(odd)").css("color","red");
// $("li:nth-child(2n-1)").css("color","red");
// $("li:nth-of-type(odd)").css("color","red");
// $("li:nth-of-type(2n-1)").css("color","red");

// li列表中的第0个元素
$("li:eq(0)").css("color","red");
$("li").eq(0).css("color","red");// 和上面写法相同

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div class="divs">4</div>
    <div>5</div>
    <div>6</div>
    <div>
        <div></div>
    </div>
</div>

// 大于div列表中的第三项的其它元素
$("div:gt(3)").css("color","red");
// 小于div列表的第三项的其他元素
$("div:lt(3)").css("color","red");
// 选择div列表中的从第二项开始，到第四项前结束的元素
$("div").slice(2,4).css("color","red");
// div列表中不是class为divs的元素
$("div:not(.divs)").css("color","red");
// 列表中没有class属性的元素
$("div:not([class])").css("color","red");
$("div").not(".divs").css("color","red");// 和上面写法相同

$(":header");///所有h1-h6的元素
$(":animated");//所有正在播放的动画元素
$(":focus");//当前汇聚焦距属性

<div>
    <div id="div0"></div>
    <div></div>
    <div>
        <span class="divs"></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
    </div>
    <div class="div0"></div>
    <div>
        <div></div>
    </div>
</div>

// document.body.firstChild  子节点  文本，注释，document，标签
// document.body.firstElementChild  子元素   就是标签<div></div>

// 选择没有子元素或者子节点的div
console.log($("div:empty"));
// 选择有子元素的或者子节点的class是divs的元素
console.log($(".divs:parent"));
// div的后代元素中包含3子节点的元素，只能是内容不能是元素
console.log($("div:contains(3)"));
// 可以找到包含这个内容所有父容器
console.log($(":contains(3)"));
// 查找有包含选择器元素的容器
console.log($(":has(.divs)"));
console.log($(":has(.div0)"));
// 查找div包含#div0元素的容器
console.log($("div").has("#div0"));
// 查找当前.divs元素的父容器
console.log($(".divs").parent());
// 查找当前.divs元素的所有父容器
console.log($(".divs").parents());
//查找当前.divs元素的父元素到html之前的所有父容器
console.log($(".divs").parentsUntil("html"));

// 所有不可见的元素：head, meta, meta, title, script, script
// 还包括display:none，像visibility: hidden和height:0都不属于隐藏的
console.log($(":hidden"));// 隐藏的
// 所有可以显示的元素
console.log($(":visible"));

// div元素下面的第一个子元素
console.log($("div:nth-child(1)"));
// div元素下面的偶数子元素
console.log($("div:nth-child(even)"));
console.log($("div:nth-child(odd)"));
console.log($("div:nth-child(2n-1)"));
// div元素下面的第一个子元素
console.log($("div:first-child"));
// div元素下面的最后一个子元素
console.log($("div:last-child"));
//该元素是父元素唯一子元素，独生子女
console.log( $("div:only-child"));

$("div:nth-of-type(1)");
$("div:nth-of-type(even)");
$("div:nth-of-type(odd)");
$("div:nth-of-type(2n)");
$("div:nth-of-type(2n-1)");
$("div:first-of-type");
$("div:last-of-type");
//该元素在它的父容器中的同种类型仅此一个
console.log($("div:only-of-type"));


两种特殊的方法
// is(),hasClass() 它们两个都是返回一个布尔值，后面不能连缀
// 判断div列表中是否有.divs选择器的元素，有就返回true,没有就返回false
console.log($("div").is(".divs"));
console.log($("div").is("#div0"));
// 作用是仅判断div列表中是否有class是divs的选择器，有就返回true 反之返false
console.log($("div").hasClass("divs"));