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

时间：2023-03-10 08:14:25
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：

　　初始：

aaarticlea/png;base64,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" alt="" />

　　点击任一按钮之后：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1YAAACeCAIAAAC+bQx4AAAINElEQVR4nO3dQZLaRhSAYc7he2U/B/BJPDfwxt7mCMNqTsSsvSKLVCiilpqnRkJSv++rqRQIIeS4q/p3g4bTFQCAZE5bnwAAAK8mAQEA0pGAAADpSEAAgHQkIABAOuMJ+B0AgI68v7+HEvATAIAu/Pr16/PzM5qATcuKAADsS5l2EhAAoHMSEAAgHQkIAJCOBAQASEcCAgCk038C/iS98/m89TAEgH1ZMQFPp5FDjW5s2Cdu6/xgY+fz+XK5LDiiAKADWRLwi6wul4sEBICBFyXg7fbDvDuNmfW6AxIwOQkIAKV9JWDzwmGFBExOAgJAafkEHF3Di6zt3fYsNz5DAiYnAQGgtNYq4GDZr74KOCjC+LvGERIwOQkIAKVXJOBo3j187lIXhUjA5CQgAJRetApYbg8+/XkSMDkJCACl3SXg85cAD0jA5CQgAJRWScCy/4KXg1SM7hw5GQmYnAQEgNK6q4BTl/0OttxfOFw5WvmsyJlIwOQkIACU9vXtIPEEjJOAyUlAAChtvwoYedQqIM0kIACU1v0s4HXm5SASkMVJQAAorfLtIOWWWRd5RPaMk4DJSUAAKK34WcAGPgvI4iQgAJT2lYBrkIDJSUAAKElAOicBAaCUIgE/Pj4u5Lb1MASAfek/AfUfFwkIAP/XfwL+JL3z+bz1MASAfVk3AedeyTv3V0lHbJ0fbOx8PlsFBICBlybgw1/1t14Cbn1NApvxRjAAlF6dgFMPDTaWN5pJwOQkIACU1vqCuNGv96iH3WggSkCeJAEBoLTudwQPbsxKwKW+I04CJicBAaC0QQJO9d9oIFoF5EkSEABKe1kFlICsRAICQGkXCVhZI5SAPEkCAkBpm8tBrtOZWB4q+KJTJGByEhAAStusAl4n3gu+TuRjeUVI/AIRCZicBASA0u4SMLLxKgEJk4AAUHp1AtYvCg5unEUCJicBAaC0l18KM7XdKiBPkoAAUNrscpDRZwU3XiUgYRIQAErrrgIOtiyYgHESMDkJCAClVRJwigTk9SQgAJRemoCbkIDJSUAAKElAOicBAaCUIgE/Pj4u5Lb1MASAfek/AfUfFwkIAP/XfwL+Te+2HmIAcDwpEnDrT6OxIgkIAA0kIMcmAQGggQTk2CQgADSQgBybBASABhKQY5OAANBAAnJsEhAAGkhAjk0CAkADCcixSUAAaCABOTYJCAANJCDHJgEBoIEE5NgkIAA0kIAcmwQEgAYSkGOTgADQQAJybBIQABpIQI5NAgJAAwnIsUlAAGggATk2CQgADSQgxyYBAaCBBOTYJCAANFg9AU+n0+k0fszKUxpeaIoE7JsEBIAGqyTg6c7oxodduGAFSsC+SUAAaLBWAj7cfrtdpmFF8ATuScC+SUAAaLBuAg6ibTQB1yYB+yYBAaDB6quAkdurkoB9k4AA0GDFBLy9dXv/3/LubePibwH/SwL26u3t7UsCAkCTFS8HGWyp3F2VBOzS29vbnz9/viQgADTxewE5nlv/fUlAAGiyVgLOfWPXG8EE3ffflwQEgCYrJmD8boN4F0rAntz3n88CAkAzCchhDPrPZwEBoJk3gjmG0f77koAA0GQvq4D1yJtKxsiZSMC+SUAAaJAiAelbZBgAAPf6fyMYAICBF60CPnx07v4AADTr/1dDAwAwIAEBANKRgAAA6UhAAIB0JCAAQDoSEAAgHQkIAJCOBAQASEcCAgCkIwEBANKRgAAA6cxIwN+/f38HAKALoQT88ePHJwAAHXmcgAAAdEwCAgCkIwEBANKRgAAA6UhAAIB0JCAAQDoSEAAgHQkIAJCOBAQASEcCAgCkIwEBANKRgAAA6UhAAIB0JCAAQDoSEAAgHQkIAJCOBAQASGdHCfjXt/cF95zaZ+72J0+DtIxnAPbs2QT869t7/OfhoeIv2rZb/Yn3j0bO35TZH+MZgCRWWQWszCVT89Csp8Tn48EsGD9+27NMol0yngHoTy0Bm+eAhvWPWdNPZAFm1vw6NUdGZuJZJ0bFbpvDeAagP8skYNuSxvW/OWawQ2RGnLVD5PjlmTSso9TPirr9JKDxHDkrAA5tmTeCG6ao+4ce7v/MKkjk7ugBR6fJ20NticAhGM/GM0D3tk/AyvwUfLmpwwantKmXvj+xuXNw/fTYOeN51ukBcESTCTg1u4xOPHOnqPKhxafMhruj202Zr1FZABssZZUDb2rnwWGnblfuGs+R0wPgiB6sAlZmsuBDD+/Wj/ZwMp5K0rnnU06cpszXi4yxWcVzuz3191t/rYa79aMZzwDsRHsCTu029+5ge32+iexzfckbZ/HjExfpnsr2YELFj9lwd7DdeAZgn2Yk4HXsjbZy+6wpqtweDM1gm0Z2qHdAZNWEpTyZgJHDBo9pPAPQt3kJWHkoPodFpvnRZ1WmtLq5KzHlZNkwZZpWG2ySgKOPGs+zXhSAw1nms4D3W4JrGLOmwKmHRrfEfx7+ueKvO3XOzBL5d8VgY/zvceoVm5fxBrsZzwAcyLwELOebcv/IlFmfhB7O8VM7RP4U9Ufnrjw1vyij6g1UbrwWI6TsofqgfTg2jOf4PgAcyEgCBpdPymeV8+7Ung1bbhunHqqv9EQeqs+L5d3gqgx1wfG20v/PyD9mjGfjGaA/wwSMzAR+4j+b/KUeyOZ/QX5m/Ww9XgBYzDLfDgIAwIFIQACAdCQgAEA6EhAAIB0JCACQjgQEAEhHAgIApCMBAQDSkYAAAOlIQACAdCQgAEA6EhAAIB0JCACQjgQEAEhHAgIApCMBAQDSkYAAAOlIQACAdCQgAEA6EhAAIJ1/AHQIEyIdbJ82AAAAAElFTkSuQmCC" alt="" />

相关文章