jQuery-03(筛选和文档处理)

筛选

1、jquery过滤方法
eq(index|-index)
first()
last()
hasClass(class)
filter(expr|obj|ele|fn)
is(expr|obj|ele|fn)
map(callback)
has(expr|ele)
not(expr|ele|fn)
slice(start,[end])
具体事例如下：eq() 获取子元素里面的其中某一个，根据索引来获取。 -index -1开始的

<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li class="box" id="li3"><span class="child">第三个</span></li>
    <li>第四个</li>
    <li>第五个</li>
</ul>

eq() 获取子元素里面的其中某一个，根据索引来获取。 -index -1开始的

console.log($("ul>li:first"));
    console.log($("ul>li:eq(0)"));
    console.log($("ul>li:nth-child(1)"));
    console.log($("ul>li").eq(0));//上面四个等价均是第一个li
    console.log($("ul>li").eq(-1));
    console.log($("ul>li:last"));

hasClass(class) 根据元素的类名称来进行过滤的 参数是class名称
用来判断某个元素是否具有class名称 true/false
console.log($("ul>li").eq(2).hasClass("box"));
filter 过滤 fn(index,ele)

console.log($("ul>li").filter(".box"));
console.log($("ul>li").filter($(".box")));

is() expr|obj|ele|fn 判断当前元素是什么 返回值 true/false

console.log($("ul>li").is(".box"));
console.log($("ul>li").is($(".box")));

map映射两种使用

hasClass(class) 根据元素的类名称来进行过滤的 参数是class名称
用来判断某个元素是否具有class名称 true/false
console.log($("ul>li").eq(2).hasClass("box"));
filter 过滤 fn(index,ele)

console.log($("ul>li").filter(".box"));
console.log($("ul>li").filter($(".box")));

is() expr|obj|ele|fn 判断当前元素是什么 返回值 true/false

console.log($("ul>li").is(".box"));
console.log($("ul>li").is($(".box")));

map映射两种使用

next([expr])
nextAll([expr])
nextUntil([e|e][,f]) 类似nextAll 方法
offsetParent()
parent([expr])
parents([expr])
parentsUntil([e|e][,f]) 下去自己看
prev([expr])
prevAll([expr])
prevUntil([e|e][,f]) //下去自己看
siblings([expr])

children 获取子元素的 获取所有的子集元素(直接子集)
children 参数expr 选择器 可以作为简单过滤

find 查找 参数可以是expr jquery对象 ele
next 获取当前匹配元素的下一个 nextAll 获取当前匹配元素之后的所有元素
next nextoAll 方法的参数 expr 表达式
prev prevAll 同上
offsetParent() 该方法返回的父元素是定位的 在父亲元素中找最近的定位父元素

3、串联
add(e|e|h|o[,c])1.9*
addBack()1.9+
contents()
end()

<ul>
    <li>1</li>
    <li>2</li>
    <li class="box">3</li>
    <li>4</li>
</ul>
<p class="p1">ppp</p>
<p>p2222</p>

add() 给jquery对象添加新的对象

console.log($("ul>li").add("p"));
console.log($("ul>li").add(".p1"));

addBack()
console.log($("ul>li").eq(1).nextAll().addBack());//元素234
contents 获取当前元素的所有节点 包含文本 childrenNodes
end 方法是回到上一次破坏性修改 上一次修改jquery对象