DOM
DOM 查找： 直接查找 间接查找 --getElementById --getElementsByTagName 操作： 值 innerText innerHtml value class： className classList.add classList.remove 样式： <input type='text' style="color:red;font-size:40px;"/> tag = ..... tag.style.color = 'red'; tag.style.fontSize = '40px'; 属性： <input id='i1' name='n1' alex='sb' type='text' style="color:red;font-size:40px;"/> setAttribute getAttribute removeAttribute ===> tabObj.checked = true ===>jQuery: 操作数据，prop(checked,true) 标签： 创建标签： 字符串 对象 将标签添加到HTML中 字符串形式的标签： p1.insertAdjacentHTML('beforeEnd',tag); 对象形式的标签： p1.insertAdjacentElement('afterBegin',document.createElement('p')) xxx.insertBefore(tag,xxx[1]) 点赞： 创建标签，定时器（大小，位置，透明度） 1、this，当前触发事件的标签 2、createElement 3、appendChild 4、setInterval创建定时器 clearInterval删除定时器 5、removeChild删除子标签 定时器 setTimeOut,clearTimeout setInterval,clearInter 事件： 1、this，当前触发事件的标签 2、全局事件绑定 window.onKeyDown = function(){} 3、event，包含事件相关内容 4、默认事件 自定义优先：a,form 默认优先：checkbox
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <!--地址：http://www.cnblogs.com/wupeiqi/articles/5643298.html--> <div id="i1"></div> <input type="text" id="i2" /> <div id="i3">hello<span>6666</span> world！</div> <script> //直接查找 // document.getElementById 根据ID获取一个标签 // document.getElementsByName 根据name属性获取标签集合 // document.getElementsByClassName 根据class属性获取标签集合---有的浏览器不支持 // document.getElementsByTagName 根据标签名获取标签集合 var t = document.getElementById('i1'); //获取id为i1的的标签 //间接查找 // parentNode // 父节点----包含标签内的标签元素和文本内容，下面类似 // childNodes // 所有子节点 // firstChild // 第一个子节点 // lastChild // 最后一个子节点 // nextSibling // 下一个兄弟节点 // previousSibling // 上一个兄弟节点 // // parentElement // 父节点标签元素------只包含标签内的标签元素，下面类似 // children // 所有子标签 // firstElementChild // 第一个子标签元素 // lastElementChild // 最后一个子标签元素 // nextElementtSibling // 下一个兄弟标签元素 // previousElementSibling // 上一个兄弟标签元素 //操作 var t1 = document.getElementById('i2'); //获取id为i2的标签 t1.value; //获取标签的value值 t1.value = 111; //为标签的value赋值 var t2 = document.getElementById('i1'); //获取id为i2的标签 t2.innerText; //获取标签之间的文本内容 t2.innerText = 'hello'; //向标签直接添加文本内容 var t3 = document.getElementById('i1'); //获取id为i2的标签 t3.innerHTML; //获取标签之间的文本内容 // t3.innerHTML = 'hello'; //向标签直接添加文本内容 </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <!--onfocus="Focus()"：获取焦点执行的函数。onblur="Blur()"：失去焦点执行的函数--> <input id="i1" type="text" value="请输入关键字" onfocus="Focus()" onblur="Blur()" /> <script> function Focus() { var t = document.getElementById('i1'); // t.value = null; //获取焦点，将标签value设置为空 if(t.value == "请输入关键字"){ t.value = null; //如果标签value值等于"请输入关键字"，表示没有输入内容，可以将value设置为null } } function Blur() { var t = document.getElementById('i1'); var v = t.value; //获取标签value值 if(v.trim().length == 0){ //判断value去空格后的长度-----trim，去空格 t.value = "请输入关键字"; //如果长度为0，表示没有输入内容，将value还原成原来的值 } } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <div class="c1"></div> <div class="c2"></div> <script> //getElementsByTagName相关操作 var tags = document.getElementsByTagName('div'); //获取所有div标签，并存放为一个数组 var class_name = tags[0].className; //获取第一个div标签的class属性（是一个字符串） var class_list = tags[0].classList; //获取第一个div标签的class属性（数组形式，每个class都是数组的一个元素） class_list.add('c3'); //添加一个class class_list.remove('c1'); //删除一个class </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> <style> body{ margin: 0; } .hide{ display: none !important; } .shadow{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: darkgray; opacity: 0.6; z-index: 1000; } .modal{ height: 200px; width: 400px; background-color: antiquewhite; position: fixed; top: 50%; left: 50%; margin-left: -200px; margin-top: -100px; z-index: 1001; } </style> </head> <body> <div> <input type="button" value="点我" onclick="ShowModal()" /> </div> <!--遮罩层--> <div id="shadow" class="shadow hide"></div> <!--对话框--> <div id="modal" class="modal hide"> <!--javascript:void(0)：表示什么都不做，相当于python中的pass--> <a href="javascript:void(0)" onclick="HideModal()">取消</a> </div> <script> function ShowModal() { var t1 = document.getElementById('shadow'); var t2 = document.getElementById('modal'); t1.classList.remove('hide'); t2.classList.remove('hide'); } function HideModal() { var t1 = document.getElementById('shadow'); var t2 = document.getElementById('modal'); t1.classList.add('hide'); t2.classList.add('hide'); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <div id="i1">样式</div> <div id="i2" name="haha" alex="sb" style="color: blue">属性</div> <script> //样式操作 var t1 = document.getElementById('i1'); t1.style.color = 'red'; //添加样式--color:red t1.style.fontSize = '40px'; //添加样式：字体为40px //属性操作 var t2 = document.getElementById('i2'); var name = t2.getAttribute('name'); //获取name属性值 t2.setAttribute('name','newname'); //设置name属性的值 t2.removeAttribute('name'); //删除name属性 </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="CheckAll()" /> <input type="button" value="取消" onclick="CancleAll()"/> <input type="button" value="反选" onclick="ReverseAll()"/> <table border="1"> <thead> <tr> <th>序号</th> <th>用户名</th> <th>密码</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> </tbody> </table> <script> // 全选 function CheckAll() { var tb = document.getElementById('tb'); var trs = tb.children; //获取标签下所有的元素 for(var i=0;i<trs.length;i++){ //遍历所有元素 var ck = trs[i].firstElementChild.firstElementChild; //获取元素中的input标签 // ck.setAttribute('checked','checked'); //设置input标签属性 ck.checked = true; } } // 取消 function CancleAll() { var tb = document.getElementById('tb'); var trs = tb.children; //获取标签下所有的元素 for(var i=0;i<trs.length;i++){ //遍历所有元素 var ck = trs[i].firstElementChild.firstElementChild; //获取元素中的input标签 // ck.removeAttribute('checked'); //删除input标签属性 ck.checked = false; } } // 反选 function ReverseAll() { var tb = document.getElementById('tb'); var trs = tb.children; //获取标签下所有的元素 for(var i=0;i<trs.length;i++){ //遍历所有元素 var ck = trs[i].firstElementChild.firstElementChild; //获取元素中的input标签 if(ck.checked){ //判断input标签是否选中，选中则取消，没有则选中 ck.checked = false; // ck.removeAttribute('checked'); //删除input标签属性 }else { ck.checked = true; // ck.setAttribute('checked','checked'); //设置input标签属性 } } } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script> // 创建标签 // 方式一 var tag = document.createElement('a'); tag.innerText = "wupeiqi"; tag.className = "c1"; tag.href = "http://www.cnblogs.com/wupeiqi"; // 方式二 var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"; // 操作标签 // 方式一 var obj = "<input type='text' />"; xxx.insertAdjacentHTML("beforeEnd",obj); //添加字符串形式的html xxx.insertAdjacentElement('afterBegin',document.createElement('p')); //添加对象形式的html //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' //标签都是成对的，一对标签分为开始标签和结束标签 //'beforeBegin'、 'afterBegin'是指在开始标签前后位置添加 //'beforeEnd'、 'afterEnd'是指在结束标签前后位置添加 // 方式二 var tag = document.createElement('a'); xxx.appendChild(tag); //标签内后面追加 xxx.insertBefore(tag,xxx); //插入xxx元素位置之前 </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> <style> .item{ padding: 50px; position: relative; } </style> </head> <body> <div class="item"> <a onclick="Favor(this);">赞1</a> </div> <div class="item"> <a onclick="Favor(this);">赞2</a> </div> <div class="item"> <a onclick="Favor(this);">赞3</a> </div> <div class="item"> <a onclick="Favor(this);">赞4</a> </div> <script> function Favor(ths) { // ths => this => 当前触发事件的标签------ths是形参，this是实参 var top = 49; var left = 71; var op = 1; //透明度 var fontSize = 18; //字体 var tag = document.createElement('span'); //创建一个span标签 tag.innerText = '+1'; //给标签添加样式 tag.style.position = 'absolute'; //添加样式---position:absolute tag.style.top = top + "px"; tag.style.left = left + "px"; tag.style.opacity = op; tag.style.fontSize = fontSize + "px"; ths.parentElement.appendChild(tag); //将新建的span标签追加到当前触发函数的标签的父标签内 //定时器：每隔50毫秒执行一次匿名函数 var interval = setInterval(function () { //赞效果实现：向上、向右，变大，透明 top -=10; left += 10; fontSize += 5; op -= 0.1; tag.style.top = top + "px"; tag.style.left = left + "px"; tag.style.opacity = op; tag.style.fontSize = fontSize + "px"; //设置赞效果消失的条件 if(op < 0.2){ clearInterval(interval); //清除定时器 ths.parentElement.removeChild(tag); //移除新建的span标签 } },50) } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <div id="status" style="color: red;"> </div> <input type="submit" onclick="DeleteStatus();" value="删除" /> <script> function DeleteStatus() { var tag = document.getElementById('status'); tag.innerText = '删除成功'; //定时器：5秒后执行匿名函数----setTimeout：定时器只执行一次 setInterval：定时器一直执行（用法和setTimeout相同） var timeout = setTimeout(function () { tag.innerText = ''; },5000); clearTimeout(timeout); //清除定时器 } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> <style> .back{ position: fixed; right: 20px; bottom: 20px; color: red; } .hide{ display: none; } </style> </head> <!--onscroll 事件在元素滚动条在滚动时触发。--> <body onscroll="BodyScroll();"> <div style="height: 2000px;background-color: #dddddd;"></div> <div id="back" class="back hide" onclick="BackTop();">返回顶部</div> <script> /* clientHeight -> 可见区域：height + padding clientTop -> border高度 offsetHeight -> 可见区域：height + padding + border offsetTop -> 上级定位标签的高度 scrollHeight -> 全文高：height + padding scrollTop -> 滚动高度 特别的： document.documentElement代指文档根节点 */ function BackTop() { document.body.scrollTop = 0; //设置滚动条距离顶部高度为0，即返回顶部 } function BodyScroll(){ var s = document.body.scrollTop; var t = document.getElementById('back'); if(s >= 100){ //滚动条离顶部高度大于100px，显示返回顶部字样 t.classList.remove('hide'); }else{ t.classList.add('hide'); } } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <form id="f1"> <input type="text" /> <input type="submit" value="提交"/> <a onclick="Submit()">提交</a> </form> <script> function Submit() { var form = document.getElementById('f1'); //获取form标签 form.submit(); //提交当前form表单 } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script> var ret = confirm('确认删除？'); //确认框----有返回值：确定-true，取消-false console.log(ret); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script> var url = location.href; //获取当前页面url location.href = 'http://www.baidu.com'; //为当前页面url重新赋值（页面会跳转到重新赋值的页面） location.reload(); //当前页面重新加载 </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> <style> body{ margin: 0; } .hide{ display: none !important; } .shadow{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: darkgray; opacity: 0.6; z-index: 1000; } .modal{ height: 200px; width: 400px; background-color: antiquewhite; position: fixed; top: 50%; left: 50%; margin-left: -200px; margin-top: -100px; z-index: 1001; } </style> </head> <body> <div> <input type="button" value="点我" onclick="ShowModal()" /> </div> <!--遮罩层--> <div id="shadow" class="shadow hide"></div> <!--对话框--> <div id="modal" class="modal hide"> <!--javascript:void(0)：表示什么都不做，相当于python中的pass--> <a href="javascript:void(0)" onclick="HideModal()">取消</a> </div> <script> function ShowModal() { var t1 = document.getElementById('shadow'); var t2 = document.getElementById('modal'); t1.classList.remove('hide'); t2.classList.remove('hide'); } function HideModal() { var t1 = document.getElementById('shadow'); var t2 = document.getElementById('modal'); t1.classList.add('hide'); t2.classList.add('hide'); } //window：全局事件绑定 window.onkeydown = function (event) { //event，包含事件相关内容。比如按键，就会获得按的键的相关内容 if(event.keyCode == 27){ //获取按键的键值代码，判断如果按的是Esc键（Esc对应keyCode为27），就执行下面的代码（隐藏对话框） HideModal(); } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--a标签默认事件是跳转，form标签的默认事件是提交。如果在这些标签中自定义一些事件，那么事件的优先级是先执行自定义事件，然后执行默认事件--> <a href="http://www.baidu.com" onclick="ClickB();">百度</a> <form> <input type="text" /> <input type="submit" onclick="ClickB();" /> </form> <!--checkbox和上面的不同，它是先执行默认事件，然后再执行自定义事件--> <input type="checkbox" onclick="ClickB();" /> <script> function ClickB(){ alert(123); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <form action="http://www.baidu.com"> <input type="text" id="username" /> <!--自定义事件：表单提交前触发自定义事件进行相应判断。如提交前判断文本框输入内容是否合法等--> <!--onclick="return SubmitForm();"：函数前加一个return，表示函数有返回值，返回值为true，默认事件可以执行；返回值为false--> <input type="submit" value="提交" onclick="return SubmitForm();" /> </form> <script> function SubmitForm(){ var user = document.getElementById('username'); if(user.value.length > 0 ){ // 可以提交 return true; }else{ // 不可提交，提示错误 alert('用户名输入不能为空'); return false; } } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ width: 200px; } .item span{ position: absolute; top: 20px; left: 0px; font-size: 8px; background-color: indianred; color: white; display: inline-block; width: 204px; } </style> </head> <body> <div> <form> <div class="item"> <input class="c1" type="text" name="username" label="用户名" /> <!--<span>用户名不能为空</span>--> </div> <div class="item"> <input class="c1" type="password" name="password" label="密码" /> <!--<span>密码不能为空</span>--> </div> <input type="submit" onclick="return CheckValid();" /> </form> </div> <script src="js/jquery-1.12.4.js"></script> <script> function CheckValid() { $('form .item span').remove(); //如果原来有span标签，就删除 var flag = true; //返回值，默认为true //获取所有输入框，并循环 $('form .c1').each(function () { var val = $(this).val(); //获取当前输入框的value值 if(val.trim().length == 0) { //输入为空，提示并阻止form提交 var tag = document.createElement('span'); tag.innerText = $(this).attr('label') + '不能为空'; $(this).after(tag); //将span标签添加到当前输入框标签的后面 flag = false; //将flag置为false } }); // console.log(flag); return flag; } </script> </body> </html>
