文章目录

  • Web APIs
  • 什么是DOM？
  • DOM树
  • 如何获取网页页面元素？
    • 根据id获取元素 getElementById
    • 根据标签名获取元素 getElementsByTagName
    • 根据类名获取某些元素集合 getElementsByClassName 通用选择器querySelector querySelectorAll（既能选择id，也能选择类和通用标签）（加#表示选择id，加.表示选择类）
  • 获取特殊元素body（document.body）html（document.documentElement）
  • 事件概述（事件三要素：事件源 事件类型 事件处理程序）
  • 执行事件的步骤 常见鼠标事件
  • 操作元素
    • 改变元素内容 innerText和innerHtml
    • innerText和innerHtml的区别（innerHtml显示时支持html语法，读取元素内容时能保留html代码）（所以以后一般只用innerHtml就好了）
  • 通过注册事件来改变元素属性（刘德华与张学友图片切换）
  • 案例：根据系统不同时间段显示不同问候语和图片
  • 表单元素的属性操作（表单操作比较特殊，跟普通元素不同）type value checked selected disabled（this）
  • 案例：仿京东显示密码
  • 修改元素样式属性
    • 行内样式与内嵌样式（行内样式比内嵌样式权重高，所以行内样式会覆盖掉内嵌样式）
    • 行内样式操作 element.style
  • 浮动二维码点击叉号❌隐藏案例 style.display
  • 案例：通过操作位置属性来实现循环精灵图（在字符串中引用变量的操作方法：lis[i].style.backgroundPosition = '0 -' + index + 'px';）
  • 案例：文本框得到光标和失去光标的不同显示（onfocus、onblur）（input、value）
  • 通过类名样式批量修改样式操作来简化代码 element.className
    • 如果要增加或者删除类，可以用 this.className += ' change';吗？
  • 案例：仿新浪注册密码输入框（onfocus/onblur结合类名样式判断密码是否合规）
  • 操作元素总结
  • 案例：页面开关灯
  • 案例：利用for循环实现多按钮中点击某个按钮的变色（排他思想，先清除其他元素样式，再设置自己的）
  • 案例：实现页面换肤（换背景）效果（利用循环注册点击事件）（querySelector链式获取元素）
  • 案例：新浪财经鼠标经过某行实现变色效果（表格隔行变色效果）（onmouseover、onmouseout）
  • 复选框的全选按钮和取消全选
  • 获取元素自有属性和自定义属性（getAttribute）
  • 通用修改元素属性值方式setAttribute（以后就用这个修改，主要用来设置自定义属性，元素自带属性还是用老方法设置）移除属性值removeAttribute

Web APIs





https://developer.mozilla.org/zh-CN/docs/Web/API

什么是DOM？

DOM树

如何获取网页页面元素？

根据id获取元素 getElementById

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="time">2019-9-9</div><script>// 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面// 2. get 获得 element 元素 by 通过 驼峰命名法 // 3. 参数 id是大小写敏感的字符串// 4. 返回的是一个元素对象var timer = document.getElementById('time');console.log(timer);console.log(typeof timer);// 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法console.dir(timer);</script>
</body></html>

根据标签名获取元素 getElementsByTagName



获取父元素中的子元素，可以给父元素指定id，用getElementById获取父元素，再用getElementsByTagName获取父元素中的子元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><ul><li>知否知否，应是等你好久11</li><li>知否知否，应是等你好久12</li><li>知否知否，应是等你好久13</li><li>知否知否，应是等你好久14</li></ul><ol id="ol"><li>生僻字</li><li>生僻字</li><li>生僻字</li><li>生僻字</li></ol><script>// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的var lis = document.getElementsByTagName('li');console.log(lis);console.log(lis[0]);// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}// 3. 如果页面中只有一个li 返回的还是伪数组的形式 // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式// 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素// var ol = document.getElementsByTagName('ol'); // [ol]// console.log(ol[0].getElementsByTagName('li'));var ol = document.getElementById('ol');console.log(ol.getElementsByTagName('li'));</script>
</body></html>

