谈谈jquery 筛选中的 contents() children() filter() 与find()

之前在网上看到一个题目是这样子，就是把上面这段这个带有一些文本节点的 <div>，每个节点被两个折行元素 (<br />) 分隔的文本转成良好的段落；

网上有人给出了这样的答案：

$('.container').contents().filter(function() {
  return this.nodeType == 3;
})
  .wrap('<p></p>')
.end()
.filter('br')

  .remove();

我服了，

由于之前对contents(),filter()用法不是很熟，决定好好研究下。。

一、contents()与children()的用法和区别

contents()方法方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点。而children()只能获得匹配元素

集合中每个元素的子节点。

$('.container').contents() //可以获得 class 为container 的div 下的所有元素之间的子节点，包括文本节点

在控制台打印出来可以看到

而 $('.container').children()  //只能获得div下的元素节点，如图下：

二、filter()与find()的用法与区别

fitler(selector) 会对自身集合元素的筛选，而find(selector)是对匹配元素集合中的所有后代元素的筛选

案例如下：

Html Markup

console.log($('div').find('.rain').html())   打印出来的是 //测试1

console.log($('div').filter('.rain').html())  打印出来的是 //<p>测试2</p>

而且 fiteler(selector|fn) 可以接受一个函数作为测试元素的集合，它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。

而 find()不能接受函数作为参数；

总结：有这些基础知识，再回到刚开始时候抛出的问题，那么就很好写了，先找出文本节点，给文本节点加一个p标签，然后找到<br/> ，给剔除掉；

这里再补充一个知识 :jquery 中end()   该方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

今天就写到这边了，开始上班了，继续加油。希望以后自己能坚持写文章，文章写的有不对的地方请各位大神指出来，多多交流