使用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 相关文章推荐
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
jQuery选择器基础入门教程
May 10 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
php数字游戏 计算24算法
2012/06/10 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python中的进程分支fork和exec详解
2015/04/11 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
python单例模式的多种实现方法
2019/07/26 Python
Python程序控制语句用法实例分析
2020/01/14 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
MYSQL基础面试题
2012/05/13 面试题
实习护理工作自我评价
2013/09/25 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
公司酒会主持词
2015/07/02 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL