临沂网站建设哪家更好,男女生做内个的网站,新网站2个月没有收录,软文营销怎么做接上文 JavaScript高级Ⅰ JavaScript高级Ⅰ(自认为很全面版)-CSDN博客 目录 第2章 DOM编程
2.1 DOM编程概述
2.1.4 案例演示(商品全选)
2.1.5 dom操作内容
代码演示#xff1a;
运行效果#xff1a;
2.1.6 dom操作属性
代码演示#xff1a;
运行效果#xff1a;
2… 接上文 JavaScript高级Ⅰ JavaScript高级Ⅰ(自认为很全面版)-CSDN博客 目录 第2章 DOM编程
2.1 DOM编程概述
2.1.4 案例演示(商品全选)
2.1.5 dom操作内容
代码演示
运行效果
2.1.6 dom操作属性
代码演示
运行效果
2.1.7 dom操作样式
代码演示
运行效果
2.1.8 dom操作元素
代码演示
运行效果
2.1.9 案例演示(省市级联) 第2章 DOM编程
2.1 DOM编程概述
2.1.4 案例演示(商品全选) 实现 商品全选/反选功能 !DOCTYPE html
html langzh
headmeta charsetUTF-8title16-案例-商品全选/title
/head
bodybutton idbtn11. 全选/button
button idbtn22. 反选/button
br/
input typecheckbox电脑input typecheckbox手机input typecheckbox汽车input typecheckbox别墅input typecheckbox checkedchecked笔记本
script let allBox document.querySelectorAll(input[typecheckbox]);//获取所有复选框let btn1 document.querySelector(#btn1);//全选按钮let btn2 document.querySelector(#btn2);//反选按钮// 1. 全选btn1.onclick function () {for(let b of allBox){b.checked true;//全部选中}}// 2. 反选btn2.onclick function () {for(let b of allBox){b.checked !b.checked;//全部反选}}
/script
/body
/html
运行效果 2.1.5 dom操作内容 dom操作内容 1. 向body中追加html内容 document.write(html内容) 2. 获取或修改元素的纯文本内容 element.innerText 获取元素的纯文本内容 3. 获取或修改元素的html内容 element.innerHTML 获取元素的html内容 4. 获取或修改包含元素自身的html内容 element..outerHTML 获取包含元素自身的html内容 小总结: element.innerText 普通文本 element.innerHTML html内容 区别 innerHTML 会被当做html解析渲染 代码演示
!DOCTYPE html
html langzh
headmeta charsetUTF-8title09-dom操作内容/title
/head
bodydiv idd1div idd2d2的纯文本内容p idp1p1的纯文本内容/p/divp idp2p2的纯文本内容/p
/divscript // 1. 向body中追加html内容document.write(p stylecolor:red;向body中追加html内容/p);// 2. 获取或修改元素的纯文本内容let p2 document.querySelector(#p2);console.log(p2.innerText);;//获取元素的纯文本内容let d2 document.querySelector(#d2);console.log(d2.innerText);;//获取元素的纯文本内容p2.innerText 修改之后的p2的纯文本内容;// 3. 获取或修改元素的html内容console.log(d2.innerHTML);//获取元素的html内容d2.innerHTML p stylecolor:blue;修改后的d2的html内容/p// 4. 获取或修改包含元素自身的html内容console.log(d2.outerHTML);//获取包含元素自身的html内容
/script/body
/html
运行效果 2.1.6 dom操作属性 dom操作属性 1. 获取文本框,单选框或复选框的选中状态 语法: element.attribute 获取或修改元素的原生属性值 2. 给元素设置自定义属性 语法: element.setAttribute(属性名,属性值) 设置属性值(原生和自定义) 3. 获取元素的自定义属性值 语法: element.getAttribute(属性名) 获取属性值(原生和自定义) 4. 移除元素的自定义属性 语法: element.removeAttribute(属性名) 移除元素的属性(原生和自定义) 5. 获取元素的属性集合(了解) 语法: element.attributes 获取元素的所有属性集合 小扩展: w3c组织规定了每一标签所拥有的属性,这些w3c定义好的属性被称作标签的原生属性. 在html中允许开发者给标签添加额外的属性,这些自定义属性用来给标签添加额外的特性. w3c约定开发者添加的自定义属性 以 data- 为前缀. 小结(重要): 获取或修改表单中 单选框,复选框 的选中状态时 使用 element.checked 得到 true或false (不建议)使用 element.getAttribute(属性名) 得到的是 checked 或者 null 代码演示
!DOCTYPE html
html langzh
headmeta charsetUTF-8title10-dom操作属性/title
/head
bodyform action# methodget姓名 input typetext nameuserName value张三/ br/密码 input typepassword nameuserPass br/生日 input typedate nameuserBirthbr/性别 input typeradio namegender value男 checkedchecked男emsp;input typeradio namegender value女/女br/爱好 input typecheckbox namehobby value1抽烟input typecheckbox namehobby value2喝酒input typecheckbox namehobby value3烫头br/头像 input typefile nameuserPicbr/学历select nameuserEdu option value0请选择/optionoption value1入门/optionoption value2精通/optionoption value3放弃/option/selectbr/简介textarea nameuserIntro cols30 rows10默认值/textareabr/input typereset value清空按钮/input typesubmit value提交按钮/br/input typebutton value普通按钮button专业按钮/buttonbuttontimes;/button/form
script // 1. 获取文本框,单选框或复选框的选中状态let userName document.querySelector(input[typetext]);//获取元素console.log(userName.value);//获取value属性的值userName.value 李四;//设置value属性的值let gender document.querySelector(input[namegender]);//获取元素console.log(gender.checked);//获取单选框的选中状态document.querySelector(input[value女]).checkedtrue;//设置女被选中console.log(document.querySelector(input[value女]).getAttribute(checked));//不建议使用// 2. 给元素设置自定义属性userName.setAttribute(data-msg,姓名自定义数据);//设置自定义属性// 3. 获取元素的自定义属性值console.log(userName.getAttribute(data-msg));//获取属性值// 4. 移除元素的自定义属性userName.removeAttribute(data-msg);//移除元素的属性// 5. 获取元素的属性数组(集合)let allAttri userName.attributes;//获取元素的属性集合console.log(allAttri);for(let a of allAttri){console.log(a)}/script
/body
/html
运行效果 2.1.7 dom操作样式 dom操作样式 1. 设置一个css样式 语法: element.style.样式属性名 获取或设置一个css样式 属性名含有短杠-时要转为驼峰命名 例如 element.style.backgroundColor 2. 批量设置css样式 语法: element.style.cssText 获取或设置style属性的文本值 3. 通过class设置样式 语法: element.className 获取或设置class属性的文本值 4. 切换class样式 语法: element.classList es6特别提供的操作元素class的接口 element.classList常用方法有四个: add() 添加样式 remove() 移除样式 contains() 判断是否包含某个样式 toggle() 切换样式,有就移除,没有就添加 代码演示
!DOCTYPE html
html langzh
headmeta charsetUTF-8title11-dom操作样式/title
/head
bodystyle#p1{ background-color: red;}.myp{color:gold}.myppp{background-color: lightgray;}
/style
p idp11. 设置一个css样式/p
p idp2 2. 批量设置css样式/p
p idp3 classmyppp3. 通过class设置样式/p
p idp44. 切换class样式/pscript // 1. 设置一个css样式let p1 document.querySelector(#p1);//获取元素p1.style.backgroundColor blue;//设置背景颜色p1.style.color white;//设置字体颜色// 2. 批量设置css样式let p2 document.querySelector(#p2);//获取元素p2.style.cssText font-family: 楷体;border: 1px solid green;border-radius: 5px;;//批量设置样式// 3. 通过class设置样式let p3 document.querySelector(#p3);//获取元素p3.className myp myppp;//设置class值// 4. 切换class样式let p4 document.querySelector(#p4);//获取元素let classList p4.classList;//获取class值集合classList.add(myp);//添加样式classList.add(myppp);//添加样式console.log(classList.contains(myppp));//判断含有样式classList.remove(myppp);//移除样式classList.toggle(myp);//切换样式/script
/body
/html
运行效果 2.1.8 dom操作元素 dom操作元素 1. 前面添加抽烟 document.createElement(标签名称) 创建标签 parentNode.insertBefore(newNode,refNode) 把元素newNode 插入到 元素parentNode 中的 refNode之前 2. 后面添加烫头 parentNode.appendChild(newNode) 把元素newNode追加到元素parentNode中的最后 3. 最后添加撩妹 element.cloneNode() 克隆元素,一般克隆完修改不同就可以,比创建元素效率高 代码演示
!DOCTYPE html
html langzh
headmeta charsetUTF-8title12-dom操作元素/title
/head
bodydiv idmdinput idhip typecheckbox namehobby value喝酒span idhspan喝酒/span
/divscript let md document.querySelector(#md);let hip document.querySelector(#hip);// 1. ^^^前面添加抽烟//创建input标签,把新标签追加到喝酒之前let ip1 document.createElement(input);//创建标签ip1.setAttribute(id,cip);ip1.setAttribute(type,checkbox);ip1.setAttribute(name,hobby);ip1.setAttribute(value,抽烟);console.log(ip1);let cspan document.createElement(span);//创建标签cspan.innerText 抽烟;//设置文本内容md.insertBefore(cspan,hip);//把cspan插入到md中的hip之前md.insertBefore(ip1,cspan);//把ip1插入到md中的cspan之前// 2. ^^^后面添加烫头//创建input标签,把新标签追加到喝酒之后let ip2 document.createElement(input);//创建标签ip2.setAttribute(id,tip);ip2.setAttribute(type,checkbox);ip2.setAttribute(name,hobby);ip2.setAttribute(value,烫头);console.log(ip2);let tspan document.createElement(span);//创建标签tspan.innerText 烫头;//设置文本内容md.appendChild(ip2);//在md中最后添加ip2md.appendChild(tspan);//在md中最后添加tspan// 3. ^^^点击按钮添加王者let ip3 ip2.cloneNode();//克隆元素console.log(ip3);ip3.setAttribute(id,lip);ip3.setAttribute(value,撩妹);let lspan tspan.cloneNode();//克隆元素lspan.innerText 撩妹;//设置文本内容md.appendChild(ip3);//在md中最后添加ip2md.appendChild(lspan);//在md中最后添加tspan/script
/body
/html
运行效果 2.1.9 案例演示(省市级联)
!DOCTYPE html
htmlheadmeta charsetutf-8 /title省市级联/titlestyle typetext/css.regist_bg {width: 100%;height: 600px;padding-top: 40px;background-image: url(../img/bg.jpg);}.regist {border: 7px inset #ccc;width: 600px;padding: 40px 0;padding-left: 80px;background-color: #fff;margin-left: 25%;border-radius: 10px;}input[typesubmit] {background-color: aliceblue;width: 100px;height: 35px;color: red;cursor: pointer;border-radius: 5px;}/style/headbodydiv classregist_bgdiv classregistform action#table width600 height350pxtrtd colspan3font color#3164af会员注册/font USER REGISTER/td/trtrtd alignright用户名/tdtd colspan2input idloginnameId typetext nameloginname size60 / /td/trtrtd alignright密码/tdtd colspan2input idloginpwdId typepassword nameloginpwd size60 / /td/trtrtd alignright确认密码/tdtd colspan2input idreloginpwdId typepassword namereloginpwd size60 / /td/trtrtd alignrightEmail/tdtd colspan2input idemailId typetext nameemail size60 / /td/trtrtd alignright姓名/tdtd colspan2input nametext nameusername size60 / /td/trtrtd alignright性别/tdtd colspan2input typeradio namegender value男 checkedchecked /男input typeradio namegender value女 /女/td/trtrtd alignright电话号码/tdtd colspan2input typetext namephone size60 / /td/trtrtd alignright所在地/tdtd colspan3 select idprovinceId stylewidth:150pxoption value----请-选-择-省----/option/selectselect idcityId stylewidth:150pxoption value----请-选-择-市----/option/select/td/trtrtd width80 alignright验证码/tdtd width100input typetext nameverifyCode / /tdtdimg src../img/checkMa.png / /td/trtrtd/tdtd colspan2input typesubmit value注册 //td/tr/table/form/div/div
!--
省市级联1. 页面加载完成后自动装载省数据2. 当选中省时,装载该省的市数据
--script typetext/javascript//准备省市数据let provinceData [北京,河北,辽宁];let cityData {北京:[顺义区,昌平区,朝阳区],河北:[保定,石家庄,廊坊],辽宁:[沈阳,铁岭,抚顺]};// 1. 页面加载完成后自动装载省数据let province document.querySelector(#provinceId);//获取省window.onload function(){for(let prov of provinceData){let option document.createElement(option);//创建option标签option.value prov;option.innerText prov;province.appendChild(option);//给省追加选项}}// 2. 当选中省时,装载该省的市数据let city document.querySelector(#cityId);//获取市province.onchange function(){let provinceStr this.value;console.log(provinceStr);//当前选中的省let currentCityData cityData[provinceStr];//当前的市city.innerHTML option value----请-选-择-市----/option;//初始化市for(let cit of currentCityData){let option document.createElement(option);//创建option标签option.value cit;option.innerText cit;city.appendChild(option);//给省追加选项}}/script/body
/html
运行效果 更多内容敬候 JavaScript高级Ⅲ 欢迎大家指点评论~ 点赞关注⭐⭐⭐
