做网站运营怎么样,莆田网站制作方案定制,重庆百度竞价排名,网络 网站建设办公总结
讲解自定义对象
在ES5中没有像Java中一样专门的class关键字定义类#xff08;ES6中可以用class定义类#xff09;#xff0c;所以在ES5中创建类其实和创建函数是一样的语法:
function 对象名/类名/方法名(){
}一种语法代表了多重含义#xff0c;在JavaScript中若想…总结
讲解自定义对象
在ES5中没有像Java中一样专门的class关键字定义类ES6中可以用class定义类所以在ES5中创建类其实和创建函数是一样的语法:
function 对象名/类名/方法名(){
}一种语法代表了多重含义在JavaScript中若想清楚的区分定义的到底是方法还是类性质的对象那么建议方法名称小写建议类或对象名称首字母大写
一种语法代表了多重含义在JavaScript中若想清楚的区分定义的到底是方法还是类性质的对象那么建议方法名称小写建议类或对象名称首字母大写
类中定义方法有下列形式
(1) 通过new的实例化对象添加方法(特点这种方式添加的方法只属于当前实例)
(2) 在对象中使用this关键字(特点这种方式添加的属性和方法属于所有实例)
(3) 通过prototype添加方法(特点这种动态添加的属性和方法属于所有实例而且不会影响以前的功能)body!-- 讲解自定义对象 --scriptfunction Person() { // 函数名大驼峰是一个对象小驼峰是函数// 属性var name;var age;// 方法this.getName function() {return this.name;}this.setName function(n) {this.name n;}this.getAge function() {return this.age;}this.setAge function(a) {this.age a;}}// 创建对象// var person new Person();// person.setAge(18);// person.setName(张三)// console.log(person.getAge());// console.log(person.getName());// var person2 new Person();// person2.setAge(20);// person2.setName(蘋蘋);// console.log(person2.getAge());// console.log(person2.getName());// 讲解prototype动态为对象扩展属性和方法// 对象名.prototype.属性名// 对象名.prototype.函数名 function() {}Person.prototype.gender;// var p new Person();// p.name 张三;// p.age 18;// p.gender 女;// console.log(p.name , p.age , p.gender);Person.prototype.getGender function() {return this.gender;}Person.prototype.setGender function(g) {this.gender g;}var p2 new Person();p2.setName(老王吧);p2.setAge(10000);p2.setGender(公);console.log(p2.getName() , p2.getAge() , p2.getGender());/script
/body扩展对象加一个方法
body!-- 扩展Date对象加一个方法 --scriptDate.prototype.format function() {var y this.getFullYear();var m this.getMonth() 1;var d this.getDate();var h this.getHours();var mm this.getMinutes();var s this.getSeconds();m m 10 ? 0 m : m;d d 10 ? 0 d : d;h h 10 ? 0 h : h;mm mm 10 ? 0 mm : mm;s s 10 ? 0 s : s;var rq y - m - d h : mm : s;return rq;}var d new Date();// console.log(d.format());console.log(d.toDateString());console.log(d.toLocaleDateString());console.log(d.toLocaleTimeString());/script
/bodyBOM操作浏览器的对象
BOM是Browser Object Model的缩写简称浏览器对象模型用于操作浏览器对象的浏览器地址栏历史记录浏览器自身信息浏览器窗口浏览器文档
(1) 打开一个窗口就是一个window对象
(2) 窗口里面使用location表示地址栏
(3) 窗口的历史记录使用history来表示
(4) 浏览器的信息使用navigator来表示
(5) 窗口里面的内容使用document来表示BOM是包括DOM这里重点讲下window对象和location对象 window窗口对象 window对象是BOM中的顶级对象默认可以省略即调用其函数时可以省略window. window对象可以获取其他BOM对象 **注意**全局函数和window对象的函数不一样。全局函数不属于任何一个内置对象 location地址对象 当前访问的网址的相关信息 script// 弹框1、警告框 alert(); 2、确认框 confirm()// alert(abc);// var temp confirm(你要删除吗);// console.log(temp);// 打开新窗口// window.open(https://baidu.com);// 定时方法// setTimeout():一次任务 setInterval():周期任务// var i 0;// function fn() {// console.log(i);// i;// }// setTimeout(fn(),3000);// var val setInterval(fn,3000);// clearInterval(val);// function clearVal() {// if(i 5) // clearInterval(val);// }// clearVal();// setTimeout(() {// var d new Date();// var rq d.toLocaleDateString() d.toLocaleTimeString();// console.log(rq);// },1000);// setInterval(() {// var d new Date();// var rq d.toLocaleDateString() d.toLocaleTimeString();// console.log(rq);// },1000);// location地址栏对象// var host location.host;// console.log(host);// var hostname location.hostname;// console.log(hostname);// console.log(location.port);// var addr location.href; // 获取当前地址栏的地址// console.log(addr);// location.href https://www.baidu.com;var v navigator.appVersion;console.log(v);/script
/bodyDOM文档对象模型Document Object Model
简称 DOM将页面所有的内容表示为可以修改的对象浏览器将我们编写在HTML中的每一个元素Element都变成了一个一个的对象所有这些对象都可以通过JavaScript来对其进行访问可以通过JavaScript来操作页面这个将元素变为对象的过程称之为 文档对象模型Document Object Model
DOM树结构通过DOM树中的所有节点均可通过JS进行访问所有的HTML元素均可被修改 文档一个页面就是一个文档DOM中使用Document表示 元素页面中所有标签都是元素DOM中使用Element表示元素是对于标签的统称 属性标签中的所有属性在DOM中使用Attribute表示 文本标签中的所有文本在DOM中使用Text表示 节点通过DOM获取到的所有内容例如标签、标签属性、标签文本等在DOM中使用node表示也就是节点 DOM把以上内容都看做是对象 元素操作
查询元素 getElementById()通过标签元素的ID获取到标签对象getElementsByName()通过标签元素的name属性获取到标签对象返回的是数组getElementsByTagName()通过标签名称获取到标签对象返回的是数组document.documentElement:获取根节点html clientWidth获取页面宽度clientHeight获取页面高度 document.body: 获取body节点bodyparentNode获取指定元素的父节点返回Node
body!-- 获取标签对象的方式 --p idp1 classp1123/pp idp2 classp1abc/pullia href#腊肉/a/lilia href#猪蹄/a/lilia href#香肠/a/lilia href#腰花/a/lia123/aaabc/a/ulinput typetext nameusername value0 disabled /input typetext nameusername value1 disabled /input typetext nameusername value2 /input typetext nameusername value3 /script// 获取p的方式1通过idvar pElement document.getElementById(p1);console.log(pElement);// 通过标签名获取是一个集合var pElement2 document.getElementsByTagName(p);console.log(pElement2[0]);// 通过class:className来获取获取数组var pElement3 document.getElementsByClassName(p1);console.log(pElement3[0]);// 通过name属性获取var inputElement document.getElementsByName(username);console.log(inputElement[0]);// 通过选择器来获取class选择器 .名字id选择器 #名字// var pElement4 document.querySelector(.p1); // 获取的是单个对象// console.log(pElement4);var pElement5 document.querySelector(#p2);console.log(pElement5);var arrs document.querySelectorAll(.p1);console.log(arrs[1]);// 标签名选择器 组合层次伪类var uElement document.querySelectorAll(ul,p);console.log(uElement);var list2 document.querySelectorAll(input:disabled);console.log(list2[0]);console.log(list2[1]);/script
/bodybody!-- 讲解获取节点的父节点 --div classdiv1p classp1hello,spanjs/span/p/divscriptvar bd document.querySelector(body);// body专属获取方式// var bd2 document.body;// console.log(bd2);var spanElement document.querySelector(span);console.log(spanElement);// 获取spanElement的父节点var parent1 spanElement.parentNode; // 获取父节点console.log(parent1);var parent2 parent1.parentNode;console.log(parent2);// 获取整个文档var dd document.documentElement;console.log(dd);// 获取文档的大小宽度和高度var w dd.clientWidth; // 获取文档的宽度var h dd.clientHeight;console.log(width w ,height h);/script
/body创建和删除标签 创建新的元素document.createElement(元素名称) 父节点追加子节点appendChild(元素对象) 父节点删除子节点父节点对象.removeChild(元素对象) 修改元素就是先删除再创建
body!-- 创建和删除标签 --p/pdiva href#点击/a/divscript// 1、创建标签// for(var i 0; i 10; i) {// // document.createElement(标签名); // 创建标签// var spanElement document.createElement(span);// console.log(spanElement);// // 在双标签中放入内容innerText:文本 innerHTML标签// spanElement.innerText 你好; // 在创建好的标签对象当中放入你好的文本// // 将创建标签放入页面存在节点里面去// var pElement document.querySelector(p);// pElement.appendChild(spanElement); // 将span 放到p标签里面// }// 2、删除标签// var divElment document.querySelector(div);// var aElement document.querySelector(a);// divElment.removeChild(aElement); // 从父节点中删除子节点// 自删var aElement document.querySelector(a);aElement.remove();// 修改标签var pElement document.createElement(p);pElement.innerHTML span从持续创新/span;var divElement document.querySelector(div);divElement.appendChild(pElement);console.log(divElement);/script
/body操作标签对象属性和样式 文本操作 innerHTML设置或者获取双标签中的HTML文本innerText设置或者获取双标签中的纯文本 区别 HTML可以解析标签如果输入的内容是标签包裹可以解析Text原样展示输入的内容 value获取value属性值【所有的inputselect下拉框textarea等】 属性操作 方式一元素对象.setAttribute(属性名称,属性值) 可以修改元素中本身不存在的属性 方式二元素对象.属性名称 属性值 只能修改元素中本身存在的属性
注意如果要修改元素的class属性属性名称为 className因为在JS中class是保留字
body!-- 讲解操作标签对象属性和样式 --input typetext nameusername / br /scriptvar inputElement document.querySelector(input);// 1、用标签对象直接.属性名// inputElement.value 张三; // 为value赋值// var val inputElement.value; // 获取value的属性值// console.log(val);// var imgElemet document.createElement(img);// imgElemet.src https://gimg2.baidu.com/image_search/srchttp%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3e14585e-9746-48f4-9f91-f702e6aebd5b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpgreferhttp%3A%2F%2Fsafe-img.xhscdn.comapp2002sizef9999,10000qa80n0g0nfmtauto?sec1707293255tae6bb342619ba9833f1a257f0acd1743;// imgElemet.alt 樱桃;// imgElemet.title 冕宁樱桃;// console.log(imgElemet);// imgElemet.style width:300px; height:300px;border-radius:150px;;// document.body.appendChild(imgElemet);// 注意直接点只能操作标签有的属性// 2、setAttribute(属性名称,属性的值):设置属性 getAttribute(属性名称)取属性的值inputElement.setAttribute(value,隔壁老王的辰辰的亲爱的蘋蘋);var val inputElement.getAttribute(value);console.log(val);inputElement.setAttribute(nb,老王就是NB);console.log(inputElement);/script
/bodyonload 因为我们页面是从上至下执行所以如果JS代码在元素标签前面那么我们是获取不到元素对象的因为页面还未执行到元素标签两种解决方案 第一种我们可以将JS代码写在标签后面第二种使用window.onload方法 onload延迟执行等页面全都执行完成之后再执行其中的JS代码 !-- 1、放在标签之后 2、放在标签之前 --!-- scriptwindow.onload function() {console.log(document.querySelector(p).innerText);}/scriptphello/p --!-- scriptconsole.log(document.querySelector(p));/script --事件注册 注册事件两种方式 第一种直接在标签上加入第二种在标签对象上绑定addEventListener(“事件名称”,function(){}) body!-- 讲解为标签绑定事件3种方式 --!-- 1、直接在标签上加入 --!-- input typetext nameusername οnfοcusalert(获取焦点事件) οnbluralert(失去焦点事件) / --!-- input typetext nameusername οnfοcuschange() οnblurresetColor() /scriptfunction change() {var inputElement document.querySelector(input);inputElement.setAttribute(style,color:red);}function resetColor() {var inputElement document.querySelector(input);inputElement.setAttribute(style,color:gray);}/script --!-- 2、在标签对象上绑定 --!-- pdsfdslfjdskf/pscriptvar pElement document.querySelector(p);// 给对象绑定事件pElement.onclick function() {this.style.fontSize 30px;}/script --!-- 3、addEventListener(事件名称,function(){}) --img srchttps://p6-pc-sign.douyinpic.com/tos-cn-i-0813/oAoATCfzAEzUbCAAZhAgt1hxybIdexSANALbbC~tplv-dy-aweme-images:q75.webp?biz_tagaweme_imagesfrom3213915784sPackSourceEnum_SEOscimagesefalsex-expires1707274800x-signatureVBe5aehaVxeecAbL7Pc9dgtevx4%3D /scriptvar imgElement document.querySelector(img);// 注册监听事件imgElement.addEventListener(click,function() {this.src https://nimg.ws.126.net/?urlhttp%3A%2F%2Fdingyue.ws.126.net%2F2023%2F1227%2F82cfa2c0j00s6akxv001cd000hs00frp.jpgthumbnail660x2147483647quality80typejpg;});/script
/body实例打地鼠
bodyp分数span0/span分,还是剩余:label20/label秒/pscriptvar score 0;var interval setInterval(() {var dd document.documentElement;var imgElement document.createElement(img);imgElement.src ./1.png;imgElement.style width:100px;height:100px;border-radius:50px;position:absolute;;imgElement.style.top Math.random() * (dd.clientHeight - 150) px;imgElement.style.left Math.random() * (dd.clientWidth - 100) px;imgElement.ondblclick function() {this.remove();score 10;}document.body.appendChild(imgElement);document.querySelector(span).innerText score;},100);/script
/bodyjs中常用事件操作 onclick用户点击对象 - 【常用】 ondblclick用户双击对象 - 【常用】onmouseover鼠标指针移动到对象上 - 【常用】onmouseout 鼠标指针移出对象 - 【常用】onkeydown 按下键盘 - 【常用】onblur 用户离开对象。失去焦点 - 【常用】onfocus 用户获得焦点 - 【常用】onchange 用户改变对象的值 - 【常用】onload 页面完成加载 - 【常用】
实例
body!-- 常用事件 --!-- scriptdocument.body.onkeydown function() {// event.keyCode; // 获取按键的键码// console.log(event.keyCode);if(event.keyCode 38 || event.keyCode 40) {alert(老王好剑);}}/script --div stylewidth: 200px; height: 200px; background-color: lime;/divselect nameselectoption value翠绿色翠绿色/optionoption value老王的黄色老王的黄色/optionoption value辰辰绿辰辰绿/optionoption value蘋蘋的粉蘋蘋的粉/option/selectscriptdocument.querySelector(select).onchange function() {var val this.value;if(val 翠绿色) {document.querySelector(div).style.backgroundColor lime;} else if(val 老王的黄色) {document.querySelector(div).style.backgroundColor yellow;}else if(val 辰辰绿) {document.querySelector(div).style.backgroundColor green;}else if(val 蘋蘋的粉) {document.querySelector(div).style.backgroundColor pink;}}/script
/bodyAjax Ajax概念 AjaxAsynchronous Javascript And XML即是异步的JavaScript和XMLAjax其实就是浏览器与服务器之间的一种异步通信方式 异步的JavaScript它可以异步地向服务器发送请求在等待响应的过程中不会阻塞当前页面在这种情况下浏览器可以做自己的事情。直到成功获取响应后浏览器才开始处理响应数据。简单来说Ajax就是在浏览器不重新加载网页的情况下对页面的某部分进行更新 XML是前后端数据通信时传输数据的一种格式现在已经多用于编写框架的配置文件前后端交互数据现在比较常用的是 JSON 为什么使用Ajax 无刷新不刷新整个页面只刷新局部无刷新的好处 只更新部分页面有效利用带宽提供连续的用户体验提供类似C/S的交互效果操作更方便 互联网百分之99以上的项目都是使用Ajax异步请求 Ajax编写步骤 第一步获取Ajax对象 注意Ajax是需要在服务器中运行的如果直接将HTML拖到浏览器那么Ajax无效 获取Ajax对象其他浏览器/IE7以上 const ajax new XMLHttpRequest();第二步准备请求 ajax.open(请求方式,请求地址);设置回调函数() 绑定监听事件 onreadystatechange需要绑定一个事件处理函数该函数用来处理readystatechange事件。当AJAX对象的 readyState的值发生了改变时该事件由系统触发。比如从1变成了2就会产生readystatechange事件。在当前不同的处理状态下可以进行状态的捕获做些相应处理。每一次的状态变化都会触发onreadystatechange绑定的处理函数只是大部分时候我们只需要知道从 3变为4即当前readyState为4时这个状态此时数据响应已返回并接收成功等待下一步的处理 此监听事件是异步的关键 ajax.onreadystatechangefunction(){ //处理返回的数据 //此函数中最需要的目的是为了获取正确的数据成功接收数据并且是正确的数据};状态判断 readyState代表请求的状态使用不同的数字代表一个状态 0还未开始没有调用send()方法
1已经调用send()正在发送请求
2请求完成
3正在接收数据
4数据接收成功 对于状态的判断书写代码的格式如下 ajax.onreadystatechangefunction(){if(ajax.readyState 4){//已经接收到服务器响应的内容了let result ajax.responseText;//展示数据到页面}//这里最后不要写else因为状态从0-1-2-3都会触发else
};但是状态并不能保证回来的数据就是我们想要的数据也可能是发回的错误提示。所以要想保证接受到的数据就是成功响应的数据还需添加对另一个属性的判断status。这个属性代码响应的状态码200代表成功404代表没有找到资源500代表服务器发生了运行异常 if(ajax.readyState 4 ajax.status 200){//接收服务端响应回来的数据responseText只接收text文本let result ajax.responseText;
}**注意**post请求多一步 - 设置请求头
理解实例
bodyinput typetext nameusername onblurcheckUsername() /scriptfunction checkUsername() {// 1.创建ajax对象const ajax new XMLHttpRequest();// 2.准备请求// ajax.open(get,https://www.fastmock.site/mock/85185e7ffb59a2610bef52502ef45300/ajax/verifyName);ajax.open(post, https://www.fastmock.site/mock/85185e7ffb59a2610bef52502ef45300/ajax/register);// 3.监听ajax.onreadystatechange function() {console.log(我是监听。。。。)// 状态的判断if(ajax.readyState 4 ajax.status 200) {console.log(ajax.responseText);}}ajax.setRequestHeader(content-type,application/x-www-form-urlencoded);// 4.发送ajax.send();console.log(我是异步的后续代码。。。。)}/script
/body
