笔记：JavaScript

最新推荐文章于 2024-03-16 13:21:00 发布

桂圆桂圆车厘子

最新推荐文章于 2024-03-16 13:21:00 发布

阅读量69

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_45080791/article/details/108973382

版权

笔记专栏收录该内容

62 篇文章 0 订阅

订阅专栏

JavaScript

特性

脚本语言(运行过程中逐行解释)
基于对象（可创建、使用对象）
简单（数据类型没有严格要求）
动态性（不需要经过web服务器就可以对用户输入做出响应）
跨平台性

编写位置

1.写在html中<script>标签中
2.写在外部的.js文件中，然后通过script标签引入

JavaScript的事件驱动

1.用户事件：用户操作，例如单击、鼠标移入、鼠标移出等
2.系统事件：由系统触发的事件，例如文档加载完成
常用的事件
onload
onclick
onblur
onfocus
onmouseover
onmouseout

BOM

Borwser Object Model浏览器对象模型
浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Windows对象是BOM的顶层对象，其他对象都是该对象的子对象
常用的对象（window的子对象）
document history location screen navigator farmes

DOM

Document Object Model 文档对象模型
document对象：window对象的一个属性，代表当前HTML文档，包含了整个文档的树形结构，获取documen对象的本质方法是：window.document。
元素查询
根据id值查询
document.getElementById(“id值”) 返回一个具体元素节点
document.getElementsByTagName(“标签名”) 返回元素节点数组
document.getElementsByName(“name值”) 元素节点数组
例如：
需求：按下button按钮后，会出现字符

<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2020/10/9
  Time: 13:29
  To change this template use File | Settings | File Templates.
--%>
<%--需求 ：按下button按钮后，会出现字符--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript">
      // 当整个文档都加载完之后再执行函数中内容
      window.onload = function () {
        //1.获取按钮对象
        var sayHello = document.getElementById("sayHello");
        // alert(sayHello);
        // 2.给按钮绑定单击事件
        sayHello.onclick = function () {
          // 弹出提示框
          alert("Hello JavaScript");
        }
      }

    </script>
  </head>
  <body>
  <button id="sayHello">Say Hello</button>
  </body>
</html>

在这里插入图片描述
这种方式则是通过JQurey方式，效果相同

<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2020/10/9
  Time: 13:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JQuery</title>
<%--    导库后不能再在这个标签中写东西--%>
    <script type="text/javascript" src="jqurey/jquery-1.7.2(1).js"></script>
    <script type="text/javascript">
        // 相当于window.onload = function(){};
        $(function () {
            // 获取按钮对象并绑定事件
            $("#sayHello").click(function () {
                // 弹出
                alert("hello javaScript");
            })
        })

    </script>
</head>
<body>
    <button id="sayHello">say Hello</button>
</body>
</html>

桂圆桂圆车厘子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记：JavaScript

JavaScript特性脚本语言(运行过程中逐行解释)基于对象（可创建、使用对象）简单（数据类型没有严格要求）动态性（不需要经过web服务器就可以对用户输入做出响应）跨平台性编写位置1.写在html中<script>标签中2.写在外部的.js文件中，然后通过script标签引入JavaScript的事件驱动1.用户事件：用户操作，例如单击、鼠标移入、鼠标移出等2.系统事件：由系统触发的事件，例如文档加载完成常用的事件onloadonclickonbluron
复制链接

扫一扫

专栏目录