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

    • JavaScript
    • Python
    • Swift
    • Scheme
    • Haskell

    find()查找:

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

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

    1. var parent = swf.parent(); // 获得Swift的上层节点<ul>
    2. var a = swf.parent('.red'); // 获得Swift的上层节点<ul>,同时传入过滤条件。如果ul不符合条件,返回空jQuery对象

    对于位于同一层级的节点,可以通过next()prev()方法,例如:

    和函数式编程的map、filter类似,jQuery对象也有类似的方法。

    filter()方法可以过滤掉不符合选择器条件的节点:

    1. var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

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

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

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

    1. var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
    2. var js = langs.first(); // JavaScript,相当于$('ul.lang li:first-child')
    3. var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')

    对于下面的表单:

    1. <p><label>Name: <input name="name"></label></p>
    2. <p><label>Email: <input name="email"></label></p>
    3. <p><label>Password: <input name="password" type="password"></label></p>
    4. <p>Gender: <label><input name="gender" type="radio" value="m" checked> Male</label> <label><input name="gender" type="radio" value="f"> Female</label></p>
    5. <p><label>City: <select name="city">
    6. <option value="BJ" selected>Beijing</option>
    7. <option value="SH">Shanghai</option>
    8. <option value="CD">Chengdu</option>
    9. <option value="XM">Xiamen</option>
    10. </select></label></p>
    11. <p><button type="submit">Submit</button></p>
    12. </form>

    输入值后,用jQuery获取表单的JSON字符串,key和value分别对应每个输入的name和相应的value,例如:

    查找和过滤 - 图2