zoukankan      html  css  js  c++  java
  • 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:

      初始:

      点击任一按钮之后:

  • 相关阅读:
    November 13th 2016 Week 47th Sunday The 1st Day
    November 12th 2016 Week 46th Saturday
    November 11th 2016 Week 46th Friday
    November 10th 2016 Week 46th Thursday
    November 9th 2016 Week 46th Wednesday
    November 8th 2016 Week 46th Tuesday
    windows 7文件共享方法
    Win7无线网络共享设置方法
    常量指针和指针常量
    如何查找局域网的外网ip
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5456265.html
Copyright © 2011-2022 走看看