1.先引入一段html是JavaScript操作 让表格隔行变色
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){ //页面所有元素加载完毕
var item = document.getElementById("tb"); //获取id为tb的元素(table)
var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素
var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有tr元素
for(var i=0;i < trs.length;i++){//循环tr元素
if(i%2==0){ //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色.
}
}
}
</script>
</head>
<body>
<table id="tb">
<tbody>
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行</td><td>第四行</td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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;
}
div.mini {
width:55px;
height:55px;
background-color:#aaa;
font-size:12px;
}
div.hide {
display:none
}
</style>
</head>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
//jquery获得标签的对象
$(document).ready(function(){
//span标签 和id的two的标签的背景颜色发生改变
//基本选择器
//1.#id element .class * 最常用的是前三个
$("span,#two").css("background","#bbffaa");
//2.层级选择器
// $("body div") 表示body内所有div的颜色
//$("body div").css("background","red");
//$("body > div") 表示body内的所有子元素
//$("body > div").css("background","blue");
//改变class为one的下一个同辈元素 这个一般用$(".one").next("div")来取代
//$(.one).nextAll("div")表示样式为one以后的所有的d标签
//$(.one).siblings("div")选取所有同辈元素 无论前后位置
$(".one + div").css("background","yellow");
//3.过滤选择器 改变第一个元素的背景
//$("div : first").css("background","#bbffaa")
//$("div:last") 表示最后一个div
//$("div:not(.one)") 表示class不为one的div
//$("div:even")表示索引为偶数的div "even"表示偶数 "odd"表示偶数
//$("div: eq(3)")表示索引为3的div "gt"表示大于 "lt表示小写
//$(":focus")选择聚焦的标签
$(":focus").css("background","yellow");
});
//之后还有内容选择器 属性选择器 等 都大大方便了我们标签的操作
//以上面的选择器可以看出当我改变间隔行的颜色是很容易的 而不像JavaScript操作时还要进行遍历 这也就是jquery的好处之一
</script>
<body>
<!-- 测试元素 -->
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="two">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="two">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="test">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">
style的display为"none"的div
</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
<button>选择当前获取焦点的所有元素</button>
</body>
</html>