根据类名获取某些元素集合 getElementsByClassName 通用选择器querySelector querySelectorAll（既能选择id，也能选择类和通用标签）（加#表示选择id，加.表示选择类）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div class="box">盒子1</div><div class="box">盒子2</div><div id="nav"><ul><li>首页</li><li>产品</li></ul></div><script>// 1. getElementsByClassName 根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);// 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #navvar firstBox = document.querySelector('.box');console.log(firstBox);var nav = document.querySelector('#nav');console.log(nav);var li = document.querySelector('li');console.log(li);// 3. querySelectorAll()返回指定选择器的所有元素对象集合var allBox = document.querySelectorAll('.box');console.log(allBox);var lis = document.querySelectorAll('li');console.log(lis);</script>
</body></html>

获取特殊元素body（document.body）html（document.documentElement）

事件概述（事件三要素：事件源 事件类型 事件处理程序）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button id="btn">唐伯虎</button><script>// 点击一个按钮，弹出对话框// 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素//(1) 事件源 事件被触发的对象   谁  按钮var btn = document.getElementById('btn');//(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下//(3) 事件处理程序  通过一个函数赋值的方式 完成btn.onclick = function() {alert('点秋香');}</script>
</body></html>

执行事件的步骤 常见鼠标事件


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div>123</div><script>// 执行事件步骤// 点击div 控制台输出 我被选中了// 1. 获取事件源var div = document.querySelector('div');// 2.绑定事件 注册事件// div.onclick // 3.添加事件处理程序 div.onclick = function() {console.log('我被选中了');}</script>
</body></html>

操作元素

