JavaScript基础小结

最新推荐文章于 2025-08-15 09:01:53 发布

ForeverNagisa

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量300

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/ForeverNagisa/article/details/79591145

html5 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了JavaScript的基础知识，包括基本语法、DOM操作及事件处理等。通过示例代码展示了如何使用JavaScript来修改网页元素、响应用户交互并实现动态效果。

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

什么是JavaScript?

JavaScript 是一种轻量级的编程语言。

第一行代码

document.write(“Hello world”); 页面输出Hello world
console.log(“Hello world”); 控制台输出Hello world

JS 语法基础

计算机语言一些基础特点都很相近参考我之前写的java的语言基础

JS 示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    #first {
      width: 200px;
      height: 200px;
      background-color: red;

    }
  </style>
</head>
<div id="first"></div>
<input type="text" name="" value="" class="uName">
<input type="button" name="" value="不要点我">

<body>

</body>
<script type="text/javascript">
  var first = document.getElementById("first");
  first.style.width = "100px";
  first.style.backgroundColor = "blue";
  first.style.border = "3px rgb(231, 15, 80) solid";
  first.style.margin = "300px auto 0";

  // 修改内容 innerHTML 可以解析字符串里的标签
  // innerText 不能解析字符串中的标签
  first.innerHTML = "<p>你好</p>";
  // first.innerText = "<p>你好</p>";

  // 通过类名获取一组元素
  // uNames 是所有类名为 uName 的集合
  var uNames = document.getElementsByClassName("uName");
  // 获取 ,修改 输入框都使用 value
  uNames[0].value = "我是一个输入框";
  console.log(uNames[0].value);

  var button = document.getElementsByTagName("input")[1];
  var a = 1;
  // 添加点击方法 每次点击都会执行下列函数
  button.onclick = function() {
    console.log(a);
    uNames[0].value = a++;
    first.style.width = a * 10 + "px";
    first.style.height = "100px";
    first.style.transition = "1s";
  }
</script>

</html>

