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：

　　初始：

　　点击任一按钮之后：

posted on 2016-05-03 19:24 Newbie_小白阅读(4525) 评论(0) 编辑收藏举报