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

1.获取元素的个数。

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

  1. $("img").size()

获取页面中,所有图片<img>的数目

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

  1. <style>
  2. div {
  3. border: 1px solid #003a75;
  4. background-color: #FFFF00;
  5. margin: 5px;
  6. padding: 20px;
  7. text-align: center;
  8. height: 20px;
  9. width: 20px;
  10. float: left;
  11. }
  12. }
  13. </style>
  14. <script type="text/javascript">
  15. document.onclick = function() {
  16. var i = $("div").size() + 1; //获取div的数目,(此时还没有div块)
  17. $(document.body).append($("<div>" + i + "</div>")); //添加一个div块
  18. $("#number").html(i);
  19. }
  20. </script>
  21. 页面中一共有<span id="number">0</span>个DIV块。单击鼠标添加

2.提取元素

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

  1. $("img[title]")[1]

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

  1. $("img[title]")get(1)

get方法在不设置任何参数时,可以将元素转化为一个元素对象的数组,如下的例子:

  1. <style>
  2. div {
  3. border: 1px solid #003a75;
  4. background-color: #FFFF00;
  5. margin: 5px;
  6. padding: 20px;
  7. text-align: center;
  8. height: 20px;
  9. width: 20px;
  10. float: left;
  11. }
  12. }
  13. </style>
  14. <script type="text/javascript">
  15. function displayleb(ndiv) {
  16. for (var i = 0; i < ndiv.length; i++)
  17. $(document.body).append($("<div style='background:"+ndiv[i].style.background + ";'>" + ndiv[i].innerHTML + "</div>"));
  18. }
  19. $(function(){
  20. var aDiv = $("div").get();//转化为div对象数组
  21. displayleb(aDiv.reverse());
  22. });
  23. </script>
  24. <div style="background:#FFFFFF">1</div>
  25. <div style="background:#CCCCCC">2</div>
  26. <div style="background:#999999">3</div>
  27. <div style="background:#666666">4</div>
  28. <div style="background:#333333">5</div>
  29. <div style="background:#000000">6</div>

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

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

  1. var iNum=$("li").index($(li[title=isaac]")[0])

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

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

  1. <style>
  2. div {
  3. border: 1px solid #003a75;
  4. background-color: #FFFF00;
  5. margin: 5px;
  6. padding: 20px;
  7. text-align: center;
  8. height: 20px;
  9. width: 20px;
  10. float: left;
  11. }
  12. }
  13. </style>
  14. <script type="text/javascript">
  15. $(function() {
  16. //div click()添加单击函数
  17. $("div").click(function() {
  18. //将本身通过this关键字传入,获取自身的序号。
  19. var index = $("div").index(this) + 1;
  20. $("#display").html(index.toString());
  21. })
  22. });
  23. </script>
  24. <div style="background:#FFFFFF">1</div>
  25. <div style="background:#CCCCCC">2</div>
  26. <div style="background:#999999">3</div>
  27. <div style="background:#666666">4</div>
  28. <div style="background:#333333">5</div>
  29. <div style="background:#000000">6</div>
  30. 单击的是第<span id="display"></span>个div。

以上代码块本身用this关键字传入index()方法中,获取自身的序号,并且利用click()添加事件,将序号显示出来。

3.添加、删除、过滤元素

除了获取选择元素外,jQuery还提供了一系列的方法来修改元素集合,例如用add()的方法添加元素。

  1. $("img[alt]").add("img[title]")

以上代码将设置了alt元素的图像和说呀设置了title属性的图像组合在一起,供别的方法统一调运。它完全等同于

  1. $("img[alt],img[title]")

例如,可以讲组合后的元素集统一添加css属性。

  1. $("img[alt]").add("img[title]").addClass("altcss")

与add()方法相反,not()方法可以去除元素集合中的某些元素形成集合

  1. $("li[title]").not("[title*=isaac]")

以上代码表示,选中所有设置了title属性的标记 ,但不包括title的值中包含"isaac"的<li>。

例:

  1. <style>
  2. div {
  3. border: 1px solid #003a75;
  4. background-color: #FFFF00;
  5. margin: 5px;
  6. padding: 20px;
  7. text-align: center;
  8. height: 20px;
  9. width: 20px;
  10. float: left;
  11. }
  12. .altcss {
  13. border: 2px solid #000000;
  14. }
  15. }
  16. </style>
  17. <script type="text/javascript">
  18. $(function() {
  19. $("div").not(".green, #blueone").addClass("altcss");
  20. });
  21. </script>
  22. <div></div>
  23. <div id="blueone"></div>
  24. <div></div>
  25. <div class="green"></div>
  26. <div class="green"></div>
  27. <div class="gray"></div>
  28. <div></div>

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

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

  1. $("li[title]").not("img[title*=isaac]")

正确的写法是:

  1. $("li[tile]").not("[title*=isaac]")

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

  1. $("li").filter("[title*=isaac]")

以上的代码表示:筛选出title值包含isaac字符串的li元素组合。

  1. $("li[title*=isaac]")

所筛选的组合相同。

  1. <script type="text/javascript">
  2. $(function() {
  3. $("div").addClass("css1").filter("[class*=middle]").addClass("css2");
  4. });
  5. </script>
  6.  
  7. <div></div>
  8. <div class="middle"></div>
  9. <div class="middle"></div>
  10. <div class="middle"></div>
  11. <div class="middle"></div>
  12. <div></div>

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

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

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

