黑马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程序员第二轮面试11个问题，你会几个？
此前,分享了阿里巴巴.网易.百度等多家名企的JAVA面试题. 这也引来了不少程序员网友们的围观. 其中,也有相当一部分网友是已经从事Java开发好多年的程序员,当他们阅读完JAVA面试题的反应是:一个 ...
- PHP实现前台页面与MySQL的数据绑定、同步更新
今天我来给大家介绍一个PHP-MySQL的小项目. 使用 PHP和前台Ajax 实现在前台对MySQL数据库中数据的增.删等操作语句功能. 如果有问题,欢迎拍砖~ 首先,我们先做好前台HTML.CSS ...
- Unit Of Work之我见
本人以前写程序都是瞎写,根本没有啥模式也没有啥方法. 近一年来学习了传智的一些课程,感觉马伦老师很有才,很强大,所以学来了一个模式(应当叫模式吧,该我也不知道叫啥哈). 就是在DAL层封装一个DbSe ...
- 入坑第二式 golang入坑系统
史前必读: 这是入坑系列的第二式,如果错过了第一式,可以去gitbook( https://andy-zhangtao.gitbooks.io/golang/content/ )点个回放,看个重播.因 ...
- 【JDK1.8】JDK1.8集合源码阅读——TreeMap（一）
一.前言 在前面两篇随笔中,我们提到过,当HashMap的桶过大的时候,会自动将链表转化成红黑树结构,当时一笔带过,因为我们将留在本章中,针对TreeMap进行详细的了解. 二.TreeMap的继承关 ...
- HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- Mac安装Elasticsearch时提示：No Java runtime present, requesting install.
没有安装java的童鞋可以先去安装一下,地址:https://www.java.com/zh_CN/ 安装之后还是提示如下错误: ➜ elasticsearch-2.4.3 bin/elasticse ...
- 谷歌浏览器 插件安装配置Momentum chrome
总之一句话就是这个Momentum插件可以把你的谷歌弄的漂亮一些,来搞一波 下载地址 http://www.cnplugins.com/down/predownnew.aspx?id=33842 下载 ...
- npoi导入导出
NPOI是指构建在POI 3.x版本之上的一个程序,NPOI可以在没有安装Office的情况下对Word或Excel文档进行读写操作. NPOI是一个开源的Java读写Excel.WORD等微软OLE ...
- nginx使用replace-filter-nginx-module实现内容替换
有时候我们想对响应(例如PHP接口)返回的内容做些字符串,虽然可以使用各语言代码相关方法(例如PHP的str_replace)进行替换,但是在nginx层面替换是更方便的,无需修改代码. 约定:本文源 ...