改变元素内容 innerText和innerHtml

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div,p {width: 300px;height: 30px;line-height: 30px;color: #fff;background-color: pink;}</style>
</head><body><button>显示当前系统时间</button><div>某个时间</div><p>1123</p><script>// 当我们点击了按钮，  div里面的文字会发生变化// 1. 获取元素 var btn = document.querySelector('button');var div = document.querySelector('div');// 2.注册事件btn.onclick = function() {// div.innerText = '2019-6-6';div.innerHTML = getDate();}function getDate() {var date = new Date();// 我们写一个 2019年 5月 1日 星期三var year = date.getFullYear();var month = date.getMonth() + 1;var dates = date.getDate();var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var day = date.getDay();return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];}// 我们元素可以不用添加事件var p = document.querySelector('p');p.innerHTML = getDate();</script>
</body></html>

点击按钮显示时间

innerText和innerHtml的区别（innerHtml显示时支持html语法，读取元素内容时能保留html代码）（所以以后一般只用innerHtml就好了）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div></div><p>我是文字<span>123</span></p><script>// innerText 和 innerHTML的区别 // 1. innerText 不识别html标签 非标准  去除空格和换行var div = document.querySelector('div');// div.innerText = '<strong>今天是：</strong> 2019';// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的div.innerHTML = '<strong>今天是：</strong> 2019';// 这两个属性是可读写的  可以获取元素里面的内容var p = document.querySelector('p');console.log(p.innerText);console.log(p.innerHTML);</script>
</body></html>

通过注册事件来改变元素属性（刘德华与张学友图片切换）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {width: 300px;}</style>
</head><body><button id="ldh">刘德华</button><button id="zxy">张学友</button> <br><img src="data:images/ldh.jpg" alt="刘德华" title="刘德华"><script>// 修改元素属性  src// 1. 获取元素var ldh = document.getElementById('ldh');var zxy = document.getElementById('zxy');var img = document.querySelector('img');// 2. 注册事件  处理程序zxy.onclick = function () {img.src = 'images/zxy.jpg';img.title = '张学友思密达';img.alt = '张学友因为太帅导致无法显示'}ldh.onclick = function () {img.src = 'images/ldh.jpg';img.title = '刘德华';img.alt = '刘德华因为太帅导致无法显示'}</script>
</body></html>


案例：根据系统不同时间段显示不同问候语和图片

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {width: 300px;}</style>
</head><body><img src="data:images/s.gif" alt=""><div>上午好</div><script>// 根据系统不同时间来判断，所以需要用到日期内置对象// 利用多分支语句来设置不同的图片// 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性// 需要一个div元素，显示不同问候语，修改元素内容即可// 1.获取元素var img = document.querySelector('img');var div = document.querySelector('div');// 2. 得到当前的小时数var date = new Date();var h = date.getHours();// 3. 判断小时数改变图片和文字信息if (h < 12) {img.src = 'images/s.gif';img.alt = '上午好图片挂了！'div.innerHTML = '亲，上午好，好好写代码';} else if (h < 18) {img.src = 'images/x.gif';img.alt = '下午好图片挂了！'div.innerHTML = '亲，下午好，好好写代码';} else {img.src = 'images/w.gif';img.alt = '晚上好图片挂了！'div.innerHTML = '亲，晚上好，好好写代码';}</script>
</body></html>

表单元素的属性操作（表单操作比较特殊，跟普通元素不同）type value checked selected disabled（this）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button>按钮</button><input type="text" value="输入内容"><script>// 1. 获取元素var btn = document.querySelector('button');var input = document.querySelector('input');// 2. 注册事件 处理程序btn.onclick = function() {// input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容// 表单里面的值 文字内容是通过 value 来修改的input.value = '被点击了';// 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用// btn.disabled = true;this.disabled = true;// this 指向的是事件函数的调用者 btn}</script>
</body></html>


案例：仿京东显示密码


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 2px;right: 2px;width: 24px;}</style>
</head><body><div class="box"><label for=""><img src="data:images/close.png" alt="图片挂了" id="eye"></label><input type="password" name="" id="pwd"></div><script>// 1. 获取元素var eye = document.getElementById('eye');var pwd = document.getElementById('pwd');// 2. 注册事件 处理程序var flag = 0;eye.onclick = function () {// 点击一次之后， flag 一定要变化if (flag == 0) {pwd.type = 'text';eye.src = 'images/open.png';flag = 1; // 赋值操作} else {pwd.type = 'password';eye.src = 'images/close.png';flag = 0;}}</script>
</body></html>


修改元素样式属性

行内样式与内嵌样式（行内样式比内嵌样式权重高，所以行内样式会覆盖掉内嵌样式）

行内样式操作 element.style

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div></div><script>// 1. 获取元素var div = document.querySelector('div');// 2. 注册事件 处理程序div.onclick = function() {// div.style里面的属性 采取驼峰命名法 this.style.backgroundColor = 'purple';this.style.width = '250px';}</script>
</body></html>


浮动二维码点击叉号❌隐藏案例 style.display



