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

   </body>

</HTML>

 

result:

  初始:

jquery 改变 body 背景 jquery修改背景颜色_使用jquery改变列表项的背景色

  点击任一按钮之后:

jquery 改变 body 背景 jquery修改背景颜色_使用jquery改变列表项的背景色_02