使用jQuery管理选择结果


Posted in Javascript onJanuary 20, 2015

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

1.获取元素的个数。

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

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

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

<style>

            div {

                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 = $("div").size() + 1; //获取div的数目,(此时还没有div块)

                $(document.body).append($("<div>" + i + "</div>")); //添加一个div块

                $("#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>

            div {

                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(ndiv) {

                for (var i = 0; i < ndiv.length; i++)

                    $(document.body).append($("<div style='background:"+ndiv[i].style.background + ";'>" + ndiv[i].innerHTML + "</div>"));

            }

            $(function(){

                var aDiv = $("div").get();//转化为div对象数组

                displayleb(aDiv.reverse());

            });

        </script>

        <div style="background:#FFFFFF">1</div>

        <div style="background:#CCCCCC">2</div>

        <div style="background:#999999">3</div>

        <div style="background:#666666">4</div>

        <div style="background:#333333">5</div>

        <div style="background:#000000">6</div>

上面代码将页面本身的6个<div>块用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>

            div {

                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() {

                //div click()添加单击函数

                $("div").click(function() {

                    //将本身通过this关键字传入,获取自身的序号。

                    var index = $("div").index(this) + 1;

                    $("#display").html(index.toString());

                })

            });

        </script>

        <div style="background:#FFFFFF">1</div>

        <div style="background:#CCCCCC">2</div>

        <div style="background:#999999">3</div>

        <div style="background:#666666">4</div>

        <div style="background:#333333">5</div>

        <div style="background:#000000">6</div>

        单击的是第<span id="display"></span>个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"的<li>。

例:

<style>

            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;

            }

        }

        </style>

        <script type="text/javascript">

            $(function() {

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

            });

        </script>

        <div></div>

        <div id="blueone"></div>

        <div></div>

        <div class="green"></div>

        <div class="green"></div>

        <div class="gray"></div>

        <div></div>

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

<script type="text/javascript">

            $(function() {

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

            });

        </script>
        <div></div>

        <div class="middle"></div>

        <div class="middle"></div>

        <div class="middle"></div>

        <div class="middle"></div>

        <div></div>

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

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

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

例如:

<script type="text/javascript">

            $(function() {

                $("div").addClass("css1").filter(function(index) {

                    return index == 1 || $(this).attr("id") == "fourth";

                }).addClass("css2");

            });

        </script>      

<div id="first"></div>

    <div id="second"></div>

    <div id="third"></div>

    <div id="fourth"></div>

    <div id="fifth"></div>

以上jq执行:

将所有的div添加css1然后利用filter()返回的函数将div列表中第一个(index为1),id是fourth的div元素筛选出来,添加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()方法来检测是否包含指定的元素,例如可以通过下面代码检测页面中<div>块中是否包含图片。

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

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

Javascript 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
利用Ext Js生成动态树实例代码
Sep 08 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
下拉框select的绑定示例
Sep 04 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
js实现微博发布小功能
Jan 12 Javascript
javascript中json基础知识详解
Jan 19 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
javascript动态修改Li节点值的方法
Jan 20 #Javascript
js+css实现tab菜单切换效果的方法
Jan 20 #Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 #Javascript
js动态切换图片的方法
Jan 20 #Javascript
JavaScript 基本概念
Jan 20 #Javascript
自己动手手写jQuery插件总结
Jan 20 #Javascript
JavaScript学习心得之概述
Jan 20 #Javascript
You might like
PHP XML和数组互相转换详解
2016/10/26 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
Python 多线程Threading初学教程
2017/08/22 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
django ajax发送post请求的两种方法
2020/01/05 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
Python列表推导式实现代码实例
2020/09/09 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
文秘应聘自荐书范文
2014/02/18 职场文书
《影子》教学反思
2014/02/21 职场文书
爱心捐书活动总结
2014/07/05 职场文书
六查六看自查报告
2014/10/14 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
个性发展自我评价2015
2015/03/09 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
百年孤独读书笔记
2015/06/29 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis