JQuery获取元素的方法总结
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获取元素的方法总结
目录 一.说明 二.获取本身 三.获取同级元素 四.获取父级元素 五.获取子级元素 一.说明 获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本 ...
- jQuery获取元素的方法
1·$(".box").offset().left 获取盒子左边到浏览器左侧的距离(上右下相同): 2·$("span").width() 获取盒子的宽度(高度 ...
- Jquery获取元素方法
Jquery 获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 1.获取本身: a.只需要一种jQuery选择器 选择器 实例 说明 #Id $('#myId') ID选择器: 可以 ...
- [转载]jquery获取元素索引值index()方法:
jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...
- jquery获取元素索引值index()方法
jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...
- jquery 获取元素在浏览器中的绝对位置
代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...
- jquery获取元素到屏幕底的可视距离
jquery获取元素到屏幕底的可视距离 要打对号的图里的height(我自称为可视高度:滚动条未滑到最底端) 不是打叉图里的到页面底部(滚动条到最底部时的height)(offset().top方法 ...
- Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
- js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...
随机推荐
- 杭电acm2029-Palindromes _easy version
Problem Description “回文串”是一个正读和反读都一样的字符串,比如“level”或者“noon”等等就是回文串.请写一个程序判断读入的字符串是否是“回文”. Input 输入包 ...
- tmtTable设计说明文档
文件链接:tmt-table.js BOSS后台项目用到最多的就是列表页,所以把列表页做成通用组件,可以大大提高开发效率. 因为列表可能有不同的样式,所以在实例化组件时可以传值控制样式,用这种方式: ...
- ABAP 一个隐藏 selection-screen block的实例
以下是一个演示如何通过 selection-screen 中的pushbutton来动态改变屏幕上的字段的显示状态的(即显示或者隐藏). 注意:显示 通过本示例可知selection-scr ...
- userprofile同步用户失败的原因和解决方案
userprofile同步账号进行出现同步不到用户.有个时候同步成功了但是为0个用户.有个时候提示同步失败或拒绝等错误.如何查看同步服务同步的结果.其实明白sharepoint2010同步用户的原理都 ...
- ID卡和IC卡
1.ID卡 ID卡就是一种身份识别卡,卡内除了卡号之外,无任何加密功能. ID卡的工作原理:它是由卡.读卡器.后台控制器组成的. (1)读卡器通过天线发射射频信号 (2)当卡进入信号范围内后卡被激活 ...
- 升级tomcat7的运行日志框架到log4j2,可以打进kafka
为了让web application能随意使用logging组件而不受web容器自身的影响,从tomcat 6.0开始,tomact默认使用的是java.util.logging framework来 ...
- AVAudioSession初探
根据文档,AudioSession规定了app和系统音频行为交互的规范,一个app只有一个AudioSession的单例. app通过设置自己AudioSession的单例的属性来告诉系统自身想达到的 ...
- sqlite之WAL模式
链接 概述 在3.7.0以后,WAL(Write-Ahead Log)模式可以使用,是另一种实现事务原子性的方法. WAL的优点 在大多数情况下更快 并行性更高.因为读操作和写操作可以并行. 文件IO ...
- 项目管理、测试管理、代码bug 管理
1.友盟统计 阿里旗下的产品 http://www.umeng.com/ 2.bugly 腾讯旗下的产品 http://bugly.qq.com/ 3.禅道 项目管理工具 需要部署到 ...
- Canvas drawText实现中英文居中
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Paint mTextPaint = new Paint( ...