软件开发培训班 >> 编程开发 >> JavaScript

jquery css 选择器演示代码

　　本文标签：jquery,css,选择器

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

技术文章快速查找

拖动层效果，兼容IE和FF!

JS加jquery简单实现标签元素的显示或隐藏

ExtJS 2.0实用简明教程之Border区域布局

JQuery中对Select的option项的添加、删除、取值

jquery cookie的用法总结

基于jQuery的输入框无值自动显示指定数据的实现代码

javascript获取表格 td 中的内容

JS返回上一页实例代码通过图片和按钮分别实现

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建