JQuery中的筛选

JQuery中的筛选

html代码

<ul class="list1">
    <li class="li1"></li>
    <li></li>
    <li></li>
    <li class="last">
      <a href="#">111</a>
    </li>
  </ul>
  <ul class="list2">
    <li class="first"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul class="list3">
    <li class="mid"></li>
    <li></li>
  </ul>
  <p><b>Values: </b></p>
  <form>
    <input type="text" name="name" value="John" />
    <input type="text" name="password" value="password" />
    <input type="text" name="url" value="https://ejohn.org/" />
  </form>

1.匹配元素的第一个和最后一个

$('li').first()
//匹配所有li元素里面的第一个

$('li').last()
//匹配所有li元素里面的最后一个

2.检查当前元素是否含有某个特定类（返回值boolean）

$('li').hasClass("last")
$('li').is('last')
//检测是否含有last类（is还可以用来各种检测）

3.保留当前特定元素

//保留带有select类的元素
$('li').filter('.last')
//保留第一个以及带有select类的元素
$('li').filter('.last,:first')
//保留子元素中不含a标签的元素
$('li').filter(function (index) {
      console.log(index);
      return $('a', this).length == 0;
    })

4.将一组元素转换成其他数组

$('p').append($('input').map(function () {
      return $(this).val()
    }).get().join(','))
//遍历map(callback)

5.保留包含特定后代的元素，去掉那些不含有指定后代的元素

//has(expr/element)	选择器字符串 and DOM元素
$('ul').has($('.last'))
$('ul').has('.last')

6.从匹配元素的集合中删除与指定表达式匹配的元素

// not(expr|ele|fn)
$('li').not('.last').not('.first')
//匹配所有li删除带有.last和.fisrt

7.截取

//与原来的slice方法类似
$('li').slice(0, 1)

8.子父级筛选

$('.list1').children()
//获取所有子元素
$('.first').parent()
//获取直接父容器
$('.first').parents()
//获取所有父容器
$('a').parentsUntil('.list1')
//获取父容器直到含.list1类的元素

9.获取所有相邻元素

$('.last').siblings()
//取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

10.匹配元素的同级

'.list1').next()		//查找当前元素之后一个同辈元素
$('.list1').nextAll()	//查找当前元素之后所有的同辈元素
$('.last').prevUntil('.last')	//获取下一级直到.last
//下一级
$('.list2').prev()		//查找当前元素之前一个同辈元素
$('.list2').prevAll()	//查找当前元素之前所有的同辈元素
$('.last').prevUntil('.li1')	//获取上一级直到.li1
//上一级

11.添加元素

$('.li1').add('<span>Again</span>')
//添加元素到jquery对象