Jquery(六)过滤选择器之内容过滤
2017-05-03 09:37
429 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>jQuery过滤选择器 内容过滤</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> span,div{ width:140px; height:140px; background:#aaa; margin-right:10px; border:1px solid black; float:left; } .bgRed{ width:55px; height:80px; } </style> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //手动重置 $("#but").click(function(){ $("*").removeAttr("style"); }); //添加动画 function demo(){ $("#s01").slideToggle("slow",demo); } demo(); //<input type="button" id="but2" value="改变含有文本 ‘di’ 的 div元素的背景色为红色"/> $("#but2").click(function(){ $("div:contains('di')").css("background","red"); }); //<input type="button" id="but3" value="改变不包含子元素(或者文本元素)的div元素背景色为红色"/> $("#but3").click(function(){ $("div:empty").css("background","red"); }); //<input type="button" id="but4" value="改变含有 class 为 bgRed元素的div元素的背景色为红色"/> $("#but4").click(function(){ $("div:has('.bgRed')").css("background","red"); }); //<input type="button" id="but5" value="改变含有子元素(或者文本元素)的div元素的背景色为红色"/> $("#but5").click(function(){ $("div:parent").css("background","red"); }); }); </script> </head> <body> <input type="button" id="but" value="手动重置"/> <input type="button" id="but2" value="改变含有文本 ‘di’ 的 div元素的背景色为红色"/> <input type="button" id="but3" value="改变不包含子元素(或者文本元素)的div元素背景色为红色"/> <input type="button" id="but4" value="改变含有 class 为 bgRed元素的div元素的背景色为红色"/> <input type="button" id="but5" value="改变含有子元素(或者文本元素)的div元素的背景色为红色"/> <p></p> <div class="one" id="one"> class为one id为one的div <div class="bgRed">class为bgRed的div</div> </div> <div class="one"> class为one的div <div class="bgRed">class为bgRed的div</div> <div class="bgRed">class为bgRed的div</div> </div> <div class="one" id="two"> class为one id为two的div <div class="bgRed">class为bgRed的div</div> </div> <div></div> <span id="s01">正在执行的动画</span> </body> </html>
相关文章推荐
- jquery内容过滤选择器、属性过滤选择器和jquery可见度过滤选择器
- jQuery内容过滤选择器
- jquery选择器之内容过滤选择器
- jQuery(2-4)内容过滤选择器
- 锋利jquery---内容过滤选择器(第二章)
- jquery:内容过滤选择器和属性过滤选择器
- 使用jQuery内容过滤选择器选择元素实例讲解
- jquery选择器之内容过滤选择器
- jQuery内容过滤选择器选择元素实例讲解
- jQuery内容过滤选择器用法分析
- 【6】jQuery学习——入门jQuery选择器之过滤选择器-内容过滤选择器
- jquery内容过滤选择器
- jQuery的选择器——内容过滤选择器
- jquery选择器之内容过滤选择器
- jQuery之内容过滤选择器
- jQuery内容过滤选择器
- jQuery内容过滤选择器
- 【代码片段】jQuery测试内容过滤选择器
- jquery选择器之内容过滤选择器详解
- jquery选择器之内容过滤选择器