zoukankan      html  css  js  c++  java
  • 十五、查找函数——找到目标对象。串联函数——操作对象链

    查找函数的作用是从集合内再次查找匹配的元素,查找函数和过滤函数有时候是可以替换的。

    查找函数列表:

    名称

    说明

    举例

    add(expr)

    expr可以是选择器表达式、DOM对象、jQuery对象、集合或者HTML字符串。如果是HTML字符串则会动态创建对象并添加到jQuery对象集合中

    $(“p”).add(“<span>Again</span>”)

    动态的生成一个元素,并添加到匹配的元素中。

    children([expr])

    取得jQuery对象集合中所有匹配满足表达式的直接子元素。省略expr参数表示选择所有直接子元素。注意:parents()将查找所有祖辈元素,而chlidren()只考虑子元素而不考虑所有后代元素

    $(“div”).children()

    查找div中的每个直接子元素

    closest([expr])

    jQuery1.3新增。从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。

    closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,知道找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。closest对于处理事件委派非常有用。

    $(documnet).bind(“click”,function(e){

    $(e.target).closest(“li”).toggleClass(“hilight”)

    });

    为事件源最近的父类li对象更换样式

    contents()

    查找匹配元素内部所有的子结点(包括文本结点)。如果元素是一个iframe,则查找文档内容

    $(“p”).contents().not(“[nodeType=1]”).wrap(“<br>/”);

    查找所有文本结点并加粗。

    find(expr)

    搜索所有与指定表达式匹配的元素。这个函数是找出正在处理元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写

    从所有的段落开始,进一步搜索下面的span元素。

    $(“p span”)相同:$(“p”).find(“span”)

    next([expr])

    取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(nextAll)。可以用一个可选的表达式进行筛选

    找到每个段落后面紧邻的同辈元素:

    $(“p”).next()

    offsetParent

    返回第一个有定位的父类比如(relativeabsolute)

     

    parent([expr])

    取得一个包含着所有匹配元素的唯一父元素的元素集合。

    可以使用筛选的表达式来筛选

    查找每个段落的父元素

    $(“p”).parent()

    parents([expr])

    取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选

    找到每个span元素的所有祖先元素

    $(“span”).parents()

    prev([expr])

    取得一个包含匹配的元素集合中每个元素紧邻的前一个同辈元素的元素集合

    可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素

    找到每个段落紧邻的前一个同辈元素

    $(“p”).prev()

    prevAll([expr])

    查找当前元素之前所有的同辈元素,可以用表达式过滤

    给最后一个之前的所有的div加上一个类:

    $(“div”).prevAll().addClass(“before”);

    siblings([expr])

    取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

    找到每个div的所有同辈元素

    $(“div”).siblings()

    这张表看起来很烦,心里都很烦,find会常用吧。其他也不知道是不是能用上。不过既然有总是好的,也是有需要人家才开发的。希望以后深入使用可以体会到好处。

    使用Traversing分类中的过滤和查找,会改变jQuery对象集合。串联函数的作用就是找回或合并这些变更。

    串联函数的清单:

    名称

    说明

    举例

    andSelf()

    将先前所选的元素加入到当前元素中。对于筛选或查找后的元素,要加入先前所选元素将会很有用

    选取所有div及内部的p,并加上border

    $(“div”).find(“p”).andSelf().addClass(“border”);

    end()

    回到最近的一个“破坏性”操作之前,即将匹配的元素列表变为前一次的状态。

    如果之前没有破坏性操作,则返回一个空集。所谓的“破坏性”就是指任何改变所匹配的jQuery元素的操作。这包括在Traversing中返回任何一个jQuery对象的函数-add,andSelf,

    children,filter,find,map,next,nextAll,not,,

    parent,parents,prev,prevAll,siblings,slice再加上Manipulation中的clone,appendTo,prependTo,insertBefore,

    insertAfter,replaceAll

    选取所有的p元素,查找并选取span子元素,然后再反过来选取p元素:

    $(“p”).find(“span”).end();

    andSelf()函数是不能同时使用两次的,第二次调用是没有效果的。

    end()函数是可以多次调用的。

    end()函数可以恢复一次破坏性操作。提供end()函数主要是为了能够在jQuery链式操作上执行更多的操作。

  • 相关阅读:
    115今天太给力了~
    使用jQuery顺序显示元素
    温习浏览器渲染模式
    去除浏览器a标签链接时,烦人的虚线框
    设计可以是一种垄断
    如何获取鼠标选中的文字
    积极参与到FuckIE6的队伍中...
    google今儿发现页面又变好看了
    20101207google 今天出新功能了
    火狐ff下margintop太给力
  • 原文地址:https://www.cnblogs.com/tomkillua/p/2631570.html
Copyright © 2011-2022 走看看