[置顶] Jquery学习总结(二) jquery选择器详解
1、基本选择器
l ID 根据元素ID选择
l Elementname 根据元素名称选择
l Classname 根据元素css类名选择
举例:
- <input type=”text” id=”ID” value=”根据ID选择”/>
- <a>根据元素名称选择</a>
- <input type=”text” class=”classname” value=”根据元素css类名选择”/>
取值:
- jQuery(“#ID”).val();
- jQuery(“a”).text();
- jQuery(“.classname”).val();
以上为最常见的选择器,其中ID选择器是效率最高的,在可能的情况下应该尽量使用它。
2、层次选择器
l Ancestor descendant 祖先和子孙选择器
l Parent > child 父子节点选择器
l Prev + next 同级别选择器
l Prev ~ siblings 过滤选择器
举例:
- <div id=”divTest”>
- <input type=”text” value=”1”/>
- <input id=”next” type=”text”/>
- <input type=”text” value=”2”/>
- <input type=”text” title=”t” value=”3”/>
- <a>1</a>
- <a>2</a>
- </div>
结果:
- //得到div中的a标签内容 结果为12
- jQuery(“#divTest a”).text();
- //输出div直接子节点 结果为1
- jQuery(“#divTest>input”).val();
- //输出id为next的后一个同级别元素 结果为2
- jQuery(“#next+input”).val();
- //输出id为next,且有title的元素 结果为3
- jQuery(“#next~[title]”).val();
3、基本过滤选择器
l :first 找到第一元素
l :last 找到最后一个元素
l :not(selector) 去除与给定选择器匹配的元素
l :even 匹配索引值为偶数的元素 从0开始计数
l :odd 匹配索引值为奇数的元素 从0开始计数
l :eq(index) 匹配一个给定索引值元素 从0开始
l :gt(index) 匹配大于给定索引值元素
l :lt(index) 匹配小于给定索引值元素
l :header 选择h1,h2,h3一类的标签 (目前没用过)
l :animated 匹配正执行动画效果的元素 (目前没用过)
举例:
- <div id="divTest">
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <input type="radio" value="r1" checked="checked"/>
- <input type="radio" value="r2"/>
- </ul>
- </div>
结果:
- $(document).ready(function(){
- //第一个li内容 结果为1
- alert(jQuery("li:first").text())
- //最后一个li内容 结果为4
- alert(jQuery("li:last").text());
- //input未被选中的值 结果为r2
- alert(jQuery("li input:not(:checked)").val())
- //索引为偶数的li 结果为2,4
- alert(jQuery("li:even").text());
- //索引为奇数的li 结果为1,3
- alert(jQuery("li:odd").text())
- //索引大于2的li的内容 结果为4
- alert(jQuery("li:gt(2)").text())
- //索引小于1的li的内容 结果为1
- alert(jQuery("li:lt(1)").text())
- });
4、内容过滤器
l :Contains(text) 匹配包含给定文本的元素
l :empty 匹配所有不包含子元素或者文本的空元素
l :has(selector) 匹配含有选择器所匹配的元素
举例:
- <div id="Test">
- <ul>
- <li>qq123</li>
- <li>qq</li>
- <li></li>
- <li>a</li>
- <li><a>b</a></li>
- </ul>
- </div>
结果:
- $(document).ready(function(){
- //包含qq的li的内容 结果为qq123投资 qq
- alert(jQuery("li:contains('qq')").text())
- //内容为空的li的后一个li内容 结果为a
- alert(jQuery("li:empty+li").text())
- //包含a标签的li的内容 结果为b
- alert(jQuery("li:has(a)").text());
- });
5、可见性过滤器
l :hidden 匹配不可见元素
l :visible 匹配可见元素
举例:
- <div id="Test">
- <ul>
- <li>可见</li>
- <li style="display:none;">不可见</li>
- </ul>
- </div>
结果:
- $(document).ready(function(){
- //不可见的li的内容 结果为不可见
- jQuery("li:hidden").text();
- //可见的li的内容 结果为可见
- jQuery("li:visible").text();
- });
6、属性过滤器
l [attribute=value] 匹配属性是给定值得元素
l [attribute^=value] 匹配属性是以给定值结束的元素
l [attribute$=value] 匹配属性是以给定值结束的元素
l [attribute*=value] 匹配属性包含给定值得元素
举例:
- <div id="Test">
- <input type="text" name="qq123" value="qq123" />
- <input type="text" name="123qq" value="123qq" />
- <input type="text" name="a" value="a" />
- </div>
结果:
- $(document).ready(function(){
- //name为qq123的值 结果为qq123投资
- alert(jQuery("input[name='qq123']").val());
- //name以qq开始的值 结果为qq123投资
- alert(jQuery("input[name^='qq']").val());
- //name以qq结束的值 结果为投资123qq
- alert(jQuery("input[name$='qq']").val());
- //name包含a的值 结果为a
- alert(jQuery("input[name*='a']").val());
- });
[置顶] Jquery学习总结(二) jquery选择器详解的更多相关文章
- [置顶] linux学习之samba安装问题详解
一.首先查看是否安装samba,命令为:rpm -qa | grep samba 出现如下包表示已经安装,否则没有安装 samba-winbind-clients-3.5.10-125.el6.i68 ...
- [置顶] 深入浅出Spring(三) AOP详解
上次的博文深入浅出Spring(二) IoC详解中,我为大家简单介绍了一下Spring框架核心内容中的IoC,接下来我们继续讲解另一个核心AOP(Aspect Oriented Programming ...
- jQuery学习之二 jQuery选择器
一.jQuery选择器是什么1.CSS选择器2.jQuery选择器 二.jQuery选择器的优势1.简洁的写法2.支持从CSS1到CSS3选择器3.完善的处理机制 传统js选择器假如要操作的元素不存 ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- 从零实现一个简易的jQuery框架之二—核心思路详解
如何读源码 jQuery整体框架甚是复杂,也不易读懂.但是若想要在前端的路上走得更远.更好,研究分析前端的框架无疑是进阶路上必经之路.但是庞大的源码往往让我们不知道从何处开始下手.在很长的时间里我也被 ...
- CDN学习笔记二(技术详解)
一本好的入门书是带你进入陌生领域的明灯,<CDN技术详解>绝对是带你进入CDN行业的那盏最亮的明灯.因此,虽然只是纯粹的重点抄录,我也要把<CDN技术详解>的精华放上网.公诸同 ...
- jquery选择器之属性过滤选择器详解
代码如下: <style type="text/css"> /*高亮显示*/ .highlight{ } </style> 复制代码代码如下 ...
- [置顶] linux中fork()函数详解(原创!!实例讲解)
分类: 计算机系统 linux2010-06-01 23:35 60721人阅读 评论(105) 收藏 举报 linux2010存储 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源 ...
- C#学习笔记二: C#类型详解
前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...
随机推荐
- Excel 的一些用法--行号赋给一列
1.鼠标选定要赋值的列 2.在 输入 =Row() 3. Ctrl+Enter
- python笔记 - day5
python笔记 - day5 参考: http://www.cnblogs.com/wupeiqi/articles/5484747.html http://www.cnblogs.com/alex ...
- .emacs
(tool-bar-mode 0)(menu-bar-mode 0)(blink-cursor-mode 0);;(set-scroll-bar-mode nil);;(global-linum-mo ...
- Ubuntu下virtualbox nat网络模式下 实现宿主机访问虚拟机
参考原文(在windows环境下):http://hi.baidu.com/george_gly/item/5183b76e5a79e49ac5d2498b nat网络模式下,虚拟机可以访问外网.访问 ...
- 阿里云数据库实例的一个db被开发人员删除了 如何恢复
1没有 逻辑备份的话. 如下操作即可 可以将那个临时实例的需要导的db用逻辑备份出来恢复到主实例就行了 好多朋友都在问,RDS中把数据恢复到7天内任意时间点的功能在哪里啊? 其实挺简单的,只需要五步操 ...
- Android Service学习之AIDL, Parcelable和远程服务
AIDL的作用 由于每个应用程序都运行在自己的进程空间,并且可以从应用程序UI运行另一个服务进程,而且经常会在不同的进程间传递对象.在Android平台,一个进程通常不能访问另一个进程的内存空 ...
- postgress Sql数据库的复制
1.保证本地可正常执行pg_dump,即就是本地有安装postgress数据库,最好把bin目录添加到环境变量path中2.在命令行中执行如下语句: pg_dump -U zhangsan -h 19 ...
- iPhone尺寸规范
转载于:http://www.uigreat.com/page/guifan
- ios学习笔记01
## HUD - 其他说法:指示器.遮盖.蒙板 - 半透明HUD的做法 - 背景色设置为半透明颜色 ## 定时任务 - 方法1:performSelector ```objc // 1.5s后自动调用 ...
- ios提示框,自动消失
-(void)click { NSString *showMsg = @"点击我,开始提示"; int width = showMsg.length * 20; UIWindow ...