常正慧_20200115-常正慧
知识点
DOM
查找节点的方法
示例一（全选，反选，结算）
-
- 知识点：复选框如果要选中，设置checked=true，取消设置checked=false。
- 全选：通过name属性得到上面所有的复选框对象，遍历集合，将每一个元素的checked设置为 true。
- 全不选：将所有元素的checked属性设置为false。
- 反选：原来选中的设置false，原来没选的设置为true。
- 结账：将所有选中的元素的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
作用
-
HTML> 用于创建网页结构CSS> 对页面进行美化javascript> 与用户进行交互（网页的行为）
-
ECMAScript是JavaScript语言的规范标准，JavaScript 是
ECMAScript的一种实现。注 意，这两个词在一般语境中是可以互换的。
JavaScript
- > 1. 是脚本语言
> 2. 是一种轻量级的编程语言
> 3. 是可插入HTML页面的编程代码
> 4. 可由所有现代的浏览器执行
> 5. 容易学习
> 6. 灵活轻巧，兼顾函数式编程和面向对象编程
组成
- > 1.
ECMAScript
> 2.BOM
> 3.DOM
JavaScript的基础语法
JavaScript的编写方式
-
写在HTML内部的脚本中，在，