html:
<HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta charset="utf-8" />
<title></title>
<!--引入jquery库-->
<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
<script type="text/javascript">
function setColorByJs(){
// 获取input元素集合
var aInput=document.getElementsByTagName("input");
for(var i=0;i<aInput.length;i++){
aInput[i].style.background="#efefef";
}
var aTextarea=document.getElementsByTagName("textarea");
for(var i=0;i<aTextarea.length;i++){
aTextarea[i].style.background="#efefef";
}
}
// :input表示选择表单中的input,select,textarea,button元素,input仅仅选择input元素。
function setColorByjQuery(){
$(":input").css("background","#efefef");
}
</script>
</head>
<body>
<!--表单元素-->
<form action="" id="form">
<fieldset>
<label><span>姓名:</span><input type="text"/></label><br />
<label><span>邮件:</span><input type="text"/></label>
<div class="wrapper"><span>留言:</span><textarea></textarea></div>
</fieldset>
</form>
<!--操作按钮-->
<div class="wrapper">
<a href="#" class="button" onclick="setColorByJs()">js更改表单颜色</a>
<a href="#" class="button" onclick="setColorByjQuery()">jquery更改表单颜色</a>
</div>
</body>
</HTML>
result:
初始:
点击任一按钮之后: