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:

  初始:

  点击任一按钮之后:


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM