首页 web前端 js教程 使用jQuery管理选择结果_jquery

使用jQuery管理选择结果_jquery

May 16, 2016 pm 04:19 PM
jquery 管理

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

1.获取元素的个数。

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

$("img").size()
获取页面中,所有图片使用jQuery管理选择结果_jquery的数目

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

块。

复制代码 代码如下:


       
")); //添加一个div块
                $("#number").html(i);
            }
       

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

2.提取元素

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

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

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

复制代码 代码如下:


       
"));
            }
            $(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()方法获取元素的序号

    复制代码 代码如下:

       
           
           
    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"的

  • 例:

    复制代码 代码如下:


           
           

           

           

           

           

           

           

    以上的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]")
    所筛选的组合相同。

    复制代码 代码如下:

           


           

           

           

           

           

    以上代码中其中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")
    表示查找到

    标记下含有标记的组合

    完全等于

    复制代码 代码如下:

    $("span",$("p"))
    $(function(){
        $("p").find("span").addClass("css1");
    });

    Hello, how are you?


    表示给Hello添加css1的样式.

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

    块中是否包含图片。

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

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

  • 本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

    热工具

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用

    禅工作室 13.0.1

    禅工作室 13.0.1

    功能强大的PHP集成开发环境

    Dreamweaver CS6

    Dreamweaver CS6

    视觉化网页开发工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    热门话题

    Java教程
    1664
    14
    CakePHP 教程
    1423
    52
    Laravel 教程
    1317
    25
    PHP教程
    1268
    29
    C# 教程
    1246
    24
    jQuery中如何使用PUT请求方式? jQuery中如何使用PUT请求方式? Feb 28, 2024 pm 03:12 PM

    jQuery中如何使用PUT请求方式?在jQuery中,发送PUT请求的方法与发送其他类型的请求类似,但需要注意一些细节和参数设置。PUT请求通常用于更新资源,例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先,确保引入了jQuery库文件,然后可以通过以下方式发送PUT请求:$.ajax({u

    jQuery小技巧:快速修改页面所有a标签的文本 jQuery小技巧:快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

    标题:jQuery小技巧:快速修改页面所有a标签的文本在网页开发中,我们经常需要对页面中的元素进行修改和操作。在使用jQuery时,有时候需要一次性修改页面中所有a标签的文本内容,这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本,同时给出具体的代码示例。首先,我们需要引入jQuery库文件,确保在页面中引入了以下代码:&lt

    使用jQuery修改所有a标签的文本内容 使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

    标题:使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库,被广泛用于处理DOM操作。在网页开发中,经常会遇到需要修改页面上链接标签(a标签)的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标,并提供具体的代码示例。首先,我们需要在页面中引入jQuery库。在HTML文件中添加以下代码:

    jQuery如何移除元素的height属性? jQuery如何移除元素的height属性? Feb 28, 2024 am 08:39 AM

    jQuery如何移除元素的height属性?在前端开发中,经常会遇到需要操作元素的高度属性的需求。有时候,我们可能需要动态改变元素的高度,而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性,并提供具体的代码示例。在使用jQuery操作高度属性之前,我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

    了解jQuery中eq的作用及应用场景 了解jQuery中eq的作用及应用场景 Feb 28, 2024 pm 01:15 PM

    jQuery是一种流行的JavaScript库,被广泛用于处理网页中的DOM操作和事件处理。在jQuery中,eq()方法是用来选择指定索引位置的元素的方法,具体使用方法和应用场景如下。在jQuery中,eq()方法选择指定索引位置的元素。索引位置从0开始计数,即第一个元素的索引是0,第二个元素的索引是1,依此类推。eq()方法的语法如下:$("s

    Oracle数据库中主目录的作用和管理方式探究 Oracle数据库中主目录的作用和管理方式探究 Mar 07, 2024 pm 02:27 PM

    Oracle数据库中主目录的作用和管理方式探究在Oracle数据库中,主目录(MasterDirectory)是一个重要的对象,它的主要作用是用于指定Oracle数据库中所有数据文件和控制文件的默认存储位置。通过设置主目录,可以方便地管理数据库文件的存储和访问,提高数据库的性能和安全性。主目录可以通过以下方式进行管理:1.创建主目录要创建一个主目录,可以

    如何判断jQuery元素是否具有特定属性? 如何判断jQuery元素是否具有特定属性? Feb 29, 2024 am 09:03 AM

    如何判断jQuery元素是否具有特定属性?在使用jQuery操作DOM元素时,经常会遇到需要判断元素是否具有某个特定属性的情况。这种情况下,我们可以借助jQuery提供的方法来轻松实现这一功能。下面将介绍两种常用的方法来判断一个jQuery元素是否具有特定属性,并附上具体的代码示例。方法一:使用attr()方法和typeof操作符//判断元素是否具有特定属

    使用jQuery为表格添加新行的方法介绍 使用jQuery为表格添加新行的方法介绍 Feb 29, 2024 am 08:12 AM

    jQuery是一个流行的JavaScript库,广泛用于网页开发中。在网页开发过程中,经常需要通过JavaScript动态地向表格中添加新行。本文将介绍如何使用jQuery为表格添加新行,并提供具体的代码示例。首先,我们需要在HTML页面中引入jQuery库。可以通过以下代码在标签中引入jQuery库:

    See all articles