黑马day16 jquery&内容过滤选择器&可见度选择器
内容过滤选择器的过滤规则主要体如今它所包括的子元素和文本内容上
使用方法: $(”div:contains(’John’)”)
返回值 集合元素
说明:匹配包括给定文本的元素.这个选择器比較实用。当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.
使用方法: $(”td:empty”)
返回值 集合元素
说明:匹配全部不包括子元素或者文本的空元素
使用方法:$(”div:has(p)”).addClass(”test”)
返回值 集合元素
说明:匹配含有选择器所匹配的元素的元素.这个解释须要好好琢磨,可是一旦看了使用的样例就全然清楚了:给全部包括p元素的div标签加上class=”test”.
使用方法: $(”td:parent”)
返回值 集合元素
说明:匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变不包括子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/>
<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/>
<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色" id="b5"/> <h1>天气冷了</h1>
<h2>天气又冷了</h2> <div id="one">
id为one div </div> <div id="two" class="mini" >
id为two class是 mini div
<div class="mini" >class是 mini</div>
</div> <div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div> <div class="one"> </div>
<br>
<div id="mover" >
动画
</div>
<br> </body>
<script language="JavaScript">
//<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/>
$("#b1").click(function(){
$("div:contains('di')").css("background","red");
}); //<input type="button" value=" 改变不包括子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/>
$("#b2").click(function(){
$("div:empty").css("background","red");
});
//<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/>
$("#b3").click(function(){
$("div:has(.mini)").css("background","red");
});
//<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/>
$("#b4").click(function(){
$("div:parent").css("background","red");
});
//<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色" id="b5"/>
$("#b5").click(function(){
$("div:not(:contains('di'))").css("background","red");
});
</script> </html>
可见度过滤选择器是依据元素的可见和不可见状态来选择对应的元素
使用方法: $(”tr:hidden”)
返回值 集合元素
说明: 匹配全部的不可见元素。input元素的type属性为“hidden”的话也会被匹配到.意思是css中display:none和inputtype=”hidden”的都会被匹配到.相同,要在脑海中彻底分清楚冒号”:”,点号”.”和逗号”,”的差别.
使用方法: $(”tr:visible”)
返回值 集合元素
说明: 匹配全部的可见元素.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 改变全部可见的div元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 选取全部不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/>
<input type="button" value=" 选取全部的文本隐藏域, 并打印它们的值" id="b3"/>
<input type="button" value=" 选取全部的文本隐藏域, 并打印它们的值" id="b4"/> <!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4"> <h1>天气冷了</h1>
<h2>天气又冷了</h2> <div id="one">
id为one div </div> <div id="two" class="mini" >
id为two class是 mini div
<div class="mini" >class是 mini</div>
</div> <div class="visible" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div> <div class="visible" >
这是隐藏的
</div> <div class="one"> </div>
<br>
<div id="mover" >
动画
</div>
<br> </body>
<script language="JavaScript">
//<input type="button" value=" 改变全部可见的div元素的背景色为 #0000FF" id="b1"/>
$("#b1").click(function(){
$("div:visible").css("background","red");
});
//<input type="button" value=" 选取全部不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/>
$("#b2").click(function(){
$("div:hidden").show();
});
//<input type="button" value=" 选取全部的文本隐藏域, 并打印它们的值" id="b3"/>
$("#b3").click(function(){
$("input:hidden").each(function(i,obj){
alert(obj.value);
});
});
</script> </html>
黑马day16 jquery&内容过滤选择器&可见度选择器的更多相关文章
- 黑马day16 jquery&属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素 .[attribute] 使用方法: $("div[id]") ; 返回值 集合元素 说明:匹配包括给定属性的元素.样 ...
- 黑马day16 jquery&层次选择器
假设想通过DOM元素之间的层次关系来获取特定元素,比如后代元素,子元素,相邻元素,兄弟元素等,则须要使用层次选择器. 1 .ancestor descendant 使用方法: $("form ...
- 黑马day16 jquery入门
jquery: 1.jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.假设一个对象是jQuery对象,那么它就能够使用jQuery里的方法:$( ...
- 黑马day16 jquery案例演示
案例一: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
- (7)Jquery1.8.3快速入门_内容过滤选择器
一.Jquery的内容过滤选择器: 内容过滤选择器: 1.:contains(text) 选取含有文本内容为text的元素 2. :empty 选取不包含子元素或者文本为空的元素 3.:has(sel ...
- 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内容过滤选择器与子元素过滤选择器用法实例分析
jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...
- Jquery过滤选择器，选择前几个元素，后几个元素，内容过滤选择器等
一.基本过滤选择器(重点掌握下列八个):first 选取第一个元素 $("div:first").css("color","red");:l ...
随机推荐
- java中表示二进制、八进制、十进制、十六进制
1.进制 进制是一种记数方式 ,可以用有限的数字符号代表所有的数值.由特定的数值组成. 2.进制的表现形式 二进制: 由0和1两个数字组成. 八进制: 由0-7数字组成,为了区分与其他进制的数字区别, ...
- T-SQL 删除重复数据SQL
WITH cte AS ( SELECT roleid,permissionid, row_number() OVER(PARTITION BY roleid,permissionid ...
- linux使用yum的方式安装mysql实践
1.先检测是否已安装mysql ps -ef|grep mysql root : pts/ :: /bin/sh /usr/bin/mysqld_safe --datadir=/var/lib/mys ...
- 如何将一个div水平垂直居中？4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- JAVA爬虫代码
工程目录: 所需要的jar包为: jsoup-1.10.2.jar /** * Created by wangzheng on 2017/2/19. */ public class Article ...
- 64位win7下安装Boost 1.59.0 + boost.python 1.59.0 + gccxml + pygccxml + pyplusplus(py++)
由于安装过程中实在是出现了N多问题,所以不得不专门写个帖子来记录一下这破东西在Win7下的安装过程,避免以后还要再用的时候踩坑. 1.Boost简介 Boost库是一个可移植.提供源代码的C++库,作 ...
- 深入探讨List<>中的一个姿势。
List<>是c#中很常见的一种集合形式,近期在阅读c#源码时,发现了一个很有意思的定义: [DebuggerTypeProxy(typeof(Mscorlib_CollectionDeb ...
- CentOS7.x系统根目录分区扩容
说明:系统版本为 Linux version 3.10.0-327.el7.x86_64 step1. 查看现有磁盘信息,可以看出根分区有45G [root@DEV-CMDB-DB02 ~]# df ...
- EAS（学生管理系统）初建
一.确定开发使用的技术 本次开发EAS示例网站,使用Servlet+JSP+MySQL技术,其中包括使用bootstrap工具完成简易前端页面设计.所有数据实体与数据关系皆用数 ...
- 你应该学会的Postman用法
postman这个神器相信大家都用过,程序员作为非专业的测试人员,非常需要这么一款简单轻量级的restful测试工具,但是不知道你是否知道,postman的强大之处不只是测试一下接口,还有其他非常赞的 ...