JQuery 利用函数/方法查找和过滤


find() – 查找
parent() – 获取父节点
next() – 获取下一个符合要求的节点
prev() – 获取上一个符合要求的节点
filter() – 可以过滤掉不符合选择器条件的节点
map() – 把一个 jQuery 对象包含的若干 DOM 节点转化为数组
first() – 返回 JQuery 对象中的第一个节点
last() – 返回 JQuery 对象中的最后一个节点
slice(start, end) – 截取 JQuery 对象中 start 到 end 的节点
通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个 jQuery 对象后,还可以以这个对象为基准,进行查找和过滤。

查找类方法

最常见的查找是在某个节点的所有子节点中查找,使用 find() 方法,它本身又接收一个任意的选择器。例如如下的 HTML 结构:

<!-- HTML结构 -->
<ul class="lang">
    <li class="js dy">JavaScript</li>
    <li class="dy">Python</li>
    <li id="swift">Swift</li>
    <li class="dy">Scheme</li>
    <li>Haskell</li>
</ul>

find() 查找:

var ul = $('ul.lang'); // 获得<ul>
var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
var swf = ul.find('#swift'); // 获得Swift
var hsk = ul.find('[name=haskell]'); // 获得Haskell

如果要从当前节点开始向上查找,使用 parent() 方法:

var swf = $('#swift'); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点<ul>
var a = swf.parent('div.red'); // 从Swift的父节点开始向上查找,直到找到某个符合条件的节点并返回

对于位于同一层级的节点,可以通过 next()prev() 方法,例如:
当我们已经拿到 Swift 节点后:

var swift = $('#swift');
swift.next(); // Scheme
swift.next('[name=haskell]'); // Haskell,因为Haskell是后续第一个符合选择器条件的节点
swift.prev(); // Python
swift.prev('.js'); // JavaScript,因为JavaScript是往前第一个符合选择器条件的节点

过滤类方法

和函数式编程的 map、filter 类似,jQuery 对象也有类似的方法。
filter() 方法可以过滤掉不符合选择器条件的节点:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

或者传入一个函数,要特别注意函数内部的 this 被绑定为 DOM 对象,不是 jQuery 对象:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
    return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme

map() 方法把一个 jQuery 对象包含的若干 DOM 节点转化为其他对象:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
    return this.innerHTML;
}).get(); // 用get()拿到包含string的Array:['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

此外,一个 jQuery 对象如果包含了不止一个 DOM 节点,first()last()slice() 方法可以返回一个新的 jQuery 对象,把不需要的 DOM 节点去掉:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript,相当于$('ul.lang li:first-child')
var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致

举个“栗子”

对于下面的表单;输入值后,用 jQuery 获取表单的 JSON 字符串,key 和 value 分别对应每个输入的 name 和相应的 value,例如:{“name”:”Michael”,”email”:…}


    <p><label>Name: </label></p>
    <p><label>Email: </label></p>
    <p><label>Password: </label></p>
    <p>Gender: <label> Male</label> <label> Female</label></p>
    <p><label>City: 
        Beijing
        Shanghai
        Chengdu
        Xiamen
    </label></p>
    <p><button type="submit">Submit</button></p>


'use strict';
var json = null;
var json ={};
var form = $('#test-form input[type != "radio"],#test-form select,#test-form input:radio:checked');
form.each(function(){
        json[this.name]=this.value;
});
json = JSON.stringify(json);
// 显示结果:
if (typeof(json) === 'string') {
    alert(json);
}
else {
    alert('json变量不是string!');
}


<< JQuery 表单选择器 JQuery 对象与 DOM 对象互转 >>