首页 > 代码库 > Day16 DOM &jQuery
Day16 DOM &jQuery
一、本节主要内容
JavaScript 正则表达式 字符串操作的三个方法DOM(知道就行，一般使用jQuery) 查找： 直接查找： document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 间接查找： parentNode //父节点 childNodes //所有子节点 firstChild //第一个子节点 lastChild //最后一个子节点 nextSibling //下一个兄弟节点 previousSibling //上一个兄弟节点 parentElement //父节点标签元素 children //所有子标签 firstElementChild //第一个子标签元素 lastElementChild //最后一个子标签元素 nextElementChild //下一个兄弟标签元素 previousElementSibling //上一个兄弟标签元素 操作： t = document.getElementById(‘i2‘)jQuery $("#i1") 模块，DOM和JavaScript class操作： className classList.add classList.remove(cls) 样式修改： <input type="text" style="color:red;font-size:40px" /> tag = ... tag.style.color = ‘white‘; tag.style.fontSize = ‘200px‘; 属性： setAttribute getAttribute removeAttribute tabObj.checked = true jQuery:操作数据，prop(checked.true) 创建标签： （1）对象(优先使用) var tag = document.createElement(‘a‘) tag.innerText("smartisian") tag.className = "c1" tag.href = "http://t.tt" p1 = document.getElementById(‘d1‘); p1.insertAdjacentElement(‘afterBegin‘, document.createElement(‘‘)); tag.innerText = ‘test‘; t1.insertBefore(tag,t1.children[0]) （2）字符串 var tag = "<a class="c1" href="http://t.tt">T3</a>" p1 = document.getElementById(‘d1‘); p1.insertAdjacentHTML(‘beforeEnd‘,tag); p1.insertAdjacentHTML(‘afterEnd‘,tag); p1.insertAdjacentHTML(‘beforeBegin‘,tag); p1.insertAdjacentHTML(‘afterBegin‘,tag); p1.insertAdjacentText(‘afterBegin‘,tag); 点赞： 创建标签，定时器（大小、位置、透明度） 1、this当前触发事件的标签 2、createElement 3、appendChild 4、setInterval创建定时器 5、clearInterval删除定时器 6、removeChild删除子标签 定时器： setTimeOut,clearTimeOut setInterval 多次定时器 clearInterval 清除定时器 滚动条： 窗口滚动条 div的滚动条 overflow:auto 事件： 1、this当前事件 2、全局事件，window.onclick()、window.onKeyDown = function(){} 3、event，包含了事件相关内容 4、默认事件 自定义优先：a,form onclick="return SubmitForm(); 默认优先：checkbox 查找： 选择器 id选择器：#id 标签选择器 类选择器 组合选择器：#i1,#i2,#i3 层级选择器：#i1 .c1(在i1的子子孙孙里找class=‘c1‘) parent > child(孩子里找) $(‘input:eq(1),#i1 .item‘) 筛选器 $(‘#i1‘).find(‘.item‘) $(‘#i1‘).eq(1) 操作： CSS 属性 $(‘#i1‘).html() #获取html内容 $(‘#i1‘).css(‘fontSize‘,‘18px‘) tag.scrollTop = 0;(原来操作) $(‘#i1‘).scrollTop 文本操作 事件： --优化 1、如何使用jQuery绑定事件 2、当文档加载完毕后，自动执行 $(function(){ }); 3、延迟绑定 4、return false 扩展： $.login Form表单验证 Ajax： 偷偷的发请求 --jQuery循环
二、DOM
1、innerText
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="i1"> <a>1</a> <a>2</a> <a>3</a> </div> <input type="text" id="i2" /> <!--innerText--> <a id="i3" href="http://www.google.com">Goo<span>gle</span></a></body></html>
2、innerText & innerHTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="text" id="i1" /> <!--innerText只获取文本内容--> <!--innerHTML既获取文本内容又可以拿到span标签中的内容--> <a id="i2" href="http://www.bing.com.cn">必应</a></body></html>
3、搜索框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>搜索框</title></head><body> <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur()" /> <input id="i2" type="text" value="请输入关键字" onfocus="Focus();" /> <script type="text/javascript"> function Focus() { //console.log(‘Focus‘); //获取标签，清空 var tag = document.getElementById(‘i1‘); //判断框中是否为：请输入关键字 if(tag.value == "请输入关键字"){ tag.value = ""; } } function Blur() { //console.log(‘Blur‘); //移走时加上“请输入关键字” var tag = document.getElementById(‘i1‘); var val = tag.value; // if(val.trim().length == 0){ tag.value = "请输入关键字"; } } </script></body></html>
三、JavaScript
1、对话框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>对话框</title> <style> .hide{ display: none !important; } .shade{ position: fixed; top:0; bottom: 0; left:0; right:0; /*background-color: black;*/ /*opacity: 0.6;*/ background-color: rgba(0,0,0,.6); z-index: 1000; } .modal{ height:200px; width:400px; background-color: white; /*设置居中*/ position: fixed; top:50%; left:50%; margin-left: -200px; margin-top: -100px; z-index: 1001; } </style></head><body> <div style="height: 2000px;background-color: #dddddd;"> <input type="button" value="点我" onclick="ShowModal();" /> </div> <div id="shade" class="shade hide"></div> <div id="modal" class="modal hide"> <!--标签什么都不操作时，设置javascript:void(0)--> <a href="javascript:void(0);" onclick="HideModal();">取消</a> </div> <script> function ShowModal() { var t1 = document.getElementById(‘shade‘); var t2 = document.getElementById(‘modal‘); t1.classList.remove(‘hide‘); t2.classList.remove(‘hide‘); } function HideModal() { var t1 = document.getElementById(‘shade‘); var t2 = document.getElementById(‘modal‘); t1.classList.add(‘hide‘); t2.classList.add(‘hide‘); } window.onkeydown = function (event) { if(event.keyCode == 27){ HideModal(); } } </script></body></html>
2、实现全选、取消、反选（第一种方法，会有问题）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="button" value="全选" onclick="CheckAll()" /> <input type="button" value="取消" onclick="CancelAll()" /> <input type="button" value="反选" onclick="ReverseAll()" /> <table border="1px"> <thead> <tr> <th>序号</th> <th>用户名</th> <th>密码</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /> </td> <td>1</td> <td>11</td> </tr> <tr> <td><input type="checkbox" /> </td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /> </td> <td>3</td> <td>33</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 current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; ck.setAttribute(‘checked‘,‘checked‘); } } function CancelAll() { var tb = document.getElementById(‘tb‘) var trs = tb.children; for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; ck.removeAttribute(‘checked‘); } } function ReverseAll() { var tb = document.getElementById(‘tb‘) var trs = tb.children; for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; if(ck.checked){ ck.checked = false; ck.removeAttribute(‘checked‘); }else{ ck.checked = true; ck.setAttribute(‘checked‘,‘checked‘); } } } </script></body></html>
3、点赞
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点赞</title> <style> .item{ padding: 50px; position: relative; } item span{ position: absolute; top: 49px; left: 71px; opacity: 1; font-size: 18px; } </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,当前触发事件的标签 //console.log(ths.parentElement); var top = 49; var left = 71; var op = 1; var fontSize = 18; var tag=document.createElement(‘span‘); tag.innerText = ‘+1‘; tag.style.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); 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); } },50); } </script></body></html>
4、定时删除
<!DOCTYPE html><html lang="en"><head> <meta 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 s = document.getElementById(‘status‘); s.innerText = "删除成功"; setTimeout(function () { s.innerText = ""; },3000); } </script></body></html>
5、返回顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .back{ position: fixed; right: 20px; bottom: 20px; color: red; } .hide{ display: none; } </style></head><body onscroll="BodyScroll();"> <div style="height: 2000px;background-color: #dddddd;"></div> <div id="back" class="back hide" onclick="BackTop();">返回顶部</div> <script> function BackTop() { document.body.scrollTop = 0; } function BodyScroll() { //console.log(1); var s = document.body.scrollTop; var t = document.getElementById(‘back‘); if(s >= 100){ t.classList.remove(‘hide‘); }else{ t.classList.add(‘hide‘); } } </script></body></html>
6、提交（第一种方式）
<!DOCTYPE html><html lang="en"><head> <meta 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.submit(); } </script></body></html>
7、跳转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> /* var ret = confirm(‘是否删除？‘); console.log(ret); */ location.href = "http://www.baidu.com"; </script></body></html>
8、事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件</title></head><body> <a href="http://www.baidu.com" onclick="ClickB();">百度</a> <form> <input type="text" /> <input type="submit" onclick="ClickB();" /> </form> <input type="checkbox" onclick="ClickB();" /> <script> function ClickB() { alert(123); } </script></body></html>
9、提交（第二种方式）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <form action="http://www.baidu.com"> <input type="text" id="username" /> <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>
四、jQuery
1、第一个例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style></head><body> <div id="i1"> <div class="item">123</div> <div class="item"> <div class="c1"> <a>百度</a> </div> </div> </div> <div id="i2"></div> <script src="js/jquery-1.12.4.js"></script> <script> //jQuery.xxx //$.xxx $(‘#i1‘).addClass(‘hide‘); </script></body></html>
2、左侧菜单（第一种方式）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左侧菜单</title> <style> .menu{ width: 200px; height: 800px; border: 1px solid #dddddd; overflow: auto; } .menu .item .title{ height: 40px; line-height: 40px; background-color: #2459a2; color: white; } .hide{ display: none; } </style></head><body> <div class="menu"> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="js/jquery-1.12.4.js"></script> <script> function ShowMenu(ths) { //console.log(ths); //Dom中的标签对象 //$(ths) //Dom对象转换为jQuery标签对象（便利） //$(ths)[0] //jQuery对象转换为DOM对象 $(ths).next().removeClass(‘hide‘); $(ths).parent().siblings().find(‘.body‘).addClass(‘hide‘); } </script></body></html>
3、实现全选、取消、反选（第二种方法，推荐）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="button" value="全选" onclick="CheckAll()" /> <input type="button" value="取消" onclick="CancelAll()" /> <input type="button" value="反选" onclick="ReverseAll()" /> <table border="1px"> <thead> <tr> <th>序号</th> <th>用户名</th> <th>密码</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /> </td> <td>1</td> <td>11</td> </tr> <tr> <td><input type="checkbox" /> </td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /> </td> <td>3</td> <td>33</td> </tr> </tbody> </table> <script src="js/jquery-1.12.4.js"></script> <script> function CheckAll() { $(‘#tb input[type="checkbox"]‘).prop(‘checked‘,true); } function CancelAll() { $(‘#tb input[type="checkbox"]‘).prop(‘checked‘,false); } function ReverseAll() { $(‘#tb input[type="checkbox"]‘).each(function (i) { //this当前标签 //$(this)当前标签的jQuery对象 if($(this).prop(‘checked‘)){ $(this).prop(‘checked‘,false); }else{ $(this).prop(‘checked‘,true); } }); } </script></body></html>
4、增加、减少输入框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div> <p> <a onclick="Add(this);"> + </a> <input type="text"> </p> </div> <script src="js/jquery-1.12.4.js"></script> <script> function Add(ths) { var p = $(ths).parent().clone(); p.find(‘a‘).text(‘ - ‘); $(ths).parent().parent().append(p); p.find(‘a‘).attr(‘onclick‘, ‘Remove(this);‘); } function Remove(ths) { $(ths).parent().remove(); } </script></body></html>
5、左侧菜单（第二种方式）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左侧菜单</title> <style> .menu{ width: 200px; height: 800px; border: 1px solid #dddddd; overflow: auto; } .menu .item .title{ height: 40px; line-height: 40px; background-color: #2459a2; color: white; } .hide{ display: none; } </style></head><body> <div class="menu"> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { //当文档数加载完毕后，自动执行 $(‘.item .title‘).click(function () { $(this).next().removeClass(‘hide‘); $(this).parent().siblings().find(‘.body‘).addClass(‘hide‘); }); }); /*绑定事件的另一种方式 $(‘.item .title‘).bind(‘click‘,function () { $(this).next().removeClass(‘hide‘); $(this).parent().siblings().find(‘.body‘).addClass(‘hide‘); }); */ </script></body></html>
6、延迟绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="button" onclick="Add();" /> <ul> <li>123</li> <li>456</li> <li>789</li> <li>000</li> </ul> <script src="js/jquery-1.12.4.js"></script> <script> $(function () {// $(‘li‘).click(function () {// alert($(this).text());// }); //延迟绑定，ul绑定数据的父标签 $(‘ul‘).delegate(‘li‘,‘click‘,function () { alert($(this).text()); }); }); function Add() { var tag = document.createElement(‘li‘); tag.innerText = ‘666‘; $(‘ul‘).append(tag); } </script></body></html>
Day16 DOM &jQuery
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。