这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章对于刚开始学习 jquery 的 CSS 选择器的朋友是个不错的参考,大家可以看实例演示即可。
效果如图所示:核心代码:
- <script type="text/javascript">
- $('#one').css("background","#fff");
- $('div').css("background","#fff");
- $('body div').css("background","#bbffaa");//改变body内所有div的属性
- $('div > span').css("background","#bbffaa").css("color","red").css("font-size","12px");//改变所有div下的span元素的属性
- $('#two >.mini').css("background","red");//id为two的div内的所有class为mini的元素的属性
- $('#two').siblings("div").css("color","green");//选取#two同辈的div元素,无论前后位置
- $('div:first').css("background","red");
- $('div:gt(1)').css("background","#fff");//索引值大于1的所有div元素
- $('div:lt(1)').css("background","yellow");
- $('div:not(.one)').css("color","#cccccc");//改变class不为one的div元素
- $('div:even').css("font-size","15px");//索引号为偶数的div
- $('div:odd').css("font-size","12px");//索引号为奇数的div
- $('div:contains(other)').css("font-size","10px");//设置含有文本other的div元素
- $('div:has(.mini)').css("color","#bbffaa");//设置含有class为mini元素的<div>元素的背景色
- $('div:parent').css("color","#ffcccc");//改变含有子元素(包括文本)的div元素的属性
- $('div:hidden').show(3000);//获取隐藏的div
- $('div:visible')//获取可见的div
- $("div[title=test]").css("background","black");//设置title为test的div
- $("div[.mini][title=test]").css("color","red");//设置class为mini title为test的div
- </script>
完全演示代码:
[Ctrl+A 全选 注:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- jquery css 选择器演示代码
- </title>
- <style>
- div,span,p{ width:140px; height:140px; margin:5px; background:#aaa; border:#000
- 1px solid; float:left; font-size:17px; font-family:Verdana, Arial, Helvetica,
- sans-serif; } div .mini{ width:55px; height:55px; background-color:#aaa;
- font-size:12px; }
- </style>
- <script language="javascript" src="http://img.jb51.net/jslib/jquery/jquery14.js"
- type="text/javascript">
- </script>
- </head>
- <body>
- <div>
- id为one class为one
- <div>
- class为mini
- </div>
- </div>
- <div>
- <div title="other">
- class 为mini,title为other
- </div>
- <div title="test">
- class为mini,title为test
- </div>
- </div>
- <div>
- <div title="test">
- class for mini,title for test
- </div>
- the span under div
- </div>
- <div>
- style for display none's div
- </div>
- <script type="text/javascript">
- $('#one').css("background", "#fff");
- $('div').css("background", "#fff");
- $('body div').css("background", "#bbffaa"); //改变body内所有div的属性
- $('div > span').css("background", "#bbffaa").css("color", "red").css("font-size", "12px"); //改变所有div下的span元素的属性
- $('#two >.mini').css("background", "red"); //id为two的div内的所有class为mini的元素的属性
- $('#two').siblings("div").css("color", "green"); //选取#two同辈的div元素,无论前后位置
- $('div:first').css("background", "red");
- $('div:gt(1)').css("background", "#fff"); //索引值大于1的所有div元素
- $('div:lt(1)').css("background", "yellow");
- $('div:not(.one)').css("color", "#cccccc"); //改变class不为one的div元素
- $('div:even').css("font-size", "15px"); //索引号为偶数的div
- $('div:odd').css("font-size", "12px"); //索引号为奇数的div
- $('div:contains(other)').css("font-size", "10px"); //设置含有文本other的div元素
- $('div:has(.mini)').css("color", "#bbffaa"); //设置含有class为mini元素的<div>元素的背景色
- $('div:parent').css("color", "#ffcccc"); //改变含有子元素(包括文本)的div元素的属性
- $('div:hidden').show(3000); //获取隐藏的div
- $('div:visible') //获取可见的div
- $("div[title=test]").css("background", "black"); //设置title为test的div
- $("div[.mini][title=test]").css("color", "red"); //设置class为mini title为test的div
- </script>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0422/284844.html