锡林浩特网站建设,建筑公司注册要求,企业品牌营销推广,采集文章留在网站节点操作
目前对于节点操作还是有些困惑#xff0c;只是了解简单的案例
具体操作可以看菜鸟教程#xff1a;https://www.runoob.com/js/js-htmldom-elements.html
案例-1
!DOCTYPE html
html langenheadmeta charsetUTF-8…节点操作
目前对于节点操作还是有些困惑只是了解简单的案例
具体操作可以看菜鸟教程https://www.runoob.com/js/js-htmldom-elements.html
案例-1
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodystrongdiv上的一个元素节点/strongdivspanspan属于div的子元素节点/span/divp这个p标签属于div的兄弟元素节点/pullili标签/lilili标签/lilili标签/li/ululdivspan classmaxhello world/span/div/ulollilililiil/li/olscript//获取元素const span document.querySelector(span);console.dir(span);//节点操作之获取父元素节点const a span.parentNode;console.log(a);//获取ulconst ul document.querySelector(ul);console.log(ul);// const b ul.children;// 获取子元素节点const b ul.childNodes;console.log(b);// 获取第一个子元素节点console.log(ul.childNodes[0]);// 获取最后一个子元素节点console.log(ul.childNodes[ul.children.length - 1]);const div document.querySelector(div);//节点操作之获取兄弟节点和上一个节点console.log(div.nextSibling);//获取下一个节点console.log(div.nextElementSibling);//下一个元素节点console.log(div.previousSibling);//上一个节点console.log(div.previousElementSibling);//上一个元素节点const span1 document.querySelector(.max);console.dir(span1);console.log(span1.parentNode.parentNode.nextElementSibling.children[0]);/script
/body/html案例-2-节点的添加
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyulli甲柒/li/ulscript//创建一个li标签//语法格式//createElement(要创建的元素)const li document.createElement(li);li.innerHTML 孙行者;// 将创建的li标签添加到指定位置// 获取ul给ul添加子节点const ul document.querySelector(ul);// ul.appendChild(li);//在末尾添加子元素// insertBefore(要添加的元素,要添加到那个元素的前面)// ul.insertBefore(li,ul.children[0]);console.dir(li);ul.innerHTML li.outerHTML;/script
/body/html下面是关于节点的示例节点操作还是挺常见的但是总感觉以后会用的不多。
示例 代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebutton {position: relative;left: 1100px;top: 28px;}/style
/headbodybutton发送/buttontable aligncenter border1px width380pxtheadth全选/全不选input typecheckbox name id classqx onclickqx(this)/thth商品名称/thth商品价格/thth商品颜色/thth操作/th/theadtbody/tbody/tablescript//创建发送请求的对象document.querySelector(button).onclick function () {const xhr new XMLHttpRequest();//设置请求路径xhr.open(GET, test.json);xhr.send();// 监听响应状态若状态发生改变触发函数xhr.onreadystatechange function () {console.dir(xhr);//响应状态200 发送成功if (xhr.readyState 4 xhr.status 200) {XR(xhr.responseText);}}}function XR(A) {let str ;const a JSON.parse(A);for (let i 0; i a.length; i) {str tr;str tdinput type checkbox classdx οnclickdx()/td;str td${a[i].name}/td;str td${a[i].price}/td;str td${a[i].color}/td;str tda href# οnclickshan(this)删除/a/td;str /tr;}document.querySelector(tbody).innerHTML str;}// 定义表格的bodyconst body document.querySelector(tbody);//删除1行function shan(A) {body.removeChild(A.parentNode.parentNode);}//全选全不选function qx(A) {//获取全选按钮const dx document.querySelectorAll(.dx);for (let i 0; i dx.length; i) {dx[i].checked A.checked;}}//下方选中上方自动选中function dx() {const qx document.querySelector(.qx);const dxs document.querySelectorAll(.dx);let flag true;//判断是否都选中如果都选中不修改flag的值如果有一个没有选中修改flag的值for (let i 0; i dxs.length; i) {//判断是否被选中 没有选中flag的值变为 falseif (dxs[i].checked false) {flag false;break;}}qx.checked flag;}/script
/body/html键盘事件
常用键盘事件
松开的时候触发
onkeyup按下的时候触发
onkeydown按下的时候触发
onkeypresskeydown与keypress对比
keydownkeypress效果对比所有按键触发都有效功能键触发无效tab/shift/ctrl等按键ASCII对比大写时ASCII值相同小写时ASCII值与keydown不同大写时相同相同长按会一直触发大写时ASCII值相同
示例代码
//添加事件
//松开时触发
document.addEventListener(keyup, function () {console.log(触发了keyup事件);
})
//按下时触发 所有键有效 长按会一直触发
document.addEventListener(keydown, () {console.log(触发了keydown事件);
})
//按下时触发 功能键无效 长按会一直触发
document.addEventListener(keypress, () {console.log(触发了keypress事件);
})//对比 keydown 与 keypress
document.addEventListener(keydown, (k) {console.log(keydown k.keyCode);
})
document.addEventListener(keypress, (k) {console.log(keypress k.keyCode);
})鼠标事件
鼠标点击
click当鼠标在元素上移动时触发
mousemove当鼠标移除元素时触发
mouseout示例 代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.div1 {width: 400px;height: 400px;border: 1px solid red;font-size: 24px;margin: 0 auto;}/style
/headbodydiv classdiv1/div
/body/html
script// 鼠标左键的点击事件const div1 document.querySelector(.div1);div1.addEventListener(click, () {console.log(触发click事件);})// pageX 鼠标的x轴 mousemove鼠标移动div1.addEventListener(mousemove, (m) {div1.innerHTML 当前坐标${m.pageX}${m.pageY});})// mouseout 鼠标移除div1.addEventListener(mouseout, () {div1.innerHTML 别干出去啊~~~;})
/script其他事件
获得焦点
focus失去焦点
blur用户输入表单
input示例 代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title发送评论/titlestyle.max {width: 400px;height: 600px;border: 1px solid red;border-radius: 10px;margin: 0 auto;}.div1 {width: 400px;height: 200px;line-height: 200px;border: 1px solid skyblue;text-align: center;border-radius: 10px;}.inp {border-color: aquamarine;outline: 0px solid orange;height: 40px;transition: all 1s;}.div2 {width: 400px;height: 400px;border: 1px solid orange;border-radius: 10px;}/style
/headbodydiv classmaxdiv classdiv1input typetext classinpinput typebutton value发送 classbutton/divdiv classdiv20/100字/div/div
/body/htmlscriptconst inp document.querySelector(.inp);const button document.querySelector(.button);const div2 document.querySelector(.div2);inp.addEventListener(focus, () {inp.style.height 60px;inp.style.border 1px solid orange;inp.style.outline 1px solid orange;})inp.addEventListener(input, (m) {div2.innerHTML ${inp.value.length}/100字;})button.addEventListener(click, () {if (inp.value ! ) {div2.innerHTML ${inp.value};inp.value ;} else {alert(请输入评论~~~);}})document.addEventListener(keyup, (k) {if (k.keyCode 13) {if (inp.value ! ) {div2.innerHTML ${inp.value};inp.value ;} else {alert(请输入评论~~~);}}})
/script补充
${变量}//是反引号在键盘左上角用英文输出
${inp.value}// 是 JavaScript 中的模板字面量template literals表达式。
这种语法允许你插入变量值到字符串中使用 ${} 括起变量或表达式。
在这里${inp.value} 用于将输入框input的值插入字符串中以显示输入框的当前值。综合案例的美化
示例 代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title发送评论/titlestylebody {background-color: #f4f4f4;font-family: Arial, sans-serif;display: flex;align-items: center;justify-content: center;height: 100vh;margin: 0;}.max {width: 400px;height: 600px;border: 1px solid #ddd;border-radius: 10px;margin: 0 auto;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.div1 {width: 100%;height: 200px;border-bottom: 1px solid #ddd;border-radius: 10px 10px 0 0;background-color: #3498db;display: flex;flex-direction: column;align-items: center;justify-content: center;}.inp {border: none;outline: none;height: 40px;width: 80%;border-radius: 5px;padding: 5px;margin-bottom: 10px;transition: all 1s;outline: #3498db;border: 1px solid #3498db;}.button {background-color: #2ecc71;color: #fff;border: none;padding: 8px 15px;border-radius: 5px;cursor: pointer;}.button:hover {background-color: #27ae60;}.div2 {width: 100%;height: 400px;border-radius: 0 0 10px 10px;padding: 20px;box-sizing: border-box;overflow-y: auto;color: #333;}/style
/headbodydiv classmaxdiv classdiv1input typetext classinp placeholder请输入你的评论input typebutton value发送 classbutton/divdiv classdiv20/100字/div/div
/body/htmlscriptconst inp document.querySelector(.inp);const button document.querySelector(.button);const div2 document.querySelector(.div2);inp.addEventListener(focus, () {inp.style.height 60px;inp.style.border 1px solid #3498db;inp.style.outline 1px solid #3498db;});inp.addEventListener(input, () {div2.innerHTML ${inp.value.length}/100字;});button.addEventListener(click, () {if (inp.value ! ) {div2.innerHTML ${inp.value};inp.value ;} else {alert(请输入评论~~~);}});document.addEventListener(keyup, (k) {if (k.keyCode 13) {if (inp.value ! ) {div2.innerHTML ${inp.value};inp.value ;} else {alert(请输入评论~~~);}}});
/script附录-ASCII码一览表
二进制十进制十六进制字符/缩写解释00000000000NUL (NULL)空字符00000001101SOH (Start Of Headling)标题开始00000010202STX (Start Of Text)正文开始00000011303ETX (End Of Text)正文结束00000100404EOT (End Of Transmission)传输结束00000101505ENQ (Enquiry)请求00000110606ACK (Acknowledge)回应/响应/收到通知00000111707BEL (Bell)响铃00001000808BS (Backspace)退格00001001909HT (Horizontal Tab)水平制表符00001010100ALF/NL(Line Feed/New Line)换行键00001011110BVT (Vertical Tab)垂直制表符00001100120CFF/NP (Form Feed/New Page)换页键00001101130DCR (Carriage Return)回车键00001110140ESO (Shift Out)不用切换00001111150FSI (Shift In)启用切换000100001610DLE (Data Link Escape)数据链路转义000100011711DC1/XON (Device Control 1/Transmission On)设备控制1/传输开始000100101812DC2 (Device Control 2)设备控制2000100111913DC3/XOFF (Device Control 3/Transmission Off)设备控制3/传输中断000101002014DC4 (Device Control 4)设备控制4000101012115NAK (Negative Acknowledge)无响应/非正常响应/拒绝接收000101102216SYN (Synchronous Idle)同步空闲000101112317ETB (End of Transmission Block)传输块结束/块传输终止000110002418CAN (Cancel)取消000110012519EM (End of Medium)已到介质末端/介质存储已满/介质中断00011010261ASUB (Substitute)替补/替换00011011271BESC (Escape)逃离/取消00011100281CFS (File Separator)文件分割符00011101291DGS (Group Separator)组分隔符/分组符00011110301ERS (Record Separator)记录分离符00011111311FUS (Unit Separator)单元分隔符001000003220(Space)空格001000013321!001000103422001000113523#001001003624$001001013725%001001103826001001113927’001010004028(001010014129)00101010422A*00101011432B00101100442C,00101101452D-00101110462E.00101111472F/001100004830000110001493110011001050322001100115133300110100523440011010153355001101105436600110111553770011100056388001110015739900111010583A:00111011593B;00111100603C00111101613D00111110623E00111111633F?010000006440010000016541A010000106642B010000116743C010001006844D010001016945E010001107046F010001117147G010010007248H010010017349I01001010744AJ01001011754BK01001100764CL01001101774DM01001110784EN01001111794FO010100008050P010100018151Q010100108252R010100118353S010101008454T010101018555U010101108656V010101118757W010110008858X010110018959Y01011010905AZ01011011915B[01011100925C\01011101935D]01011110945E^01011111955F_011000009660011000019761a011000109862b011000119963c0110010010064d0110010110165e0110011010266f0110011110367g0110100010468h0110100110569i011010101066Aj011010111076Bk011011001086Cl011011011096Dm011011101106En011011111116Fo0111000011270p0111000111371q0111001011472r0111001111573s0111010011674t0111010111775u0111011011876v0111011111977w0111100012078x0111100112179y011110101227Az011110111237B{011111001247C|011111011257D}011111101267E~011111111277FDEL (Delete)删除
对控制字符的解释
ASCII 编码中第 0~31 个字符开头的 32 个字符以及第 127 个字符最后一个字符都是不可见的无法显示但是它们都具有一些特殊功能所以称为控制字符 Control Character或者功能码Function Code。
这 33 个控制字符大都与通信、数据存储以及老式设备有关有些在现代电脑中的含义已经改变了。
参考https://c.biancheng.net/c/ascii/
