zoukankan      html  css  js  c++  java
  • juqery 学习之四 筛选<过滤>

    eq(index)

    获取第N个元素
    这个元素的位置是从0算起。

    返回值

    jQuery

    参数

    index (Integer) :元素在jQuery对象中的索引

    示例

    获取匹配的第二个元素

    HTML 代码:

    <p> This is just a test.</p> <p> So is this</p>

    jQuery 代码:

    $("p").eq(1)

    结果:

    [ <p> So is this</p> ]
    --------------------------------------------------------------------------------------------------------------

    hasClass(class)

    检查当前的元素是否含有某个特定的类,如果有,则返回true。
    这其实就是 is("." + class)。

    返回值

    Boolean

    参数

    class (String) : 用于匹配的类名

    示例

    给包含有某个类的元素进行一个动画。

    HTML 代码:

    <div class="protected"></div><div></div>

    jQuery 代码:

    $("div").click(function(){
      if ( $(this).hasClass("protected") )
        $(this)
          .animate({ left: -10 })
          .animate({ left: 10 })
          .animate({ left: -10 })
          .animate({ left: 10 })
          .animate({ left: 0 });
    });

    --------------------------------------------------------------------------------------------------------------

    filter(expr)

    筛选出与指定表达式匹配的元素集合。
    这个方法用于缩小匹配的范围。用逗号分隔多个表达式

    返回值

    jQuery

    参数

    expr (Expression) : 表达式

    示例

    保留带有select类的元素

    HTML 代码:

    <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

    jQuery 代码:

    $("p").filter(".selected")

    结果:

    [ <p class="selected">And Again</p> ]

    保留第一个以及带有select类的元素

    HTML 代码:

    <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

    jQuery 代码:

    $("p").filter(".selected, :first")

    结果:

    [ <p>Hello</p>, <p class="selected">And Again</p> ]

    --------------------------------------------------------------------------------------------------------------

    filter(fn)

    筛选出与指定函数返回值匹配的元素集合
    这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除,否则就会保留。

    返回值

    jQuery

    参数

    fn (Function) : 传递进filter的函数

    示例

    保留子元素中不含有ol的元素。

    HTML 代码:

    <p><ol><li>Hello</li></ol></p><p>How are you?</p>

    jQuery 代码:

    $("p").filter(function(index) {
      return $("ol", this).length == 0;
    });

    结果:

    [ <p>How are you?</p> ]

    --------------------------------------------------------------------------------------------------------------

    is(expr)

    用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
    如果没有元素符合,或者表达式无效,都返回'false'. 'filter' 内部实际也是在调用这个函数,所以,filter()函数原有的规则在这里也适用。

    返回值

    Boolean

    参数

    expr (String) :用于筛选的表达式

    示例

    由于input元素的父元素是一个表单元素,所以返回true。

    HTML 代码:

    <form><input type="checkbox" /></form>

    jQuery 代码:

    $("input[type='checkbox']").parent().is("form")

    结果:

    true

    --------------------------------------------------------------------------------------------------------------

    map(callback)

    将一组元素转换成其他数组(不论是否是元素数组)
    你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。

    返回值

    jQuery

    参数

    callback (Function) : 给每个元素执行的函数

    示例

    把form中的每个input元素的值建立一个列表。

    HTML 代码:

    <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="http://ejohn.org/"/>
    </form>

    jQuery 代码:

    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );

    结果:

    [ <p>John, password, http://ejohn.org/</p> ]

    --------------------------------------------------------------------------------------------------------------

    not(expr)

    删除与指定表达式匹配的元素

    返回值

    jQuery

    参数

    expr (String, DOMElement, Array<DOMElement>) : 一个表达式、一个元素或者一组元素

    示例

    从p元素中删除带有 select 的ID的元素

    HTML 代码:

    <p>Hello</p><p id="selected">Hello Again</p>

    jQuery 代码:

    $("p").not( $("#selected")[0] )

    结果:

    [ <p>Hello</p> ]
    -------------------------------------------------------------------------------------------------------------------------

    slice(start,[end])

    选取一个匹配的子集
    与原来的slice方法类似

    返回值

    jQuery

    参数

    start (Integer) :开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起。

    end (Integer) : (可选) 结束选取自己的位置,如果不指定,则就是本身的结尾。

    示例

    选择第一个p元素

    HTML 代码:

    <p>Hello</p><p>cruel</p><p>World</p>

    jQuery 代码:

    $("p").slice(0, 1).wrapInner("<b></b>");

    结果:

    [ <p><b>Hello</b></p> ]

    选择前两个p元素

    HTML 代码:

    <p>Hello</p><p>cruel</p><p>World</p>

    jQuery 代码:

    $("p").slice(0, 2).wrapInner("<b></b>");

    结果:

    [ <p><b>Hello</b></p>,<p><b>cruel</b></p> ]

    只选取第二个p元素

    HTML 代码:

    <p>Hello</p><p>cruel</p><p>World</p>

    jQuery 代码:

    $("p").slice(1, 2).wrapInner("<b></b>");

    结果:

    [ <p><b>cruel</b></p> ]

    只选取第二第三个p元素

    HTML 代码:

    <p>Hello</p><p>cruel</p><p>World</p>

    jQuery 代码:

    $("p").slice(1).wrapInner("<b></b>");

    结果:

    [ <p><b>cruel</b></p>, <p><b>World</b></p> ]

    Selects all paragraphs, then slices the selection to include only the third element.

    HTML 代码:

    <p>Hello</p><p>cruel</p><p>World</p>

    jQuery 代码:

    $("p").slice(-1).wrapInner("<b></b>");

    结果:

    [ <p><b>World</b></p> ]
  • 相关阅读:
    XAMPP配置8080端口
    Composer安装使用
    .Net商品管理(注释,百度,提问,对比,总结)
    .Net数据库操作
    VS链接数据库
    .Net中字典的使用
    一套解决方案,多个项目
    转化一下解决问题的思路,弯道超车
    灵活的运用Model类
    Razor数组数据
  • 原文地址:https://www.cnblogs.com/EWall/p/1891101.html
Copyright © 2011-2022 走看看