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>

完全演示代码:

<！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>id为one class为one class为mini class 为mini,title为other class为mini,title为test class for mini,title for test <span style="width:55px; height:55px;">the span under div</span>style for display none"s 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: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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]