使用jQuery管理选择结果

前端之家收集整理的这篇文章主要介绍了使用jQuery管理选择结果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用jQuery选择出来的元素与数组非常类似,可以通过jQuery提供的一系列方法对其进行处理,包括长度、查找某个元素,截取某个段落等。

1.获取元素的个数。

在jQuery中可以通过size()方法获取选择器中元素的个数,它类似数组中的length属性,返回整数值,例如:

$("img").size() 获取页面中,所有图片的数目

如下是一个实例,通过不断的点击添加div块并计算页面中的

块。

代码如下:
div { border: 1px solid #003a75; background-color: #FFFF00; margin: 5px; padding: 20px; text-align: center; height: 20px; width: 20px; float: left; } }
页面中一共有个DIV块。单击鼠标添加

2.提取元素

在jQuery中选择器中,如果想提取某个元素,最直接的方法是采用方括号加序号的形式,例如;

$("img[title]")[1] 获取了所有设置了title属性的img标记中的第二个元素。jQuery也提供了get(index)方法提取元素,以下的代码与上面的完全等效

$("img[title]")get(1) get方法在不设置任何参数时,可以将元素转化为一个元素对象的数组,如下的例子:

代码如下:
div { border: 1px solid #003a75; background-color: #FFFF00; margin: 5px; padding: 20px; text-align: center; height: 20px; width: 20px; float: left; } }

上面代码页面本身的6个

块用get()方法转化为数组,然后用数组反序reverse(),并传给displayleb()函数,再将其一个个现在页面中。

get(index)方法可以获取指定位置的元素,反过来,index(element)方法可以查找元素的element所处的位置。例如

var iNum=$("li").index($(li[title=isaac]")[0]) 以上取

  • 标记在整个
  • 标记列表所处的位置,并将该位置返回给整数iNum.如下举例index(element)方法的典型运用。

    例:用index()方法获取元素的序号

    代码如下:
    div { border: 1px solid #003a75; background-color: #FFFF00; margin: 5px; padding: 20px; text-align: center; height: 20px; width: 20px; float: left; } }
    单击的是第个div。

    以上代码块本身用this关键字传入index()方法中,获取自身的序号,并且利用click()添加事件,将序号显示出来。

    3.添加删除、过滤元素

    除了获取选择元素外,jQuery还提供了一系列的方法修改元素集合,例如用add()的方法添加元素。

    $("img[alt]").add("img[title]") 以上代码将设置了alt元素的图像和说呀设置了title属性的图像组合在一起,供别的方法统一调运。它完全等同于

    $("img[alt],img[title]") 例如,可以讲组合后的元素集统一添加css属性

    $("img[alt]").add("img[title]").addClass("altcss") 与add()方法相反,not()方法可以去除元素集合中的某些元素形成集合

    $("li[title]").not("[title*=isaac]") 以上代码表示,选中所有设置了title属性标记 ,但不包括title的值中包含"isaac"的

  • 例:

    代码如下:
    div { border: 1px solid #003a75; background-color: #FFFF00; margin: 5px; padding: 20px; text-align: center; height: 20px; width: 20px; float: left; } .altcss { border: 2px solid #000000; } }

    以上代码中其中4个class属性为middle,Jq先给所有的div块都添加了css1样式,然后通过filter()方法,把class中包含middle的div添加css2样式。

    在filter()的参数中,不能直接的等于匹配(=),只能使用前匹配(^=)、后匹配(&=),或者任意匹配(*=).

    filter()另外一种类型的参数是函数,对于返回ture元素匹配保留,否则排除集合。函数参数功能十分强大,可以让用户自定义筛选函数

    例如:

    代码如下:

    以上jq执行:

    将所有的div添加css1然后利用filter()返回的函数将div列表中第一个(index为1),id是fourth的div元素筛选出来,添加css2.

    4.查询过滤新元素组

    jq还提供了 一些很有的用的方法组合,通过查询获取新元素组合。例如find()方法。通过匹配选择器来筛选元素

    $("p").find("span") 表示查找到

    标记下含有标记的组合

    完全等于

    代码如下:

    Hello,how are you?

    表示给Hello添加css1的样式.

    另外,还可以通过is()方法来检测是否包含指定的元素,例如可以通过下面代码检测页面

    块中是否包含图片

    var himg = $("div").is("img"); 试想下,is()还可以结合filter()使用,是不是很惬意?

    以上就是本文的全部内容了,虽然有点长,但是还是建议小伙伴们仔细读一下,希望大家能够喜欢。

    原文链接:/jquery/56204.html

    猜你在找的jQuery相关文章