1、基本选择器

l ID 根据元素ID选择

l Elementname 根据元素名称选择

l Classname 根据元素css类名选择

举例:

  1. <input type=”text” id=”ID” value=”根据ID选择”/>
  2. <a>根据元素名称选择</a>
  3. <input type=”text” class=”classname” value=”根据元素css类名选择”/>

取值:

  1. jQuery(“#ID”).val();
  2. jQuery(“a”).text();
  3. jQuery(“.classname”).val();

以上为最常见的选择器,其中ID选择器是效率最高的,在可能的情况下应该尽量使用它。

2、层次选择器

l Ancestor descendant 祖先和子孙选择器

l Parent > child 父子节点选择器

l Prev + next 同级别选择器

l Prev ~ siblings 过滤选择器

举例:

  1. <div id=”divTest”>
  2. <input type=”text” value=”1”/>
  3. <input id=”next” type=”text”/>
  4. <input type=”text” value=”2”/>
  5. <input type=”text” title=”t” value=”3”/>
  6. <a>1</a>
  7. <a>2</a>
  8. </div>

结果:

  1. //得到div中的a标签内容 结果为12
  2. jQuery(“#divTest a”).text();
  3. //输出div直接子节点 结果为1
  4. jQuery(“#divTest>input”).val();
  5. //输出id为next的后一个同级别元素 结果为2
  6. jQuery(“#next+input”).val();
  7. //输出id为next,且有title的元素 结果为3
  8. 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 匹配正执行动画效果的元素 (目前没用过)

举例:

  1. <div id="divTest">
  2. <ul>
  3. <li>1</li>
  4. <li>2</li>
  5. <li>3</li>
  6. <li>4</li>
  7. <input type="radio" value="r1" checked="checked"/>
  8. <input type="radio" value="r2"/>
  9. </ul>
  10. </div>

结果:

  1. $(document).ready(function(){
  2. //第一个li内容 结果为1
  3. alert(jQuery("li:first").text())
  4. //最后一个li内容 结果为4
  5. alert(jQuery("li:last").text());
  6. //input未被选中的值 结果为r2
  7. alert(jQuery("li input:not(:checked)").val())
  8. //索引为偶数的li 结果为2,4
  9. alert(jQuery("li:even").text());
  10. //索引为奇数的li 结果为1,3
  11. alert(jQuery("li:odd").text())
  12. //索引大于2的li的内容 结果为4
  13. alert(jQuery("li:gt(2)").text())
  14. //索引小于1的li的内容 结果为1
  15. alert(jQuery("li:lt(1)").text())
  16. });

4、内容过滤器

l :Contains(text) 匹配包含给定文本的元素

l :empty 匹配所有不包含子元素或者文本的空元素

l :has(selector) 匹配含有选择器所匹配的元素

举例:

  1. <div id="Test">
  2. <ul>
  3. <li>qq123</li>
  4. <li>qq</li>
  5. <li></li>
  6. <li>a</li>
  7. <li><a>b</a></li>
  8. </ul>
  9. </div>

结果:

  1. $(document).ready(function(){
  2. //包含qq的li的内容 结果为qq123投资 qq
  3. alert(jQuery("li:contains('qq')").text())
  4. //内容为空的li的后一个li内容 结果为a
  5. alert(jQuery("li:empty+li").text())
  6. //包含a标签的li的内容 结果为b
  7. alert(jQuery("li:has(a)").text());
  8. });

5、可见性过滤器

l :hidden 匹配不可见元素

l :visible 匹配可见元素

举例:

  1. <div id="Test">
  2. <ul>
  3. <li>可见</li>
  4. <li style="display:none;">不可见</li>
  5. </ul>
  6. </div>

结果:

  1. $(document).ready(function(){
  2. //不可见的li的内容 结果为不可见
  3. jQuery("li:hidden").text();
  4. //可见的li的内容 结果为可见
  5. jQuery("li:visible").text();
  6. });

6、属性过滤器

l [attribute=value] 匹配属性是给定值得元素

l [attribute^=value] 匹配属性是以给定值结束的元素

l [attribute$=value] 匹配属性是以给定值结束的元素

l [attribute*=value] 匹配属性包含给定值得元素

举例:

  1. <div id="Test">
  2. <input type="text" name="qq123" value="qq123" />
  3. <input type="text" name="123qq" value="123qq" />
  4. <input type="text" name="a" value="a" />
  5. </div>

结果:

  1. $(document).ready(function(){
  2. //name为qq123的值 结果为qq123投资
  3. alert(jQuery("input[name='qq123']").val());
  4. //name以qq开始的值 结果为qq123投资
  5. alert(jQuery("input[name^='qq']").val());
  6. //name以qq结束的值 结果为投资123qq
  7. alert(jQuery("input[name$='qq']").val());
  8. //name包含a的值 结果为a
  9. alert(jQuery("input[name*='a']").val());
  10. });

[置顶] Jquery学习总结(二) jquery选择器详解的更多相关文章

  1. [置顶] linux学习之samba安装问题详解

    一.首先查看是否安装samba,命令为:rpm -qa | grep samba 出现如下包表示已经安装,否则没有安装 samba-winbind-clients-3.5.10-125.el6.i68 ...

  2. [置顶] 深入浅出Spring(三) AOP详解

    上次的博文深入浅出Spring(二) IoC详解中,我为大家简单介绍了一下Spring框架核心内容中的IoC,接下来我们继续讲解另一个核心AOP(Aspect Oriented Programming ...

  3. jQuery学习之二 jQuery选择器

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

  4. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  5. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

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

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

  7. CDN学习笔记二(技术详解)

    一本好的入门书是带你进入陌生领域的明灯,<CDN技术详解>绝对是带你进入CDN行业的那盏最亮的明灯.因此,虽然只是纯粹的重点抄录,我也要把<CDN技术详解>的精华放上网.公诸同 ...

  8. jquery选择器之属性过滤选择器详解

    代码如下: <style type="text/css">  /*高亮显示*/  .highlight{       } </style> 复制代码代码如下 ...

  9. [置顶] linux中fork()函数详解(原创!!实例讲解)

    分类: 计算机系统 linux2010-06-01 23:35 60721人阅读 评论(105) 收藏 举报 linux2010存储  一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源 ...

  10. C#学习笔记二: C#类型详解

    前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...

随机推荐

  1. Excel 的一些用法--行号赋给一列

    1.鼠标选定要赋值的列 2.在 输入 =Row() 3. Ctrl+Enter

  2. python笔记 - day5

    python笔记 - day5 参考: http://www.cnblogs.com/wupeiqi/articles/5484747.html http://www.cnblogs.com/alex ...

  3. .emacs

    (tool-bar-mode 0)(menu-bar-mode 0)(blink-cursor-mode 0);;(set-scroll-bar-mode nil);;(global-linum-mo ...

  4. Ubuntu下virtualbox nat网络模式下 实现宿主机访问虚拟机

    参考原文(在windows环境下):http://hi.baidu.com/george_gly/item/5183b76e5a79e49ac5d2498b nat网络模式下,虚拟机可以访问外网.访问 ...

  5. 阿里云数据库实例的一个db被开发人员删除了 如何恢复

    1没有 逻辑备份的话. 如下操作即可 可以将那个临时实例的需要导的db用逻辑备份出来恢复到主实例就行了 好多朋友都在问,RDS中把数据恢复到7天内任意时间点的功能在哪里啊? 其实挺简单的,只需要五步操 ...

  6. Android Service学习之AIDL, Parcelable和远程服务

    AIDL的作用     由于每个应用程序都运行在自己的进程空间,并且可以从应用程序UI运行另一个服务进程,而且经常会在不同的进程间传递对象.在Android平台,一个进程通常不能访问另一个进程的内存空 ...

  7. postgress Sql数据库的复制

    1.保证本地可正常执行pg_dump,即就是本地有安装postgress数据库,最好把bin目录添加到环境变量path中2.在命令行中执行如下语句: pg_dump -U zhangsan -h 19 ...

  8. iPhone尺寸规范

    转载于:http://www.uigreat.com/page/guifan

  9. ios学习笔记01

    ## HUD - 其他说法:指示器.遮盖.蒙板 - 半透明HUD的做法 - 背景色设置为半透明颜色 ## 定时任务 - 方法1:performSelector ```objc // 1.5s后自动调用 ...

  10. ios提示框,自动消失

    -(void)click { NSString *showMsg = @"点击我,开始提示"; int width = showMsg.length * 20; UIWindow ...