<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {position: relative;width: 74px;height: 88px;border: 1px solid #ccc;margin: 100px auto;font-size: 12px;text-align: center;color: #f40;/* display: block; */}.box img {width: 60px;margin-top: 5px;}.close-btn {position: absolute;top: -1px;left: -16px;width: 14px;height: 14px;border: 1px solid #ccc;line-height: 14px;font-family: Arial, Helvetica, sans-serif;cursor: pointer;}</style>
</head><body><div class="box">淘宝二维码<!-- <img src="data:images/tao.png" alt="图片太帅无法显示"> --><img src="QQ图片20210224092303.png" alt="图片太帅无法显示"><i class="close-btn">×</i></div><script>// 1. 获取元素 var btn = document.querySelector('.close-btn');var box = document.querySelector('.box');// 2.注册事件 程序处理btn.onclick = function () {box.style.display = 'none';}</script>
</body></html>

案例：通过操作位置属性来实现循环精灵图（在字符串中引用变量的操作方法：lis[i].style.backgroundPosition = ‘0 -’ + index + ‘px’;）


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.box {width: 250px;margin: 100px auto;}.box li {float: left;width: 24px;height: 24px;background-color: pink;margin: 15px;/* background: url(images/sprite.png) no-repeat; */background: url(蜥蜴女仆.gif) no-repeat;}</style>
</head><body><div class="box"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script>// 1. 获取元素 所有的小li var lis = document.querySelectorAll('li');for (var i = 0; i < lis.length; i++) {// 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标var index = i * 44;lis[i].style.backgroundPosition = '0 -' + index + 'px';}</script>
</body></html>

案例：文本框得到光标和失去光标的不同显示（onfocus、onblur）（input、value）



<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>input {color: #999;}</style>
</head><body><input type="text" value="手机"><script>// 1.获取元素var text = document.querySelector('input');// 2.注册事件 获得焦点事件 onfocus text.onfocus = function () {// console.log('得到了焦点');if (this.value === '手机') {this.value = '';}// 获得焦点需要把文本框里面的文字颜色变黑this.style.color = '#333';}// 3. 注册事件 失去焦点事件 onblurtext.onblur = function () {// console.log('失去了焦点');if (this.value === '') {this.value = '手机';}// 失去焦点需要把文本框里面的文字颜色变浅色this.style.color = '#999';}</script></body></html>




通过类名样式批量修改样式操作来简化代码 element.className

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}.change {background-color: purple;color: #fff;font-size: 25px;margin-top: 100px;}</style>
</head><body><div class="first">文本</div><script>// 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用var test = document.querySelector('div');test.onclick = function() {// this.style.backgroundColor = 'purple';// this.style.color = '#fff';// this.style.fontSize = '25px';// this.style.marginTop = '100px';// 让我们当前元素的类名改为了 change// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器// this.className = 'change';this.className = 'first change';}</script>
</body></html>


如果要增加或者删除类，可以用 this.className += ’ change’;吗？

不行的，这样会导致连续点击后，change类越来越多

想删掉类名，用 this.className -= ’ change’;也不行，因为字符串没有-=这种语法

案例：仿新浪注册密码输入框（onfocus/onblur结合类名样式判断密码是否合规）


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 600px;margin: 100px auto;}.message {display: inline-block;font-size: 12px;color: #999;background: url(images/mess.png) no-repeat left center;padding-left: 20px;}.wrong {color: red;background-image: url(images/wrong.png);}.right {color: green;background-image: url(images/right.png);}</style>
</head><body><div class="register"><input type="password" class="ipt"><p class="message">请输入6~16位密码</p></div><script>// 首先判断的事件是表单失去焦点 onblur// 如果输入正确则提示正确的信息颜色为绿色小图标变化// 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化// 因为里面变化样式较多，我们采取className修改样式// 1.获取元素var ipt = document.querySelector('.ipt');var message = document.querySelector('.message');//2. 注册事件 失去焦点ipt.onblur = function () {if (this.value.length === 0) {message.className = 'message';message.innerHTML = '请输入6~16位密码';} else if ((this.value.length > 0 && this.value.length < 6) || this.value.length > 16) {// 根据表单里面值的长度 ipt.value.length// console.log('错误');message.className = 'message wrong';message.innerHTML = '您输入的位数不对要求6~16位';} else {message.className = 'message right';message.innerHTML = '您输入的正确';}}</script>
</body></html>



操作元素总结

案例：页面开关灯

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button id="btn">开关灯</button><script>var btn = document.getElementById('btn');var flag = 0;btn.onclick = function () {if (flag == 0) {document.body.style.backgroundColor = 'black';flag = 1;} else {document.body.style.backgroundColor = '#fff';flag = 0;}}</script>
</body></html>


案例：利用for循环实现多按钮中点击某个按钮的变色（排他思想，先清除其他元素样式，再设置自己的）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>// 1. 获取所有按钮元素var btns = document.getElementsByTagName('button');// btns得到的是伪数组  里面的每一个元素 btns[i]for (var i = 0; i < btns.length; i++) {btns[i].onclick = function() {// (1) 我们先把所有的按钮背景颜色去掉  干掉所有人for (var i = 0; i < btns.length; i++) {btns[i].style.backgroundColor = '';}// (2) 然后才让当前的元素背景颜色为pink 留下我自己this.style.backgroundColor = 'pink';}}//2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想</script>
</body></html>

案例：实现页面换肤（换背景）效果（利用循环注册点击事件）（querySelector链式获取元素）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}body {background: url(images/1.jpg) no-repeat center top;}li {list-style: none;}.baidu {overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;padding-top: 3px;}.baidu li {float: left;margin: 0 1px;cursor: pointer;}.baidu img {width: 100px;}</style>
</head><body><ul class="baidu"><li><img src="data:images/1.jpg" alt="第一张图片"></li><li><img src="data:images/2.jpg" alt="第二张图片"></li><li><img src="data:images/3.jpg" alt="第三张图片"></li><li><img src="data:images/4.jpg" alt="第四张图片"></li></ul><script>// 1. 获取元素 var imgs = document.querySelector('.baidu').querySelectorAll('img');// console.log(imgs);// 2. 循环注册事件 for (var i = 0; i < imgs.length; i++) {imgs[i].onclick = function () {// this.src 就是我们点击图片的路径   images/2.jpg// console.log(this.src);// 把这个路径 this.src 给body 就可以了document.body.style.backgroundImage = 'url(' + this.src + ')';}}</script>
</body></html>

案例：新浪财经鼠标经过某行实现变色效果（表格隔行变色效果）（onmouseover、onmouseout）


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>table {width: 800px;margin: 100px auto;text-align: center;border-collapse: collapse;font-size: 14px;}thead tr {height: 30px;background-color: skyblue;}tbody tr {height: 30px;}tbody td {border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg {background-color: pink;}</style>
</head><body><table><thead><tr><th>代码</th><th>名称</th><th>最新公布净值</th><th>累计净值</th><th>前单位净值</th><th>净值增长率</th></tr></thead><tbody><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr></tbody></table><script>// 1.获取元素 获取的是 tbody 里面所有的行var trs = document.querySelector('tbody').querySelectorAll('tr');// 2. 利用循环绑定注册事件for (var i = 0; i < trs.length; i++) {// 3. 鼠标经过事件 onmouseovertrs[i].onmouseover = function() {// console.log(11);this.className = 'bg';}// 4. 鼠标离开事件 onmouseouttrs[i].onmouseout = function() {this.className = '';}}</script>
</body></html>

复选框的全选按钮和取消全选


<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><style>* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 300px;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style></head><body><div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbAll" /></th><th>商品</th><th>价钱</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>iPhone8</td><td>8000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Pro</td><td>5000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Air</td><td>2000</td></tr><tr><td><input type="checkbox" /></td><td>Apple Watch</td><td>2000</td></tr></tbody></table></div><script>// 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可// 获取元素var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框// 注册事件j_cbAll.onclick = function() {// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中console.log(this.checked);for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].checked = this.checked;}}// 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].onclick = function() {// flag 控制全选按钮是否选中var flag = true;// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中for (var i = 0; i < j_tbs.length; i++) {if (!j_tbs[i].checked) {flag = false;break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了}}j_cbAll.checked = flag;}}</script>
</body></html>

获取元素自有属性和自定义属性（getAttribute）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="demo" index="1" class="nav"></div><script>var div = document.querySelector('div');// 1. 获取元素的属性值// (1) element.属性console.log(div.id);//(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 indexconsole.log(div.getAttribute('id'));console.log(div.getAttribute('index'));// 2. 设置元素属性值// (1) element.属性= '值'div.id = 'test';div.className = 'navs';// (2) element.setAttribute('属性', '值');  主要针对于自定义属性div.setAttribute('index', 2);div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className// 3 移除属性 removeAttribute(属性)    div.removeAttribute('index');</script>
</body></html>

通用修改元素属性值方式setAttribute（以后就用这个修改，主要用来设置自定义属性，元素自带属性还是用老方法设置）移除属性值removeAttribute


代码见上

JavaScript学习笔记（3）相关推荐

  1. Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  2. Java程序猿的JavaScript学习笔记（汇总文件夹）

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  3. JavaScript学习笔记（五）

    JavaScript学习笔记(五) ①Array类 本地对象 ②Date类 ①Global对象 对象的类型   内置对象 ②Math对象 宿主对象 今天继续学习JS中的对象,昨天内置对象Global对 ...

  4. JavaScript学习笔记（备忘录）

    JavaScript学习笔记(备忘录) ===运算符 判断数值和类型是否相等.如: console.log('s'==='s') //输出trueconsole.log('1'===1) //输出fa ...

  5. Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. JavaScript学习笔记（十）——学习心得与经验小结

    JavaScript学习笔记(十)--学习心得与经验小结 目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/mixer/archi ...

  7. JavaScript 学习笔记（1）

    1.     何为 Jscript JScript 是一种解释型的.基于对象的脚本语言. 局限性: 1)        不能使用该语言来编写独立运行的应用程序 2)        没有对读写文件的内置 ...

  8. 前端获取div里面的标签_web前端教程JavaScript学习笔记DOM

    web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型 其实就是操作 html 中的标签的一些能力 我们可以操作哪些内容 获取一个元素 ...

  9. JavaScript学习笔记之数组（二）

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  10. JavaScript学习笔记（七）——厚积薄发之小成果

    JavaScript学习笔记(七)--厚积薄发之小成果 目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/wdpp/archive ...

