视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
使用jQuery管理选择结果_jquery
2020-11-27 21:33:14 责编:小采
文档
 使用jQuery选择出来的元素与数组非常类似,可以通过jQuery提供的一系列方法对其进行处理,包括长度、查找某个元素,截取某个段落等。

1.获取元素的个数。

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

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

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

代码如下:


document.onclick = function() {
var i = $("div").size() + 1; //获取div的数目,(此时还没有div块)
$(document.body).append($("" + i + "")); //添加一个div块
$("#number").html(i);
}


页面中一共有0个DIV块。单击鼠标添加

2.提取元素

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

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

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

代码如下:


function displayleb(ndiv) {
for (var i = 0; i < ndiv.length; i++)
$(document.body).append($("" + ndiv[i].innerHTML + ""));
}
$(function(){
var aDiv = $("div").get();//转化为div对象数组
displayleb(aDiv.reverse());
});

1
2
3
4
5
6

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

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

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

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

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

    代码如下:


    $(function() {
    //div click()添加单击函数
    $("div").click(function() {
    //将本身通过this关键字传入,获取自身的序号。
    var index = $("div").index(this) + 1;
    $("#display").html(index.toString());
    })
    });

    1
    2
    3
    4
    5
    6
    单击的是第个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"的

  • 例:

    代码如下:


    $(function() {
    $("div").not(".green, #blueone").addClass("altcss");
    });








    以上的Jquery通过not()的方法去掉风格为"green"和"blueone"的块,给剩下的div块加altcss样式。

    not()方法所接收的参数都不能包含特定的元素,只能是通过通用的表达式例如下面的代码是错误的

    $("li[title]").not("img[title*=isaac]")
    正确的写法是:

    $("li[tile]").not("[title*=isaac]")
    除了add()和not()外,jQuery还提供了更强大的filter()方法来筛选元素。filter()可以接受两种类型的参数,一种与not()方法一样,接受通用的表达式。代码如下:

    $("li").filter("[title*=isaac]")
    以上的代码表示:筛选出title值包含isaac字符串的li元素组合。

    $("li[title*=isaac]")
    所筛选的组合相同。

    代码如下:

    $(function() {
    $("div").addClass("css1").filter("[class*=middle]").addClass("css2");
    });







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

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

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

    例如:

    代码如下:

    $(function() {
    $("div").addClass("css1").filter(function(index) {
    return index == 1 || $(this).attr("id") == "fourth";
    }).addClass("css2");
    });






    以上jq执行:

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

    4.查询过滤新元素组

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

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

    标记下含有标记的组合

    完全等于

    代码如下:
    $("span",$("p"))
    $(function(){
    $("p").find("span").addClass("css1");
    });

    Hello, how are you?


    表示给Hello添加css1的样式.

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

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

    下载本文
  • 显示全文
    专题