互联网站备案表,浙江住房和建设网站,网站建设招标模板,网站开发流行工具一、排他操作
1.排他思想 如果有同一组元素#xff0c;我们想要某一个元素实现某种样式#xff0c;需要用到循环的排他思想算法#xff1a; 1.所有的元素全部清除样式 2.给当前的元素设置样式 注意顺序能不能颠倒#xff0c;首先清除全部样式#xff0c;再设置自己当前的…一、排他操作
1.排他思想 如果有同一组元素我们想要某一个元素实现某种样式需要用到循环的排他思想算法 1.所有的元素全部清除样式 2.给当前的元素设置样式 注意顺序能不能颠倒首先清除全部样式再设置自己当前的样式 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title01排他思想/title
/head
bodybutton classbtn按钮1/buttonbutton classbtn按钮2/buttonbutton classbtn按钮3/buttonbutton classbtn按钮4/buttonbutton classbtn按钮5/buttonscript//1.获取到所有的元素var btns document.getElementsByClassName(btn);//console.log(btns);//2.遍历 btns是一个数组有length和根据索引获取元素但是不具备数据中push等方法for(var i 0; i btns.length; i){//给所有的button都注册点击事件btns[i].onclick function(){//alert(ok);//1)清除所有按钮的样式(重新再遍历一遍所有的btns)for(var j 0; j btns.length; j){btns[j].style.backgroundColor ;}//2)添加样式this.style.backgroundColor pink;}}/script
/body
/html2.案例
案例一 百度换肤 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title02百度换肤/titlestyle*{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;}.baidu img{width: 100px;}.baidu:hover{cursor: pointer; /*手的形状*/}/style
/head
bodyul classbaidu idbaiduliimg srcimages/1.jpg alt/liliimg srcimages/2.jpg alt/liliimg srcimages/3.jpg alt/liliimg srcimages/4.jpg alt/li/ulscript//1.获取元素//1-1 获取到ul (通过id获取就是只获取了一个对象)var ulObj document.getElementById(baidu);//1-2 通过ul对象找ul中的imgvar imgs ulObj.getElementsByTagName(img)//console.log(imgs);//2.循环imgsfor(var i 0; i imgs.length; i){//给每一个都注册事件imgs[i].onclick function(){//console.log(this.src);document.body.style.backgroundImage url(this.src)}}/script
/body
/html案例二隔行变色 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title03隔行变色/titlestyle*{margin: 0; padding: 0;}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 tr td{border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg {background-color: #999;}/style
/head
bodytable idmytabletheadtrth代码/thth名称/thth最近公布净产值/thth净产值增长率/th/tr/theadtbodytrtd0121213/tdtd农银金穗3个月订气开放债券/tdtd1.09/tdtd1.09/td/trtrtd0121213/tdtd农银金穗3个月订气开放债券/tdtd1.09/tdtd1.09/td/trtrtd0121213/tdtd农银金穗3个月订气开放债券/tdtd1.09/tdtd1.09/td/trtrtd0121213/tdtd农银金穗3个月订气开放债券/tdtd1.09/tdtd1.09/td/trtrtd0121213/tdtd农银金穗3个月订气开放债券/tdtd1.09/tdtd1.09/td/trtrtd0121213/tdtd农银金穗3个月订气开放债券/tdtd1.09/tdtd1.09/td/trtrtd0121213/tdtd农银金穗3个月订气开放债券/tdtd1.09/tdtd1.09/td/trtrtd0121213/tdtd农银金穗3个月订气开放债券/tdtd1.09/tdtd1.09/td/tr/tbody/tablescript//1.获取到所有的tr每一个tr就是一行var mytable document.getElementById(mytable);var trs mytable.getElementsByTagName(tr);//console.log(trs);//2.遍历trfor(var i 0; i trs.length; i){//隔行变色// if(i ! 0 i % 2 0){ //偶数// trs[i].style.backgroundColor pink// }if(i 0){continue}//鼠标放在tr上有一个背景颜色,给每个tr都注册一个鼠标放上去的事件trs[i].onmouseover function(){this.className bg;}//鼠标移开移除背景样式trs[i].onmouseout function(){this.className }}/script
/body
/html案例三全选全不选 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title04全选和全部选/titlestyle*{margin: 0; padding: 0;}.wrap {width: 300px;margin: 100px auto;}table {border-spacing: 0;border: 1px solid #c0c0c0;}th,td{border: 1px solid #d0d0d0;color: #404040;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
bodytable classwraptheadtrthinput typecheckbox idj_chAll //thth商品/thth价格/th/tr/theadtbodytrtdinput typecheckbox classother//tdtdIphone16/tdtd8000/td/trtrtdinput typecheckbox classother//tdtd华为mate70/tdtd9000/td/trtrtdinput typecheckbox classother//tdtd小米17/tdtd5000/td/trtrtdinput typecheckbox classother//tdtdvivo/tdtd4000/td/tr/tbody/tablescript//1.获取元素//1-1 全选复选框var all document.getElementById(j_chAll);//1-2 所有的其它复选框var others document.getElementsByClassName(other);//通过复选框对象.checked可以获取到复选框的状态true是勾选状态false取消勾选的状态//通过复选框对象.checked true/false 可以设置复选框的状态//给全选和全部选复选框注册点击事件all.onclick function(){var flag all.checked; //复选框的状态console.log(flag);//2.遍历所有的其它复选框for(var i 0; i others.length; i){others[i].checked flag; //设置复选框的状态}}// //看看all复选框点击的时候发生了什么// var flag all.checked;// console.log(flag);// all.onclick function(){// var flag all.checked;// console.log(flag);// }/script
/body
/html升级
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title05全选和全部选升级/titlestyle*{margin: 0; padding: 0;}.wrap {width: 300px;margin: 100px auto;}table {border-spacing: 0;border: 1px solid #c0c0c0;}th,td{border: 1px solid #d0d0d0;color: #404040;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
bodytable classwraptheadtrthinput typecheckbox idj_chAll //thth商品/thth价格/th/tr/theadtbodytrtdinput typecheckbox classother//tdtdIphone16/tdtd8000/td/trtrtdinput typecheckbox classother//tdtd华为mate70/tdtd9000/td/trtrtdinput typecheckbox classother//tdtd小米17/tdtd5000/td/trtrtdinput typecheckbox classother//tdtdvivo/tdtd4000/td/tr/tbody/tablescript//1.获取元素//1-1 全选复选框var all document.getElementById(j_chAll);//1-2 所有的其它复选框var others document.getElementsByClassName(other);//通过复选框对象.checked可以获取到复选框的状态true是勾选状态false取消勾选的状态//通过复选框对象.checked true/false 可以设置复选框的状态//给全选和全部选复选框注册点击事件all.onclick function(){var flag all.checked; //复选框的状态console.log(flag);//2.遍历所有的其它复选框for(var i 0; i others.length; i){others[i].checked flag; //设置复选框的状态}}//2.遍历所有的其它复选框for(var i 0; i others.length; i){others[i].onclick function(){var ch checkCheckbox(others); //会返回一个truefalse//console.log(ch);all.checked ch;//给全选或全部选复选框设置值}}//检查其它的复选框的状态如果全选就返回true只要有一个不选就返回falsefunction checkCheckbox(chks){var ch true;// 遍历for(var i 0; i chks.length; i){//检查每一个的状态if(chks[i].checked false){ch false;break}}return ch;}// //看看all复选框点击的时候发生了什么// var flag all.checked;// console.log(flag);// all.onclick function(){// var flag all.checked;// console.log(flag);// }/script
/body
/html二、自定义属性操作
1.获取属性值 有两种方式 element.属性就可以获取到该元素属性的值element.getAttribute(‘属性’) 区别 element.属性 获取内置属性值 元素本身自带的属性element.getAttribute(‘属性’)主要是获取自定义属性我们程序自定义的属性 2.设置属性的值 有两种方式 element.属性 值element.setAttribute(‘属性名’,属性值); 区别 element.属性 值 设置内置属性的值element.setAttribute(‘属性名’,属性值); 主要设置自定义属性的值 3.移除属性 element.removeAttribute(‘属性’); 4.案例
案例一讲课案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title06.获取属性值/title
/head
bodydiv iddemo index1 classnav123/divscript//1.获取到div对象。根据id获取是获取到一个对象var div document.getElementById(demo);console.log(div.id); //获取div对象中id属性的值console.log(div.getAttribute(id)); //获取div这个对象中id这个属性的值console.log(div.index); //***获取失败对象.属性名只能获取本身自有属性不能获取自定义属性console.log(div.getAttribute(index)); //获取div这个对象中index这个属性的值//2.设置对象的属性值值//2-1 element.属性 值div.id testconsole.log(div.id);div.className navsconsole.log(div.className);//2-2 element.setAttribute(属性名,值).主要针对的是自定义属性div.setAttribute(index,222)console.log(div.getAttribute(index));div.setAttribute(class,abded)console.log(div.className);//3.移除自定义属性 removeAttribute(属性名)div.removeAttribute(index)div.removeAttribute(class);/script
/body
/html案例二tab栏 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title07tab/titlestyle*{margin: 0; padding: 0;}ul li{list-style: none;}.tab{width: 978px;margin: 100px auto;}.tab_list{height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li{float: left;height: 39px;line-height: 39px;padding: 0px 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item {display: none;}/style
/head
bodydiv classtabdiv classtab_list idtab_listulli classcurrent商品介绍/lili规格与包装/lili售后保障/lili商品评价50000/lili手机社区/li/ul/divdiv classtab_condiv classitem styledisplay: block;商品介绍模块/divdiv classitem规格与包装模块内容/divdiv classitem售后保障内容京东商城向您保证所售商品均为正品行货京东自营商品开具机打发票或电子发票。/divdiv classitem手机收到了。特别特别棒货比三家才买的店主人很好回答问题很有耐心也很详细有需要还会再来的/divdiv classitem手机社区心中疑惑就问问买过此商品的同学吧~我要提问/div/div/divscript//1.获取元素var tab_list document.getElementById(tab_list);var lis tab_list.getElementsByTagName(li);var items document.getElementsByClassName(item);//console.log(lis);//2.利用for循环给li绑定点击事件for(var i 0; i lis.length; i){//给每个li设置一个索引号lis[i].setAttribute(index,i);//注册事件lis[i].onclick function(){//2-1 li点击有红色样式//其它要干掉for(var j 0; j lis.length; j){lis[j].className ;}//给当前点击的红色样式this.className current//2-2 点击li下面显示的内容模块变化var index this.getAttribute(index);console.log(index);//其它的要隐藏for(var k 0; k items.length; k){items[k].style.display none}items[index].style.display block}}/script
/body
/html5.H5自定义属性 自定义属性目的是为了保存并使用数据。有些数据可以保存在页面中而不用保存在数据库中 自定义一属性获取是通过getAttribute(‘属性名’) 获取 但是有些自定义属性很容易引起歧义不容易判断是元素的内置属性还是自定义属性。 h5给我们新增了自定义属性 设置自定义属性 h5规定自定义属性data- 开头作为属性名并赋值如 设置element.setAttribute(‘data-index’,1); 获取自定义属性 兼容属性获取element.getAttribute(‘data-index’);h5新增了获取方式element.dataset.index 或者 element.dataset(‘index’) !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title08.H5自定义属性/title
/head
bodydiv idmy getTime20 data-index2 data-list-nameadmin/divscript//1.获取元素var div document.getElementById(my);console.log(div.getAttribute(getTime));//设置一个h5属性div.setAttribute(data-time,20);console.log(div.getAttribute(data-time));//h5新增的自定义属性的方法( 只能是data- 开头)//dataset是一个集合里面存放了所有以data开头的自定义属性console.log(div.dataset);console.log(div.dataset.index); //2console.log(div.dataset[index]); //2//如果自定义属性里面有多个链接的单词我们获得时候采用驼峰写法console.log(div.dataset.listName);console.log(div.dataset[listName]);/script
/body
/html三、节点操作
1.节点概述 节点网页中所有的内容都是节点 标签、属性、文本、注释等等在DOM中节点使用node表示 html DOM 树种所有的节点都可以通过javaScript来进行访问所有的HTML元素节点均可被修改也可以创建或删除 一般地节点至少拥有nodeType节点类型、nodeName节点名称和nodeValue节点值这三个基本属性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title09节点概述/title
/head
bodydiv我是div/divspan我是span/spanulli我是li/lili我是li/lili我是li/lili我是li/li/uldiv idboxspan classerweima我是二维码/span/divscriptvar box document.getElementById(box);console.dir(box);/script
/body
/html元素节点 nodeType 为 1元素节点 nodeType 为 2元素节点 nodeType 为 3 (文本节点内包含文字、空格、换行等等)
我们实际开发种节点操作主要是操作元素节点
2.父节点 node.parentNode 属性可以返回某节点的父节点注意是最近的一个父节点 如果指定的节点没有父节点返回null !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title10父节点/title
/head
bodydiv我是div/divspan我是span/spanulli我是li/lili我是li/lili我是li/lili我是li/li/uldiv idboxspan classerweima iderweima我是二维码/span/divscript//获取到二维码对象var erweima document.getElementById(erweima);//node.parentNode 得到的是离元素最近的父节点如果找不到父节点就返回nullconsole.dir(erweima.parentNode); //div#box/script
/body
/html3.子节点 所有的子节点 parentNode.childNodes 返回的是包含指定节点的子节点的集合该集合即时更新的集合 **注意**返回值里面包含了所有的子节点包括元素节点、文本节点等 如果只需要获取到里面的元素节点则需要专门的处理所以我们一般不提倡使用childNodes parentNode.children 是一个只读属性返回的是所有的子元素节点它只返回子元素节点其它节点不返回终点掌握这个 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title11子节点/title
/head
bodydiv我是div/divspan我是span/spanul idulli我是li/lili我是li/lili我是li/lili我是li/li/uldiv idboxspan classerweima iderweima我是二维码/span/divscript//获取ulvar ul document.getElementById(ul);//获取ul中所有的li//var lis ul.getElementsByTagName(li);var lis ul.childrenconsole.log(lis);//1.字节点console.log(ul.childNodes);console.log(ul.childNodes[0].nodeType); //3console.log(ul.childNodes[1].nodeType); //1console.log(ul.children);/script
/body
/html3.1 获取子节点
第一个节点和最后一个 parentNode.firstNode ;返回第一个子节点找不到就返回null通过也页包含所有的节点 parentNode.firstElementNode: 返回一个子元素节点找不到就是null parentNode.lastChild :最后一个子节点 parentNode.lastElementChild: 返回最后一个子元素节点找不到就是null !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title13.新浪下拉菜单/titlestyle*{margin: 0; padding: 0;}li{list-style: none;}a{text-decoration: none;font-size: 14px;}#nav{margin: 100px;}#navli{position: relative;float: left;width: 80px;height: 40px;text-align: center;}#nav li a{display: block;width: 100%;height: 100%;line-height: 40px;color: #333;}#nav ul{display: none;}#navlia:hover{background-color: #eee;}#nav ul li a:hover{background-color: #fff5da;}/style
/head
bodyul idnavlia href#微博/aullia href#私信/a/lilia href#评论/a/lilia href#我/a/li/ul/lilia href#微博/aullia href#私信/a/lilia href#评论/a/lilia href#我/a/li/ul/lilia href#微博/aullia href#私信/a/lilia href#评论/a/lilia href#我/a/li/ul/lilia href#微博/aullia href#私信/a/lilia href#评论/a/lilia href#我/a/li/ul/li/ulscript//1.获取元素var nav document.getElementById(nav);//2.获取livar lis nav.children;console.log(lis);//3.循环注册事件for(var i 0;i lis.length; i){lis[i].onmouseover function(){//this.children[1] 表示当前这个li种的ulthis.children[1].style.display block}lis[i].onmouseout function(){this.children[1].style.display none}}/script
/body
/html3.2 兄弟节点 下一个兄弟 : nextElementSibling 上一个兄弟 : previousElementSibling !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh2我是h2/h2div iddiv我是div/divspan我是span/spanscriptvar div document.getElementById(div);//1.nextSibling 下一个兄弟节点包含了元素节点或者是文本节点等等 (了解)console.log(div.nextSibling); //下一个console.log(div.previousSibling); //上一个//2.nextElementSibling 下一个兄弟 previousElementSibling 上一个兄弟 [掌握]div.nextElementSibling.style.backgroundColorpinkconsole.log(div.nextElementSibling); //下一个console.log(div.previousElementSibling); //上一个div.previousElementSibling.style.backgroundColor red/script
/body
/html4.创建添加节点 创建节点docuemnt.createElement(tagName’);java添加节点node.appendChild(child); !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyul idulli123/li/ulscript//1.创建节点var li document.createElement(li);//2.添加节点到父节点var ul document.getElementById(ul);//加入到父节点里子元素的最后ul.appendChild(li);//ul.children[1].innerHTML 456//添加节点var li2 document.createElement(li);//用insertBefore(参数一是创建的新元素参数二添加的位置)ul.insertBefore(li2,ul.children[0]); //将新的节点加入到ul的第一个孩子的位置console.log(li);/script
/body
/html5.案例 发布留言 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title16.留言板/titlestyle*{margin: 0; padding: 0;}body{padding: 100px;}textarea{width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none; /*不让修改大小*/}ul{width: 300px;padding: 5px;background-color: rgb(245,209,243);color: #fff;font-size: 14px;margin: 15px 0;}/style
/head
bodytextarea name idcomment/textareabr/button idbtn发布/buttonul idul/ulscript//1.获取元素var btn document.getElementById(btn);var comment document.getElementById(comment);var ul document.getElementById(ul);//2.注册事件btn.onclick function(){//判断是否有输入内容if(comment.value ){alert(请输入内容);return false;} else {//2-1 创建元素var li document.createElement(li);//设置内容li.innerHTML comment.value//2-2 添加元素//ul.appendChild(li); //添加到后面ul.insertBefore(li,ul.children[0]);//添加完成后清除输入框种的内容comment.value }}/script
/body
/html
