欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript 编程开发使用jQuery管理选择结果

程序员文章站 2023-04-01 12:53:47
使用jquery选择出来的元素与数组非常类似,可以通过jquery提供的一系列方法对其进行处理,包括长度、查找某个元素,截取某个段落等。 1.获取元素的个数。 在jquery中...

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

1.获取元素的个数。

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

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

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

代码如下:


<style>
            p {
                border: 1px solid #003a75;
                background-color: #ffff00;
                margin: 5px;
                padding: 20px;
                text-align: center;
                height: 20px;
                width: 20px;
                float: left;
            }
        }
        </style>
        <script type="text/javascript">
            document.onclick = function() {
                var i = $("p").size() + 1; //获取p的数目,(此时还没有p块)
                $(document.body).append($("<p>" + i + "</p>")); //添加一个p块
                $("#number").html(i);
            }
        </script>


页面中一共有<span id="number">0</span>个div块。单击鼠标添加

2.提取元素

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

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

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

代码如下:


<style>
            p {
                border: 1px solid #003a75;
                background-color: #ffff00;
                margin: 5px;
                padding: 20px;
                text-align: center;
                height: 20px;
                width: 20px;
                float: left;
            }
        }
        </style>
        <script type="text/javascript">
            function displayleb(np) {
                for (var i = 0; i < np.length; i++)
                    $(document.body).append($("<p style='background:"+np[i].style.background + ";'>" + np[i].innerhtml + "</p>"));
            }
            $(function(){
                var adiv = $("p").get();//转化为p对象数组
                displayleb(adiv.reverse());
            });
        </script>
        <p style="background:#ffffff">1</p>
        <p style="background:#cccccc">2</p>
        <p style="background:#999999">3</p>
        <p style="background:#666666">4</p>
        <p style="background:#333333">5</p>
        <p style="background:#000000">6</p>

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

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

var inum=$("li").index($(li[title=isaac]")[0])
以上取<li titile="isaac">标记在整个<li>标记列表所处的位置,并将该位置返回给整数inum.如下举例index(element)方法的典型运用。

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

代码如下:


    <style>
            p {
                border: 1px solid #003a75;
                background-color: #ffff00;
                margin: 5px;
                padding: 20px;
                text-align: center;
                height: 20px;
                width: 20px;
                float: left;
            }
        }
        </style>
        <script type="text/javascript">
            $(function() {
                //p click()添加单击函数
                $("p").click(function() {
                    //将本身通过this关键字传入,获取自身的序号。
                    var index = $("p").index(this) + 1;
                    $("#display").html(index.tostring());
                })
            });
        </script>
        <p style="background:#ffffff">1</p>
        <p style="background:#cccccc">2</p>
        <p style="background:#999999">3</p>
        <p style="background:#666666">4</p>
        <p style="background:#333333">5</p>
        <p style="background:#000000">6</p>
        单击的是第<span id="display"></span>个p。

以上代码块本身用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"的<li>。

例:

代码如下:


<style>
            p {
                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;
            }
        }
        </style>
        <script type="text/javascript">
            $(function() {
                $("p").not(".green, #blueone").addclass("altcss");
            });
        </script>
        <p></p>
        <p id="blueone"></p>
        <p></p>
        <p class="green"></p>
        <p class="green"></p>
        <p class="gray"></p>
        <p></p>

以上的jquery通过not()的方法去掉风格为"green"和"blueone"的<p>块,给剩下的p块加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]")
所筛选的组合相同。

代码如下:


<script type="text/javascript">
            $(function() {
                $("p").addclass("css1").filter("[class*=middle]").addclass("css2");
            });
        </script>

        <p></p>
        <p class="middle"></p>
        <p class="middle"></p>
        <p class="middle"></p>
        <p class="middle"></p>
        <p></p>

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

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

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

例如:

代码如下:


<script type="text/javascript">
            $(function() {
                $("p").addclass("css1").filter(function(index) {
                    return index == 1 || $(this).attr("id") == "fourth";
                }).addclass("css2");
            });
        </script>     
<p id="first"></p>
    <p id="second"></p>
    <p id="third"></p>
    <p id="fourth"></p>
    <p id="fifth"></p>

以上jq执行:

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

4.查询过滤新元素组

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

$("p").find("span")
表示查找到<p>标记下含有<span>标记的组合

完全等于

代码如下:


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

<p><span>hello</span>, how are you?</p>

表示给hello添加css1的样式.

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

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