JQuery获取元素的方法总结

一、说明

    获取元素的方法分为两种:jQuery选择器、jQuery遍历函数。

做个总结,巩固下知识。

二、获取本身

1、只需要一种jQuery选择器

 
选择器 实例 说明
#Id $('#myId') ID选择器: 可以获取到ID为“myId”的元素,区分大小写

2、多种jQuery选择器组合

分为两部分:前半部分获取到的是一个元素集合,后半部分可以精确为一个元素,两者相结合,可以获取到想要的元素。

1)前半部分选择器

 
选择器 实例 说明
.class $('.myClass') 类选择器:可以获取到class为‘myClass’的所有元素
element $('p') 获取所有的<p>元素
:header $(':header') 获取所有的标题元素:<h1> ~ <h6>
:animated $(':animated') 获取所有的动画元素
:contains(text) $('p:contains(Hello)') 获取所有包含文本为Hello的<p>元素,中间的文本区分大小写
:hidden $(':hidden') 获取所有的隐藏元素:width和height为0、display:none、type=hidden、
[attribute] $('[href]') 属性选择器:获取所有含有属性为href的元素
[attribute=value] $('[href=a.html]')

=   获取所有带有属性href,并且值为a.html的元素

!=  获取所有带有属性href,并且值不等于为a.html的元素

$=  获取所有带有属性href,并且值以a.html结尾的元素

^=  获取所有带有属性href,并且值以a.html开头的元素

~=  获取所有带有属性href,并且值包含单词”a.html“的元素

*=  获取所有带有属性href,并且值包含文本”a.html“的元素

:input $(':input') 获取所有input元素
:radio $(':radio')

所有带有 type="radio" 的 input 元素

相似的有:

:text、:chexbox、:password、:submit、:reset、:button、:file

:enabled $(':enabled') 所有启用的input元素。 :disabled  则相反
:checked $(':checked') 所有选中的input选择(单选框、复选框)
:gt(index) $('p:gt(2)') index从0开始,获取index大于(不包含)2的所有<p>元素
:lt(index) $('p:lt(2)') index从0开始,获取index小于(不包含)2的所有<p>元素
:even $('tr:even') 所有偶数<tr>元素
:odd $('tr:odd') 所有奇数<tr>元素

2)后半部分选择器:可以精确到某一个元素

选择器 实例 说明
:first $('p:first') 第一个<p>元素
:last $('p:last') 最后一个<p>元素
:eq(index) $("p:eq(1)") 第二个<p>元素,index从0开始

3、jQuery选择器+遍历函数

也是分为两部分:前半部分用选择器获取到一个元素集合,后半部分用遍历函数精确为某个元素

1)前半部分同上

2)后半部分:遍历函数

 方法  描述
 eq()  返回带有被选元素的指定索引号的元素
 first()  返回被选元素的第一个元素
 last()  返回被选元素的最后一个元素

三、获取同级元素

顾名思义:获取选中元素同级元素。首先需要定位到该元素(上面已有总结,不再重复),然后获取它的同级元素。

1)选择器

选择器 实例 说明
element + next $('div + p') 每个div相邻的下一个<p>元素
element ~ siblings $('div ~ p') 获取跟div同级的所有的<p>元素

2)遍历函数

方法 描述
next() 返回被选元素的后一个同级元素
nextAll() 返回被选元素之后的所有同级元素
prev() 返回被选元素的前一个同级元素
prevAll() 返回被选元素之前的所有同级元素

四、获取父级元素

获取选中元素父级元素

1)选择器

选择器 实例 说明
:parent $('p:parent') 获取所有p元素的父级元素

2)遍历函数

方法 描述
parent() 获取被选元素的父级元素
parents() 获取被选元素的所有祖先元素

五、获取子级元素

获取选中元素子级元素

1)选择器

选择器 实例 说明
parent > child  $('div > p')  获取div直接子元素的所有<p>元素
parent descendant  $('div p')  获取div所有后代的<p>元素

2)遍历函数

