js和jquery修改背景颜色的区别

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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" class="button" onclick="setColorByjQuery()">jquery更改表单颜色</a>
</div>

</body>

</HTML>

result:

  初始:

  点击任一按钮之后:

原文地址:https://www.cnblogs.com/theWayToAce/p/5456265.html