常正慧_20200115-常正慧

知识点

DOM

  • dom树

查找节点的方法

    1. document.querySelector("选择器") 
      

      根据选择器查询元素,返回一个元素

    1. document.querySelectorAll("选择器")
      

      根据选择器查询所有元素,返回一个数组

示例一(全选,反选,结算)

    1. 知识点:复选框如果要选中,设置checked=true,取消设置checked=false。
    2. 全选:通过name属性得到上面所有的复选框对象,遍历集合,将每一个元素的checked设置为 true。
    3. 全不选:将所有元素的checked属性设置为false。
    4. 反选:原来选中的设置false,原来没选的设置为true。
    5. 结账:将所有选中的元素的value转成数字,再累加,将累加的结果显示在后面的span中。
  • 方法 作用
    document.createElement() 创建元素节点
    document.createTextNode() 创建文本节点
    元素对象.appendChild() 向节点的子节点列表末尾添加新的子节点
    元素对象.removeChild() 删除子节点
    元素对象.hasChildNodes() 返回元素是否拥有子节点
  • <body>
            
    <input type="checkbox" name="item" value="120"/>a
    <input type="checkbox" name="item" value="998"/>b
    <input type="checkbox" name="item" value="9.9"/>c
    <input type="checkbox" name="item" value="10.2"/>d
    <input type="checkbox" name="item" value="666"/>e
    <hr />
    <input type="checkbox" id="all" onclick="checkAll()"/>全选/全不选
    <button type="button" onclick="reverse()">反选</button>
    <button type="button" onclick="sum()">结算</button>
    <p>总计: <span id="price">0</span>元</p>
    <script>
    // 数组
    var items = document.querySelectorAll("[name=item]");
    // 全选/全不选 按钮 点击事件
    function checkAll(){
    // 全选框
    var all = document.querySelector("#all");
    // 迭代每一个元素
    for(var i = 0; i< items.length; i++){
    // 当前循环被迭代的元素
    var cur = items[i];
    cur.checked = all.checked;
    }
    }
    function reverse(){
    // 迭代每一个元素
    for(var i = 0; i< items.length; i++){
    // 当前循环被迭代的元素
    var cur = items[i];
    // 设置 checked 属性值为其 当前值的取反
    cur.checked = !cur.checked;

    // if(cur.checked){
    // cur.checed = false;
    // }else{
    // cur.checed = true;
    // }

    }
    }
    function sum(){
    var sum = 0;
    // 迭代每一个元素
    for(var i = 0; i< items.length; i++){
    // 当前循环被迭代的元素
    var cur = items[i];
    // 如果被选中
    if(cur.checked){
    // sum = sum + parseFloat(cur.value);
    sum += parseFloat(cur.value);
    }
    }
    document.querySelector("#price").innerText = sum;
    }
    </script>
    </body>

示例二(点击图案消失)

  • > javascript
    > <body>
    > <script type="text/javascript">
    > // 获取 html 元素
    > var html = document.querySelector("html");
    > // 给 html 添加监听事件
    > html.addEventListener("click", heart, false);
    > function heart(e){
    > // 定义字体大小
    > var fontSize = 16;
    > // 鼠标的位置 e.clientX e.clientY
    > // 根据鼠标位置 计算 元素出现的位置
    > var left = e.clientX - fontSize / 2;
    > var top = e.clientY - fontSize / 2;
    > // 创建一个 b 元素
    > var b = document.createElement("b");
    > // b 元素的内容
    > b.innerText = "❤";
    > // 设置属性. 字体大小, 颜色, 位置 randomColor() 返回 rgb(r,g,b);
    > b.style="font-size: " + fontSize + "px;color:" + randomColor() + ";position:absolute;left:"
    > + left + "px;top:" + top + "px;opacity:1;";
    > // 添加到 body 中
    > document.body.appendChild(b);
    > // 定义一个 定时任务, 修改他的 style 属性
    > var timer = setInterval(function(){
    > // 去掉 top 值的 单位 px
    > var top = b.style.top.replace("px", "");
    > // 调整位置
    > b.style.top = top - 1 + "px" ;
    > // 隐藏
    > b.style.opacity -= 0.05;
    > // 看不见时
    > if(b.style.opacity < 0){
    > // 移除元素
    > document.body.removeChild(b);
    > // 清除定时器
    > clearInterval(timer);
    > }
    > }, 100);
    > }
    > // 随机 rgb 字符串
    > function randomColor(){
    > //~~的作用是去掉小数部分
    > return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")";
    > }
    > </script>
    > </body>
    >

示例三(点击表格变色)

  • > javascript
    > <head>
    > <meta charset="utf-8">
    > <title></title>
    > <style>
    > .bg{
    > background-color: #ccc;
    > }
    > </style>
    > </head>
    >
    > <body>
    > <button onclick="addClass()">添加样式</button>
    > <table border="1" cellspacing="0" cellpadding="0" class="a" width="500px">
    > <tr>
    > <th>序号</th>
    > <th>姓名</th>
    > <th>性别</th>
    > </tr>
    > <tr>
    > <td>1</td>
    > <td>张三</td>
    > <td>男</td>
    > </tr>
    > </table>
    >
    > <script>
    > // 获取到元素
    > var table = document.querySelector("table");
    > // 鼠标放到 元素上时
    > table.onmouseover = function(){
    > console.log("鼠标放到表格上了");
    > }
    > // 鼠标移出 元素上时
    > table.onmouseout = function(){
    > console.log("鼠标移出表格了");
    > }
    > function addClass(){
    > table.className = table.className + " bg";
    > console.log(table.className);
    > }
    > </script>
    > </body>
    >

JavaScript

作用

    1. HTML > 用于创建网页结构
    2. CSS > 对页面进行美化
    3. javascript > 与用户进行交互(网页的行为)
  • ECMAScriptJavaScript 语言的规范标准,

    JavaScript 是 ECMAScript 的一种实现。注 意,这两个词在一般语境中是可以互换的。

JavaScript

  • > 1. 是脚本语言
    > 2. 是一种轻量级的编程语言
    > 3. 是可插入HTML页面的编程代码
    > 4. 可由所有现代的浏览器执行
    > 5. 容易学习
    > 6. 灵活轻巧,兼顾函数式编程和面向对象编程

组成

  • > 1. ECMAScript
    > 2. BOM
    > 3. DOM

JavaScript的基础语法

JavaScript的编写方式

  • 写在HTML内部的脚本中,在,

    © 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1