JavaScript基础

「已注销」

已于 2023-06-07 16:39:05 修改

阅读量2.1k

点赞数

文章标签： javascript html html5

于 2022-03-20 16:53:53 首次发布

本文链接：https://blog.csdn.net/yxxx_5678/article/details/120785892

版权

JavaScript代码可以放在HTML文档的任何位置

但是考虑到网页加载速度和顺序等因素

非常建议大家把JavaScript代码写到文档底部

JavaScript怎么用

如何引入JavaScript？

1.在html页面中

<h1 id="demo" style="text-align: center;">快看我</h1> 
 <script>
    // 更改一级标题的字体颜色
    let element = document.getElementById("demo");
    element.style.color = "green";
  </script>

2.通过外部引用的方式引入JavaScript文件

// html文件中
<script src="./js/script.js"></script>

// js文件中不需要script标签，直接写JavaScript代码

element.style.fontSize = "40px";

3.引入网络文件

  <script src="https://www.w3school.com.cn"></script>

JavaScript可以干什么

<body>
  
  <h1 id="demo" style="text-align: center;">快看我</h1>

  <script>
    // 可以获得文档对象（DOM）
    // 可以理解为获得了这个元素，然后修可以修改它的属性了
    let element = document.getElementById("demo");

    // 可以更改HTML内容
    element.innerHTML = "是的，是我";

    // 可以更改CSS样式
    element.style.marginTop = "100px";

    // 可以更改HTML属性
    // 怎么知道该代码是否生效？在浏览器页面右键-检查。
    // 注意：查看源代码是看不到变化的，因为那是还没有渲染的代码。
    element.setAttribute("name", "myName");
    //其实这句话 只是将h1加入了name = "myName"
  </script>
</body>

JavaScript怎么获得HTML元素

1.通过元素的 id 属性

<body>
  
  <h2 id="demo">通过id找到我</h2>
  <script>
    // 可以通过元素的 id 属性获得该元素
    let element1 = document.getElementById("demo");
    element1.style.color = 'green';
  </script>

</body>

2.通过元素标签

<body>
  
  <p>这是段落1</p>
  <p>这是段落2</p>
  <script>
    // 可以通过元素标签获得
    let colls = document.getElementsByTagName('p');
    // 注意：这样得到的是一个集合，多个元素
    colls[1].style.fontSize = "25px";
  </script>

</body>

3.通过类名

<body>
  
  <p class="cls1">这是属于cls1类的段落1</p>
  <p class="cls1">这是属于cls1类的段落2</p>
  <script>
    // 可以通过类名
    let nodes1 = document.getElementsByClassName("cls1");
    nodes1[1].style.color = "red";
  </script>

</body>

4.使用CSS选择器

<body>
  
  <h3 id="demo2">通过CSS选择器找到我</h3>
  <script>
    // 可以使用CSS选择器获得元素
    let nodes2 = document.querySelectorAll('#demo2');
    nodes2[0].style.color = "red";
  </script>

</body>

5.通过HTML对象选择器

<body>
  
  <form name="myForm">
    输入框：<input name="fullName" type="text">
  </form>
  <script>
    // 通过HTML对象选择器获得元素
    let element2 = document.forms["myForm"]["fullName"];
    element2.value = "哈哈";
  </script>

</body>

JavaScript变量与函数

页面两秒后实现变换文字

<body>
  
  <h1 id="demo" style="text-align: center;">快看我</h1>


  <script>
    // 可以使用 var 或 let 关键字定义变量
    // 建议使用 let
    let element = document.getElementById("demo");

    // 使用 function 关键字定义函数
    let txt = "";
    function myFunc() {
      txt = "你看到我了";
      element.innerHTML = txt;
    }

    // 等待 2 秒后 执行函数
    window.setInterval(myFunc, 2000);
    
  </script>
</body>

var和let的区别 - 知乎

JavaScript事件处理

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>JavaScript事件处理</title>
</head>
<body>
  <!-- 事件的种类很多，这里只举几个例子 -->

  <!-- 点击事件 click -->
  <h1 id="e1" onclick="myClick()">点我</h1>
   //这里onclick命名不能命名为onClick(),这属于关键字，使用的话，不起作用

  <!-- change 事件 -->
  请输入数字：<input id="e2" type="text" onchange="myChange()">

  <br>
  <!-- 鼠标悬停与离开事件 -->
  <h1 id="e3" onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标不在上面</h1>

  <!-- 鼠标按下与松手事件 -->
  <h1 id="e4" onmousedown="myMouseDown()" onmouseup="myMouseUp()">点我别松手</h1>

  <a href="https://www.w3school.com.cn/jsref/dom_obj_event.asp">更多事件类型请访问这个链接</a>

  <br>
  <!-- 也可以使用事件监听程序给元素添加事件监听及响应 -->
  <!-- 注意：这个元素没有通过 onclick 属性添加事件 -->
  // 监听程序:程序对某些事件的响应
  <h1 id="e5">通过事件监听程序添加事件（点我）</h1>

  <!-- JavaScript 的主要作用就是对用户或浏览器事件进行响应和处理 -->
  <script>
    let element1 = document.getElementById("e1");
    let element2 = document.getElementById("e2");
    let element3 = document.getElementById("e3");
    let element4 = document.getElementById("e4");
    let element5 = document.getElementById("e5");

    // 点击事件
    function myClick() {
      element1.style.textAlign = "center";
    }

    // change 事件
    function myChange() {
      // Number() 函数可以将其他对象转换为数字
      if (Number(element2.value).toString() == "NaN" ) {
        element2.value = "你输入的不是数字";
      }
    }

    // 鼠标悬停与离开事件
    function myMouseOver() {
      element3.innerHTML = "鼠标在我上面";
      element3.style.color = "green";
    }
    function myMouseOut() {
      element3.innerHTML = "鼠标不在上面";
      element3.style.color = "black";
    }

    // 鼠标按下与松手事件
    function myMouseDown() {
      element4.innerHTML = "可以松开了";
    }
    function myMouseUp() {
      element4.innerHTML = "点我别松手";
    }

    // 事件监听程序
    function myClick1() {
      element5.style.textAlign = "center";
    }
    element5.addEventListener("click", myClick1);
    
  </script>
