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选择器详解的更多相关文章

  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. Fiddler-008-简单模拟性能测试

    通过 Fiddler 可以简单的模拟性能测试的并发测试,此方法非常的简单,直接讲述如何使用,敬请参阅! 首先我们要获取需要并发的 HTTP请求,此操作非常简单,则在此不再赘述.获取到响应的 HTTP请 ...

  2. 重新拷贝 新项目 发现不显示 原来是 paramiko 没有装

    proxy pass 端口换成 另一个 跟原来的不冲突 [root@ayibang-server soft_ware]# cp s10day11/demo.* s10ops/[root@ayibang ...

  3. pscp

    http://www.physics.rutgers.edu/~matilsky/documents/pscp.htm

  4. REST Security with JWT using Java and Spring Security

    Security Security is the enemy of convenience, and vice versa. This statement is true for any system ...

  5. 这是我定位的Bug

    https://github.com/danielgindi/ios-charts/issues/406

  6. 五种I/O 模式,select、epoll方法的理解,BIO、NIO、AIO理解 相关文章

    一.io方式 Linux网络编程 五种I/O 模式及select.epoll方法的理解 web优化必须了解的原理之I/o的五种模型和web的三种工作模式 五种I/O 模式——阻塞(默认IO模式),非阻 ...

  7. Sql清理日志文件

    场景: 我们导入MR数据时发现磁盘空间不够用了,导致的结果就是我们的程序很可能会抛出异常了,我们需要导入数据的时候进行日志瘦身. 问1:导入数据的时候,瘦身是否会造成数据库的异常? DBA提供解决方案 ...

  8. mysql 插入重复值 INSERT ... ON DUPLICATE KEY UPDATE

    向数据库插入记录时,有时会有这种需求,当符合某种条件的数据存在时,去修改它,不存在时,则新增,也就是saveOrUpdate操作.这种控制可以放在业务层,也可以放在数据库层,大多数数据库都支持这种需求 ...

  9. G面经prepare: set difference

    给你A{1,2,3,4,4,5}, B{2,4},求A-B={1,3,4,5},很简单. visit 1 只用一个HashMap package TwoSets; import java.util.* ...

  10. 搭建企业cacti服务器

    搭建企业cacti服务器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 今天搭建了cacti,为了方便监控我的交换机~因为查了很多zabbix的资料关于监控交换机的教程~我都屡屡失 ...