原文地址:jQuery 3教程(三):jQuery集合

Introduction

jQuery选择器选择出来的结果很多时候是一个DOM元素集而非单个元素,jQuery可以灵活的访问和修改DOM元素集,但是所谓的灵活是需要大量的函数的。
由于篇幅和排版问题,本文的demo只是示意用法,完整的用法还请参考在线文档。

从DOM集合中选择元素

get([index])

获取DOM元素集中一个或者多个匹配元素,如:

var ret = $('h3').get(0);

index([element])

和get()相反,index()将获取元素在元素集中的序号,如:

var ret = $('#content').index($('h3'));

将选取h3集合中的第一个元素。

first()

获取DOM元素集中第一个元素,如:

var ret = $('h3').first();

或者

var ret = $('h3:first');

last()

获取DOM元素集中最后一个元素,如:

var ret = $('h3').last();

或者

var ret = $('h3:last');

toArray()

将获取的DOM元素集转换成数组,如:

var ret = $('h3').toArray();

根据相对关系选择元素

children([selector])

获取DOM元素集中,符合选择器条件的子元素集,如:

var ret = $('#context').children($('h3'));

parent([selector])

和children()相反,获取DOM元素集中,符合选择器条件的父元素集,如:

var ret = $('h3').parent($('#context'));

closest([selector])

获取DOM元素集中,符合选择器条件的第一个父/祖先元素,如:

var ret = $('#context').closest($('h3'));

contents()

获取DOM元素集中的子元素,包含注释和文本,如:

var ret = $('#context').contexts();

find([selector])

获取DOM元素集中满足选择器条件的所有元素,如:

var ret = $('#context').find($('h3'));

next([selector])

获取DOM元素集中,当前元素后面的满足选择器条件的下一个元素,如:

var ret = $('#context').next($('h3'));

prev([selector])

和next()相反,获取DOM元素集中,当前元素前面的满足选择器条件的下一个元素,如:

var ret = $('#context').prev($('h3'));

nextAll([selector])

类似next(),获取DOM元素集中,当前元素后面的满足选择器条件的所有元素,如:

var ret = $('#context').nextAll($('h3'));

prevAll([selector])

类似prev(),获取DOM元素集中,当前元素前面的满足选择器条件的所有元素,如:

var ret = $('#context').prevAll($('h3'));

nextUntil([selector])

获取DOM元素集中,直到遇到选择器条件的元素之前的同辈元素,如:

var ret = $('#context').nextUntil($('h3'));

prevUntil([selector])

获取DOM元素集中,直到遇到选择器条件的元素之后的同辈元素,如:

var ret = $('#context').prevUntil($('h3'));

siblings([selector])

获取DOM元素集中,满足选择器条件的所有兄弟元素,如:

var ret = $('#context').siblings($('h3'));

从next开始可能比较绕口,要真正理解其中的差别,需要在实际运用中加以理解。

Summary

本文简要的列出了jQuery集合中筛选DOM元素的函数,列举只是表明常用的函数的范围,更多细节还请参考W3C的jQuery教程。

jQuery 3教程(三):jQuery集合相关推荐

  1. php jquery 实例教程,php jquery 多文件上传简单实例

    这篇文章主要介绍了php jquery 多文件上传简单实例,有需要的朋友可以参考一下 代码如下: Upload $(document).ready(function() { var settings ...

  2. w3cschool的jQuery Mobile教程总结

    w3cschool的jQuery Mobile教程总结 jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架. jQuery Mobile 工作于所有主流的智能手机和平板电脑上. 一 ...

  3. w3cschool教程之jQuery UI 教程概述

    w3cschool教程之jQuery UI 教程概述 链接地址: http://www.w3cschool.cc/jqueryui/jqueryui-tutorial.html w3cschool教程 ...

  4. jQuery前端教程-张晨光-专题视频课程

    jQuery前端教程-260人已学习 课程介绍         什么是jQuery 是一个JavaScript的函数库 jQuery是一个轻量级的JavaScript库 浏览器兼容比较好 jQuery ...

  5. jQuery 基础教程 (三)之jQuery的选择器

    一.jQuery 选择器 (1)选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 (2)jQuery 选择器的优点: 简洁的写法 ...

  6. jQuery插件开发教程

    jQuery插件开发精品教程,让你的jQuery提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...

  7. Jquery基本教程(背还是要背的)

    Jquery入门学习 一.简介 1.Jquery是基于JavaScript的一种框架,兼容主流浏览器,提供了dom,animate(JQ+CSS),ajax; 2.Jquery2.0后版本不支持IE6 ...

  8. 学习JQuery插件开发教程

    如果你跟我一样,jQuery属于入门级的,那么我建议你看我下一篇jQuery教程:自己动手开发jquery插件 ,这篇插件比较容易理解和模范,适合新手开发jQuery插件.推荐你去看一看. 在逛cod ...

  9. jQuery——入门(三)JQuery DOM操作(核心处理和文档处理)

    jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...

最新文章

  1. 2018机器阅读理解竞赛冠军分享:问答系统新思路
  2. 单片机外文参考文献期刊_论文参考文献|如何在最短时间内加注参考文献??...
  3. 独立式键盘的编程方法 按键的去抖动原理和基本方法
  4. Coding: 2的N次方
  5. Spark On Yarn 运行项目
  6. spring security简单教程以及实现完全前后端分离
  7. 高性能开发,别点,发际线要紧!
  8. 干货分享:给视频翻译字幕可以用哪些软件?
  9. ubuntu下交叉编译libyuv到RK3399平台(ARM64)((提高YUV图像转换效率)
  10. matlab剪切板中内容清除,清除剪贴板的内容
  11. 后盾人tp5教程_5个出色的应用程序以开放数据为后盾
  12. 华为云计算IE面试笔记-桌面云中的用户组、虚拟机模板、模板虚拟机、虚拟机组和桌面组的关系及区别。发放完整复制和链接克隆虚拟机时,步骤有什么区别,要怎么选择桌面组?
  13. GIS应用技巧之环形地图制作
  14. mc服务器物品给予,我的世界网易版给予物品指令1.12谢谢
  15. 以太网交换机可以家用吗_家用交换机是干什么用的?
  16. 报错:SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>)
  17. Oracle归档日志使用情况及自动清理
  18. 怎样鉴赏一幅书法作品的好坏
  19. vps服务技术的5大优势
  20. 【高等数学】加减关系下可以用等价无穷小替换的情况

热门文章

  1. openresty开发系列33--openresty执行流程之2重写赋值阶段
  2. python list 取重复次数
  3. python中的 set 中的元素
  4. MyEclipse常用快捷键及快捷键大全
  5. 20141203图片Base64编码与解码
  6. 一位大学教授学习数学的体会
  7. Mercurial 版本控制服务器(Web Server)的搭建
  8. delphi编译缺少组件 imgedit excel2000等
  9. APP性能之终端兼容
  10. Ruby/Rails 生态环境、社区、资料 Ecosystem