Demo-jQuery常用选择过滤器
2016-07-25 16:49
513 查看
<!DOCTYPE html> <html> <head> <title>test</title> <script type="text/javascript" src="./jquery-1.7.2.min.js"></script> <style type = "text/css"> div,span,p { width: 140px; background: #aaa; height: 140px; margin:5px; border:#000 1px solid; float:left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript"> $(function(){ $("#one").css( "background", 'red' ); $("div").css("background","green"); $("span,#two").css("background","yellow"); $("div div").css("background","black"); $("#one > .mini").css("background","white"); $("div:last").css("background","blue");//选取最后一个div $("div:not(.mini)").css("background","red");//选取class不为mini的所有div $("div:odd").css("background","blue");//选取所有奇数索引的div $("div:eq(4)").css("background","red");//选取指定索引下的div $("div:gt(2)").css("background","white");//选取大于指定div $(":header").css("color","yellow");//选取所有h元素 $(":focus").css("background","black"); $("div:contains('one')").css("background","white");//获取包含‘one’内容的div $("div:empty").css("background","red");//获取空div $("div:has('.mini')").css("background","yellow");//获取div下minidiv $(":hidden").show(5000);//获取所有隐藏的元素,并show出来 $(":animated").css("background","green");//改变执行动画的颜色 }); </script> </head> <body> <h1>32</h1> <div class="one" id="one"> class one id one <div class="mini">div1_1</div> </div> <div class="one" id="two" title="test"> class one id two <div class="mini" title="other">div2_1</div> <div class="mini" title="test">div2_2</div> </div> <div class="one"> class one <div class="mini">div3_1</div> <div class="mini">div3_2</div> <div class="mini">div3_3</div> <div class="mini"></div> </div> <div class="one"> class one <div class="mini">div4_1</div> <div class="mini">div4_2</div> <div class="mini">div4_3</div> <div class="mini" title="tesst">title tesst</div> </div> <div style="display: none" class="none"> display为none的div </div> <div class="hide">class hide</div> <div> <input type="hidden" size="8"></input> </div> <span id="mover"> mover </span> </body> </html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码