黑马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 ...
随机推荐
- Apple 公司开发者账号添加团队成员
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- linux分析日志的一些常用方法
head -n 2016_05_23_access_log |grep "/859" 显示前10000行中包含 /859 的记录 增加 |wc -l 则改为输出记录数 cat 2 ...
- 5. 监视和ZooKeeper操作
ZooKeeper中的写入(write)操作是原子性和持久性的. 写入到大多数ZooKeeper服务器上的持久性存储中,可以保证写操作成功. 无论如何,ZooKeeper的最终一致性模型允许读取(re ...
- Java实现邮箱发送验证码
第一步,导入JAR包,JAR包下载地址[http://pan.baidu.com/s/1kVRvGyF] 正式代码: 首先书写一个工具类: MailUtil import javax.mail.*; ...
- 身为运维的你，怎么掌握python才不会失业
以前,我们都说Python是运维工程师的未来:现在,为什么大家都说不会Python的运维都将失业?运维必须懂开发,特别是python开发,已经形成大家的共识,不懂开发的运维,路会越走越窄. 而现在的情 ...
- python定时利用QQ邮件发送天气预报
大致介绍 好久没有写博客了,正好今天有时间把前几天写的利用python定时发送QQ邮件记录一下 1.首先利用request库去请求数据,天气预报使用的是和风天气的API(www.heweather.c ...
- c++/cmake /Android NDK 动态链接库交叉编译笔记
项目使用cmake管理,由于项目的需要,核心代码要求跨 Linux/Windows/Android 三平台.Windows和Linux都好说,但Android NDK费了一番功夫还是没有解决.临时的解 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- centos6.7安装openblas错误
centos系统:CentOS release 6.7 (Final)安装OpenBLAS # Install OpenBLAS at /usr/local/openblas git clone ht ...
- 企业级Tomcat部署实践及安全调优
1.1 Tomcat简介 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun和其他一些公司及个人 ...