jQuery----筛选

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());