jQuery选择器之子元素过滤选择器Demo
测试代码:
07-子元素过滤选择器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>07-子元素过滤选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> <script src="./script/assist.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <script type="text/javascript"> $(document).ready(function(){ //<input type="button" value="选取每个class为one的div的第2个子元素." id="btn1"/> $("#btn1").click(function(){ /* * 子元素过滤选择器的特殊用法: * * 必须要在其前面,增加空格 * * 子元素过滤选择器是从"1"开始 */ $("div[class='one'] :nth-child(2)").css("background","red"); }); //<input type="button" value="选取每个class为one的div, 父元素下的第一个子元素." id="btn2"/> $("#btn2").click(function(){ //$("div[class='one'] :nth-child(1)").css("background","red"); $("div[class='one'] :first-child").css("background","red"); }); //<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/> $("#btn3").click(function(){ $("div[class='one'] :last-child").css("background","red"); }); //<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素." id="btn4"/> $("#btn4").click(function(){ $("div[class='one'] :only-child").css("background","red"); }); }); </script> </head> <body> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> <h3>子元素过滤选择器.</h3> <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/> <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/> <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/> <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素." id="btn4"/> <br /><br /> <div class="one" id="one" > id为one,class为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test" > id为two,class为one,title为test的div. <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"/> </div> <span id="mover">正在执行动画的span元素.</span> <!-- Resources from http://down.liehuo.net --> </body> </html>
jQuery选择器之子元素过滤选择器Demo的更多相关文章
- jQuery选择器之子元素选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- jquery选择器之子元素
HTML代码: :first-child 匹配第一个子元素,每个父元素的第一个子元素 :last-child 匹配最后一个子元素,每个父元素的最后一个子元素 <!DOCTYPE html> ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- jQuery内容过滤选择器与子元素过滤选择器用法实例分析
jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...
- 过滤选择器first与子元素过滤选择器first-child的区别
1.表格代码如下: <table id="table"> <tr> <td>id</td> <td>name</t ...
- jQuery选择器(子元素过滤选择器)第七节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- css 选择器之子元素
/*html*/ <div class="wrap"> <span>1</span> <span>2</span> &l ...
- jquery子元素过滤选择器
:nth-child('索引值')//获取指定元素下的某个子元素的位置,索引从1开始: //偶数行 //$('li:nth-child(even)').addClass ...
- 008 jquery过滤选择器-----------(子元素过滤选择器)
1.介紹 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
随机推荐
- Objective-C 学习记录6--dictionary
1.NSDictionary 和NSMutableDictionary NSDictionary dictionaryWithObjectsAndKeys:~,nil 使用键值对创建字典,用nil标志 ...
- ActiveMQ简介与安装
开源消息总线 支持JMS1.1和J2EE 1.4规范的 JMS Provider实现(持久化,XA消息,事务) 对Spring的支持,ActiveMQ可以很容易内嵌到使用Spring的系统里面去 支持 ...
- (剑指Offer)面试题34:丑数
题目: 把只包含因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含因子7. 习惯上我们把1当做是第一个丑数.求按从小到大的顺序的第N个丑数. 思路: 1. ...
- 25.怎样创建一个Swift项目?
经历前面三部分的学习之后,我们对于Swift的有了基本的了解,知道它的基础语法,也知道了类.结构体.枚举.协议.扩展等等内容.但知道上面这些内容,并不代表我们就能很好的进行实际的项目开发了,本部分内容 ...
- GIT 中提示 please tell me who you are
如果使用git过程中出现了,please tell me who you are ,需要设置一下使用者的身份. 1.git config user.name "username" ...
- Generate the Jobs script from msdb Database
前两周,由于数据库简繁体的转换,大量的数据库需要转到新的服务器. 在转其中的一台的时候,原先导出来的JOBS脚本不翼而飞(原因至今未明),而恰巧这一台服务器有90多个JOB(看下图恢复后的,注意滚动条 ...
- 整合spring roo,maven,mybatis,spring-flex,blazeds,mysql
1. 下载spring roo,设置环境变量ROO_HOME,和path,classpath. 使用CMD命令行找到工作区间,新建工程目录转到工程目录:mkdir ten-minutes $ ...
- 一、List的扩展
前言 List的三个扩展方法 1.处理符合in()格式的扩展方法 2.处理符合SelectListItem类型的扩展方法(SelectListItem类型是下拉框要用到的类型) 3.Distinct方 ...
- oc-22-sel
/** sel: 1.作用:包装方法 2.格式:typedef struct objc_selector *SEL; 3.用法: SEL 名称 = @selector(方法); 调用形式: [对象 p ...
- [拇指飞动]构建高性能Web站点(1)
<构建高性能Web站点>中提到了Aphache, Nginx和lighthttpd. 把我的笔记share一下. 一般来讲Apache主要是基于多进程模型,早期的fork模式会为每一个re ...