本文介绍了一段使用jQuery操作DOM元素样式的示例代码，展示了如何通过jQuery选择器选取特定元素并更改其样式。
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#two{width:100px;height:100px;border:1px solid #000;}
div{width:200px;height:100px;border:1px solid #000;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
//$("ul li:nth-child(1)").css("background","yellow")----父亲ul里面的儿子li，第一个li的元素改变样式
//$("ul li:nth-child(even)").css("background","yellow")-----每个父元素下的索引值为偶数的样式
//$("ul li:nth-child(odd)").css("background","yellow")-----每个父元素下的索引值为奇数的样式
//$("div p:only-child").css("background","yellow")---------只有一个子元素时改变样式
})
</script>
</head>
<body>
<table width="430" border="1" cellspacing="2" cellpadding="10">
<tr id="one">
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
</table>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
<div>
<p>1</p>
</div>
</body>
</html>
扫一扫
8198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
