天津网站建设网络,超市管理系统,公司做网站需要准备什么材料,漯河网站推广公司Objective#xff08;本课目标#xff09;
掌握基本课堂案例掌握节点的关系操作
1. 按钮选中案例 课堂案例#xff1a;1.显示按钮的选中效果.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nam…Objective本课目标
掌握基本课堂案例掌握节点的关系操作
1. 按钮选中案例 课堂案例1.显示按钮的选中效果.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/headbodybutton按钮1/buttonbutton按钮2/buttonbutton按钮3/buttonbutton按钮4/buttonbutton按钮5/buttonscript/* 需求需要给每个按钮都绑定onclick事件点击当前按钮的时候把当前按钮的背景色为红色其他按钮的颜色去掉*/const btns document.querySelectorAll(button)for (const btn of btns) {btn.onclick function () {//先把所有按钮的样式进行初始化steAllbackgroundColor(btns)this.style.backgroundColor red;}function steAllbackgroundColor(btn) {for (const btn of btns) {btn.style.backgroundColor ;}}}/script
/body/html
2. 图片轮播案例 课堂案例2.页面切换背景图片.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle*{margin: 0px;padding: 0px;}li{list-style: none;}.bw{margin: 100px auto;background-color: #ffffff;width: 420px;padding-top: 3px;}.bw li{float: left;margin: 0 1px;cursor: pointer;}.bw img{width: 100px;}body{background: url(images/1.png) no-repeat center top}/style
/head
bodyul classbwliimg srcimages/1.png alt/liliimg srcimages/2.png alt/liliimg srcimages/3.png alt/liliimg srcimages/4.png alt/liscriptconst imgAll document.querySelectorAll(img)for(const item of imgAll){item.onclick function(){document.body.style.backgroundImage url(this.src);}}/script
/body
/html
3. 表格选中变色案例 课堂案例3.表格选中变色.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyletable{width: 700px;margin: 100px auto;text-align: center;font-size: 15px;border-collapse: collapse;}th{height: 40px;background-color: blueviolet;}tr{height: 40px;}td{border-bottom: 1px solid black;height: 40px;font-size: 14px;}.bw{background-color: yellow; }/style
/head
bodytabletheadtrth编号/thth商品名称/thth价格/thth库存/thth当日出售/thth剩余/th/tr/theadtbodytrtd111/tdtd西瓜/tdtd11.5/tdtd555/tdtd15/tdtd333/td/trtrtd222/tdtd苹果/tdtd11.5/tdtd555/tdtd15/tdtd333/td/trtrtd333/tdtd香蕉/tdtd11.5/tdtd555/tdtd15/tdtd333/td/trtrtd444/tdtd桃子/tdtd11.5/tdtd555/tdtd15/tdtd333/td/trtrtd555/tdtd石榴/tdtd11.5/tdtd555/tdtd15/tdtd333/td/trtrtd666/tdtd梨子/tdtd11.5/tdtd555/tdtd15/tdtd333/td/tr/tbody/tablescriptconst trs document.querySelectorAll(tr)/* 需求对每行绑定鼠标移入和移除事件*/for(const tr of trs){tr.onmouseover function(){// console.log(鼠标移入)//设置当前tr元素的颜色位bwthis.className bw}tr.onmouseout function(){// console.log(鼠标移出)this.className ;}}/script
/body
/html
4.全选反选 课堂案例4.全选反选.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle* {padding: 0;margin: 0;}.bw {width: 400px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 400px;}td {border: 1px solid #5513d16b;padding: 10px;}th {border: 1px solid #d0d0d0a8;background-color: rgb(0, 204, 0);color: #fff;padding: 10px;}tr {background-color: #f0f0f0;}/style
/head
bodydiv classbwtabletrthinput typecheckbox idcontro1 //thth商品/thth价格/th/trtrtdinput typecheckbox classfruit //tdtd桃子/tdtd15/td/trtrtdinput typecheckbox classfruit //tdtd猕猴桃/tdtd12/td/trtrtdinput typecheckbox classfruit //tdtd香蕉/tdtd11/td/trtrtdinput typecheckbox classfruit //tdtd枸杞/tdtd22/td/tr/table/divscript//需求1 实现全选和和全不选的效果const ctrObj1 document.querySelector(#contro1)const fruits document.querySelectorAll(.fruit)ctrObj1.onclick function(){//checked//当checkbox被选中的时候chedkedtrue//当checkbox被取消的时候checkedfalseconsole.dir(ctrObj1.checked)for(const ck of fruits){ck.checked this.checked;}}//需求2当所有的元素被选中的时候全选按钮也需要被选中for(const item of fruits){item.onclick function(){//假设式全部被选中的let flag true;for(const ck of fruits){//只要有一个没有被选中的就把标记修改为falseif(!ck.checked){flag false;}}ctrObj1.checked flag;}}/script
/body
/html
5. 自定义属性操作
5.1 获取属性值和设置属性值 getAttribute() 返回元素上一个指定的属性值。如果指定的属性不存在则返回 null 或 空字符串 setAttribute() 设置指定元素上的某个属性值。如果属性已经存在则更新该值否则使用指定的名称和值添加一个新的属性。 hasAttribute 返回一个布尔值指示该元素是否包含有指定的属性attribute。 result 为返回的布尔值true 或 false。 attName 是一个字符串表示属性的名称。 课堂案例5.元素属性的操作.html
5.2 H5自定义属性 只读属性 dataset 提供了对元素上自定义数据属性data-*读/写访问。 课堂案例6.H5自定义属性.html
5.3 案例讲解 课堂案例7.选项卡切换.html
6. 节点操作
6.1. 节点概述 节点与元素的关系是什么? Element 是一个通用性非常强的基类所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。 Node 是一个接口各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象比如继承同一组方法或者用同样的方式测试。 节点Node的基本属性
nodeName返回当前节点的节点名称
nodeType返点当前节点的类型
nodeValue返回或设置当前节点的值只有文本节点才有值标签元素和属性节点是没有值的。
Node.ELEMENT_NODE 1 元素节点
Node.ATTRIBUTE_NODE 2 属性节点
Node.TEXT_NODE 3 文本节点6.2 节点之间的关系 父子关系 兄弟关系
6.3. 获取父节点 Node.parentNode返回指定的节点在 DOM 树中的父节点。 parentElement返回当前节点的父元素节点如果该元素没有父节点或者父节点不是一个 DOM 元素则返回 null。
6.4. 获取子节点 Node.childNodes 返回包含指定节点的子节点的集合。 Element.children是一个只读属性返回 一个 Node 的子elements Element.childElementCount 只读属性返回一个无符号长整型数字表示给定元素的子元素数。
6.5. 获取头尾节点 Node.firstChild 只读属性返回树中节点的第一个子节点如果节点是无子节点则返回 null。 Node.lastChild 是一个只读属性返回当前节点的最后一个子节点。如果父节点为一个元素节点则子节点通常为一个元素节点或一个文本节点或一个注释节点。如果没有子节点则返回 null。
6.6. 获取前后节点 Node.nextSibling 是一个只读属性返回其父节点的 childNodes 列表中紧跟在其后面的节点如果指定的节点为最后一个节点则返回 null。 Node.previousSibling返回当前节点的前一个兄弟节点没有则返回null.
6.7. 创建节点和添加节点 Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中那么 appendChild() 只会将它从原先的位置移动到新的位置不需要事先移除要移动的节点。
