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