例如:

  1. <script type="text/javascript">
  2. $(function() {
  3. $("div").addClass("css1").filter(function(index) {
  4. return index == 1 || $(this).attr("id") == "fourth";
  5. }).addClass("css2");
  6. });
  7. </script>
  8. <div id="first"></div>
  9. <div id="second"></div>
  10. <div id="third"></div>
  11. <div id="fourth"></div>
  12. <div id="fifth"></div>

以上jq执行:

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

4.查询过滤新元素组

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

  1. $("p").find("span")

表示查找到<p>标记下含有<span>标记的组合

完全等于

  1. $("span",$("p"))
  1. $(function(){
  2. $("p").find("span").addClass("css1");
  3. });
  4.  
  5. <p><span>Hello</span>, how are you?</p>

表示给Hello添加css1的样式.

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

  1. var himg = $("div").is("img");

试想下,is()还可以结合filter()使用,是不是很惬意?

jQuery应用之(二)使用jQuery管理选择结果(荐)的更多相关文章

  1. jQuery学习-----(二)JQuery对象与DOM对象的区别与转换

    1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj = ...

  2. 编写jQuery插件(二)——jQuery插件类型和机制

    jQuery插件类型 jQuery插件主要有3种类型: 1.封装对象方法的插件 这种插件类型是最常见的一种插件,它将对象方法封装起来,对通过选择器获取的jQuery对象进行操作. 2.封装全局函数的插 ...

  3. jQuery笔记(二)jQuery中DOM操作

    前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...

  4. 【jquery mobile笔记二】jquery mobile调用豆瓣api示例

    页面主要代码如下 <div data-role="page" id="page1">     <div data-role="hea ...

  5. jQuery基础修炼圣典—DOM篇(二)jQuery遍历

    1.children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配 ...

  6. 从零实现一个简易的jQuery框架之二—核心思路详解

    如何读源码 jQuery整体框架甚是复杂,也不易读懂.但是若想要在前端的路上走得更远.更好,研究分析前端的框架无疑是进阶路上必经之路.但是庞大的源码往往让我们不知道从何处开始下手.在很长的时间里我也被 ...

  7. 模块:(日期选择)jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器

    一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...

  8. jQuery学习之二 jQuery选择器

    一.jQuery选择器是什么1.CSS选择器2.jQuery选择器 二.jQuery选择器的优势1.简洁的写法2.支持从CSS1到CSS3选择器3.完善的处理机制  传统js选择器假如要操作的元素不存 ...

  9. legend---七、jquery如何选中select的selected的选择上的自定义属性

    legend---七.jquery如何选中select的selected的选择上的自定义属性 一.总结 一句话总结:用冒号属性选择器 var type=$(this).children('option ...

  10. jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件

    jquery插件课程1  幻灯片.城市选择.日期时间选择.拖放.方向拖动插件 一.总结 一句话总结:都是jquery插件,都还比较小,参数(配置参数.数据)一般都是通过json传递. 1.插件配置数据 ...

随机推荐

  1. Linux系统搭建LAMP平台

    知识背景(来自:百度百科): LAMP指的Linux(操作系统).Apache HTTP 服务器,MySQL(有时也指MariaDB,数据库软件) 和PHP(有时也是指Perl或Python) 的第一 ...

  2. 使用Azure Automation(自动化)定时关闭和启动虚拟机

    1. 概述 作为Windows Azure的用户,使用Azure的过程中,最担心的事情就是还没到月底,预设的费用就快消耗完了(下面两张账单图是我最讨厌看到的).但是仔细分析自己的费用列表,发现绝大部分 ...

  3. ant+jenkins+testng+selenium集成环境搭建

    一.前序工作 下载ant:http://ant.apache.org/bindownload.cgi 下载jenkins:http://jenkins-ci.org/ 下载testng:http:// ...

  4. IIS关于“ 配置错误 不能在此路径中使用此配置节”的解决办法

    IIS关于“ 配置错误 不能在此路径中使用此配置节”的解决办法 原文链接:http://www.cnblogs.com/200325074/p/3679316.html 今天刚安装好IIS8.5, 我 ...

  5. UESTC 913 握手 Havel定理+优先队列

    给定一个非负整数序列{dn},若存在一个无向图使得图中各点的度与此序列一一对应,则称此序列可图化.进一步,若图为简单图,则称此序列可简单图化. 此题因为是无自环无重边,所以是简单图.用判定简单图可图化 ...

  6. 2014 Super Training #8 G Grouping --Tarjan求强连通分量

    原题:ZOJ 3795 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3795 题目大意:给定一个有向图,要求把点分为k个集 ...

  7. Unity 跑酷Demo难题总结

    问题1:路面拼接处理 在拼接路的时候,如果两个路挨的太近就会出现贴图闪烁,如下所示 解决办法 如果把路改小就会出现断层,但不会出现贴图闪烁 PS:我是把贴图放在Cube上的,所以路是有厚度. 附注 刚 ...

  8. Hadoop和Spark的异同

    谈到大数据,相信大家对Hadoop和Apache Spark这两个名字并不陌生.但我们往往对它们的理解只是提留在字面上,并没有对它们进行深入的思考,下面不妨跟我一块看下它们究竟有什么异同. 解决问题的 ...

  9. TP第一天路由解析

    路由解析:支持四种URL模式,分别是普通模式.路径模式.重写模式.兼容模式,分别用0123表示 普通模式:http://网址/index.php?m=model&c=user&a=lo ...

  10. 16Spring_AOP编程(AspectJ)_最终通知