jquery经常使用筛选方法

一、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])
具体事例以下:jquery

<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)dom

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

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

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

map映射两种使用
第一种将一个集合映射为一个新的集合 带返回值
第二种 不写返回值 map能够做为遍从来使用
必须有回调函数 参数为index,ele
jquery 对象集合转为数组 须要get()
get(index) js对象 不一样于eq(index) 返回的是jquery对象函数

console.log($("ul>li")[0]);
console.log($("ul>li").get(0));

has()过滤元素 把当前须要的过滤出来 不须要的去除 参数能够是selecto dom
参数写成.box都匹配不到元素(直接找的匹配元素的同级)
参数写成.box 过滤的元素必须是匹配的元素子内容
console.log($("ul>li").has(".child"));
not() 除过 回调函数参数index ele
console.log($("ul>li").not(".box"));
console.log($("ul>li").not($(".box")));
slice()参数是start end 相似数据的slice 截断 取小不取大
console.log($("ul>li").slice(0, 2));
二、查找
children([expr])
closest(e|o|e)1.7*
find(e|o|e) expr jquery对象 ele
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])spa

children 获取子元素的 获取全部的子集元素(直接子集)
children 参数expr 选择器 能够做为简单过滤code

find 查找 参数能够是expr jquery对象 ele
next 获取当前匹配元素的下一个 nextAll 获取当前匹配元素以后的全部元素
next nextoAll 方法的参数 expr 表达式
prev prevAll 同上
offsetParent() 该方法返回的父元素是定位的 在父亲元素中找最近的定位父元素
parent 获取直接父元素 parents全部父亲
siblings 同胞兄弟元素 不带参数 指获取全部的同胞兄弟 参数expr 表达式 用来过滤元素使用对象

三、串联
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对象添加新的对象get

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

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

相关文章
相关标签/搜索