Jquery(五)过滤选择器之基本过滤
2017-05-02 17:28
477 查看
☆ 1. jQuery过滤选择器之基本过滤
<!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(){ //添加动画 function demo(){ $("#s01").slideToggle("slow",demo); } demo(); //手动重置 $("#but").click(function(){ $("*").removeAttr("style"); }); //<input type="button" id="but2" value="改变第一个 div 元素的背景色为红色"/> $("#but2").click(function(){ $("div:first").css("background","red"); }); //<input type="button" id="but3" value="改变class不为one的所有div元素的背景色为红色"/> $("#but3").click(function(){ $("div:not('.one')").css("background","red"); }); //<input type="button" id="but4" value="改变索引值为偶数的div元素的背景色为红色"/> $("#but4").click(function(){ $("div:even").css("background","red"); }); //<input type="button" id="but5" value="改变索引值为大于 3 且为奇数的 div元素的背景色为红色"/> $("#but5").click(function(){ $("div:gt(3):odd").css("background","red"); }); //<input type="button" id="but6" value="改变当前正在执行动画的所有元素的背景色为红色"/> $("#but6").click(function(){ $(":animated").css("background","red"); }); }); </script> </head> <body> <input type="button" id="but" value="手动重置"/> <input type="button" id="but2" value="改变第一个 div 元素的背景色为红色"/> <input type="button" id="but3" value="改变class不为one的所有div元素的背景色为红色"/> <input type="button" id="but4" value="改变索引值为偶数的div元素的背景色为红色"/> <input type="button" id="but5" value="改变索引值为大于 3 且为奇数的 div元素的背景色为红色"/> <input type="button" id="but6" value="改变当前正在执行动画的所有元素的背景色为红色"/> <h2>jQuery过滤选择器 基本过滤</h2> <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> <span id="s01">正在执行动画的span</span> <span >正在执行动画的span</span> </body> </html>
相关文章推荐
- 【5】jQuery学习——入门jQuery选择器之过滤选择器-基本过滤选择器
- jquery基本过滤选择器
- Jquery——基本过滤选择器
- JavaScript学习笔记8-jQuery基本过滤选择器深度解析
- JQuery的基本选择器使用总结以及过滤,文本,可见度的选择代码
- jQuery基本过滤选择器
- jquery选择器之基本过滤选择器
- JQuery -- 介绍,选择器及其示例, 基本选择器,层次选择器,过滤选择器,表单选择器
- jquery选择器之基本过滤选择器
- jQuery过滤选择器-基本过滤选择器
- jQuery基本过滤选择器
- jquery选择器之基本过滤选择器
- jQuery基本过滤选择器使用介绍
- JQuery学习笔记-基本过滤选择器
- Jquery过滤选择器之基本过滤选择器
- 【代码片段】jQuery测试基本过滤选择器
- jQuery选择器 基本选择器 层次选择器 表单选择器 过滤选择器 练习 事例
- JQuery基本过滤选择器与表单对象过滤器
- 使用jQuery基本过滤选择器
- 一步一步学习 JQuery (三) 过滤选择器:基本过滤选择器 && 内容过滤选择器 && 可见性过滤选择器