最新文章

  1. IT运维包括最基本的三个方面
  2. c++ websocket客户端_python测试开发django81.dwebsocket实现websocket
  3. 40个漂亮的单页网站设计案例（上篇）
  4. pymc3 贝叶斯线性回归_使用PyMC3估计的贝叶斯推理能力
  5. 励志！从中专生到清华博士的逆袭人生
  6. Pell数列（信息学奥赛一本通-T1202）
  7. processon.com - 在线团队协作软件（草巾冒小子）推荐 - 资源篇
  8. 斗地主AI算法——第九章の被动出牌(3)
  9. Ext4.1 Grid 分页查询
  10. H5新标签--语义化标签
  11. 利用mysqldump 将一个表按条件导出数据
  12. PHP一维数组转二维数组正则表达式
  13. 心电图分析软件_窦性P波形态突变或多变的心电图分析
  14. linux 备份命令
  15. 在线更换背景网站(白色背景换为蓝色背景证件照)
  16. 你真的了解USB吗？USB充电大揭秘(二)
  17. Ubuntu 18.04使用百度网盘笔记
  18. h5输入框提示语 正常文本框提示语
  19. 水贝风机远程控制app
  20. 数据结构与算法（003）：线性表-概述

热门文章

  1. [你必须知道的.NET]第三十二回，，深入.NET 4.0之，Tuple一二
  2. BADI EXIT等增强报W警告类消息
  3. 7、Power Map—实例：添加二维数据表以及批注
  4. 14、Power Query-行列管理
  5. SAP 供应商寄售业务的标准流程
  6. 特性，物料特性，批次特性（转自SAPNow）
  7. 软件测试需要什么样的思维,你知道软件测试的核心价值是什么吗？为什么我们需要软件测试？...
  8. 三类MySQL_mysql 常用的三类函数
  9. vb 访问远程计算机,vb 怎么访问远程电脑SQL SERVER数据库
  10. java的printf语法_java printf的一些常用的打印格式总结