考核总结2

最新推荐文章于 2024-08-07 22:13:00 发布

蘩祁11

最新推荐文章于 2024-08-07 22:13:00 发布

阅读量57

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_73783119/article/details/130543769

版权

总结

一.获取dom元素的方式

1、querySelector()

注意：querySelector()方法括号中的值是元素的选择器，此方法直接返回DOM对象本身。

document.querySelector('选择器')

2、querySelectorAll()

注意：querySelector()和querySelectorAll()方法括号中的取值都是选择器，但两个方法是有区别的。当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class的元素，而querySelectorAll()获取到了所有class相等的元素集合。

document.querySelectorAll('选择器')

3、getElementById() 返回匹配指定选择器的第一个元素(获取不到为 null)

注意：getElementById()括号中的不需要在前面加“#”，因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。

document.querySelectorAll('id名')

4、getElementsByClassName 返回匹配指定选择器的第一个元素(获取不到为null)

注意：getElementsByClassName()括号中的不需要在前面加 “.” ，因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件，需要获取到集合中的某一个元素，然后再为元素绑定事件。

document.getElementsByClassName('类名')

5、getElementsByName

注意：只有含有name属性的元素(表单元素)才能通过name属性获取

document.getElementsByClassName('name名称')

6.getElementsByTagName

注意：getElementsByTagName()返回的是一个集合

document.getElementsByTagName('标签名')

总结：
1、所有获取DOM对象的方法中，只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身，可直接为其绑定事件。
2、getElementXXX类型的方法，除了通过Id获取元素，其他都返回一个集合，如果需要取到具体的DOM元素，需要加索引，如：document.getElementsByClassName(“div”)[0] =>获取class为 box的所有元素中的第一个DOM元素。
3、querySelector()与querySelectorAll()两者的联系与区别：
联系：两者括号中的取值都是选择器
区别：当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class的元素，而querySelectorAll()获取到了所有class相等的元素集合。

二.事件对象

1.什么是事件对象
是个对象，这个对象里有事件触发时的相关信息
2.如何获取
Ø 在事件绑定的回调函数的第一个参数就是事件对象
Ø 一般命名为event、e

元素.addEventListener('click',function(e))
{
}

3.部分常用属性
Ø type
p 获取当前的事件类型
Ø clientX/clientY
p 获取光标相对于浏览器可见窗口左上角的位置
Ø offsetX/offsetY
p 获取光标相对于当前DOM元素左上角的位置
Ø key
p 用户按下的键盘键的值
p 现在不提倡使用keyCode

三.计算器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    /* 定义计算器样式 */
    .calculator {
      margin: 20px auto;
      width: 300px;
      background-color: #f9f9f9;
      border-radius: 5px;
      padding: 10px;
      box-shadow: 0px 0px 10px #999;
      text-align: center; /* 居中文本 */
    }
    /* 定义输入框样式 */
    input[type=text] {
      width: 100%;
      height: 40px;
      font-size: 24px;
      text-align: right; /* 右对齐文本 */
      margin-bottom: 10px;
    }
    /* 定义按钮样式 */
    .button-row {
      display: flex;
      justify-content: space-between;
    }
    button {
      width: 70px;
      height: 50px;
      font-size: 24px;
      margin: 5px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    /* 自定义清除按钮样式 */
    .btn-clear {
      background-color: #e74c3c;
      color: #fff;
    }
    /* 自定义等于按钮样式 */
    .btn-equals {
      background-color: #2ecc71;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <!-- 定义计算器 -->
      <div class="col-md-4 col-md-offset-4 calculator">
        <!-- 定义输入框 -->
        <input type="text" id="output">
        <!-- 定义数字和运算符按钮 -->
        <div class="button-row">
          <button onclick="appendInput('1')" class="btn btn-default">1</button>
          <button onclick="appendInput('2')" class="btn btn-default">2</button>
          <button onclick="appendInput('3')" class="btn btn-default">3</button>
          <button onclick="appendInput('+')" class="btn btn-default">+</button>
        </div>
        <div class="button-row">
          <button onclick="appendInput('4')" class="btn btn-default">4</button>
          <button onclick="appendInput('5')" class="btn btn-default">5</button>
          <button onclick="appendInput('6')" class="btn btn-default">6</button>
          <button onclick="appendInput('-')" class="btn btn-default">&minus;</button>
        </div>
        <div class="button-row">
          <button onclick="appendInput('7')" class="btn btn-default">7</button>
          <button onclick="appendInput('8')" class="btn btn-default">8</button>
          <button onclick="appendInput('9')" class="btn btn-default">9</button>
          <button onclick="appendInput('*')" class="btn btn-default">&times;</button>
        </div>
        <div class="button-row">
          <button onclick="appendInput('0')" class="btn btn-default">0</button>
          <button onclick="appendInput('.')" class="btn btn-default">.</button>
          <button onclick="appendInput('/')" class="btn btn-default">&divide;</button>
          <button onclick="calculate()" class="btn btn-success btn-equals">=</button>
        </div>
        <!-- 定义清除按钮 -->
        <button onclick="clearOutput()" class="btn btn-danger btn-clear">C</button>
      </div>
    </div>
  </div>
  <script>
    let output = document.getElementById('output');

    // 将数字和运算符添加到输出字段中
    function appendInput(value) {
      output.value += value;
    }

    // 清空输出字段
    function clearOutput() {
      output.value = '';
    }

    // 计算并显示结果
    function calculate() {
        let expression = output.value; // 获取输出字段中的表达式
      let result = eval(expression); // 将表达式求值
      output.value = result; // 将结果显示在输出字段中
    }
  </script>
</body>
</html>

蘩祁11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
考核总结2

注意：querySelector()方法括号中的值是元素的选择器，此方法直接返回DOM对象本身。注意：querySelector()和querySelectorAll()方法括号中的取值都是选择器，但两个方法是有区别的。当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class的元素，而querySelectorAll()获取到了所有class相等的元素集合。3、getElementById() 返回匹配指定选择器的第一个元素(获取不到为 null)
复制链接

扫一扫