1、访问节点
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>访问节点</title> | |
| <!-- | |
| DOM（Document Object Model） 文档对象模型 | |
| HTML-DOM | |
| CSS-DOM | |
| XML-DOM | |
| DOM-CORE | |
| noteType的返回值： | |
| 1 ：元素节点 | |
| 2 ：属性节点 | |
| 3 ：文本节点 | |
| 8 ：注释节点 | |
| 9 ：文档节点 | |
| --> | |
| </head> | |
| <body> | |
| <ul> | |
| <li>大家辛苦了1</li> | |
| <li>大家辛苦了2</li> | |
| <li>大家辛苦了3</li> | |
| </ul> | |
| <img src="../images/cat.jpg" alt="这是一只可爱的小猫咪" id="cat"> | |
| <script type="text/javascript"> | |
| //获取ul中的第一个li | |
| var ul= document.getElementsByTagName("ul")[0]; | |
| //输出节点的名称 | |
| document.write("ul节点的名称:"+ul.nodeName+"<br/>"); | |
| document.write("ul节点的类型:"+ul.nodeType+"<br/>"); | |
| document.write("ul节点的值:"+ul.nodeValue+"<br/>"); | |
| // 01.获取ul中的第一个li 元素节点 | |
| var li=ul.firstElementChild; | |
| document.write("li节点的名称:"+li.nodeName+"<br/>"); | |
| document.write("li节点的类型:"+li.nodeType+"<br/>"); | |
| document.write("li节点的值:"+li.nodeValue+"<br/>"); | |
| //获取小猫咪 | |
| var cat=document.getElementById("cat"); | |
| document.write("img节点的名称:"+cat.nodeName+"<br/>"); | |
| document.write("img节点的类型:"+cat.nodeType+"<br/>"); | |
| document.write("img节点的值:"+cat.nodeValue+"<br/>"); | |
| //动态改变小猫咪的 宽度和高度 | |
| cat.setAttribute("width","200px"); | |
| cat.setAttribute("height","200px"); | |
| //获取我们的属性对应的属性值 | |
| var src= cat.getAttribute("src"); | |
| document.write("src:"+src+"<br/>"); | |
| //02.获取属性节点 | |
| var alt= cat.getAttributeNode("alt"); | |
| document.write("img节点alt的名称:"+alt.nodeName+"<br/>"); | |
| document.write("img节点alt的类型:"+alt.nodeType+"<br/>"); | |
| document.write("img节点alt的值:"+alt.nodeValue+"<br/>"); | |
| //03. 获取第一个li的内容 | |
| var text= li.firstChild; //文本节点 | |
| document.write("text的名称:"+text.nodeName+"<br/>"); | |
| document.write("text的类型:"+text.nodeType+"<br/>"); | |
| document.write("text的值:"+text.nodeValue+"<br/>"); | |
| </script> | |
| </body> | |
| </html> |
2、节点的曾删改
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>节点的增删改</title> | |
| </head> | |
| <body> | |
| <ul> | |
| <li>大家辛苦了1</li> | |
| <li>大家辛苦了2</li> | |
| <li>大家辛苦了3</li> | |
| <li>大家辛苦了4</li> | |
| <li>大家辛苦了5</li> | |
| <li>大家辛苦了6</li> | |
| <li>大家辛苦了7</li> | |
| <li>大家辛苦了8</li> | |
| <li>大家辛苦了9</li> | |
| <li>大家辛苦了10</li> | |
| <li>大家辛苦了11</li> | |
| <li>大家辛苦了12</li> | |
| </ul> | |
| <script type="text/javascript"> | |
| //首先获取页面中的第一个ul | |
| var ul= document.getElementsByTagName("ul")[0]; | |
| //创建一个新的节点 | |
| var newLi=document.createElement("li"); | |
| //给新节点的增加内容 | |
| newLi.innerHTML="<h1>哈哈</h1>"; | |
| //在第7 个位置之前 把新增的li放入 | |
| var needLi= ul.getElementsByTagName("li")[6]; | |
| //ul.insertBefore(newLi,needLi); // 把newLi放在needLi之前 | |
| //替换指定的节点 | |
| var repLi= ul.getElementsByTagName("li")[9]; | |
| ul.replaceChild(newLi,repLi); | |
| //删除指定的节点 | |
| ul.removeChild(newLi); | |
| //clone UL | |
| var newUl= ul.cloneNode(true); | |
| // 在body中增加 ul | |
|
ul.parentNode.appendChild(newUl); |
|
| </script> | |
| </body> | |
| </html> |
3、Style样式
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>Style样式</title> | |
| <!-- | |
| 之前接触的 行内样式 style 是css设置样式 | |
| 现在我们使用的是js中的设置样式！ | |
| --> | |
| <style type="text/css"> | |
| #myDiv{ | |
| height: 50px; | |
| 50px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="myDiv" style="border: 1px solid red"></div> | |
| <button type="button" onclick="changeBackground();">换背景色</button> | |
| <button type="button" onclick="changeMargin();">换外边距</button> | |
| <script type="text/javascript"> | |
| var div=document.getElementById("myDiv"); | |
| /** | |
| * 通过js中的style属性来设置样式 | |
| * | |
| * 注意点： | |
| * 01.css中有的属性我们 style中都有 | |
| * 02.只不过属性名写法不一致 | |
| * 比如说 css font-size style fontSize | |
| */ | |
| function changeBackground(){ | |
| div.style.backgroundColor="pink"; //改变背景颜色 | |
| } | |
| function changeMargin(){ | |
| div.style.marginLeft="50px"; //改变外边距 | |
| } | |
| </script> | |
| </body> | |
| </html> |
4、Tab选项卡
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>Tab切换</title> | |
| <style type="text/css"> | |
| #tab{ 400px;} | |
| #tab ul{list-style: none;overflow:hidden;margin:0px;padding:0px;} | |
| #tab ul li{float:left;padding:5px 10px;border:1px solid #eee;cursor:pointer;} | |
| #tab ul li.cur{background-color: red} | |
| #tab .content{100%;border:1px solid #eeeeee;height: 100px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="tab"> | |
| <ul> | |
| <li class="cur">tab1</li> | |
| <li>tab2</li> | |
| <li>tab3</li> | |
| <li>tab4</li> | |
| </ul> | |
| <div id="c-box"> | |
| <div class="content" id="content-0"> | |
| tab-1第一个容器的内容 | |
| </div> | |
| <div class="content" id="content-1" style="display: none;"> | |
| tab-2第二个容器的内容 | |
| </div> | |
| <div class="content" id="content-2" style="display: none;"> | |
| tab-3第3个容器的内容 | |
| </div> | |
| <div class="content" id="content-3" style="display: none;"> | |
| tab-4第4个容器的内容 | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| //获取页面中需要得所有li的集合 | |
| var liList=document.getElementsByTagName("li"); | |
| //循环li集合 | |
| for(var i=0;i<liList.length;i++){ | |
| liList[i].index=i; //当前选中的li | |
| liList[i].onmouseover=function(){ //鼠标移入事件 | |
| for(var j=0;j<liList.length;j++){ //循环div | |
| document.getElementById("content-"+j).style.display="none"; //所有div的都隐藏 | |
| liList[j].className=""; //清除所有的li 的class属性值 | |
| } | |
| liList[this.index].className="cur";//设置选中的li样式 | |
| document.getElementById("content-"+this.index).style.display="block"; //显示选中的li对应div | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
5、ClassName属性
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>className属性</title> | |
| <style type="text/css"> | |
| .myDiv{ | |
| height: 50px; | |
| 50px; | |
| border: 1px solid red; | |
| } | |
| .newStyle{ | |
| height: 150px; | |
| 150px; | |
| border: 2px solid pink; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="myDiv" id="myDiv"></div> | |
| <script type="text/javascript"> | |
| var div= document.getElementById("myDiv"); | |
| div.onclick=function(){ | |
| div.className="newStyle"; //newStyle是我们需要设置class的名称 | |
| } | |
| </script> | |
| </body> | |
| </html> |
6、EasyUI实现tabs
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>EasyUI实现tabs</title> | |
| </head> | |
| <body> | |
| <div id="myTabs"> | |
| <ul> | |
| <li><a href="#a">第1个</a></li> | |
| <li><a href="#b">第2个</a></li> | |
| <li><a href="#c">第3个</a></li> | |
| <li><a href="#d">第4个</a></li> | |
| </ul> | |
| <div id="a">第1个选项卡</div> | |
| <div id="b">第2个选项卡</div> | |
| <div id="c">第3个选项卡</div> | |
| <div id="d">第4个选项卡</div> | |
| </div> | |
| <!-- 引入我们需要的js文件--> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript" src="../js/jquery-ui.js"></script> | |
| <script type="text/javascript" src="../js/jquery.ui.tabs.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| $("#myTabs").tabs({ | |
| active:1, //默认选中第一个tab | |
| event:"mouseover" | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
7、滚动距离
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>滚动距离</title> | |
| <style type="text/css"> | |
| *{margin:0;padding: 0;} | |
| #box1{height:200px; 200px;background:#eee;border:1px solid #000;overflow-y:scroll;} | |
| p{line-height:40px;} | |
| </style> | |
| <script type="text/javascript"> | |
| window.onload=function(){ | |
| var box1=document.getElementById("box1"); | |
| var text=document.getElementById("text"); | |
| //当div滚动的时候 | |
| box1.onscroll=function(){ | |
| text.innerHTML="距离TOP多少像素："+box1.scrollTop; | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="box1"> | |
| <p>1</p> | |
| <p>2</p> | |
| <p>3</p> | |
| <p>4</p> | |
| <p>5</p> | |
| <p>6</p> | |
| <p>7</p> | |
| <p>8</p> | |
| <p>9</p> | |
| <p>10</p> | |
| <p>11</p> | |
| <p>12</p> | |
| <p>13</p> | |
| <p>14</p> | |
| </div> | |
| <div id="text"></div> | |
| </body> | |
| </html> |
8、window.onload
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>window.onload</title> | |
| <!-- | |
| window.onload | |
| 注意点： | |
| 01.在整个页面中只能存在一次，否则后面会覆盖前面 | |
| 02.页面中所有的内容加载完毕之后才执行！ | |
| 03.没有简写的方法 | |
| --> | |
| </head> | |
| <body> | |
| <img src="../images/cat.jpg"> | |
| <script type="text/javascript"> | |
| //alert("页面没有加载完毕就可能执行！"); | |
| window.onload=function(){ | |
| alert("页面中所有的内容加载完毕之后才执行！"); | |
| } | |
| </script> | |
| </body> | |
| </html> |
9、picture浮动
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>滚动距离</title> | |
| <style type="text/css"> | |
| *{margin:0;padding: 0;} | |
| #box{ | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| window.onload = function () { | |
| var box=document.getElementById("box"); | |
| var time=null,x= 1,y= 1,speed=5; | |
| function go(){ | |
| //水平方向 | |
| if((box.offsetLeft+box.offsetWidth)>document.documentElement.clientWidth){ | |
| x=-1; | |
| } | |
| if(box.offsetLeft<0){ | |
| x=1; | |
| } | |
| box.style.left=box.offsetLeft+x*speed+"px"; | |
| //垂直方向 | |
| if((box.offsetTop+box.offsetHeight)>document.documentElement.clientHeight){ | |
| y=-1; | |
| } | |
| if(box.offsetTop<0){ | |
| y=1; | |
| } | |
| box.style.top=box.offsetTop+x*speed+"px"; | |
| } | |
| //定时函数 | |
| time=setInterval(go,100); | |
| //鼠标移上去 停止 | |
| box.onmousemove=function(){ | |
| if(time!=null){ | |
| clearInterval(time); | |
| } | |
| } | |
| //鼠标离开 继续移动 | |
| box.onmouseout=function(){ | |
| time=setInterval(go,100); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="box"> | |
| <img src="../images/cat.jpg" height="200px" width="200px"> | |
| </div> | |
| </body> | |
| </html> |