jQuery筛选
示例:
<button class="btn" id="btninfo">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn list">按钮</button>
<button class="btn ">按钮</button>
<button class="btn info">按钮</button>
<ul class="menu">
<li class="info">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<h3 class="h3">标题</h3>
<li>5</li>
<li>6</li>
<span>审判</span>
</ul>
<dl>
<dt id="term-1" >term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt id="term-3" >term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
- eq 根据索引选择元素 参数正负
console.log($('.btn').eq(-1));
- first() 获取集合里面的第一个
last() 获取集合里面的最后一个
console.log($('.btn').first());
console.log($('.btn').last());
- is 检测是否存在有一样
true false
console.log($('.btn').is(function (index){
console.log(index,$(this));
return index==0;
}))
- has 检测匹配元素是否具有某个元素
expr 选择器字符串
ele dom元素
console.log($('ul').has($('h3')));
- 匹配出满足条件的
filter expr obj ele fn
console.log($('.btn').filter('.list'));
- map 将一个类数组 转化为新的数组 类似映射
$(this) 指当前的jquery对象
this 指当前原生js对象
var arr=$('.btn').map(function (){
/*console.log($(this),this);
return this;*!/
return $(this).text();
});
console.log(arr);
- not 匹配的元素 除过什么
console.log($('.btn').not($('.list')[0]));
- slice 方法 截取 类似原生js的slice
console.log($('.btn').slice(0, 2));
- children() 返回当前元素所有子集
console.log($('ul').children('h3'));
- closest 参数 expr 类似过滤元素
console.log($('.btn').closest('.list'));
- find 查找子集元素 expr ele obj
console.log($('ul').find('h3'));
- 匹配元素的同级
next([expr])
nextAll([expr])
prev([expr])
prevAll([expr])
console.log($('.list').next('.info'));
console.log($('.list').nextAll('button'));
console.log($('.list').prev());
console.log($('.list').prevAll());
- siblings([expr]) 获取同胞兄弟元素 expr 过滤同胞兄弟元素中的某一类
console.log($('.h3').siblings());
console.log($('.h3').siblings('span'));
- parent([expr]) 获取直接父容器
parents([expr])
console.log($('.h3').parent());
获取当前元素的所有父容器 可以过滤
console.log($('.h3').parents('body'));
offsetParent 获取所有父容器中定位的元素 默认是html
console.log($('.h3').offsetParent());
- add 添加元素到jquery对象
expr '.info’
console.log($('.h3').add('<span>123</span>'));
- addBack 获取栈中的元素
console.log($('.btn').eq(0).nextAll('.info').siblings('.list').addBack());
console.log($('.btn').eq(0).addBack());
console.log($('.btn').eq(0).siblings('.info').prevAll('.list').siblings('.menu').addBack());