day16 DOM、jQurey
DOM
dom 的概念
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。DOM是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
DOM元素查找
dom查找元素分为两种:直接查找、间接查找
1、直接查找
document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合
2、间接查找
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
间接查找中:node and Element deffrent
以下是HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="i1"> <a>1</a> <a>2</a> <a>3</a> </div> </body> </html> a:在chrom浏览器中node查找以上html ID过程结果如下: t = document.getElementById("i1") <div id="i1">…</div> t.childNodes [#text, <a>1</a>, #text, <a>2</a>, #text, <a>3</a>, #text] b:在chrom浏览器中Element查找以上html ID过程结果如下: t.children [<a>1</a>, <a>2</a>, <a>3</a>] 总结: 以node 查找的html ID 结果是既有换行符的(#text),也有标签元素(<a>2</a>)
以Element查找的html 结果是没有换行符的(#text),只有标签元素。
当以下代码在同一行的时候两种方法的查找结果一致: <body><div id="i1"><a>1</a><a>2</a><a>3</a></div>
DOM元素操作
dom元素的操作:
dom 可以对内容、属性、class、标签、样式、位置、提交表单、其他操作
1、内容操作:
innerText 文本 outerText innerHTML HTML内容 innerHTML value 值
innerText 和 innerHTML的区别:
dom内容操作innerText 和 innerHTML的区别: 依以下代码为例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" id="i1"/> <a id="i2">百<span>888</span>度</a> </body> </html> 浏览器console操作: t = document.getElementById("i2") <a id="i2">…</a> t.innerText 取到的值不包含标html的内容,只包含文本内容: "百888度" t.innerHTML取到的值既包含文本内容,又包含html的内容 "百<span>888</span>度"
注意:t = document.getElementById("i2"),Dom文档的命名规则:当dom中的方法由多个单词组成首个单词首写字母小写,其他后续的单词首字母大写。
搜索框文本操作在实际生产生活中的实例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();"/> 9 <input id="i2" type="text"/> 10 <script type="text/javascript"> 11 function Focus(){ //定义函数,获取焦点函数 12 // connsole.log("Focus"); 13 // 获取标签,清空 14 var tag = document.getElementById("i1"); //查找标签 15 if(tag.value=="请输入关键字"){ //获取标签内的内容,并判断标签内的文本内容 16 tag.value=""; // 修改表标签内的文本内容。 17 } 18 } 19 20 function Blur(){ 21 //console.log("blur"); 22 var tag = document.getElementById("i1"); //查找标签 23 var val = tag.value; //获取标签内的文本内容 24 //trim()方法为去除空格。 25 if(val.trim().length==0){ //判断获取的值是否为空,如果为空,修改标签内的文本内容。 26 tag.value = "请输入关键字"; 27 } 28 } 29 </script> 30 </body> 31 </html>
模态对话框实例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .hide{ 8 display: none !important; 9 } 10 .shade{ 11 position: fixed; 12 top:0; 13 bottom: 0; 14 left: 0; 15 right: 0; 16 /*background-color: black;*/ 17 /*opacity: 0.6;*/ 18 background-color: rgba(0,0,0,.6); 19 z-index: 1000; 20 } 21 .modal{ 22 height: 200px; 23 width: 400px; 24 background-color: white; 25 position: fixed; 26 top: 50%; 27 left: 50%; 28 margin-left: -200px; 29 margin-top: -100px; 30 z-index: 1001; 31 } 32 </style> 33 34 </head> 35 <body> 36 <div style="height: 2000px;background-color: #dddddd;"> 37 <input type="button" value="点我" onclick="ShowModal();"/> 38 </div> 39 40 <div id="shade" class="shade hide"></div> 41 <div id="modal" class="modal hide"> 42 <a href="javascript:void (0)" onclick="HideModal();">取消</a> 43 </div> 44 45 <script> 46 function ShowModal(){ 47 var t1 = document.getElementById("shade"); 48 var t2 =document.getElementById("modal"); 49 t1.classList.remove("hide"); 50 t2.classList.remove("hide"); 51 } 52 function HideModal(){ 53 var t1 = document.getElementById("shade"); 54 var t2 =document.getElementById("modal"); 55 t1.classList.add("hide"); 56 t2.classList.add("hide"); 57 } 58 </script> 59 60 </body> 61 </html>
全选、取消、反选(标签属性操作)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="全选" onclick="CheckALL()"/> 9 <input type="button" value="取消" onclick="CancleALL()"/> 10 <input type="button" value="反选" onclick="ReverseAll()"/> 11 <table border="1px"> 12 <thead> 13 <tr> 14 <th>序号</th> 15 <th>用户名</th> 16 <th>密码</th> 17 </tr> 18 </thead> 19 <tbody id="tb"> 20 <tr> 21 <td><input type="checkbox"/></td> 22 <td>1</td> 23 <td>11</td> 24 </tr> 25 <tr> 26 <td><input type="checkbox"/></td> 27 <td>2</td> 28 <td>22</td> 29 </tr> 30 <tr> 31 <td><input type="checkbox"/></td> 32 <td>3</td> 33 <td>33</td> 34 </tr> 35 </tbody> 36 </table> 37 <script> 38 function CheckALL(){ 39 var tb = document.getElementById("tb"); 40 var trs = tb.children; 41 for(var i=0;i<trs.length;i++){ 42 var current_tr = trs[i]; 43 var ck = current_tr.firstElementChild.firstElementChild; 44 ck.setAttribute("checked","checked"); 45 } 46 } 47 function CancleALL(){ 48 var tb = document.getElementById("tb"); 49 var trs = tb.children; 50 for(var i=0;i<trs.length;i++){ 51 var current_tr = trs[i]; 52 var ck = current_tr.firstElementChild.firstElementChild; 53 ck.removeAttribute("checked");} 54 } 55 function ReverseAll(){ 56 var tb = document.getElementById("tb"); 57 var trs = tb.children; 58 for(var i=0;i<trs.length;i++) { 59 var current_tr = trs[i]; 60 var ck = current_tr.firstElementChild.firstElementChild; 61 if (ck.checked) { 62 ck.checked = false; 63 ck.removeAttribute('checked'); 64 } else { 65 ck.checked = true; 66 ck.setAttribute('checked', 'checked'); 67 } 68 } 69 70 } 71 72 </script> 73 </body> 74 </html>
2、属性操作:
attributes // 获取所有标签属性 setAttribute(key,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性 /* var atr = document.createAttribute("class"); atr.nodeValue="democlass"; document.getElementById('n1').setAttributeNode(atr); */
属性操作的示例:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="全选" onclick="CheckAll();"/> 9 <input type="button" value="取消" onclick="CancelAll();"/> 10 <input type="button" value="反选" onclick="ReverseCheck();"/> 11 12 <table border="1" > 13 <thead> 14 15 </thead> 16 <tbody id="tb"> 17 <tr> 18 <td><input type="checkbox" /></td> 19 <td>111</td> 20 <td>222</td> 21 </tr> 22 <tr> 23 <td><input type="checkbox" /></td> 24 <td>111</td> 25 <td>222</td> 26 </tr> 27 <tr> 28 <td><input type="checkbox" /></td> 29 <td>111</td> 30 <td>222</td> 31 </tr> 32 <tr> 33 <td><input type="checkbox" /></td> 34 <td>111</td> 35 <td>222</td> 36 </tr> 37 </tbody> 38 </table> 39 <script> 40 function CheckAll(ths){ 41 var tb = document.getElementById('tb'); 42 var trs = tb.childNodes; 43 for(var i =0; i<trs.length; i++){ 44 45 var current_tr = trs[i]; 46 if(current_tr.nodeType==1){ 47 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; 48 inp.checked = true; 49 } 50 } 51 } 52 53 function CancelAll(ths){ 54 var tb = document.getElementById('tb'); 55 var trs = tb.childNodes; 56 for(var i =0; i<trs.length; i++){ 57 58 var current_tr = trs[i]; 59 if(current_tr.nodeType==1){ 60 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; 61 inp.checked = false; 62 } 63 } 64 } 65 66 function ReverseCheck(ths){ 67 var tb = document.getElementById('tb'); 68 var trs = tb.childNodes; 69 for(var i =0; i<trs.length; i++){ 70 var current_tr = trs[i]; 71 if(current_tr.nodeType==1){ 72 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; 73 if(inp.checked){ 74 inp.checked = false; 75 }else{ 76 inp.checked = true; 77 } 78 } 79 } 80 } 81 82 </script> 83 </body> 84 </html>
3、class类操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
4、标签操作:
a、创建标签
// 方式一 (以对象方式创建标签) var tag = document.createElement('a') tag.innerText = "wupeiqi" tag.className = "c1" tag.href = "http://www.baidu.com" // 方式二 (以字符串方式创建标签) var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"
注意:默认优先使用对象的方式创建标签,在不能使用对象的方式下创建标签的时候,再使用字符串的方式创建标签。
b、操作标签
// 方式一 var obj = "<input type='text' />"; xxx.insertAdjacentHTML("beforeEnd",obj); xxx.insertAdjacentElement('afterBegin',document.createElement('p')) //注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // 方式二 var tag = document.createElement('a') xxx.appendChild(tag) xxx.insertBefore(tag,xxx[1])
标签操作(点赞实例)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .item{ 8 padding:50px; 9 position: relative; 10 } 11 </style> 12 </head> 13 <body> 14 <div class="item"> 15 <a onclick="Favor(this);">赞1</a> 16 </div> 17 <div class="item"> 18 <a onclick="Favor(this);">赞2</a> 19 </div> 20 <div class="item"> 21 <a onclick="Favor(this);">赞3</a> 22 </div> 23 <div class="item"> 24 <a onclick="Favor(this);">赞4</a> 25 </div> 26 <script> 27 function Favor(ths){ 28 // ths=>this=> 当前触发事件标签 29 var top = 49; 30 var left =71; 31 var op =1; 32 var fontSize = 18; 33 34 var tag = document.createElement("span") 35 tag.innerText='+1'; 36 tag.style.position="absolute"; 37 tag.style.top = top + "px"; 38 tag.style.left =left + "px"; 39 tag.style.opacity= op; 40 tag.style.fontSize=fontSize + "px"; 41 ths.parentElement.appendChild(tag); 42 43 var interval = setInterval(function(){ 44 top -=10; 45 left += 10; 46 fontSize +=5; 47 op -=0.1; 48 49 tag.style.top = top + "px"; 50 tag.style.left =left + "px"; 51 tag.style.opacity= op; 52 tag.style.fontSize=fontSize + "px"; 53 if(op <=0.2){ 54 clearInterval(interval); 55 ths.parentElement.removeChild(tag); 56 } 57 58 }, 50); 59 } 60 </script> 61 </body> 62 </html>
5、样式操作:
var obj = document.getElementById('i1') obj.style.fontSize = "32px"; obj.style.backgroundColor = "red";
1 <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" /> 2 3 <script> 4 function Focus(ths){ 5 ths.style.color = "black"; 6 if(ths.value == '请输入关键字' || ths.value.trim() == ""){ 7 8 ths.value = ""; 9 } 10 } 11 12 function Blur(ths){ 13 if(ths.value.trim() == ""){ 14 ths.value = '请输入关键字'; 15 ths.style.color = 'gray'; 16 }else{ 17 ths.style.color = "black"; 18 } 19 } 20 </script>
6、位置操作:
总文档高度 document.documentElement.offsetHeight 当前文档占屏幕高度 document.documentElement.clientHeight 自身高度 tag.offsetHeight 距离上级定位高度 tag.offsetTop 父定位标签 tag.offsetParent 滚动高度 tag.scrollTop /* clientHeight -> 可见区域:height + padding clientTop -> border高度 offsetHeight -> 可见区域:height + padding + border offsetTop -> 上级定位标签的高度 scrollHeight -> 全文高:height + padding scrollTop -> 滚动高度 特别的: document.documentElement代指文档根节点 */
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body style="margin: 0;"> 8 <div style="height: 900px;"> 9 10 </div> 11 <div style="padding: 10px;"> 12 <div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;"> 13 <p>asdf</p> 14 <p>asdf</p> 15 <p>asdf</p> 16 <p>asdf</p> 17 <p>asdf</p> 18 </div> 19 </div> 20 21 <script> 22 var i1 = document.getElementById('i1'); 23 24 console.log(i1.clientHeight); // 可见区域:height + padding 25 console.log(i1.clientTop); // border高度 26 console.log('====='); 27 console.log(i1.offsetHeight); // 可见区域:height + padding + border 28 console.log(i1.offsetTop); // 上级定位标签的高度 29 console.log('====='); 30 console.log(i1.scrollHeight); //全文高:height + padding 31 console.log(i1.scrollTop); // 滚动高度 32 console.log('====='); 33 34 </script> 35 </body> 36 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 9 body{ 10 margin: 0px; 11 } 12 img { 13 border: 0; 14 } 15 ul{ 16 padding: 0; 17 margin: 0; 18 list-style: none; 19 } 20 .clearfix:after { 21 content: "."; 22 display: block; 23 height: 0; 24 clear: both; 25 visibility: hidden; 26 } 27 28 .wrap{ 29 width: 980px; 30 margin: 0 auto; 31 } 32 33 .pg-header{ 34 background-color: #303a40; 35 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); 36 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); 37 box-shadow: 0 2px 5px rgba(0,0,0,.2); 38 } 39 .pg-header .logo{ 40 float: left; 41 padding:5px 10px 5px 0px; 42 } 43 .pg-header .logo img{ 44 vertical-align: middle; 45 width: 110px; 46 height: 40px; 47 48 } 49 .pg-header .nav{ 50 line-height: 50px; 51 } 52 .pg-header .nav ul li{ 53 float: left; 54 } 55 .pg-header .nav ul li a{ 56 display: block; 57 color: #ccc; 58 padding: 0 20px; 59 text-decoration: none; 60 font-size: 14px; 61 } 62 .pg-header .nav ul li a:hover{ 63 color: #fff; 64 background-color: #425a66; 65 } 66 .pg-body{ 67 68 } 69 .pg-body .catalog{ 70 position: absolute; 71 top:60px; 72 width: 200px; 73 background-color: #fafafa; 74 bottom: 0px; 75 } 76 .pg-body .catalog.fixed{ 77 position: fixed; 78 top:10px; 79 } 80 81 .pg-body .catalog .catalog-item.active{ 82 color: #fff; 83 background-color: #425a66; 84 } 85 86 .pg-body .content{ 87 position: absolute; 88 top:60px; 89 width: 700px; 90 margin-left: 210px; 91 background-color: #fafafa; 92 overflow: auto; 93 } 94 .pg-body .content .section{ 95 height: 500px; 96 } 97 </style> 98 <body onscroll="ScrollEvent();"> 99 <div class="pg-header"> 100 <div class="wrap clearfix"> 101 <div class="logo"> 102 <a href="#"> 103 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> 104 </a> 105 </div> 106 <div class="nav"> 107 <ul> 108 <li> 109 <a href="#">首页</a> 110 </li> 111 <li> 112 <a href="#">功能一</a> 113 </li> 114 <li> 115 <a href="#">功能二</a> 116 </li> 117 </ul> 118 </div> 119 120 </div> 121 </div> 122 <div class="pg-body"> 123 <div class="wrap"> 124 <div class="catalog"> 125 <div class="catalog-item" auto-to="function1"><a>第1张</a></div> 126 <div class="catalog-item" auto-to="function2"><a>第2张</a></div> 127 <div class="catalog-item" auto-to="function3"><a>第3张</a></div> 128 </div> 129 <div class="content"> 130 <div menu="function1" class="section"> 131 <h1>第一章</h1> 132 </div> 133 <div menu="function2" class="section"> 134 <h1>第二章</h1> 135 </div> 136 <div menu="function3" class="section"> 137 <h1>第三章</h1> 138 </div> 139 </div> 140 </div> 141 142 </div> 143 <script> 144 function ScrollEvent(){ 145 var bodyScrollTop = document.body.scrollTop; 146 if(bodyScrollTop>50){ 147 document.getElementsByClassName('catalog')[0].classList.add('fixed'); 148 }else{ 149 document.getElementsByClassName('catalog')[0].classList.remove('fixed'); 150 } 151 152 } 153 </script> 154 </body> 155 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 9 body{ 10 margin: 0px; 11 } 12 img { 13 border: 0; 14 } 15 ul{ 16 padding: 0; 17 margin: 0; 18 list-style: none; 19 } 20 h1{ 21 padding: 0; 22 margin: 0; 23 } 24 .clearfix:after { 25 content: "."; 26 display: block; 27 height: 0; 28 clear: both; 29 visibility: hidden; 30 } 31 32 .wrap{ 33 width: 980px; 34 margin: 0 auto; 35 } 36 37 .pg-header{ 38 background-color: #303a40; 39 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); 40 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); 41 box-shadow: 0 2px 5px rgba(0,0,0,.2); 42 } 43 .pg-header .logo{ 44 float: left; 45 padding:5px 10px 5px 0px; 46 } 47 .pg-header .logo img{ 48 vertical-align: middle; 49 width: 110px; 50 height: 40px; 51 52 } 53 .pg-header .nav{ 54 line-height: 50px; 55 } 56 .pg-header .nav ul li{ 57 float: left; 58 } 59 .pg-header .nav ul li a{ 60 display: block; 61 color: #ccc; 62 padding: 0 20px; 63 text-decoration: none; 64 font-size: 14px; 65 } 66 .pg-header .nav ul li a:hover{ 67 color: #fff; 68 background-color: #425a66; 69 } 70 .pg-body{ 71 72 } 73 .pg-body .catalog{ 74 position: absolute; 75 top:60px; 76 width: 200px; 77 background-color: #fafafa; 78 bottom: 0px; 79 } 80 .pg-body .catalog.fixed{ 81 position: fixed; 82 top:10px; 83 } 84 85 .pg-body .catalog .catalog-item.active{ 86 color: #fff; 87 background-color: #425a66; 88 } 89 90 .pg-body .content{ 91 position: absolute; 92 top:60px; 93 width: 700px; 94 margin-left: 210px; 95 background-color: #fafafa; 96 overflow: auto; 97 } 98 .pg-body .content .section{ 99 height: 500px; 100 border: 1px solid red; 101 } 102 </style> 103 <body onscroll="ScrollEvent();"> 104 <div class="pg-header"> 105 <div class="wrap clearfix"> 106 <div class="logo"> 107 <a href="#"> 108 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> 109 </a> 110 </div> 111 <div class="nav"> 112 <ul> 113 <li> 114 <a href="#">首页</a> 115 </li> 116 <li> 117 <a href="#">功能一</a> 118 </li> 119 <li> 120 <a href="#">功能二</a> 121 </li> 122 </ul> 123 </div> 124 125 </div> 126 </div> 127 <div class="pg-body"> 128 <div class="wrap"> 129 <div class="catalog" id="catalog"> 130 <div class="catalog-item" auto-to="function1"><a>第1张</a></div> 131 <div class="catalog-item" auto-to="function2"><a>第2张</a></div> 132 <div class="catalog-item" auto-to="function3"><a>第3张</a></div> 133 </div> 134 <div class="content" id="content"> 135 <div menu="function1" class="section"> 136 <h1>第一章</h1> 137 </div> 138 <div menu="function2" class="section"> 139 <h1>第二章</h1> 140 </div> 141 <div menu="function3" class="section"> 142 <h1>第三章</h1> 143 </div> 144 </div> 145 </div> 146 147 </div> 148 <script> 149 function ScrollEvent(){ 150 var bodyScrollTop = document.body.scrollTop; 151 if(bodyScrollTop>50){ 152 document.getElementsByClassName('catalog')[0].classList.add('fixed'); 153 }else{ 154 document.getElementsByClassName('catalog')[0].classList.remove('fixed'); 155 } 156 157 var content = document.getElementById('content'); 158 var sections = content.children; 159 for(var i=0;i<sections.length;i++){ 160 var current_section = sections[i]; 161 162 // 当前标签距离顶部绝对高度 163 var scOffTop = current_section.offsetTop + 60; 164 165 // 当前标签距离顶部,相对高度 166 var offTop = scOffTop - bodyScrollTop; 167 168 // 当前标签高度 169 var height = current_section.scrollHeight; 170 171 if(offTop<0 && -offTop < height){ 172 // 当前标签添加active 173 // 其他移除 active 174 var menus = document.getElementById('catalog').children; 175 var current_menu = menus[i]; 176 current_menu.classList.add('active'); 177 for(var j=0;j<menus.length;j++){ 178 if(menus[j] == current_menu){ 179 180 }else{ 181 menus[j].classList.remove('active'); 182 } 183 } 184 break; 185 } 186 187 } 188 189 190 } 191 </script> 192 </body> 193 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 9 body{ 10 margin: 0px; 11 } 12 img { 13 border: 0; 14 } 15 ul{ 16 padding: 0; 17 margin: 0; 18 list-style: none; 19 } 20 h1{ 21 padding: 0; 22 margin: 0; 23 } 24 .clearfix:after { 25 content: "."; 26 display: block; 27 height: 0; 28 clear: both; 29 visibility: hidden; 30 } 31 32 .wrap{ 33 width: 980px; 34 margin: 0 auto; 35 } 36 37 .pg-header{ 38 background-color: #303a40; 39 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); 40 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); 41 box-shadow: 0 2px 5px rgba(0,0,0,.2); 42 } 43 .pg-header .logo{ 44 float: left; 45 padding:5px 10px 5px 0px; 46 } 47 .pg-header .logo img{ 48 vertical-align: middle; 49 width: 110px; 50 height: 40px; 51 52 } 53 .pg-header .nav{ 54 line-height: 50px; 55 } 56 .pg-header .nav ul li{ 57 float: left; 58 } 59 .pg-header .nav ul li a{ 60 display: block; 61 color: #ccc; 62 padding: 0 20px; 63 text-decoration: none; 64 font-size: 14px; 65 } 66 .pg-header .nav ul li a:hover{ 67 color: #fff; 68 background-color: #425a66; 69 } 70 .pg-body{ 71 72 } 73 .pg-body .catalog{ 74 position: absolute; 75 top:60px; 76 width: 200px; 77 background-color: #fafafa; 78 bottom: 0px; 79 } 80 .pg-body .catalog.fixed{ 81 position: fixed; 82 top:10px; 83 } 84 85 .pg-body .catalog .catalog-item.active{ 86 color: #fff; 87 background-color: #425a66; 88 } 89 90 .pg-body .content{ 91 position: absolute; 92 top:60px; 93 width: 700px; 94 margin-left: 210px; 95 background-color: #fafafa; 96 overflow: auto; 97 } 98 .pg-body .content .section{ 99 height: 500px; 100 border: 1px solid red; 101 } 102 </style> 103 <body onscroll="ScrollEvent();"> 104 <div class="pg-header"> 105 <div class="wrap clearfix"> 106 <div class="logo"> 107 <a href="#"> 108 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> 109 </a> 110 </div> 111 <div class="nav"> 112 <ul> 113 <li> 114 <a href="#">首页</a> 115 </li> 116 <li> 117 <a href="#">功能一</a> 118 </li> 119 <li> 120 <a href="#">功能二</a> 121 </li> 122 </ul> 123 </div> 124 125 </div> 126 </div> 127 <div class="pg-body"> 128 <div class="wrap"> 129 <div class="catalog" id="catalog"> 130 <div class="catalog-item" auto-to="function1"><a>第1张</a></div> 131 <div class="catalog-item" auto-to="function2"><a>第2张</a></div> 132 <div class="catalog-item" auto-to="function3"><a>第3张</a></div> 133 </div> 134 <div class="content" id="content"> 135 <div menu="function1" class="section"> 136 <h1>第一章</h1> 137 </div> 138 <div menu="function2" class="section"> 139 <h1>第二章</h1> 140 </div> 141 <div menu="function3" class="section" style="height: 200px;"> 142 <h1>第三章</h1> 143 </div> 144 </div> 145 </div> 146 147 </div> 148 <script> 149 function ScrollEvent(){ 150 var bodyScrollTop = document.body.scrollTop; 151 if(bodyScrollTop>50){ 152 document.getElementsByClassName('catalog')[0].classList.add('fixed'); 153 }else{ 154 document.getElementsByClassName('catalog')[0].classList.remove('fixed'); 155 } 156 157 var content = document.getElementById('content'); 158 var sections = content.children; 159 for(var i=0;i<sections.length;i++){ 160 var current_section = sections[i]; 161 162 // 当前标签距离顶部绝对高度 163 var scOffTop = current_section.offsetTop + 60; 164 165 // 当前标签距离顶部,相对高度 166 var offTop = scOffTop - bodyScrollTop; 167 168 // 当前标签高度 169 var height = current_section.scrollHeight; 170 171 if(offTop<0 && -offTop < height){ 172 // 当前标签添加active 173 // 其他移除 active 174 175 // 如果已经到底部,现实第三个菜单 176 // 文档高度 = 滚动高度 + 视口高度 177 178 var a = document.getElementsByClassName('content')[0].offsetHeight + 60; 179 var b = bodyScrollTop + document.documentElement.clientHeight; 180 console.log(a+60,b); 181 if(a == b){ 182 var menus = document.getElementById('catalog').children; 183 var current_menu = document.getElementById('catalog').lastElementChild; 184 current_menu.classList.add('active'); 185 for(var j=0;j<menus.length;j++){ 186 if(menus[j] == current_menu){ 187 188 }else{ 189 menus[j].classList.remove('active'); 190 } 191 } 192 }else{ 193 var menus = document.getElementById('catalog').children; 194 var current_menu = menus[i]; 195 current_menu.classList.add('active'); 196 for(var j=0;j<menus.length;j++){ 197 if(menus[j] == current_menu){ 198 199 }else{ 200 menus[j].classList.remove('active'); 201 } 202 } 203 } 204 205 206 207 208 break; 209 } 210 211 } 212 213 214 } 215 </script> 216 </body> 217 </html>
7、提交表单
document.geElementById('form').submit()
其他操作:
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
事件
以下为事件属性列表:
事件注意的要点:
a、this
b、event
c、事件链以及跳出
this标签当前正在操作的标签,event封装了当前事件的内容。
注意事项补充:
1、this,当前触发事件的标签
2、全局事件绑定 window.onkeydown = function(){}
3、envent,包含事件相关内容
4、默认事件:
自定义优先:a,form等标签
默认优先:checkbox标签优先
实例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' /> 5 <title></title> 6 7 <style> 8 .gray{ 9 color:gray; 10 } 11 .black{ 12 color:black; 13 } 14 </style> 15 <script type="text/javascript"> 16 function Enter(){ 17 var id= document.getElementById("tip") 18 id.className = 'black'; 19 if(id.value=='请输入关键字'||id.value.trim()==''){ 20 id.value = '' 21 } 22 } 23 function Leave(){ 24 var id= document.getElementById("tip") 25 var val = id.value; 26 if(val.length==0||id.value.trim()==''){ 27 id.value = '请输入关键字' 28 id.className = 'gray'; 29 }else{ 30 id.className = 'black'; 31 } 32 } 33 </script> 34 </head> 35 <body> 36 <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/> 37 </body> 38 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' > 5 <title>欢迎blue shit莅临指导 </title> 6 <script type='text/javascript'> 7 function Go(){ 8 var content = document.title; 9 var firstChar = content.charAt(0) 10 var sub = content.substring(1,content.length) 11 document.title = sub + firstChar; 12 } 13 setInterval('Go()',1000); 14 </script> 15 </head> 16 <body> 17 </body> 18 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form action="http://www.baidu.com"> 9 <input type="text" id="username" /> 10 <input type="submit" value="提交" onclick="return SubmitForm();" /> 11 </form> 12 <script> 13 function SubmitForm(){ 14 var user = document.getElementById('username'); 15 if(user.value.length > 0 ){ 16 // 可以提交 17 return true; 18 }else{ 19 // 不可提交,提示错误 20 alert('用户名输入不能为空'); 21 return false; 22 } 23 } 24 </script> 25 </body> 26 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .hide{ 8 display: none !important; 9 } 10 .shade{ 11 position: fixed; 12 top:0; 13 bottom: 0; 14 left: 0; 15 right: 0; 16 /*background-color: black;*/ 17 /*opacity: 0.6;*/ 18 background-color: rgba(0,0,0,.6); 19 z-index: 1000; 20 } 21 .modal{ 22 height: 200px; 23 width: 400px; 24 background-color: white; 25 position: fixed; 26 top: 50%; 27 left: 50%; 28 margin-left: -200px; 29 margin-top: -100px; 30 z-index: 1001; 31 } 32 </style> 33 </head> 34 <body> 35 <div style="height: 2000px;background-color: #dddddd;"> 36 <input type="button" value="点我" onclick="ShowModal();" /> 37 </div> 38 39 <div id="shade" class="shade hide"></div> 40 <div id="modal" class="modal hide"> 41 42 <a href="javascript:void(0);" onclick="HideModal();">取消</a> 43 </div> 44 <script> 45 function ShowModal(){ 46 var t1 = document.getElementById('shade'); 47 var t2 = document.getElementById('modal'); 48 t1.classList.remove('hide'); 49 t2.classList.remove('hide'); 50 } 51 function HideModal(){ 52 var t1 = document.getElementById('shade'); 53 var t2 = document.getElementById('modal'); 54 t1.classList.add('hide'); 55 t2.classList.add('hide'); 56 } 57 window.onkeydown = function(event){ 58 //console.log(event); 59 if(event.keyCode == 27){ 60 HideModal(); 61 } 62 } 63 </script> 64 </body> 65 </html>
jQuery
jQuery默认封装了DOM和javascript
使用dom写的左侧菜单例子:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .menu{ 11 width: 200px; 12 height: 600px; 13 border: 1px solid #dddddd; 14 overflow: auto; 15 } 16 .menu .item .title{ 17 height: 40px; 18 line-height: 40px; 19 background-color: #2459a2; 20 color: white; 21 } 22 </style> 23 </head> 24 <body> 25 26 <div class="menu"> 27 <div class="item"> 28 <div class="title" onclick="ShowMenu(this);">菜单一</div> 29 <div class="body"> 30 <p>内容一</p> 31 <p>内容一</p> 32 <p>内容一</p> 33 <p>内容一</p> 34 <p>内容一</p> 35 </div> 36 37 </div> 38 <div class="item"> 39 40 <div class="title" onclick="ShowMenu(this);">菜单二</div> 41 <div class="body hide"> 42 <p>内容二</p> 43 <p>内容二</p> 44 <p>内容二</p> 45 <p>内容二</p> 46 <p>内容二</p> 47 <p>内容二</p> 48 </div> 49 </div> 50 <div class="item"> 51 <div class="title" onclick="ShowMenu(this);">菜单三</div> 52 <div class="body hide"> 53 <p>内容三</p> 54 <p>内容三</p> 55 <p>内容三</p> 56 <p>内容三</p> 57 <p>内容三</p> 58 <p>内容三</p> 59 </div> 60 61 </div> 62 </div> 63 <script src="jquery-1.12.4.js"></script> 64 <script> 65 function ShowMenu(ths){ 66 // console.log(ths); // Dom中的标签对象 67 //$(ths) // Dom标签对象转换成jQuery标签对象(便利) 68 //$(ths)[0] // jQuery标签对象转换成Dom标签对象 69 70 $(ths).next().removeClass('hide'); 71 $(ths).parent().siblings().find('.body').addClass('hide'); 72 } 73 </script> 74 </body> 75 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <div id="p1"> 10 <p>hhh</p> 11 </div> 12 13 <input type="button" value="全选" onclick="CheckAll()" /> 14 <input type="button" value="取消" onclick="CancleAll()"/> 15 <input type="button" value="反选" onclick="ReverseAll()"/> 16 17 <table border="1"> 18 <thead> 19 <tr> 20 <th>序号</th> 21 <th>用户名</th> 22 <th>密码</th> 23 </tr> 24 </thead> 25 <tbody id="tb"> 26 <tr> 27 <td><input type="checkbox" /></td> 28 <td>2</td> 29 <td>22</td> 30 </tr> 31 <tr> 32 <td><input type="checkbox" /></td> 33 <td>2</td> 34 <td>22</td> 35 </tr> 36 <tr> 37 <td><input type="checkbox" /></td> 38 <td>2</td> 39 <td>22</td> 40 </tr> 41 <tr> 42 <td><input type="checkbox" /></td> 43 <td>2</td> 44 <td>22</td> 45 </tr> 46 </tbody> 47 </table> 48 <script src="jquery-1.12.4.js"></script> 49 <script> 50 function CheckAll(){ 51 52 var tb = document.getElementById('tb'); 53 var trs = tb.children; 54 for(var i=0;i<trs.length;i++){ 55 var current_tr = trs[i]; 56 var ck = current_tr.firstElementChild.firstElementChild; 57 ck.setAttribute('checked','checked'); 58 } 59 60 $('#tb input[type="checkbox"]').prop('checked',true); 61 } 62 function CancleAll(){ 63 /* 64 var tb = document.getElementById('tb'); 65 var trs = tb.children; 66 for(var i=0;i<trs.length;i++){ 67 var current_tr = trs[i]; 68 var ck = current_tr.firstElementChild.firstElementChild; 69 ck.removeAttribute('checked'); 70 } 71 */ 72 $('#tb input[type="checkbox"]').prop('checked',false); 73 } 74 function ReverseAll(){ 75 /* 76 var tb = document.getElementById('tb'); 77 var trs = tb.children; 78 for(var i=0;i<trs.length;i++){ 79 var current_tr = trs[i]; 80 var ck = current_tr.firstElementChild.firstElementChild; 81 if(ck.checked){ 82 ck.checked = false; 83 ck.removeAttribute('checked'); 84 }else{ 85 ck.checked = true; 86 ck.setAttribute('checked', 'checked'); 87 } 88 } 89 */ 90 $('#tb input[type="checkbox"]').each(function(i){ 91 // this 当前标签 92 // $(this)当前标签的jQuery对象 93 if($(this).prop('checked')){ 94 $(this).prop('checked', false); 95 }else{ 96 $(this).prop('checked', true); 97 } 98 }); 99 } 100 </script> 101 </body> 102 </html>
1 !DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div> 9 <p> 10 <a onclick="Add(this);"> + </a> 11 <input type="text" /> 12 </p> 13 </div> 14 <script src="jquery-1.12.4.js"></script> 15 <script> 16 function Add(ths){ 17 var p = $(ths).parent().clone(); 18 19 p.find('a').text(' - '); 20 p.find('a').attr('onclick', 'Remove(this);'); 21 22 $(ths).parent().parent().append(p); 23 } 24 function Remove(ths){ 25 $(ths).parent().remove(); 26 } 27 </script> 28 </body> 29 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" onclick="Add();" /> 9 <ul> 10 <li>123</li> 11 <li>456</li> 12 <li>789</li> 13 </ul> 14 <script src="jquery-1.12.4.js"></script> 15 <script> 16 $(function(){ 17 /* 18 $('li').click(function () { 19 alert($(this).text()); 20 }); 21 */ 22 $("ul").delegate("li","click",function(){ 23 alert($(this).text()); 24 }); 25 }); 26 27 function Add(){ 28 var tag = document.createElement('li'); 29 tag.innerText = '666'; 30 $('ul').append(tag); 31 } 32 33 </script> 34 </body> 35 </html>