005 jquery过滤选择器-----------（内容过滤选择器）

1.介绍

2.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <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-3.2.1.min.js"></script>

 <script type="text/javascript">

     $(function(){

         //选择 含有文本 'di' 的 div 元素

         $("#btn1").click(function(){

             $("div:contains('di')").css("background","#abc");

         });

         //选择不包含子元素(或者文本元素) 的 div 空元素

         $("#btn2").click(function(){

             $("div:empty").css("background","#ffa");

         })

         //选择含有 class 为 mini 元素的 div 元素

         $("#btn3").click(function(){

             $("div:has(.mini)").css("background","#ffa");

         })

         //选择含有子元素(或者文本元素)的div元素

         $("#btn4").click(function(){

             $("div:parent").css("background","#ffa");

         })

     })

 </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>

     <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>

005 jquery过滤选择器-----------（内容过滤选择器）的更多相关文章

jQuery选择器之内容过滤选择器Demo
测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
jquery选择器之内容过滤选择器
先写出DOM元素的HTML结构: <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray ...
jQuery选择器(内容过滤选择器)第四节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
jQuery 基本选择器层次选择器过滤选择器内容过滤选择器可见过滤选择器属性过滤选择器表单对象属性过滤选择器
jquery表单内容过滤
效果: 输入筛选字段后显示效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http ...
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
jQuery选择器内容过滤一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合示例: ? 1 2 $("div.mini ...
JQuery -- 介绍，选择器及其示例，基本选择器，层次选择器，过滤选择器，表单选择器
1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...
jQuery--内容过滤和可见性过滤
一.内容过滤 1.内容过滤选择器介绍 :empty 当前元素是否为空(是否有标签体) :contains(text) 标签体是否含有指定的文本 :has(...) ...
JQuery 内容过滤选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
黑马day16 jquery&内容过滤选择器&可见度选择器
内容过滤选择器的过滤规则主要体如今它所包括的子元素和文本内容上 .:contains(text) 使用方法: $("div:contains('John')") 返回值集 ...

随机推荐

keystone v3.0与2.0的区别
参看http://blog.chinaunix.net/uid-21335514-id-3497996.html
makefile 和编译条件的简略总结
#-g gdb可看代码 #-fPIC -fPIC 的使用,会生成 PIC 代码,.so 要求为 PIC,以达到动态链接的目的,否则,无法实现动态链接. -fPIC 作用于编译阶段,告诉编译器产生与位置 ...
P3173 [HAOI2009]巧克力 && P1324 矩形分割
题目描述出于某些方面的需求,我们要把一块N×M的木板切成一个个1×1的小方块. 对于一块木板,我们只能从某条横线或者某条竖线(要在方格线上),而且这木板是不均匀的,从不同的线切割下去要花不同的代价. ...
JavaScript事件模拟元素拖动
一.前言: 最近要实现一个元素拖放效果,鼠标拖动元素并且定位元素,首先想到的是HTML5中的拖放,在HTML5中,有一个draggable属性,且有dragstart, dragover, drop等 ...
[机器学习]SVM---硬间隔最大化数学原理
注:以下的默认为2分类 1.SVM原理: (1)输入空间到特征空间得映射所谓输入空间即是输入样本集合,有部分情况输入空间与特征空间是相同得,有一部分情况二者是不同的,而模型定义都是定义到特征空间的, ...
linux的lemon安装示范
$First$: 1. 准备好 lemon原文件 2. 解压压缩包(名字必须是lemon) 第二步:找到readme.md这个文件第三步:了解一下安装指南第四步:打开终端注意:源代码目录就是 ...
[Alg::Trick]小白鼠找毒酒
题目来源:牛客网 https://www.nowcoder.com/questionTerminal/c26c4e43c77440ee9497b20118871bf1 8瓶酒一瓶有毒,用人测试.每次测 ...
redhat7配置本地yum源
1.首先是要有一个iso文件,并将这个文件挂载到某个目录挂载: 配置: 检验: yum list 现在你就可以在没有网的情况下,安装软件了~~~
MapReduce--shuffle
一.Shuffle简介 Shuffle的正常意思是洗牌或弄乱,shuffle的大致范围就是把map task的输出结果有效的传送到Reduce端.也可以这样理解,shuffle描述着数据从map ta ...
linux笔记_day11_shell编程
1.条件测试类型: 整数测试字符测试文件测试条件测试的表达式: [ expression ] 必须有空格 [[ expression ]] test expression 整数比较 : -eq ...

005 jquery过滤选择器-----------（内容过滤选择器）

005 jquery过滤选择器-----------（内容过滤选择器）的更多相关文章

随机推荐

热门专题