</body>
</html>

JavaScript创建和删除节点

<body>
  
  <div id="e1">
    <p>这是第一段。</p>
  </div>

  <div>
    <p>这本来有两个段落，删掉了一个。</p>
    <p id="nodeToDelete">我会被删除。</p>
  </div>


  <script>
    let element1 = document.getElementById("e1");

    // 创建节点 a (a的内容自命名)
    let para = document.createElement("a");
    // 创建文本节点
    let txtNode = document.createTextNode("这是创建的段落。");
    // 在 a 中添加文本节点
    para.appendChild(txtNode);
    // 在 div 中添加 a 节点
    element1.appendChild(para);

    let nodeToDelete= document.getElementById("nodeToDelete");
    // 找到该节点的 父节点，然后从父节点中删除出自己！
    nodeToDelete.parentNode.removeChild(nodeToDelete);
    
  </script>
</body>

JavaScript与浏览器的交互

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>JavaScript怎么用</title>
</head>
<body>
  
  <h1 id="demo"></h1>
  <h4 style="color: green;">尝试调整窗口大小后刷新网页</h4>
  <h2 id="e2" onclick="newWindow()">点我打开新窗口</h2>
  <h2><a href="./newWindow2.html">点我打开新网页</a></h2>
  <h2 id="e3" onclick="popWarn()">点我弹出警告框</h2>
  <h2 id="e4" onclick="popConfirm()">点我弹出确认框</h2>
  <h2 id="e5" onclick="popPrompt()">点我弹出提示框</h2>
  <h2 id="e6" onclick="setTimeout(popWarn1, 1000)">点我后等 1 秒</h2>
  <h2 id="e7" onclick="loopConfirm()">点我每1秒都有弹窗！</h2>


  <script>
    let element = document.getElementById("demo");
    let element4 = document.getElementById("e4");
    let element5 = document.getElementById("e5");
    let element7 = document.getElementById("e7");

    let browerWidth = window.innerWidth;
    let browerHeight = window.innerHeight;

    element.innerHTML = "你的浏览窗口内的宽度为：" + browerWidth + "  高度为：" + browerHeight;

    function newWindow() {
      window.open("./newWindow.html", "", "width=200,height=200");
    }

    function popWarn() {
      window.alert("警告框");
    }
    function popConfirm() {
      let result = window.confirm("请点击按钮");
      if (result) {
        element4.innerHTML = "你点了确认";
      } else {
        element4.innerHTML = "你点了取消";
      }

    }
    function popPrompt() {
      let mood = window.prompt("今天心情点样？");
      element5.innerHTML = "你今天的心情：" + mood;
    }

    function popWarn1() {
      window.alert("久等了！！");
    }

    let myloop;
    function loopConfirm() {
      myloop = setInterval(myLoop, 1000);
    }
    function myLoop() {
      let result = window.confirm("是我，很烦！");
      if (result) {
        element7.innerHTML = "继续";
      } else {
        element7.innerHTML = "消停了!!";
        window.clearInterval(myloop);
      }
    }
  </script>
</body>
</html>

newWindow.html

如何设置一个窗口随机出现

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>JavaScript怎么用</title>
</head>
<body>
  
  <button id="e1" onclick="game()">抓不到我</button>
  <button id="e2" onclick="closeWin()">点我关闭窗口</button>


  <script>
    function game() {
      // 将窗口移动到某个坐标（相对于屏幕左上角的坐标）
      window.moveTo(Math.random()*700, Math.random()*500);
      // 重置窗口的大小
      window.resizeTo(Math.random()*350, Math.random()*400);
    }
    function closeWin() {
      // 关闭窗口
      window.close();
    }
    
  </script>
</body>
</html>

newWindow2.html

如何返回原网页

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>JavaScript怎么用</title>
</head>
<body>
  
  <button id="e1" onclick="navBack()">点我返回原网页</button>

  <script>
    function navBack() {
      window.history.back()
    }
    
  </script>
</body>
</html>

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础

JavaScript代码可以放在HTML文档的任何位置但是考虑到网页加载速度和顺序等因素非常建议大家把JavaScript代码写到文档底部JavaScript怎么用如何引入JavaScript？1.在html页面中<h1 id="demo" style="text-align: center;">快看我</h1> <script> // 更改一级标题的字体颜色 let element = docume...
复制链接

扫一扫