web前端javascript+jquery知识点总结

本文链接：https://blog.youkuaiyun.com/xiamaocheng/article/details/104376405

本文深入解析JavaScript中的常见事件，包括click、mouseover/out、change、select等，通过实例展示如何响应用户操作，实现动态网页效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript常用的事件使用方法

onMouseOut鼠标没有经过时的状态

1,onclick鼠标点击按钮,当鼠标点击按钮时触发demo()函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的事件</title>
</head>

<body>

<button οnclick="demo()">按钮</button> 
<script>
function demo(){
alert("Hello");
}
</script>
</body>
</html>

2.onMouseOver(鼠标移入) 和 onMouseOut(鼠标未移入)

完成以下需求:设定一个宽高都为100px的盒子,当鼠标放到盒子上的时候盒子内的内容为hello,当鼠标移走的时候盒子里的内容为word

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的事件</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background: pink;
        }
    </style>
</head>
 
<body>
 
    <!--onMouseOver(鼠标移入)  和  onMouseOut(鼠标未移入) -->
    <div class="box" οnmοuseοver="onOut(this)" οnmοuseοut="onOver(this)"></div>
    <script>
        function onOver(ooj){
            ooj.innerHTML = "hello";
        }
        function onOut(ooj){
            ooj.innerHTML = "world";
        }
    </script>
    
</body>
</html>

3.change 事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的事件</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background: pink;
        }
    </style>
</head>
<body>
    <!--onChange文本内容改变事件-->
    请输入内容:<input type="text" οnchange="onCh()">
    <script>
        function onCh(bg){
           alert("内容改变了")
        }
    </script>
 
</body>
</html>

3,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的事件</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background: pink;
        }
    </style>
</head>
 
<body>
  
    <!--onSelect文本框选中事件-->
    <!--需求:当输入栏内的字体被选中的时候,输入框的背景色会变成粉色-->
    请输入内容:<input type="text" οnselect="onSelectDemo(this)">
    <script>
        function onSelectDemo(bg){
            bg.style.background="pink";
        }
    </script>
</body>
</html>