合肥网站建设模板,辽宁住房建设部网站,南昌网站建设服务器,深圳市建筑设计研究总院有限公司一.前言
前面我们讲了一下js的基础语法#xff0c;但是这些还是远远不够的#xff0c;我们要想操作标签#xff0c;实现一个动态且好看的页面#xff0c;就得学会BOM和DOM#xff0c;这些都是浏览器和页面的#xff0c;这样我们才能实现一个好看的页面
二.BOM对象
BOM…一.前言
前面我们讲了一下js的基础语法但是这些还是远远不够的我们要想操作标签实现一个动态且好看的页面就得学会BOM和DOM这些都是浏览器和页面的这样我们才能实现一个好看的页面
二.BOM对象
BOM:Broswer object model,即浏览器提供我们开发者在javascript用于操作浏览器的对象。
2.1 window对象
窗口方法 // js中最大的一个对象.整个浏览器窗口出现的所有东西都是window对象的内容. console.log( window ); // alert() 弹出一个警告框 window.alert(hello); //confirm 弹出一个确认框,点击确认,返回true, 点击取消,返回false var ret confirm(您确认要删除当前文件么?); console.log( ret ); // 弹出一个消息输入框,当点击确认以后,则返回可以接收到用户在输入框填写的内容.如果点击取消,则返回null var ret prompt(请输入一个内容,默认值); console.log( ret ); // close() 关闭当前浏览器窗口 window.close(); //打开一个新的浏览器窗口 window.open(http://www.baidu.com,_blank,width800px,height500px,left200px,top200px; 这些都很简单我们看一眼过就行了 定时方法
setInterval() 方法会不停地调用函数直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。而setTimeout是在指定的毫秒数后调用code一次 // 设置循环定时器 var ID window.setInterval(code,millisec) // 每millisec毫秒执行一次code // 取消循环定时器 window.clearInterval(ID); // 设置单次定时器 var ID window.setTimeout(code,millisec) // millisec毫秒后执行code一次 // 取消单次定时器 window.clearTimeout(ID); 这个也是非常的简单但是我们会给大家一个定时器的小案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyinput idID1 typetext
button onclickbegin()开始/button
button onclickend()暂停/buttonscriptfunction showtime(){eledocument.getElementById(ID1)ele.valuenew Date().toLocaleString()}var idfunction begin(){if(idundefined){showtime()idsetInterval(showtime,1000)console.log(id)}}function end(){clearInterval(id)idundefined;}/script/body
/html 最后结果长这样想知道效果自己去测试就好了这里为什么要判断一下idundefined呢这是为了防止开多个定时器大家开控制台看打印id就知道了当然这里有很多看不懂的大家等看完dom就都能学会啦
2.2 Location ( 地址栏)对象
这里给个案例自己品
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
button onclickfunc1()查看Location对象/button
button onclickfunc2()跳转到往日情怀酿作酒的博客~/button
button onclickfunc3()F5/button
scriptfunction func1(){console.log( location );}// 地址栏对象控制和操作地址栏// 所谓的地址就是当前页面所在地址// 地址结构:// 协议://域名:端口/路径/文件名?查询字符串#锚点console.log( 协议${location.protocol} );console.log( 端口${location.port} );console.log( 域名${location.hostname} );console.log( 域名:端口${location.host} );console.log( 路径${location.pathname} );console.log( 查询字符串${location.search} );console.log(完整的地址信息${location.href});function func2(){// location.hrefhttps://blog.csdn.net/weixin_74178589?spm1011.2124.3001.5343; // 页面跳转location.assign(https://blog.csdn.net/weixin_74178589?spm1011.2124.3001.5343); // 页面跳转}function func3(){location.reload(); // 刷新页面}
/script
/body
/html
2.3 本地存储对象
使用存储对象的过程中, 对象数据会根据域名端口进行保存的,所以 js不能获取当前页面以外其他域名端口保存到本地的数据。也就是说,我们存储对象获取数据只能是自己当前端口或者域名下曾经设置过的数据,一旦端口或者域名改变,则无法获取原来的数据。 localStorage 本地永久存储 localStorage.setItem(变量名,变量值); 保存一个数据到存储对象 localStorage.变量名 变量值 保存一个数据到存储对象 localStorage.getItem(变量名) 获取存储对象中保存的指定变量对应的数据 localStorage.变量名 获取存储对象中保存的指定变量对应的数据 localStorage.removeItem(变量名) 从存储对象中删除一个指定变量对应的数据 localStorage.clear() 从存储对象中删除所有数据 sessionStorage 本地会话存储 sessionStorage.setItem(变量名,变量值); 保存一个数据到存储对象 sessionStorage.变量名 变量值 保存一个数据到存储对象 sessionStorage.getItem(变量名) 获取存储对象中保存的指定变量对应的数据 sessionStorage.变量名 获取存储对象中保存的指定变量对应的数据 sessionStorage.removeItem(变量名) 从存储对象中删除一个指定变量对应的数据 sessionStorage.clear() 从存储对象中删除所有数据 localStorage和sessionStorage的区别 1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 2、他们均只能存储字符串类型的对象虽然规范中可以存储其他原生类型的对象但是目前为止没有浏览器对其进行实现。 3、localStorage生命周期是永久这意味着除非用户显示在浏览器提供的UI上清除localStorage信息否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页一旦窗口或标签页被永久关闭了那么所有通过sessionStorage存储的数据也就被清空了。 4、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage页面属于相同域名和端口但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是页面及标 签页仅指顶级窗口如果一个标签页包含多个iframe标签且他们属于同源页面那么他们之间是可以共享sessionStorage的。 三.DOM对象(JS核心)
DOM document Object Model 文档对象模型 整个html文档,会保存一个文档对象document console.log( document ); // 获取当前文档的对象 3.1 查找标签
直接查找标签 document.getElementsByTagName(标签名) document.getElementById(id值) document.getElementsByClassName(类名) 其中getelement返回的是标签对象而getelements返回的是数组对象
导航查找标签 elementNode.parentElement // 父节点标签元素 elementNode.children // 所有子标签 elementNode.firstElementChild // 第一个子标签元素 elementNode.lastElementChild // 最后一个子标签元素 elementNode.nextElementSibling // 下一个兄弟标签元素 elementNode.previousElementSibling // 上一个兄弟标签元素 CSS选择器查找 document.querySelector(css选择器) //根据css选择符来获取查找到的第一个元素返回标签对象dom对象 document.querySelectorAll(css选择器); // 根据css选择符来获取查找到的所有元素,返回数组 3.2 绑定事件
静态绑定 直接把事件写在标签元素中。 div iddiv οnclickfoo(this)click/div script function foo(self){ // 形参不能是this,这个self就代表这个标签 console.log(foo函数); console.log(self); } /script 动态绑定在js中通过代码获取元素对象,然后给这个对象进行后续绑定。 p idi1往日情怀酿作酒/p script var eledocument.getElementById(i1); ele.οnclickfunction(){ console.log(ok); console.log(this); // this直接用,代表的就是这个对象 }; /script 多个标签绑定事件 ul li请关注/li li往日情怀酿作酒/li li谢谢/li /ul script elesdocument.querySelectorAll(ul li) for(var i0;ieles.length;i){ eles[i].οnclickfunction (){ console.log(this.innerHTML) // console.log(eles[i].innerHTML) //这个会报错 } } // console.log(i) //这里打印i会发现等于3 /script 这个就能体现出this的重要性 3.3 操作标签 标签名 属性1“属性值1” 属性2“属性值2”……文本/标签名 文本操作 div classc1spanclick/span/divscriptvar ele document.querySelector(.c1);ele.onclick function (){// 查看标签文本console.log(this.innerHTML)console.log(this.innerText)// this.innerText往日情怀酿作酒this.innerHTML a hrefhttps://blog.csdn.net/weixin_74178589?spm1011.2124.3001.5343往日情怀酿作酒/a}/script大家可以测试一下发现innerText和innerHTML的区别就是前者是一个纯文本后者会识别标签然后把标签给识别上去
value操作
像input标签select标签以及textarea标签是没有文本的但是显示内容由value属性决定 input idi1 typetextscripteledocument.getElementById(i1);ele.clickfunction (){console.log(this.value)this.value往日情怀酿作酒console.log(this.value)} 这个就是当我们点击文本框的时候文本内容就会改变
css样式操作: h1往日情怀酿作酒/h1scripteledocument.getElementsByTagName(h1);ele[0].οnclickfunction (){this.style.colorred}/script这个就是点击变成红色其实这个也就是操作了节点里面的style属性
属性操作: elementNode.setAttribute(属性名,属性值) elementNode.getAttribute(属性名) elementNode.removeAttribute(属性名); 并不是所有属性都可以像value那样操作。
class属性操作** elementNode.className elementNode.classList.add elementNode.classList.remove 因为class是特殊的一个属性所以有专门的方法有了这个就能实现很多功能例如商品 这个就是这么实现的通过改变class属性实现的
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle*{margin: 0;padding: 0;}.tab{width: 800px;height: 300px;/*border: 1px solid red;*/margin: 200px auto;}.tab ul{list-style: none;}.tab-title{background-color: #f7f7f7;border: 1px solid #eee;border-bottom: 1px solid #e4393c;}.tab .tab-title li{display: inline-block;padding: 10px 25px;font-size: 14px;}li.current {background-color: #e4393c;color: #fff;cursor: default;}.hide{display: none;}/style
/head
bodydiv classtabul classtab-titleli classcurrent index0商品介绍/lili class index1规格与包装/lili class index2售后保障/lili class index3商品评价/li/ulul classtab-contentli商品介绍.../lili classhide规格与包装.../lili classhide售后保障.../lili classhide商品评价.../li/ul
/divscriptvar titles document.querySelectorAll(.tab-title li);var contents document.querySelectorAll(.tab-content li);for (var i 0;ititles.length;i){titles[i].onclick function () {// (1) 触发事件标签拥有current样式for (var j 0;jtitles.length;j){titles[j].classList.remove(current)}console.log(this);this.classList.add(current);// (2) 显示点击title对应的详情内容var index this.getAttribute(index);// console.log(this.getAttribute(index));// console.log(contents[index]);for (var z 0;zcontents.length;z){contents[z].classList.add(hide);}contents[index].classList.remove(hide);}}/script/body
/html 这个代码直接给大家就不过多赘述了
节点操作 : // 创建节点 document.createElement(标签名) // 插入节点 somenode.appendChild(newnode) // 追加一个子节点作为最后的子节点 somenode.insertBefore(newnode,某个节点) // 把增加的节点放到某个节点的前边 // 删除节点 somenode.removeChild()获得要删除的元素通过父元素调用删除 //替换节点 somenode.replaceChild(newnode, 某个节点); !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyleimg{display: block;}/style/head
bodybutton classadd_btn添加节点/button
button classdel_btn删除节点/button
button classreplace_btn替换节点/button
div classc1h3 classc2往日情怀酿作酒/h3
/divscriptfatherdocument.querySelector(.c1)adddocument.getElementsByClassName(add_btn)[0];deldocument.getElementsByClassName(del_btn)[0];replacedocument.getElementsByClassName(replace_btn)[0]add.onclickfunction (){var eledocument.createElement(h3)ele.innerText往日情怀酿作酒console.log(ele)father.appendChild(ele)}del.onclickfunction (){eledocument.querySelector(.c1).firstElementChildconsole.log(ele)if(ele){father.removeChild(ele)}}replace.onclickfunction (){eledocument.querySelector(.c1 h3:first-of-type)console.log(ele)if(ele){re_eledocument.createElement(img)re_ele.srchttps://www.keaitupian.cn/cjpic/frombd/2/253/3246004806/1427273025.jpgconsole.log(ele)father.replaceChild(re_ele,ele)}}/script/body
/html
这个就是很好的一个替换删除的例子 效果大致如下
3.4 常见事件
onload事件 这个就是当我们加载完所有的文档之后触发的举个例子就是当我们把script写在文档的上面如果涉及了dom操作就会因为找不到标签而报错但是当我们把所有代码放在onload里面的话就会有问题啦他会等到加载完文档再执行onload里面的内容 onsubmit事件 于处理表单提交时的操作。当用户提交一个表单时可以通过这个事件执行特定的 JavaScript 代码比如验证输入数据、取消提交等 onchange事件 用于在输入元素如 input, select, 或 textarea的值发生改变时触发。当用户改变输入的内容并移开焦点时该事件会被触发 onmouse事件 onmouse 事件系列是 JavaScript 中用于处理与鼠标相关的交互的事件。这些事件包括 onmouseover、onmouseout、onmousemove、onclick、ondblclick 和 onmousedown、onmouseup 等 onkey事件 onkey 事件系列是 JavaScript 中用于处理与键盘交互的事件。主要的键盘事件包括 onkeydown、onkeyup 和 onkeypress onblur和onfocus事件 onblur 和 onfocus 是 JavaScript 中用于处理元素获得或失去焦点的事件。这些事件通常用于表单元素如输入框和文本区域以增强用户体验 冒泡事件 div classc1 div classc2/div /div script var ele1 document.querySelector(.c1); ele1.onclick function () { alert(c1区域) }; var ele2 document.querySelector(.c2); ele2.onclick function (event) { alert(c2区域); // 如何阻止事件冒泡 event.stopPropagation(); } /script 这个就是如果子标签再父标签里面两个都绑定了同一个事件当两个同时触发同一个事件的时候子标签也会触发父标签的内容这样当我们使用event.stopPropagation()就会阻止冒泡事件
四.总结 五.补充
这里给大家一个前端的员工关系代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.box {width: 80%;height: 270px;margin: 20px auto;}.box td{width: 180px;text-align: center;}.box input{padding: 5px 5px;height: 20px;}/style
/head
bodyh3员工管理系统/h3div classboxtable border1 cellpadding5px theadtrth姓名/thth年龄/thth部门/thth删除/thth编辑/th/tr/theadtbody classtbodytrtd张三/tdtd23/tdtd销售/tdtdbutton onclickdel_tr(this)删除/button/tdtdbutton onclickedit_tr(this)编辑/button/td/trtrtd李四/tdtd21/tdtd销售/tdtdbutton onclickdel_tr(this)删除/button/tdtdbutton onclickedit_tr(this)编辑/button/td/trtrtd王五/tdtd23/tdtd运营/tdtdbutton onclickdel_tr(this)删除/button/tdtdbutton onclickedit_tr(this)编辑/button/td/tr/tbody/table
/divfieldset classadd-boxlegend添加员工/legendp姓名input typetext classname/pp年龄input typetext classage/pp部门select name idi1option value销售销售部/optionoption value运营运营部/optionoption value财务财务部/option/select/pbutton classadd添加/button
/fieldsetscriptvar add document.querySelector(.add);var tbody document.querySelector(.tbody);add.onclick function () {var inputs document.querySelectorAll(.add-box input);var tr document.createElement(tr);for (var i 0; i inputs.length; i) {var td document.createElement(td); // td/tdtd.innerHTML inputs[i].value;tr.appendChild(td);// 清空inputs[i].value }var s document.querySelector(#i1);td document.createElement(td);td.innerHTML s.value;tr.appendChild(td);// 添加删除按钮var button document.createElement(button);button.innerHTML 删除;button.setAttribute(onclick, del_tr(this));td document.createElement(td);td.appendChild(button);tr.appendChild(td);// 添加编辑按钮button document.createElement(button);button.innerHTML 编辑;button.setAttribute(onclick, edit_tr(this));td document.createElement(td);td.appendChild(button);tr.appendChild(td);tbody.appendChild(tr);};function del_tr(self) {var tr self.parentElement.parentElement;tbody.removeChild(tr);}function edit_tr(self) {self.innerHTML 保存;self.setAttribute(onclick,save(this));console.log(self.parentElement.parentElement.children);var children_td self.parentElement.parentElement.children;for(var i0;ichildren_td.length-2;i){var inp document.createElement(input);inp.setAttribute(type,text);// inp.value children_td[i].innerHTML;inp.setAttribute(value,children_td[i].innerHTML);console.log(::,inp);children_td[i].innerHTML ;children_td[i].appendChild(inp);}}function save(self) {self.innerHTML 编辑;self.setAttribute(onclick,edit_tr(this));var children_td self.parentElement.parentElement.children;for(var i0;ichildren_td.length-2;i){children_td[i].innerHTML children_td[i].firstElementChild.value}}/script/body
/html 至此我们js的基础就全部讲完了下一节就和大家说jquery来完善一下我们所学前端的内容