方法 描述
children() 返回被选元素的所有直接子元素
contents() 返回被选元素的所有直接子元素(包含文本和注释节点)
find() 返回被选元素的后代元素
 
 
标签: jQuery
转载

JQuery获取元素的方法总结的更多相关文章

  1. 【鬼脸原创】JQuery获取元素的方法总结

    目录 一.说明 二.获取本身 三.获取同级元素 四.获取父级元素 五.获取子级元素 一.说明   获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本 ...

  2. jQuery获取元素的方法

    1·$(".box").offset().left 获取盒子左边到浏览器左侧的距离(上右下相同): 2·$("span").width() 获取盒子的宽度(高度 ...

  3. Jquery获取元素方法

    Jquery 获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 1.获取本身: a.只需要一种jQuery选择器 选择器 实例 说明 #Id $('#myId') ID选择器: 可以 ...

  4. [转载]jquery获取元素索引值index()方法:

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  5. jquery获取元素索引值index()方法

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  6. jquery 获取元素在浏览器中的绝对位置

    代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...

  7. jquery获取元素到屏幕底的可视距离

    jquery获取元素到屏幕底的可视距离 要打对号的图里的height(我自称为可视高度:滚动条未滑到最底端)  不是打叉图里的到页面底部(滚动条到最底部时的height)(offset().top方法 ...

  8. Javascript及Jquery获取元素节点以及添加和删除操作

    用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...

  9. js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

随机推荐

  1. CSS常用样式(二)

    一.边框样式 1.border:复合属性.设置对象边框的特性. 取值: border-width: 设置或检索对象边框宽度. border-style: 设置或检索对象边框样式. border-col ...

  2. SharePoint Online 创建门户网站系列之母版页

    前 言 虽然SharePoint中母版页看起来只是头部Banner和底部版权信息这两个部分,但是实质在SharePoint Online中的页面模型中占有重要地位,而且SPO对母版页有着完善的签入签出 ...

  3. Atitit jOrgChart的使用  组织架构图css html

    Atitit jOrgChart的使用  组织架构图css html 1. 项目要做组织架构图,要把它做成自上而下的树形结构,于是决定1 2. Html导入 以来的css js1 2.1. 数据来源 ...

  4. jsp声称的java文件位置

    想找到JSP生成的字节码文件还是Java文件,这得看你加载Web应用是自己配置的Tomcat还是加载到Eclipse默认路径下:先说Eclipse默认路径下的吧,其路径为:你的eclipse存放工程的 ...

  5. Android Launcher 3 简单分析

    最近在学习Android Launcher的相关知识,在github上找到可以在Android studio上编译的Launcher 3代码,地址:https://github.com/rydanli ...

  6. 深入.net(.net平台)

    S2A技能点: 1.学会“自己”进行大量复杂数据的管理(数据类型.集合.xml.文件) 2.学会“优化”代码编写--- 复用.可扩展.可替换(封装.继承.多态) 什么是“跨平台”---- 您的应用程序 ...

  7. windows svn 上传后 自动部署 到web目录下

    第一步 把web目录设置为工作目录 "D:\Program Files (x86)\VisualSVN Server\bin\svn.exe" upgrade "D:\y ...

  8. 心理控制方法——阅读Notes

    1.自助式情感手术 祛除自我意象中的伤疤的要点 2. 你制造错误,但是错误不应造就你    你身上的缺点不是你的错  3. 不仅要原谅别人,也要原谅自己 4. 怨恨是一条通向失败的道路 5. 注意来 ...

  9. Entity Framework 4.1 - Code First 指定外键名称

    Entity Framework 4.1 中,生成外键的方式有以下几种: 1-指定导航属性,会自动生成外键,命名规则为:“表名_主键名”2-默认情况下与导航属性的主键名称相同的字段会自动被标记为外键, ...

  10. 1、开篇:PMO定义 - PMO项目管理办公室

    PMO,Project Management Office,项目管理办公室,笔者不按照项目管理知识体系指南PMBOK(Project Management Body Of Knowledge)上的定义 ...