jQuery选择器(子元素过滤选择器)第七节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ //选取子元素, 需要在选择器前添加一个空格. $("div.one :nth-child(2)").css("background", "#ffbbaa"); }); $("#btn2").click(function(){ $("div.one :first-child").css("background", "#ffbbaa"); }); $("#btn3").click(function(){ $("div.one :last-child").css("background", "#ffbbaa"); }); $("#btn4").click(function(){ $("div.one :only-child").css("background", "#ffbbaa"); }); }); </script> </head> <body> <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" value="123456789" size="8"> </div> <div id="mover">正在执行动画的div元素.</div> </body> </html>
jQuery选择器(子元素过滤选择器)第七节的更多相关文章
- jQuery选择器之子元素过滤选择器Demo
测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- 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表单元素过滤选择器
此选择器主要是对所选择的表单元素进行过滤: 选择器 描述 返回 enabled 选择所有的可用的元素 集合元素 disabled 选择所有的不可用的元素 集合元素 checked 选择所有被选中的元素 ...
- jquery子元素过滤选择器
:nth-child('索引值')//获取指定元素下的某个子元素的位置,索引从1开始: //偶数行 //$('li:nth-child(even)').addClass ...
- 008 jquery过滤选择器-----------(子元素过滤选择器)
1.介紹 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- jQuery中的子(后代)元素过滤选择器(四、六):nth-child()、first-child、last-child、only-child
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jquery 子元素筛选选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- Jquery | 基础 | jQuery表单对象属性过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...
随机推荐
- kbhit()
kbhit() 非阻塞的响应键盘输入时间 C++函数 功能和返回值:检查是否有键盘输入 ,有返回非0 ,无返回0 int khbit(void) 头文件: #include<conio.h& ...
- Hadoop 2:Mapper和Reduce
Hadoop 2:Mapper和Reduce Understanding and Practicing Hadoop Mapper and Reduce 1 Mapper过程 Hadoop将输入数据划 ...
- SQL语句表名或者字段名和保留字冲突解决方法
最近开发遇到一个很奇葩的问题,简单做一下笔记 select * from Add ... 以上SQL语句会报错. 原因Add是表名,SQL语句保留字中又有Add 解决方法: select * from ...
- MySQL show status 参数详解
状态名 作用域 详细解释 Aborted_clients Global 由于客户端没有正确关闭连接导致客户端终止而中断的连接数 Aborted_connects Global 试图连接到MySQL服务 ...
- 面向对象oop
类和对象 1.什么是类?什么是对象? 1)现实世界是由很多很多对象组成的 基于对象抽出了类 2)对象:真实存在的单个的个体 类:类型/类别,代表一类个体 3)类中可以包含: 3.1)所有对象所共有的属 ...
- 对Java Web项目中路径的理解
第一个:文件分隔符 坑比Window.window分隔符 用\;unix采用/.于是用File.separator来跨平台 请注意:这是文件路径.在File f = new File(“c:\\hah ...
- HDU2036 改革春风吹满地
第一次看到这题果断放弃,毕竟几何白痴,第二次刷没做的题的时候突然想到这个三角形面积的向量法:S=|x1*y2-x2*y1| 但是此题可能是凹多边形,所以不能加绝对值,可以画个凹四边形看看. HDU2 ...
- JavaScript大厦之地基:js数据类型
一.数据和类型 俗话说物以类聚,人以群分:这里将人和物都按类别进行了区分.我们数据也一样,使用计算机我们能处理数值,也可以处理文本还可以处理图形.音频.视频等各种各样的数据,不同的数据有 ...
- python随机生成中文字符
第一种方法:Unicode码 在unicode码中,汉字的范围是(0x4E00, 9FBF) import random def Unicode(): val = random.randint(0x4 ...
- Pyquery API中文版
Pyquery的用法与jQuery相同,可以直接参考jQuery API学习.