鼠标事件(点击换色)分别使用js和jQuery代码实现

简介: 鼠标事件(点击换色)分别使用js和jQuery代码实现

js代码实现:按键盘时换色,不按是另一个色。

<body>
    输入你的名字: <input type="text">
    <p>在以上输入框中输入你的名字。</p>
 
    <script type="text/JavaScript">
      let one=document.getElementsByTagName('input')[0];
      console.log(one);
      one.addEventListener("keydown", function() {
        console.log("移入");
        one.style.backgroundColor="yellow";
      });
      one.addEventListener("keyup", function() {
        console.log("移入");
        one.style.backgroundColor="pink";
      });
    </script>
  </body>

jQuery代码实现

<body>
    输入你的名字: <input type="text">
    <p>在以上输入框中输入你的名字。</p>
</div>
<script type="text/JavaScript" src="js/jquery-3.4.1.js"></script>
    <script type="text/JavaScript">
      $(document).ready(function(){
        $("input").keydown(function(){
            $("input").css("background-color","yellow");
        });
        $("input").keyup(function(){
            $("input").css("background-color","pink");
        });
    });
    </script>
目录
相关文章
|
14天前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
16天前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
2天前
|
JavaScript 前端开发 UED
网站内容禁止复制的js代码
【10月更文挑战第2天】
|
2天前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
13 1
|
14天前
|
存储 JavaScript 前端开发
改进JavaScript代码,给水果有序赋色
改进JavaScript代码,给水果有序赋色
|
16天前
|
存储 JSON JavaScript
JavaScript帮我编写快递自动分拣的代码,区分省份市区县城乡镇
JavaScript帮我编写快递自动分拣的代码,区分省份市区县城乡镇在JavaScript中编写一个用于快递自动分拣的代码,区分省份、市区、县、城乡镇,通常意味着你需要一个数据结构来存储这些地理区域的信息,并编写逻辑来根据快递地址中的信息将其分配到正确的分类中。 这里,我将提供一个简化的示例,说明如何使用JavaScript对象和函数来实现这一功能。请注意,这个示例是高度简化的,并且假设你已经有了某种方式(如正则表达式或API调用)来从快递地址中提取省份、市区、县等信息。 ----------------------------------- ©著作权归作者所有:来自51CTO博客作者goS
|
4天前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
7 0
|
5天前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
5天前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
|
5天前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法