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:contains('di')").css("background", "#ffbbaa");
});
$("#btn2").click(function(){
$("div:empty").css("background", "#ffbbaa");
});
$("#btn3").click(function(){
$("div:has(.mini)").css("background", "#ffbbaa");
});
$("#btn4").click(function(){
$("div:parent").css("background", "#ffbbaa");
//$("div:not(:empty)").css("background", "#ffbbaa");
});
});
</script>
</head>
<body>
<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
<input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
<input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
<input type="button" value="选择含有子元素(或者文本元素)的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>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
<!DOCTYPE px; }
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:contains('di')").css("background", "#ffbbaa"); }); $("#btn2").click(function(){ $("div:empty").css("background", "#ffbbaa"); }); $("#btn3").click(function(){ $("div:has(.mini)").css("background", "#ffbbaa"); });
$("#btn4").click(function(){ $("div:parent").css("background", "#ffbbaa"); //$("div:not(:empty)").css("background", "#ffbbaa");});
});
</script> </head> <body> <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" /> <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" /> <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" /> <input type="button" value="选择含有子元素(或者文本元素)的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> <div id="mover">正在执行动画的div元素.</div> </body></html>
jQuery选择器(内容过滤选择器)第四节的更多相关文章
- 黑马day16 jquery&内容过滤选择器&可见度选择器
内容过滤选择器的过滤规则主要体如今它所包括的子元素和文本内容上 .:contains(text) 使用方法: $("div:contains('John')") 返回值 集 ...
- jQuery 基本选择器 层次选择器 过滤选择器 内容过滤选择器 可见过滤选择器 属性过滤选择器 表单对象属性过滤选择器
- (7)Jquery1.8.3快速入门_内容过滤选择器
一.Jquery的内容过滤选择器: 内容过滤选择器: 1.:contains(text) 选取含有文本内容为text的元素 2. :empty 选取不包含子元素或者文本为空的元素 3.:has(sel ...
- JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器
1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...
- jQuery内容过滤选择器与子元素过滤选择器用法实例分析
jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...
- JQuery 内容过滤选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery选择器之内容过滤选择器Demo
测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- Jquery过滤选择器，选择前几个元素，后几个元素，内容过滤选择器等
一.基本过滤选择器(重点掌握下列八个):first 选取第一个元素 $("div:first").css("color","red");:l ...
- jQuery内容过滤选择器再探究（原创）
内容过滤选择器不算复杂,但还是有需要注意的地方
随机推荐
- 分布式系统中生成全局ID的总结与思考
世间万物,都有自己唯一的标识,比如人,每个人都有自己的指纹(白夜追凶给我科普的,同卵双胞胎DNA一样,但指纹不一样).又如中国人,每个中国人有自己的身份证.对于计算机,很多时候,也需要为每一份数据生成 ...
- TCP/IP 第二章
1, 以太网的封装格式.其中MTU的最小值为46字节,所以,ARP和RARP需要添加18字节的PAD.CRC是检验和.(循环冗余检验) 2,SLIP:(串行线路ip) 首尾一个end字符加以区分数据. ...
- 从入门到精通之Boyer-Moore字符串搜索算法详解
本文讲述的是Boyer-Moore算法,Boyer-Moore算法作为字符串搜索算法,兴趣之下就想了解这个算法,发现这个算法一开始还挺难理解的,也许是我理解能力不是很好吧,花了小半天才看懂,看懂了过后 ...
- MongoDB的全文检索(Text Search)功能
自己的项目中用到了mongodb,需要做一个搜索功能,刚开始不知道怎么搞,查了mongodb有个全文检索功能. 全文检索分为两步 第一,建立索引 db.stores.createIndex( { na ...
- DDL DML DCL TCL之不同
http://www.orafaq.com/faq/what_are_the_difference_between_ddl_dml_and_dcl_commands DDL Data Definiti ...
- ZOJ1654 Place the Robots
Zoj1654 标准解法:二分匈牙利. 写法各异嘛,看不懂或者懒得看也正常,如果想了解我思路的可以和我讨论的. 在练习sap,所以还是写了一遍: #include<cstdio> #inc ...
- sqlserver游标使用和循环
/*** 游标的使用 讲了这个多游标的优点,现在我们就亲自来揭开游标的神秘的面纱. 使用游标的顺序: 声名游标.打开游标.读取数据.关闭游标.删除游标. 1.3.1声明游标 最简单游标声明:DECLA ...
- Jquery仿京东分类导航层简单实现
<script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script& ...
- hiveQL去重
去重: 以id进行分组,然后取出每组的第一个 ; 以id进行分组,按照create_time降序排序后,然后取出每组的第一个 ; 将去重后的数据重新存储 ; 去重之后与其他表join算匹配数 sele ...
- Java多线程——创建线程的两种方式
创建线程方式一:继承Thread类. 步骤:1,定义一个类继承Thread类.2,覆盖Thread类中的run方法.3,直接创建Thread的子类对象创建线程.4,调用start方法开启线程并调用线程 ...