[置顶] 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 等新特性进行. ...
随机推荐
- Fiddler-008-简单模拟性能测试
通过 Fiddler 可以简单的模拟性能测试的并发测试,此方法非常的简单,直接讲述如何使用,敬请参阅! 首先我们要获取需要并发的 HTTP请求,此操作非常简单,则在此不再赘述.获取到响应的 HTTP请 ...
- 重新拷贝 新项目 发现不显示 原来是 paramiko 没有装
proxy pass 端口换成 另一个 跟原来的不冲突 [root@ayibang-server soft_ware]# cp s10day11/demo.* s10ops/[root@ayibang ...
- pscp
http://www.physics.rutgers.edu/~matilsky/documents/pscp.htm
- 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 ...
- 这是我定位的Bug
https://github.com/danielgindi/ios-charts/issues/406
- 五种I/O 模式,select、epoll方法的理解,BIO、NIO、AIO理解 相关文章
一.io方式 Linux网络编程 五种I/O 模式及select.epoll方法的理解 web优化必须了解的原理之I/o的五种模型和web的三种工作模式 五种I/O 模式——阻塞(默认IO模式),非阻 ...
- Sql清理日志文件
场景: 我们导入MR数据时发现磁盘空间不够用了,导致的结果就是我们的程序很可能会抛出异常了,我们需要导入数据的时候进行日志瘦身. 问1:导入数据的时候,瘦身是否会造成数据库的异常? DBA提供解决方案 ...
- mysql 插入重复值 INSERT ... ON DUPLICATE KEY UPDATE
向数据库插入记录时,有时会有这种需求,当符合某种条件的数据存在时,去修改它,不存在时,则新增,也就是saveOrUpdate操作.这种控制可以放在业务层,也可以放在数据库层,大多数数据库都支持这种需求 ...
- 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.* ...
- 搭建企业cacti服务器
搭建企业cacti服务器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 今天搭建了cacti,为了方便监控我的交换机~因为查了很多zabbix的资料关于监控交换机的教程~我都屡屡失 ...