JS 事件

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      .redDiv {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>

  <body>
    <div class="redDiv">

    </div>
    <form class="" id="reg" action="index.html" method="post">
      <input type="text" id="uName" name="" value="">
      <input type="submit" id="sub" name="" value="">
      <input type="reset" id="reset" name="" value="">
    </form>
  </body>
  <script type="text/javascript">
    var redDiv = document.getElementsByClassName("redDiv")[0]
    var reg = document.getElementById("reg")
    var uName = document.getElementById("uName")
    // 鼠标事件
    redDiv.onmousemove = function() {
      console.log("鼠标移动");
    }
    redDiv.onclick = function() {
      console.log("单击事件");
    }
    redDiv.ondblclick = function() {
      console.log("双击事件");
    }
    redDiv.onmousedown = function() {
      console.log("鼠标按下事件");
    }
    redDiv.onmouseup = function() {
      console.log("鼠标抬起事件");
    }
    // 阻止默认事件 return false;
    redDiv.oncontextmenu = function() {
      console.log("鼠标右击事件");
      return false;
    }
    // over 和 out 会在鼠标从元素父级移到子级的时候触发 先触发out在触发over
    // leave 和 enter  从父级移到到子级不会触发 只有鼠标离开整个父级才会触发
    redDiv.onmouseover = function() {
      console.log("鼠标移入事件");
    }
    redDiv.onmouseout = function() {
      console.log("鼠标移出事件");
    }
    redDiv.onmouseenter = function() {
      console.log("鼠标enter移入事件");
    }
    redDiv.onmouseleave = function() {
      console.log("鼠标leave移入事件");
    }
    // 键盘事件 不区分大小写 可以识别系统按键
    // document.onkeydown = function() {
    //   console.log("down 键盘按下");
    // }区分大小写 不识别系统按键
    // document.onkeypress = function() {
    //   console.log("press 键盘按下");
    // }
    // document.onkeyup = function() {
    //   console.log("up 键盘抬起事件");
    // }
    // 表单

    uName.onchange = function() {
      console.log("change内容发生改变后触发");
    }

    uName.oninput = function() {
      console.log("input内容发生变化之后触发");
    }

    uName.onfocus = function() {
      console.log("聚焦");
    }
    uName.onblur = function() {
      console.log("失焦");
    }
    reg.onsubmit = function() {
      console.log("提交");
    }
    reg.onreset = function() {
      console.log("重置");
    }
    // Window事件
    window.onresize = function() {
      console.log("窗口尺寸发生变化");
    }
    window.onscroll = function() {
      console.log("窗口内容滚动");
    }
    window.onload = function() {
      console.log("窗口加载完毕");
    }
    redDiv.onclick = function(ev) {
      var evObj = ev || window.event;
      // 触发事件的元素 (触发事件的元素 不一定是绑定事件的元素)
      console.log(evObj.target);
      // 鼠标距离窗口顶部的坐标
      console.log(evObj.clientX);
      // 鼠标距离页面的坐标
      console.log(evObj.pageY);
      // 鼠标距离target顶部的坐标
      console.log(evObj.offsetY);

    }
    // 键盘事件
    document.onkeydown = function(ev) {
      // 标识了哪一个按键
      console.log(ev.keyCode);
      if (ev.keyCode == 66) {
        console.log("按了B键");
      }
      if (ev.keyCode == 66 && ev.metaKey) {
        console.log("按了 com + B 键");
      }
    }
    // 区分大小写 但是不支持特殊按键
    // down 不区分大小写 支持特殊按键
    document.onkeypress = function(ev) {
      console.log("press" + ev.keyCode);
    }
  </script>

</html>

正则表达式

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>

  </body>
  <script type="text/javascript">
    // 正则表达式
    // reg = /正则部分(定义规则)/正则属性
    // 正则属性 g 全局 i  不区分大小写
    var reg = /test/g
    var str = "hellowTESThowareyoutest"
    console.log(str.match(reg));
    // \d 代表数字
    var reg2 = /\d/g
    var str2 = ";awdawd+53434awd"
    console.log(str2.match(reg2));
    // \w 单词字符 数字 字母 下划线
    var reg3 = /\w/g
    var st3 = "awdqw_+-*/.,\';354564xzcsejhgmnAERVXZ"
    console.log(st3.match(reg3));
    // .匹配任意字符 (除去换行符 \n)
    var reg4 = /./g
    var str4 = "awdqw_+ -*/.\n,\';3 5"
    console.log(str4.match(reg4));
    // \s 匹配空格字符
    var reg5 = /\s/g
    console.log(str4.match(reg5));
    // \d 量词 数字匹配 {2,3} 表示 2位数 3 位数都可以
    var reg6 = /\d{2,3}/g
    var str6 = "234awdadaw65698"
    console.log(str6.match(reg6));
    // 方括号 2-6 6-8之间的数 {2} 表示两位数
    var reg8 = /[2-46-8]{2}/g
    var str8 = "3523897574548831244"
    console.log(str8.match(reg8));
    // ^ 不包含内容
    var reg9 = /[^123]/g
    var str9 = "1234567890"
    console.log(str9.match(reg9));
    // 小括号 匹配里面元素
    var reg1 = /3(4)|3(2)/g
    var str1 = "34546732164"
    console.log(str1.match(reg1));
    // 开头 和 结尾
    // 开头^  结尾 $ 匹配返回
    var re = /^34$/g
    var st = "34"
    console.log(st.match(re));

    var re2 = /^1[3-8]\d{9}$/g
    var st2 = "13547896521"
    console.log(st2.match(re2));
    // 邮箱 @前 (4-10位单词字符,开头必须是字母) @后 qq.com 163.com  或者 cn 或者 .com.cn
  </script>

</html>