网站优化首页付款城北区工程建设信息网站

当前位置： 首页 > news >正文

网站优化首页付款,城北区工程建设信息网站,wordpress 当前文章id,网络营销的有形层一、DOM编程 DOM(Document Object Model)编程#xff1a;就是使用document对象的API#xff0c;完成对网页HTML文档进行动态修改#xff0c;以实现网页数据#xff0c;和样式动态变化效果的编程。 (一)DOM获取元素的多种方法 1.查找元素的函数 getElementById(id值…一、DOM编程 DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改以实现网页数据和样式动态变化效果的编程。 (一)DOM获取元素的多种方法 1.查找元素的函数 getElementById(id值) 查找到唯一一个元素 getElementsByClassName(class值) 查找指定class的元素数组 getElementsByTagName(标签名) 查找指定标签名的元素document.getElementById(myDiv).getElementsByTagName(input) 在元素内部查找指定元素 document.getElementById(myDiv).getElementsByClassName(mycls) 在元素内部查找指定元素 2.查找元素的属性 dom树中根据节点关系查找元素注意这里的方法后面没有() 子节点children 所有子节点(集合)firstElementChild 元素lastElementChild 元素 兄弟(同级)节点nextElementSibling 下一个兄弟(同级)节点previousElementSibling 上一个兄弟(同级)节点 父节点parentElement 父元素节点 代码示例  ul idmyUlli列表1/lili列表1/lili idmyli列表1/lili列表1/lili列表1/li /ul divabc/div// Prototype 原型 console.log(document.getElementById(myUl).children); //元素集合 HTMLCollection console.log(document.getElementById(myUl).childNodes); //节点集合 NodeList 不要用 console.log(document.getElementById(myUl).getElementsByTagName(li));console.log(document.getElementById(myUl).firstChild); //节点 如果有空白文本 会获得文本 console.log(document.getElementById(myUl).firstElementChild); //元素节点console.log(document.getElementById(myUl).lastElementChild); //元素节点console.log(document.getElementById(myli) .nextElementSibling.nextElementSibling .previousElementSibling.previousElementSibling .previousElementSibling);console.log(document.getElementById(myli).parentElement.parentElement)(二)DOM操作属性 所有的效果都是找元素 改属性 读属性元素.属性 写属性元素.属性 xxx 函数形式操作属性 Attribute    属性  Properties 属性 读属性getAttribute(属性名) 写属性setAttribute(属性名,属性值) 两套不完全体通用 (js语法特点) bodyinput typetext idmyText / /body scriptdocument.getElementById(myText).value 你好;document.getElementById(myText).setAttribute(value,你不好);console.log(document.getElementById(myText).getAttribute(value)); // 你不好console.log(document.getElementById(myText).getAttribute(value)); // 你不好 /script element.value这是直接操作 DOM 对象的 value 属性。对于 input 元素value 会直接影响输入框的显示内容。因此 document.getElementById(myText).value 你好; 会直接把输入框中显示的内容改为 你好。         setAttribute(value, …)这是操作 DOM 属性而不是直接操作 value 属性。这会更新元素的 value 属性但并不会立即影响 input 的显示值。setAttribute(value, 你不好) 修改的是 HTML 属性而 JavaScript 的 element.value 会优先显示设置过的值即 你好。这就是为何 console.log 会显示 你不好但页面上显示的是 你好。 (三)动态dom操作 创建元素(不会出现在dom树上虚拟dom元素支持属性设置)document.createElement(li)追加子元素(可以把元素渲染出来 挂在dom树上)元素.appendChild(newEle)在指定元素前添加元素.insertBefore(newEle,指定的元素)复制节点 元素.cloneNode(true) bol值决定子节点是否赋值 默认值false 删除元素 元素.removeChild(删除的节点); 通常搭配查找元素使用
1.动态添加元素 步骤 生成出元素(虚拟dom结构 可以设置属性 页面上没有)渲染(通过特定api 把元素显示到页面中的某个为止 挂载到dom树上)   添加li  bodyinput typebutton value添加元素 onclickaddEle() /ul idmyUlli测试li/li/ul /body scriptfunction addEle() {// 创建虚拟的dom结构let newEle document.createElement(li);// 可以对生成的虚拟dom结构的属性进行操作newEle.innerHTML newLi;// 向dom数添加元素的动作叫做渲染// 注意渲染必须要做否则页面不显示新的元素document.getElementById(myUl).appendChild(newEle);// 也可以在添加新元素后设置属性// 双标签使用innerHTML进行赋值// document.getElementById(myUl).lastElementChild.innerHTML newLi;} /script 添加button  input typebutton value添加元素 onclickaddEle() / ul idmyUlliinput typebutton value测试按钮 //li /ulfunction addEle() {// 创建虚拟的dom结构let newEle document.createElement(li);/* 常规操作let newBtn document.createElement(input);newBtn.type button;newBtn.value 测试按钮;newEle.appendChild(newBtn); /// 简化dom操作// innerHTML可以解析html标签newEle.innerHTML input typebutton value测试按钮 stylefont-weight: bold;;// 渲染document.getElementById(myUl).appendChild(newEle); } 2.其他动态操作 input typebutton value添加元素 onclickaddEle() / input typebutton value指定元素位置添加 onclickaddEle2() / input typebutton value复制元素 onclickcopyEle() / input typebutton value删除元素 onclickdelEle() / ul idmyUlli idmyLiinput typebutton value测试按钮 //li /ulfunction addEle2() {let newEle document.createElement(li);newEle.innerHTML newLi…;document.getElementById(myUl).insertBefore(newEle, document.getElementById(myLi)); } function copyEle() {let newEle document.getElementById(myLi).cloneNode(true);document.getElementById(myUl).appendChild(newEle); } function delEle() {/// 删除头部的第一个节点document.getElementById(myUl).removeChild(document.getElementById(myLi).firstElementChild); */// 删除指定的子元素document.getElementById(myUl).removeChild(document.getElementById(myLi)); } 3.简化dom操作 innerHTML可以解析html标签 1.追加 和替换 可以借助innerHTML可以解析html标签的特征完成 2.删除 用原生api实现 input typebutton value添加元素 onclickaddEle() / input typebutton value删除元素 onclickdelEle() / ul idmyUlli idmyLiinput typebutton value测试按钮 //li /ulfunction addEle() {let content li idmyLiinput typebutton value新按钮 //li;document.getElementById(myUl).innerHTML content; } function delEle() {document.getElementById(myUl).removeChild(document.getElementById(myUl).lastElementChild); }4.动态table操作 JS中对table描述成⼆维数组 (行数组 和 单元格数组) table对象.rows         ⾏数组 row对象.cells           单元格数组 找到指定的单元格 可以通过⾏索引单元格索引查找 table对象.rows[idx].cells[idx] 动态操作table⽅法 insertRow(idx)         添加⾏ insertCell(idx)          新增单元格(列) deleteRow(idx)        删除列 input typebutton value添加一行数据 onclickaddRow() / input typebutton value添加多行数据 onclickaddRow2() / input typebutton value删除一行数据 onclickdeleteOneRow() / input typebutton value清空表格数据 onclickclearRow() / table idmyTable border1trth编号/thth名称/thth住址/th/trtrtd1/tdtd尼古拉斯赵四/tdtd象牙山/td/tr /table function addRow() {// insertRow 新建行 传入索引let newRow document.getElementById(myTable).insertRow(2);// insertCell 相当于每一个td 传入索引let td1 newRow.insertCell(0);let td2 newRow.insertCell(1);let td3 newRow.insertCell(2);// 编辑每一个td标签中的内容td1.innerHTML 2;td2.innerHTML 张三;td3.innerHTML 北京; }// 简化dom操作 // 批量添加的数据 let numArr [[2, 张三, 北京],[3, 李四, 上海],[4, 王五, 深圳], ]; function addRow2() {// table中都是双标签所以可以使用innerHTML// 遍历数组添加for (let obj of numArr) {let content trtd\({obj[0]}/tdtd\){obj[1]}/tdtd\({obj[2]}/td/tr;document.getElementById(myTable).innerHTML content;}// 找到指定的单元格console.log(document.getElementById(myTable).rows[2].cells[2].innerHTML); }function deleteOneRow() {document.getElementById(myTable).deleteRow(1); }function clearRow() {let table document.getElementById(myTable);// 获取表格的所有行let rows document.getElementsByTagName(tr);for (let i 1; i rows.length; i) {rows[i].innerHTML ;} } 二、JS的对象 (一)String对象 js中字符串      修饰的内容 js中处理字符串更多 let myStr abc123fnsabc; console.log(myStr.indexOf(bc)); console.log(myStr.indexOf(bc9)); // 对于不存在的字符串会返回-1// 判断指定字符串存在的方法 // if(myStr.lastIndexOf(bc) 0) console.log(myStr.lastIndexOf(bc)); console.log(myStr.substring(2, 4)); // c1 console.log(myStr.substr(2, 4)); // c123 // 分割字符串 根据指定的字符分割为数组 // 常用在有格式的字符串解析上 let myStr2 age15;namejack;addrstreetABC; // [age15, namejack, addrstreetABC] console.log(myStr2.split(;)[1].split()[1]); //转大写 toUpperCase console.log(myStr.toUpperCase()); // ABC123FNSABC //转小写 toLowerCase console.log(myStr.toLowerCase()); // abc123fnsabc //字符串替换 console.log(myStr.replace(123, 你好)); // abc你好fnsabc (二)Math对象 let myNum 10.5; //向上取整 ceil console.log(Math.ceil(myNum)); // 11 //向下取整(直接舍去小数点后面的数字) floor console.log(Math.floor(myNum)); // 10 //四舍五入 round console.log(Math.round(myNum)); // 11 //绝对值 当不知道两个数(事件)之间的大小时使用绝对值计算两个数之间的差值 let a 1; let b 3; console.log(Math.abs(a - b)); // 2 // 随机数 random 默认[0,1) // [0-2] 1 变成 [1-3) console.log(parseInt(Math.random() * 3)); // Math.random() * 10 // 取整数部分的方法parseInt 向上 1-10 向下 0-9 四舍五入 0-10(不要用偏差大) // 一般用向下取整比最终要的值大1即可 例如取[0,2] 乘以3即可 // 扩倍 移动区间 (三)Date对象 1.日期获取 // 获取当前运行的时间 console.log(new Date()); // Thu Nov 14 2024 15:15:57 GMT0800 (中国标准时间) // 获取指定日期的时间 // 2001-11-11 11:11:11 // 2021/12/12 12:12:12 console.log(new Date(2001-11-12 11:11:11)); // Mon Nov 12 2001 11:11:11 GMT0800 (中国标准时间) console.log(new Date(2021/12/12 12:12:12)); // Sun Dec 12 2021 12:12:12 GMT0800 (中国标准时间) 2.日期计算  // 2.日期的毫秒数 当前日期的毫秒数 // 做日期计算 let nowDate new Date(); console.log(new Date().getTime()); // 1731568685074 // 获取5天前的时间 console.log(nowDate.getTime() - 1000 * 60 * 60 * 24 * 5); // 1731136763045 console.log(new Date(nowDate.getTime() - 1000 * 60 * 60 * 24 * 5)); // Sat Nov 09 2024 15:18:10 GMT0800 (中国标准时间) 3.日期显示   // 3. 根据需要 显示日期格式 // 获取年 let myYear nowDate.getFullYear(); console.log(myYear); //获取月 0-11 let myMonth nowDate.getMonth() 1; console.log(myMonth); //获取星期 let myDay nowDate.getDay(); console.log(myDay); //获取日期 let myDate nowDate.getDate(); console.log(myDate); //获取时 let myHours nowDate.getHours(); console.log(myHours); //获取分 let myMinutes nowDate.getMinutes(); console.log(myMinutes); //获取秒 let mySeconds nowDate.getSeconds(); console.log(mySeconds); let dateStr \){myYear}年\({myMonth}月\){myDate}日 \({myHours}:\){myMinutes}:\({mySeconds} 星期\){myDay}; console.log(dateStr); // 2024年11月14日 15:19:45 星期4 (四)Array对象 数组表示数据的集合在Java中               1.指定数据类型               2.指定数组长度(不可变)               3.数组是一种底层数据结构(需要在内存中直接占用空间) js是弱类型语言 js数组1.没有加泛型的list              2.不需要指明数据类型              3.长度可变         1.数组创建 let newArr new Array(); console.log(newArr); let newArr2 []; console.log(newArr2); 2.数组中的内容 let newArr3 [1, abc, true, new Date(), [1, 2, 3]]; console.log(newArr3); // 实际使用时一般把相同数据类型的数据放入一个数组 let newArr4 [4, 1, 3, 8, 6, 2]; console.log(newArr4); 3.数组常用方法 // join()通过指定的字符串将数组中的元素拼接为一个字符串 // join 把数组串转成字符串 // 经常与字符串的split方法对应起来 字符串 与 数组 互换 console.log(newArr4.join(;)); // 4;1;3;8;6;2 console.log(newArr4.join(;).split(;)); // [4, 1, 3, 8, 6, // 排序 排序规则 function(a,b){return a-b} a-b 升序 b-a降序 // 开发中一般是后端排序好传给前端 // 升序 a-b console.log(newArr4.sort(function (a, b) {return a - b;}) ); // [1, 2, 3, 4, 6, 8] // 降序 b-a console.log(newArr4.sort(function (a, b) {return b - a;}) ); // [8, 6, 4, 3, 2, 1]// 当链表使用 /*newArr4.push(a) 队尾添加 返回值是数组的长度newArr4.pop() 队尾删除newArr4.unshift(a) 队头添加newArr4.shift() 队头删除 / newArr4.push(a); // [8, 6, 4, 3, 2, 1, a] console.log(newArr4); newArr4.pop(); console.log(newArr4); // [8, 6, 4, 3, 2, 1] newArr4.unshift(b); console.log(newArr4); // [b, 8, 6, 4, 3, 2, 1] newArr4.shift(); console.log(newArr4); // [8, 6, 4, 3, 2, 1]// 删除指定索引位置的元素 // splice()动态操作数组元素方法 // splice(起始,个数,可以选参数) // 如果没有可选参数 可以做删除 newArr4.splice(1, 2); console.log(newArr4); // [8, 3, 2, 1]// 如果有可选参数 做替换 根据个数 与可选参数的个数 决定增加还是减少 newArr4 [4, 1, 3, 8, 6, 2]; newArr4.splice(1, 2, a); console.log(newArr4); // [4, a, 8, 6, 2]newArr4 [4, 1, 3, 8, 6, 2]; newArr4.splice(1, 2, a, b); console.log(newArr4); // [4, a, b, 8, 6, 2] 4.数组的遍历 newArr4.forEach(function (data) {console.log(data); });console.log(document.getElementById(btns).children); // HTMLCollection(4) [input, input, input, input]// 获取元素集合 Prototype HTMLCollection let eles document.getElementById(btns).children;// Prototype不一样 Array 包含的函数和属性不同 // Array.from(eles); 方法把非Array的数组类型转成Array 就可以调用array的函数了let newEles Array.from(eles); console.log(newEles); // [input, input, input, input] // 转换后 才可以用forEach遍历 newEles.forEach(function (data) {data.style.color red; });/ eles.forEach(function (data) {console.log(data); }); // Uncaught TypeError: eles.forEach is not a function / 三、JSON 通过JSON可以自定义对象。 1.创建JSON对象 let myStu { id: 1, name: zhangsan, age: 18 }; console.log(myStu); // 获取某个属性值 console.log(myStu.name); // 修改属性值 myStu.name rose; console.log(myStu); // 新增属性 myStu.addr 北京; console.log(myStu); 2.JSON数据类型 key      字符串 value   任意类型 let myObj {name: jack,age: 15,birthDay: new Date(),study: function () {// this 指向当前json对象console.log(this);console.log(this.name 在学习);}, }; console.log(myObj); // 调用JSON中的函数对象 myObj.study(); // jack在学习 3.JSON书写格式 分为标准格式(前后端传递数据)和简化格式(纯前端使用) // 3.1 标准格式 key带引号 指明是字符串 // let myStu { id: 1, name: zhangsan, age: 18 }; // 3.2 简化格式 key的引号 可以省略不写 // let myStu { id: 1, name: zhangsan, age: 18 };// 前后端数据传递 使用标准json格式 let myStu2 { id: 1, name: zhangsan, age: 18 }; // 传递给后端时要转成JSON对象才能获取属性 console.log(JSON.parse(myStu2).name); // zhangsan// 纯前端使用 使用简化格式 // 简化格式转为JSON对象时会失败 / let myStuStr { id: 1, name: zhangsan, age: 18 }; console.log(JSON.parse(myStuStr).name); */ // Uncaught SyntaxError: Expected property name or } in JSON at position 2 (line 1 column 3) at JSON.parse (anonymous) 4.JSON与字符串互相转换 JSON.stringify(newStu)                                                       JSON对象转标准格式字符串 JSON.parse({ID:1,name:jack2,age:18})                  标准格式字符串 转json对象 // JSON字符串 let myStu4 { id: 1, name: zhangsan, age: 18 }; console.log(JSON.stringify(myStu4));// 字符串JSON // 注意字符串转JSON时要使用标准格式 console.log(JSON.parse({ID:1,name:jack2,age:18})); 5.JSON实际使用时经常搭配数组使用 // 数组中套JSON let students [{ ID: 2, name: jack1, age: 15 },{ ID: 2, name: jack2, age: 15 },{ ID: 3, name: jack3, age: 15 }, ]; console.log(students[1].name); // jack2// JSON中套数组 let myClass {className: 606,classAddr: 6楼606,students: [{ ID: 1, name: jack1, age: 15 },{ ID: 2, name: jack2, age: 15 },{ ID: 3, name: jack3, age: 15 },], }; console.log(myClass);// 遍历出每一个学生名字 myClass.students.forEach(function (data) {console.log(data.name); }); // jack1 jack2 jack3