dw怎么切片做网站,携程电子商务网站建设,wordpress添加注册页面,wordpress页面文件路径html css JavaScript 期末复习#xff08;保姆级复盘#xff09; 考试题型 1、选择题 20题 30分 2、判断题 15题 15分 3、程序题 3 题 30分 4、综合题 2 题 25分 1、网页第一代文本标签#xff08;直接上代码#xff0c;看保姆级注解#xff09;
!-- doctype: docum…html css JavaScript 期末复习保姆级复盘 考试题型 1、选择题 20题 30分 2、判断题 15题 15分 3、程序题 3 题 30分 4、综合题 2 题 25分 1、网页第一代文本标签直接上代码看保姆级注解
!-- doctype: document type --
!DOCTYPE html
html langen
head!-- meta标签是元数据标签告诉浏览器要做的任务 --meta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- h:heading 标题 --h11.福建农林大学/h1h21.1福建农林大学/h2h31.1.1福建农林大学/h3h41.1.1.1福建农林大学/h4h51.1.1.1.1福建农林大学/h5h61.1.1.1.1.1福建农林大学/h6!-- horizontal ruler --!-- 单标签 --hrpmeta标签是元数据标签告诉浏览器要做的任务meta标签是元数据标签告诉浏览器要做的任务meta标签是元数据标签/ppmeta标签是元数据标签告诉浏览器要做的任务meta标签是元数据标签告诉浏览器要做的任务meta标签是元数据标签告诉浏览器要做的任务/ppmeta标签是元数据标签告诉浏览器要做的任务meta标签是元数据标签告诉浏览器要做的任务meta标签是元数据标签告诉浏览器要做的任务/phr!-- ul:unordered list 无序列表, li:list item 列表项--!-- emmet语法 --ul typesquareli星期一ol !--ol有序列表 li列表项--li语文课/lili数学课/lili英语课/lili体育课/li/ol/lili星期二/lili星期三/lili星期四/li/ul!-- 单属性 --!--type指定序号类型start开始的序号reversed指定成倒叙默认是升序--ol type1 start50 reversed li语文课/lili数学课/lili英语课/lili体育课/li/olhr!-- dl:definition list 定义一个列表, dt: definition title 定义一个标题 , dd: definition description 定义一个标题的描述--dldt计算机/dtdd一种能自动计算的设备/dddtjavaEE/dtdd一种java web解决方案/dd/dlhr!-- i:italic 斜体 , b:bold 加粗 ,deldelect,删除, ins:insert下划线--font size30 colorred faceverdanaithis/i bis/b dela/del insflower/ins!/fonthr!-- sub下标, sup上标 --Hsub2/subO, asup2/supbsup2/supcsup2/suphr!-- 表格是多个标签协同工作的结果 tr:table row, th: table header, td:table data--table border1 cellspacing0 cellpadding5pxcaption alignbottom学生表/caption!-- thead --tr !--tr:table row :表格行th:table head :表头--th学号/thth姓名/thth年龄/th/tr!-- /thead --!-- tbody --tr !--tr:table row :表格行tdtable data表格数据--tds001/tdtdmary/tdtd12/td/trtrtds002/tdtdkate/tdtd rowspan211/td !--行合并--/trtrtds003/tdtd陈海/td/trtrtds004/td!-- line,column --td colspan2信息不详1/td !--列合并--/tr!-- /tbody --/tablehr!-- 设置宽度或者高度另外一侧是自动等比例缩放 --img srccar.jpg height400 alt这是一张宝马轿车图片 !--alt:在图片加载不出来的时候用来提示该区域是什么的作用--!-- br:break and return --brbrbrbrbrbrbrbrbrbr !--br 换行符--
/body
/html
实验一中的制作表格代码亦可回顾https://blog.csdn.net/qq_52495761/article/details/134759245
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title学生信息登记表/titlestyletable {border-collapse: collapse;}th, td {border: 1px solid black;padding: 5px;text-align: left;min-width: 80px; /* 设置最小宽度根据实际需要调整 */}th {text-align: center;}textarea {width: calc(100%);border: 0; /*隐藏 输入框的边框*/padding: 6px;box-sizing: border-box;height: 100%; /* Set the height to 100% to fill the entire cell */resize: vertical;}input[typetext] {width: calc(100%); /* Adjust the input field width */border: 0;/*隐藏多行输入框的边框*/padding: 6px; /* Adjust the padding for better appearance */box-sizing: border-box; /* Include padding and border in the elements total width and height */}.vertical-text {writing-mode: vertical-rl; /* 设置垂直显示 */text-align: center;}/style
/head
bodyh3 styletext-align: center;2013-2014年度第一学期国土资源学院学生信息登记表/h3table stylemargin: auto;height: 100vh;width: auto;trth姓名/thtdinput typetext namename/tdth性别/thtdinput typetext namegender/tdth出生年月/thtdinput typetext namebirthdate /tdtd rowspan4 stylewidth: 180px;/td/trtrth年级班/thtdinput typetext namegrade/tdth专业/thtdinput typetext namemajor/tdth学号/thtdinput typetext namestudentId/td/trtrth联系方式/thtdinput typetext namecontact/tdth寝室号/thtdinput typetext namedormitory/tdth政治面貌/thtdinput typetext namepoliticalStatus/td/trtrth身份证号/thtd colspan5input typetext nameidNumber/td/trtrth家庭住址/thtd colspan6input typetext namehomeAddress/td/trtrth rowspan2家长电话/thtd colspan6input typetext nameparentContact1/td/trtrtd colspan6input typetext nameparentContact2/td/trtrth紧急联系人/thtdinput typetext nameemergencyContactName/tdth联系方式/thtdinput typetext nameemergencyContactNumber/tdth与本人关系/thtd colspan2input typetext nameemergencyContactRelationship/td/trtrth classvertical-text rowspan5上期情况/thth获奖情况/thtd colspan5input typetext nameaward/td/trtrth任职情况/thtd colspan5input typetext nameposition/td/trtrth过级情况/thtd colspan5input typetext namepromotion/td/trtrth考证情况/thtd colspan5input typetext namecertification/td/trtrth实践情况/thtd colspan5input typetext namepractice/td/trtrth classvertical-text本期目标/thtd colspan6 rowspan5textarea namegoals/textarea/td/tr
/table/body
/html2、表单标签直接上代码看注解
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh3新生登记表/h3!--action 是定义的是一个当点击submit的时候所需要跳转的页面的路径 method定义的是表单的提交方式 两种提交的方式区别以及各自的优缺点1. get提交数据被放在网址后头也就是url后头提交模式是url?key1value1key2value2......keynvaluenprocess.html?seccodeAESH1stunos00001schoolId03025stunamemikestupwd123456gendermbirth2023-09-21favourcolor%235977f0photochrome_elf.dllhobbycmhobbyrnhobbyrdstuoriginqzstumemogood缺点1url允许的长度有限无法提交大数据2安全性不够3不适合传英文之外的语言符号优点成本很低url?id102. post提交 系统先预先在内存中构建了一个容器然后把数据保存到容器中偷偷发送给服务器网址上看不见优点1可以传大数据几个GB都没问题2安全保密性高3可以传中文缺点成本高表单提交一般都是使用post打包传送--form actionprocess.html methodpost !--这是表单中的一个隐藏输入字段用于存储对用户不可见的数据。它存储了一个名为 seccode值为 AESH1 的安全码。--input typehidden nameseccode valueAESH1 divlabel学生学号:/labelinput typetext namestuno maxlength6 size30 placeholder请输入6位学号!--placeholder:在输入字段中显示占位符文本--/divdivlabel学校编码:/labelinput typetext nameschoolId value03025 size10 readonly!--readonly:只读--/divdivlabel学生姓名:/labelinput typetext namestuname/divdivlabel学生密码:/labelinput typepassword namestupwd maxlength6 size10/divdivlabe学生性别/label!-- name设置为一致形成互斥组 -- 从而实现多个radio是只能选中其中的一个默认选中通过checked--input typeradio namegender valuef checked女input typeradio namegender valuem男input typeradio namegender values保密/divdivlabel学生生日/labelinput typedate namebirth/divdivlabel最爱色彩/labelinput typecolor namefavourcolor/divdivlabel学生照片/labelinput typefile namephoto/divdivlabel学生爱好/label!-- 同样的名字hobby会形成一个数组 其就是数组的名字 默认选中通过checked--input typecheckbox namehobby valuecm checked爬山input typecheckbox namehobby valuern跑步input typecheckbox namehobby valuerd checked阅读input typecheckbox namehobby valuesw游泳/divdivlabel学生籍贯/labelselect namestuorigin!--下拉选择框通过selected实现默认选中--option value--请选择--/optionoption valuefz福州/optionoption valuexm selected厦门/optionoption valueqz泉州/optionoption valuenp南平/option/select/divdivlabel学生备注/labeltextarea namestumemo cols60 rows4请留言/textarea!--多行输入框--/divdivinput typesubmit value确认登记input typereset value取消/div/form/body
/html3、why-css样式表的优势
!--使用在标签上进行渲染--
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydivfont size16 colorred福州大学/font/divdivfont size16 colorred福建农林大学/font/div
/body
/html
!--通过css样式进行渲染--
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefstyle.css
/head
bodydiv龙岩学院/divdiv福建工程学院/div
/body
/htmldiv{color:red;font-size: 16px;
}上述的两种形式都可以实现对div中方文字进行渲染 使用标签做外观渲染的缺点 1一眼看过去看到的都是做外观的标签不容易阅读到正文 2内容和外观相混合无法做到合理分工 3渲染成本高使用标签要额外占用内存空间。 4使用标签做外观网页比较冗长网络带宽占用大 那么怎么解决这个问题 引入css在css中单独进行定义样式装修 使用css样式的优点(优缺点的的对比就是为什么需要css的原因) 1. 容易阅读正文内容和显示效果相分离有利于分工协作 2. 提高了渲染速度减少了标签的数量 3. 实现了类似函数的效果可以一处修改处处修改。同时可以通过外部样式表的形式控制多个页面的外观 4. 减少了网页的体积提高了网站负载降低了运营成本 5. 样式表渲染效果更好选项更多 selector 的优先级( id选择器 类选择器 标签选择器 )
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{color:red;font-size: 20px;}/* 类选择器class selector 1) 类选择器优先级高于标签选择器如果有属性设置冲突则类选择器优先2) 类选择器可以跨标签无论什么标签只要设置好class属性即可被选中3) 可以用多个类来同时修饰一个标签, 后定义的类的优先级高于先定义的类id选择器优先级高于类选择器*/.u211{color:blue;background-color: yellow;}.u985{font-size: 30px;color:pink;text-decoration: underline;}#host{font-size: 40px;text-shadow: 3px 3px 3px #666;}/style
/head
bodydiv classu211福州大学/divdiv福建农林大学/divdiv江夏学院/div!-- 内联样式的优先级比id还高 --div classu211 u985 idhost stylefont-size: 50px;厦门大学/divdiv福建师范大学/divdiv classu211 u985清华大学/divspan classu211高校会议组委会/span
/body
/html!-- 样式的混合运算font-size: 20px;color:blue;background-color: yellow;--4、盒子定位
1、静态定位默认情况就是静态定位
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/*每个网页元素都是盒子称为盒子模型box model盒子在页面中的排列默认定位是静态定位static position*/*{margin: 0px;padding: 0px;}span{/* position: static; */border: 2px solid blue;display: inline-block;width: 100px;height: 30px;text-align: center;/*水平居中*/line-height: 30px;}/style
/head
bodyspan星期一/spanspan星期二/spanspan星期三/spanspan星期四/spanspan星期五/span
/body
/html效果图 2、相对定位(相对定位是根据静态定位的某一个顶点进行偏移,偏移后的位置空着 )
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0px;padding: 0px;}/* body{padding: 100px;} */span{border: 2px solid blue;display: inline-block;width: 100px;height: 30px;text-align: center;/*水平居中*/line-height: 30px;/*垂直居中*/}/* 相对定位是根据静态定位的某一个顶点进行偏移,偏移后的位置空着 */.myspan{position: relative;/* left: 50px;top: 50px; */right: -50px;bottom: -50px;}/style
/head
bodyspan星期一/spanspan classmyspan星期二/spanspan星期三/spanspan星期四/spanspan星期五/span
/body
/html效果图偏移解释 相对于静态的某一点进行相对定位的偏移原来的位置还在 3、绝对定位
1、绝对定位-1
!--效果图1 --
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0px;padding: 0px;}span{border: 2px solid blue;display: inline-block;width: 100px;height: 30px;text-align: center;/*水平居中*/line-height: 30px;/*垂直居中*/}/* 绝对于父容器进行偏移,原来位置消失 */.myspan{position: absolute;left: 100px;top: 100px;}/* span的父容器是body 最后一个元素绝对与body进行偏离 */span:last-child{position: absolute;right: 100px;bottom: 100px;}/* 测试时需将myspan关上才能生效span的父容器是body 倒数第四个元素绝对与body进行偏离 *//* span:nth-last-child(4){position: absolute;left: 100px;bottom: 100px;} *//style
/head
bodyspan星期一/spanspan classmyspan星期二/spanspan星期三/spanspan星期四/spanspan星期五/span
/body
/html效果图 1 2、绝对定位–2 !--效果图 2 -- 3 --
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0px;padding: 0px;}/* id选择器选中idmydiv的元素 */#mydiv{width: 500px;height: 400px;border: 3px solid red;/* 测试这个的有无即可体现不一样 */position: relative; }/* 绝对定位的元素要寻找最接近的被定位过的祖先非静态定位作为定位参照物如果没有就以body作为参照物 */#mydivspan{display: inline-block;width: 100px;height: 30px;text-align: center;line-height: 30px;border: 3px solid blue;position: absolute;right: 50px;bottom: 50px;}/style
/head
bodydiv idmydivspansurperstar/span/div
/body
/html 效果图 2无position – 3有position 3、绝对定位-3 在定位过程中如果有元素重合可以使用z-index进行堆叠顺序数值大的在上面 。 如果没有设置z-index发生重合时后面的定义的在前面的上面。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0px;padding: 0px;}#mydiv{width: 300px;height: 300px;background-color: red;position: absolute;left: 150px;top: 150px;z-index: 2;}#mydiv2{width: 300px;height: 300px;background-color: blue;position: absolute;left: 250px;top: 250px;z-index: 1;/* 在定位过程中如果有元素重合可以使用z-index进行堆叠顺序数值大的在上面 */}/style
/head
body!-- 如果没有设置z-index发生重合时后面的定义的在前面的上面 --div idmydiv/divdiv idmydiv2/div
/body
/html效果图 4 补充扩展内容考虑一下绝对和相对的区别
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.div1{background-color: red;padding: 10px;margin: 5px;color: white;font-weight: bold;}.div2{background-color: green;padding: 10px;margin: 5px;color: white;font-weight: bold;}.div3{background-color: blue;padding: 10px;margin: 5px;color: white;font-weight: bold;}.div4{background-color: greenyellow;padding: 10px;margin: 5px;color: white;font-weight: bold;}/style
/head
bodydiv classdiv1div1/divdiv classdiv2div2/divdiv classdiv3div3/divdiv classdiv4div4/div
/body/html初始效果图 1、给第二个div设置absolute:
style.div2{background-color: red;padding: 10px;margin: 5px;color: white;font-weight: bold;/*添加一下部分*/position: absolute;top: 50px;left: 50px;}/style效果图一 解释第二个div设置了absolute则该div的宽度就由文本决定且下面的div会上移占据之前第二个div的位置top和left是相对于离它最近且不是static定位的父元素来定位的在此div1因为没有父元素所以第二个div相对于根元素body来定位。 2、将div1的position设置成relative
style.div2{background-color: red;padding: 10px;margin: 5px;color: white;font-weight: bold;/*添加一下部分*/position: relative;top: 50px;left: 50px;}/style效果图二 偏移解释设置relative的div不会影响其他div的位置且top和left是相对于它原本自身的位置来定位并且原来的位置还在不会覆盖住。 3、给第二个div添加一个父div
style.div2{background-color: red;padding: 10px;margin: 5px;color: white;font-weight: bold;/*添加一下部分*/position: absolute;top: 50px;left: 50px;}.container1{position: absolute;height: 200px;background-color: aqua; }/stylediv classcontainer1第二个div的父容器div classdiv2div2/div/div
效果图三 效果图解释div2的父div设置为absolute下面的div3,div4会上移div2也设置为absolutediv2就会相对于父div来定位。 4、若只将第二个div的absolute改为relative
style.div2{background-color: red;padding: 10px;margin: 5px;color: white;font-weight: bold;/*添加一下部分*/position: relative;top: 50px;left: 50px;}/style效果图四 解释这是时的定位应是文字下的点作为参照点进行偏移。 注意上面两个图的第二个div与父div的上边距是不同的第一个是相对父div来定位第二个是相对原来本身的位置来定位。可能此时你会注意到两个图的第二个div的宽度不同在没有给div设置宽度的情况下第一个是设为absolute所以宽度为文本宽度第二个是relative所以宽度与父元素宽度相同。 5、若在34的基础上只改变div2的宽度观察absolute 和relative的区别 由上图可以知道absolute定位的子元素宽度不会影响父元素的宽而relative定位的子元素会撑大父元素。 4、固定定位
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0px;padding: 0px;}#notice{width: 300px;height: 60px;text-align: center;line-height: 60px;font-size: 16px;font-weight:bold ;font-family: 微软雅黑;border: 3px solid blue;position: fixed;right: 0px;bottom: 0px;}/style
/head
bodydiv idnotice你已欠费请缴费/divh2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2h2测试/h2
/body
/html效果图某个模块钉在某个位置不移动 5、浮动定位
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0px;padding: 0px;}/* 网页上的主页选项卡就属于浮动定位 */span{border: 2px solid blue;display: inline-block;width: 300px;height: 30px;text-align: center;/*水平居中*/line-height: 30px;/*垂直居中*/float: left;}/style
/head
bodyspan星期一/spanspan星期二/span!--clear: both; 表示该元素不允许左侧或右侧存在浮动元素。它会导致元素出现在前面的所有浮动元素的下方而不允许浮动元素出现在该元素的左侧或右侧。--span styleclear: both;星期三/span span星期四/spanspan星期五/span
/body
/html效果图 5、盒子模型 W3C盒子模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成 border边框 border属性设置一个元素的边框它有三个要素宽、样式、颜色统称“边框三要素”。 border宽度 样式 颜色 border: 1px solid red;border-style设置边框的样式有五种常用样式可选 1、点状dotted 2、实线solid 3、双线double 需要最起码设置为3像素不然显示不下 4、虚线dashed 5、无边框none border的三要素可以统一写在”border”属性中也可以单独设置。 统一的写法border: 1px solid red; 单独设置的写法
// 不写width会有默认3像素的值。
// 不写颜色会默认为黑色。
border-width:;
border-style:; //在style属性为空的情况下整个边框是不会出现的。
border-color:;外边距 围绕在元素边框周围的空白区域 会在元素外创建额外的空白区域 外边距是透明的
margin-top/right/bottom/left: value;
// value可取值为像素%auto负值
margin:value(四个方向相同) ;
margin: value(上下) value(左右);
margin: value(上) value(左右) value(下);
margin: value(上) value(右) value(下) value(左);内边距 内容区域和边框之间的空间 会扩大元素边框所占用的区域 语法padding:value;
padding-top/right/bottom/left:value;
// value可取值为像素百分比但不能为负数padding:value(四个方向相同) ;padding: value(上下) value(左右);padding: value(上) value(左右) value(下);padding: value(上) value(右) value(下) value(左);怪异盒子模型 盒子模型分两种一种是符合W3C规范的标准例子模型另一种是IE的盒子模型IE的盒子模型也被叫怪异盒子。 box-sizing – 指定盒子类型 box-sizing属性允许你以“W3C的盒模型”或“IE盒模型”来定义元素以适应区域。换句话说当前元素使用哪种盒模型可以由box-sizing属性来指定 box-sizing 的两个值 1、content-box标准 padding和border不被包含在width和height内元素的实际大小为宽高borderpadding此为标准模式下的盒模型。 2、border-box怪异 padding和border被包含在定义的width和height中元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。
6、背景处理
1、背景颜色绘制区域
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#mydiv{width: 300px;height: 200px;padding: 30px;margin: 10px;border: 10px dashed blue;background-color: red;/* background-clip: padding-box; 从padding开始绘制颜色*//* background-clip: content-box; 从content开始绘制颜色*/background-clip: border-box; /*从border开始绘制颜色*/}/style
/head
bodydiv idmydiv/div
/body
/html三种绘制的效果图 border-box padding-box content-box
2、背景图 背景图和背景颜色同时存在时背景图在背景颜色上面背景图优先
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#mydiv{width: 600px;height: 590px;padding: 30px;margin: 10px;border: 10px dashed blue;background-color: red;/* background-clip: padding-box; *//* background-clip: content-box; *//* 背景图和背景颜色同时存在时背景图在背景颜色上面背景图优先 */background-clip: border-box;background-image: url(./bg125.jpg);/*背景图的设置*/background-size: 35%,45%;/* background-repeat: no-repeat;background-repeat: repeat-x;background-repeat: repeat-y; */background-repeat: repeat;/*图片是否需要重复以及重复的方向*/}/style
/head
bodydiv idmydiv/div
/body
/html四种background-repeat的效果图 background-repeat: no-repeat 不重复 background-repeat: repeat-x 横向重复 background-repeat: repeat-y 纵向重复 background-repeat: repeat 横纵向都重复
3、背景图的cover和contain
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#mydiv{width: 600px;height: 590px;padding: 30px;margin: 10px;border: 10px dashed blue;background-color: red;/* background-clip: padding-box; *//* background-clip: content-box; *//* 背景图和背景颜色同时存在时背景图在背景颜色上面背景图优先 */background-clip: border-box;background-image: url(./bg125.jpg);background-size: contain; /* 让这张图片全部显示出来不能切割 *//* background-size: cover;覆盖界面图片会被切割 */background-repeat: no-repeat;}/style
/head
bodydiv idmydiv/div
/body
/html两种方式的效果图 background-size: contain; -- 让这张图片全部显示出来不能切割 background-size: cover; -- 覆盖界面图片会被切割
4、背景图position
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#mydiv{width: 600px;height: 590px;padding: 30px;margin: 10px;border: 10px dashed blue;background-color: red;background-clip: border-box;background-image: url(./bg125.jpg);background-size: 400px,200px;background-position: 50%,50%;/*right,top*/background-repeat: no-repeat;}/style
/head
bodydiv idmydiv/div
/body
/html效果图
5、背景图 origin – 三种填充
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#mydiv{width: 600px;height: 590px;padding: 30px;margin: 10px;border: 10px dashed blue;background-image: url(./bg125.jpg);background-size: 400px,200px;background-repeat: no-repeat;background-color: red;/* background-origin: content-box; 从content开始填充*//* background-origin: padding-box; 从padding开始填充*/background-origin: border-box; /*从border开始填充*/}/style
/head
bodydiv idmydiv/div
/body
/html三种效果图 background-origin: border-box; /*从border开始填充*/ background-origin: padding-box; 从padding开始填充 background-origin: content-box; 从content开始填充
6、背景图 attachment – 黏贴在某个位置
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#mydiv{background-image: url(./bg125.jpg);background-size: 400px,190px;background-repeat: no-repeat;/* background-attachment: scroll; *//* attachment是设置图片是否钉在某个位置 */background-attachment: fixed;}/style
/head
bodydiv idmydivh2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2h2你好/h2/div/body
/html效果 7、两个关键字 initial 和 inherit 1、initial设置默认值 !DOCTYPE html
html
head
style
div {color: red;
}
/style
/head
bodyh1使用 JavaScript 设置初始值 initial/h1divh1 idbcHello World/h1ulli idaItem one/lili idbItem two/lili idcItem three/li/ul
/divp单击“试一试”按钮将第二个列表项的颜色属性值设置为initial/pbutton onclickmyFunction()试一试/buttonscript
function myFunction() {document.getElementById(b).style.color initial;
}
/scriptpb注意/b“initial”关键字在 Internet Explorer 11 及更早版本中不受支持。/p/body
/html
效果
2、inherit 继承父元素的值 !DOCTYPE html
html
head
style
span {color: blue;border:1px solid black;
}
/style
/head
bodyh1使用 JavaScript 设置继承/h1div这是span一个 span 元素/span 在一个没有设置颜色属性的元素中。div stylecolor:green这是 span idmySpan一个 span 元素/span 在一个颜色为 color:green 的元素中。/divdiv stylecolor:red这是 span一个 span 元素/span 在一个颜色为 color:red 元素中。/div
/divp单击“试一试”按钮将第二个 SPAN 元素的颜色属性值设置为继承inherit/p
button onclickmyFunction()试一试/buttonscript
function myFunction() {document.getElementById(mySpan).style.color inherit;
}
/script/body
/html效果
7、css原型信封 – 应用以上知识实战
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody,div,span{margin: 0px;padding: 0px;box-sizing: border-box;font-family: 微软雅黑;}#letter{width: 800px;height: 380px;border:5px solid blue;margin: 140px auto;box-shadow: 10px 10px 5px #666;;position: relative;}#recevier-postcode{position: absolute;left: 5px;top: 5px;/* border:1px solid red; */}#sender-postcode{position: absolute;right: 5px;bottom: 5px;/* border:1px solid red; */}#recevier-postcodespan,#sender-postcodespan{display: inline-block;width: 45px;height: 42px;margin-left: 5px;border:3px solid black;text-align: center;line-height: 42px;font-size: 26px;}#address{position: absolute;left: 20px;top: 120px;width: 95%;}#addressspan{display: block;/*分行的一种办法,将span设置成一个块,独占一行*/border-bottom:3px solid black;margin-top: 15px;padding-bottom: 5px;font-size:30px;font-weight: bold;}#addressspan:first-child{padding-left: 50px;}#addressspan:nth-child(2){text-align: right;padding-right: 50px;}#stamp{width: 100px;height: 120px;display: inline-block;/* border:1px solid red; */position: absolute;right: 5px;top: 5px;background-image: url(./stamp.jpg);background-size: contain;background-repeat: no-repeat;}/style
/head
bodydiv idletterdiv idrecevier-postcodespan3/spanspan5/spanspan0/spanspan0/spanspan0/spanspan9/span/divdiv idsender-postcodespan3/spanspan5/spanspan0/spanspan0/spanspan0/spanspan1/span/divdiv idaddressspan福建农林大学金山学院计算机系/spanspan王海涛(收)/span/divspan idstamp/span/div
/body
/html效果图
8、JavaScript - arraybase and method
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptvar arr1 new Array(100,200,福州,true);var info new Array(new Array(Tom, 13, 155),new Array(Lucy, 11, 152));console.log(info[0]); // 输出结果(3) [Tom, 13, 155]console.log(info[0][0]); // 输出结果Tom/script
/head
body/body
/html效果图
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptvar arr[11,20,30,40,50];var arr1 [spray, elite, exuberant, destruction, present];function work(a){console.log(a);}// arr.forEach(work);// arr.forEach(function(a){// console.log(a);// });arr.forEach(function(val,idx){ // foreachif(val%20)arr[idx]3;console.log(arr[idx]);})var arr1_change arr1.filter((word)word.length6); // fitterconsole.log(arr1_change);var ages [3, 10, 18, 20];function checkAdult(age) {return age 18;}console.log(ages.find(checkAdult));console.log(ages.findIndex(checkAdult));/script
/head
body/body
/html效果图
9、函数 function arguments 、callback
1、function的基本实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptfunction sayHello(){console.log(hello world!);}sayHello();function add(a,b){console.log(ab);}add(10,20);function calcSum(a,b){let sum 0;for(let ia;ib;i)sum i;return sum;}console.log(calcSum(1,100));function work(a,b){console.log(a,b);}/script
/head
body/body
/html效果图
2、arguments 的传递
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptfunction add(){//arguments是一个类似数组的对象注意,其不是数组但是支持数组的一些操作模式console.log(arguments.length);for(let i0;iarguments.length;i)console.log(arguments[i]);}// add();// add(1);// add(1,2,3);function add2(a,b){ //实现多参数(大于两个参数的时候也能适用)的之和// a-arguments[0]// b-arguments[1]// 所谓形式参数其实就是arguments对象成员的一种快捷访问方式let sum ab;if(arguments.length2)for(let i2;iarguments.length;i)sum arguments[i];return sum;}console.log(add2(1,2,3,4));/script
/head
body/body
/html效果图
3、callback的实现 被作为实参传入另一函数并在该外部函数内被调用用以来完成某些任务的函数称为回调函数。 调用过程函数a的参数为函数b当函数a执行完之后再去执行b 打个比方 你去上学妈妈送你去上学并叮嘱你要记得将缴费单交给老师。 此时函数a为妈妈送你上学函数b为你将缴费单交给老师。也就是你要做完函数a才会去执行函数b。 问题那么问题来了为什么不直接把整个事情在函数a中写好而是要通过一个参数进行回调呢 答如果你直接写进去function a(){…;b();}那就直接写死了失去了变量的灵活性。当你要传入别的函数时需要重新写一遍函数a。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript//回调函数 callbackfunction calc(num1,num2,calcMethod){console.log(calcMethod(num1,num2));}function add(a,b){return ab;}function sub(a,b){return a-b;}function multiply(a,b){return a*b;}calc(1,2,add);calc(10,5,sub);calc(3,5,multiply);function a(callback) { console.log(parent函数a); console.log(调用回调函数); callback(); // 调用回调函数}function b(){ console.log(回调函数b); } function c() { console.log(回调函数c); } function test(){ a(b); a(c); }test();/script
/head
body/body
/html效果图
10、简单编程题
1、九九乘法表
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript// n*n的乘法表// n的数量手动录入范围1-9 如果输入9 就是九九乘法表/*1*112*12 2*243*13 3*26 3*39*/var lines parseInt(prompt(请输入乘法表的行数:,9));var lineContent;for(let i1;ilines;i){ //行的循环lineContent;for(let j1;ji;j) //列的循环lineContent ${i}*${j}${i*j}\t;console.log(lineContent);}/script
/head
body
/body
/html**效果图 **
2、求某范围数字和
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript//获取用户输入的范围下限var lowerLimit prompt(请输入范围下限)// 获取用户输入的范围上限var upperLimit prompt(请输入范围上限:);// 将用户输入的字符串转换为数字lowerLimit parseInt(lowerLimit);upperLimit parseInt(upperLimit);// 检查输入是否为有效数字if (!isNaN(upperLimit)!isNaN(lowerLimit)) {// 初始化和的变量var sum 0;// 计算范围内所有数字的和for (var i lowerLimit; i upperLimit; i) {sum i;}// 输出结果alert(范围lowerLimit到 upperLimit 的所有数字的和是: sum);} else {// 用户输入无效弹出提示alert(请输入有效的数字。);}/script
/head
body/body
/html效果图
3、求某范围质数和
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title计算质数和/titlescriptfunction isPrime(num) {if (num 2) {return false;}for (var i 2; i Math.sqrt(num); i) {if (num % i 0) {return false;}}return true;}// 获取用户输入的范围下限var lowerLimit prompt(请输入范围下限);// 获取用户输入的范围上限var upperLimit prompt(请输入范围上限:);// 将用户输入的字符串转换为数字lowerLimit parseInt(lowerLimit);upperLimit parseInt(upperLimit);// 检查输入是否为有效数字if (!isNaN(upperLimit) !isNaN(lowerLimit)) {// 初始化和的变量var sumOfPrimes 0;// 计算范围内所有质数的和for (var i lowerLimit; i upperLimit; i) {if (isPrime(i)) {console.log(i);sumOfPrimes i;}}// 输出结果alert(范围 lowerLimit 到 upperLimit 的所有质数的和是: sumOfPrimes);} else {// 用户输入无效弹出提示alert(请输入有效的数字。);}/script
/head
body
/body
/html
效果图
11、DOM
1、dom的基本概念 DOM:文档对象模型是W3C组织推荐的处理可扩展标记语言的标准编程接口。 2、获取元素
1、根据id获取元素
1|document.getElementById(id)!DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/title/headbodydiv idbox你好/divscriptvar Obox document.getElementById(box);console.log(Obox); // 结果为div idbox你好/divconsole.log(typeof Obox); // 结果为objectconsole.dir(Obox); // 结果为div#box/script/body
/html效果图
2、根据标签获取元素
1|document.getElementsByTagName(TagName)!DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/title/headbodyulli苹果/lili香蕉/lili西瓜/lili樱桃/li/ulol idolli绿色/lili蓝色/lili白色/lili红色/li/olscriptvar lis document.getElementsByTagName(li);// 结果为HTMLCollection(8) [li, li, li, li, li, li, li, li]console.log(lis);// 查看集合中的索引为0的元素结果为li苹果/liconsole.log(lis[0]);// 遍历集合中的所有元素for (var i 0; i lis.length; i) {console.log(lis[i]);}// 通过元素对象获取元素var ol document.getElementById(ol);// 结果为HTMLCollection(4) [li, li, li, li]console.log(ol.getElementsByTagName(li));/script/body
/html效果
3、根据name获取元素
1|document.getElementsByName(Name)!DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/title/headbodyp请选择你最喜欢的水果多选/plabelinput typecheckbox namefruit value苹果苹果/labellabelinput typecheckbox namefruit value香蕉香蕉/labellabelinput typecheckbox namefruit value西瓜西瓜/labelscriptvar fruits document.getElementsByName(fruit);fruits[0].checked true;/script/body
/html效果图
4、H5新增三种的获取方式
1、document.getElementsByClassName();
!DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/title/headbodyspan classone英语/span span classtwo数学/spanspan classone语文/span span classtwo物理/spanscriptvar Ospan1 document.getElementsByClassName(one);var Ospan2 document.getElementsByClassName(two);Ospan1[0].style.fontWeight bold;Ospan2[1].style.background red;/script/body
/html效果图
2、querySelector() 返回的是指定选择器的第一个元素对象
!DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/title/headbodydiv classbox盒子1/divdiv classbox盒子2/divdiv idnavulli首页/lili产品/li/ul/divscriptvar firstBox document.querySelector(.box);console.log(firstBox); // 获取class为box的第1个divvar secondBox document.querySelectorAll(.box)[1];console.log(secondBox);// 获取class为box的第2个divvar nav document.querySelector(#nav);console.log(nav); // 获取id为nav的第1个div var li document.querySelector(li);console.log(li); // 获取匹配到的第一个livar allBox document.querySelectorAll(.box);console.log(allBox); // 获取class为box的所有divvar lis document.querySelectorAll(li);console.log(lis); // 获取匹配到的所有li/script/body
/html效果
3、document.querySelectorAll() 返回所有若要返回除了第一个以外的元素对象需要通过这个实现
!DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/title/headbodydiv classbox盒子1/divdiv classbox盒子2/divdiv idnavulli首页/lili产品/li/ul/divscriptvar firstBox document.querySelector(.box);console.log(firstBox); // 获取class为box的第1个divvar secondBox document.querySelectorAll(.box)[1];console.log(secondBox);// 获取class为box的第2个divvar nav document.querySelector(#nav);console.log(nav); // 获取id为nav的第1个div var li document.querySelector(li);console.log(li); // 获取匹配到的第一个livar allBox document.querySelectorAll(.box);console.log(allBox); // 获取class为box的所有divvar lis document.querySelectorAll(li);console.log(lis); // 获取匹配到的所有li/script/body
/html效果
4、document对象的属性
!DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/title/headbodyscriptvar htmlTitle document.title; // 返回标题console.log(标题是htmlTitle);var bodyEle document.body; // 返回bodyconsole.log(body是bodyEle);console.dir(dump详情bodyEle);// console.dir主要用来dump某些对象的详细信息var htmlEle document.documentElement;// 返回htmlconsole.log(htmlEle);/script/body
/html效果
3、事件 事件是指可以被JavaScript侦测到的行为是一种‘触发-响应’的机制。 三要素 1、事件源 — 谁触发了事件 2、事件类型 — 触发了什么事件 3、事件处理程序 – 触发事件以后要做什么 !DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/title/headbodybutton idbtn单击/buttonscriptvar btn document.getElementById(btn); // 第1步获取事件源// 第2步注册事件btn.onclickbtn.onclick function () { // 第3步添加事件处理程序采取函数赋值形式alert(弹出);};/script/body
/html效果
4、操作元素
1、操作元素内容 !DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/title/headbodydiv idboxThe first paragraph...pThe second paragraph...a hrefhttp://www.example.comthird/a/p/divscriptvar Obox document.getElementById(box)console.log(Obox.innerHTML的执行结果\nObox.innerHTML)console.log(Obox.innerText的执行结果\nObox.innerText)console.log(Obox.textContent的执行结果:\nObox.textContent)/script/body
/html2、操作元素属性 -- 重要 案例 --四叶草和鲜花的切换 !DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/title/headbodybutton idflower鲜花/buttonbutton idgrass四叶草/button brimg srcimages/grass.png alt title四叶草script// 1. 获取元素var flower document.getElementById(flower);var grass document.getElementById(grass);var img document.querySelector(img);// 2. 注册事件处理程序flower.onclick function () {img.src images/flower.png;img.title 鲜花;};grass.onclick function () {img.src images/grass.png;img.title 四叶草;};/script/body
/html效果
3、dom对象 -- 全选随机选择的按键
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
title全选练习/title
script typetext/javascriptvar items;window.onload function(){//获取四个多选框itemsvar items document.getElementsByName(items);//获取全选/全不选的多选框var checkedAllBox document.getElementById(checkedAllBox);/** 全选按钮* - 点击按钮以后四个多选框全都被选中*///1.#checkedAllBtn//为id为checkedAllBtn的按钮绑定一个单击响应函数var checkedAllBtn document.getElementById(checkedAllBtn);checkedAllBtn.onclick function(){//遍历itemsfor(var i0 ; iitems.length ; i){//通过多选框的checked属性可以来获取或设置多选框的选中状态//alert(items[i].checked);//设置四个多选框变成选中状态items[i].checked true;}//将全选/全不选设置为选中checkedAllBox.checked true;};/** 全不选按钮* - 点击按钮以后四个多选框都变成没选中的状态*///2.#checkedNoBtn//为id为checkedNoBtn的按钮绑定一个单击响应函数var checkedNoBtn document.getElementById(checkedNoBtn);checkedNoBtn.onclick function(){for(var i0; iitems.length ; i){//将四个多选框设置为没选中的状态items[i].checked false;}//将全选/全不选设置为不选中checkedAllBox.checked false;};/** 反选按钮* - 点击按钮以后选中的变成没选中没选中的变成选中*///3.#checkedRevBtnvar checkedRevBtn document.getElementById(checkedRevBtn);checkedRevBtn.onclick function(){//将checkedAllBox设置为选中状态checkedAllBox.checked true;for(var i0; iitems.length ; i){//判断多选框状态/*if(items[i].checked){//证明多选框已选中则设置为没选中状态items[i].checked false;}else{//证明多选框没选中则设置为选中状态items[i].checked true;}*/items[i].checked !items[i].checked;//判断四个多选框是否全选//只要有一个没选中则就不是全选if(!items[i].checked){//一旦进入判断则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked false;}}//在反选时也需要判断四个多选框是否全都选中};/** 提交按钮* - 点击按钮以后将所有选中的多选框的value属性值弹出*///4.#sendBtn//为sendBtn绑定单击响应函数var sendBtn document.getElementById(sendBtn);sendBtn.onclick function(){//遍历itemsfor(var i0 ; iitems.length ; i){//判断多选框是否选中if(items[i].checked){alert(items[i].value);}}};//5.#checkedAllBox/** 全选/全不选 多选框* - 当它选中时其余的也选中当它取消时其余的也取消* * 在事件的响应函数中响应函数是给谁绑定的this就是谁*///为checkedAllBox绑定单击响应函数checkedAllBox.onclick function(){//alert(this checkedAllBox);//设置多选框的选中状态for(var i0; i items.length ; i){items[i].checked this.checked;}};//6.items/** 如果四个多选框全都选中则checkedAllBox也应该选中* 如果四个多选框没都选中则checkedAllBox也不应该选中*///为四个多选框分别绑定点击响应函数for(var i0 ; iitems.length ; i){items[i].onclick function(){//将checkedAllBox设置为选中状态checkedAllBox.checked true;for(var j0 ; jitems.length ; j){//判断四个多选框是否全选//只要有一个没选中则就不是全选if(!items[j].checked){//一旦进入判断则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked false;//一旦进入判断则已经得出结果不用再继续执行循环break;} }};}//7.#randomBtn//为id为randomBtn的按钮绑定一个单击响应函数var randomBtn document.getElementById(randomBtn);randomBtn.onclick function(){//随机选择四个多选框的状态for(var i0; iitems.length ; i){//生成随机数决定多选框的选中状态var randomState Math.random() 0.5; // 50% chance of being trueitems[i].checked randomState;}//更新全选/全不选多选框的状态updateCheckedAllBoxState();}};/script
/head
bodyform methodpost action你爱好的运动是input typecheckbox idcheckedAllBox /全选/全不选 br /input typecheckbox nameitems value足球 /足球input typecheckbox nameitems value篮球 /篮球input typecheckbox nameitems value羽毛球 /羽毛球input typecheckbox nameitems value乒乓球 /乒乓球br /input typebutton idcheckedAllBtn value全 选 /input typebutton idcheckedNoBtn value全不选 /input typebutton idcheckedRevBtn value反 选 /input typebutton idrandomBtn value随机选择 /input typebutton idsendBtn value提 交 //form
/body
/html
效果图
4、排他思维按键案例 排他思想简单理解就是排除掉其他的包括自己然后再给自己设置想要实现的效果。总而言之排他思维的实现步骤就是所有元素全部清除与设置当前元素。 !DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/title/headbodybutton按钮1/buttonbutton按钮2/buttonbutton按钮3/buttonbutton按钮4/buttonbutton按钮5/buttonscript// 获取所有按钮元素var btns document.getElementsByTagName(button);// btns得到的是类数组对象使用btns[i]访问数组里的每一个元素for (var i 0; i btns.length; i) {btns[i].onclick function () {// (1) 先把所有的按钮背景颜色去掉for (var i 0; i btns.length; i) {btns[i].style.backgroundColor ;}// (2) 然后设置当前的元素背景颜色this.style.backgroundColor pink;}}/script/body
/html效果图
5、鼠标指针经过时背景变色
!DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/titlestyletable {width: 800px;margin: 100px auto;text-align: center;border-collapse: collapse;font-size: 14px;}thead tr {height: 30px;background-color: skyblue;}tbody tr {height: 30px;}tbody td {border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg {background-color: pink;}/style/headbodytabletheadtrth代码/thth名称/thth最新公布净值/thth累计净值/thth前单位净值/thth净值增长率/th/tr/theadtbodytrtd0035**/tdtd3个月定期开放债券/tdtd1.075/tdtd1.079/tdtd1.074/tdtd0.047%/td/trtrtd0035**/tdtd3个月定期开放债券/tdtd1.075/tdtd1.079/tdtd1.074/tdtd0.047%/td/trtrtd0035**/tdtd3个月定期开放债券/tdtd1.075/tdtd1.079/tdtd1.074/tdtd0.047%/td/trtrtd0035**/tdtd3个月定期开放债券/tdtd1.075/tdtd1.079/tdtd1.074/tdtd0.047%/td/tr/tbody/tablescript// 1. 获取元素var trs document.querySelector(tbody).querySelectorAll(tr);// 2. 利用循环绑定注册事件for (var i 0; i trs.length; i) {// 3. 鼠标经过事件 onmouseovertrs[i].onmouseover function () {this.className bg;};// 4. 鼠标离开事件 onmouseouttrs[i].onmouseout function () {this.className ;};}/script/body
/html效果
6、Tab栏切换
!DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/titlestyle* {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;height: 400px;background-color: #ccc;border:1px solid blue;text-align: center;line-height: 400px;}.item:nth-child(2n){background-color: pink;}/style/headbodydiv classtabdiv classtab_listulli classcurrent商品介绍/lili规格与包装/lili售后保障/lili商品评价50000/lili手机社区/li/ul/divdiv classtab_condiv classitem styledisplay: block;商品介绍模块内容/divdiv classitem规格与包装模块内容/divdiv classitem售后保障模块内容/divdiv classitem商品评价50000模块内容/divdiv classitem手机社区模块内容/div/div/divscript// 获取标签部分的所有元素对象var tab_list document.querySelector(.tab_list);var lis tab_list.querySelectorAll(li);// 获取内容部分的所有内容对象var items document.querySelectorAll(.item);for (var i 0; i lis.length; i) { // for循环绑定点击事件lis[i].setAttribute(index, i); // 开始给5个小li设置索引号lis[i].onclick function () {for (var i 0; i lis.length; i) {lis[i].className ;}this.className current;// 下面的显示内容模块var index this.getAttribute(index);for (var i 0; i items.length; i) {items[i].style.display none;}items[index].style.display block;};}/script/body
/html效果
7、简易留言板
!DOCTYPE html
htmlheadmeta charsetUTF-8titleDocument/titlestyle* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: #eee;font-size: 14px;margin: 15px 0;}li a {float: right;}/style/headbodytextarea name id/textareabutton发布/buttonul/ulscript// 1. 获取元素var btn document.querySelector(button);var text document.querySelector(textarea);var ul document.querySelector(ul);// 2. 注册事件btn.onclick function () {if (text.value ) {alert(您没有输入内容);return false;} else {// (1) 创建元素var li document.createElement(li);// li.innerHTML text.value;li.innerHTML text.value a hrefjavascript:;删除/a;// (2) 添加元素ul.insertBefore(li, ul.children[0]);var as document.querySelectorAll(a);for (var i 0; i as.length; i) {as[i].onclick function () {ul.removeChild(this.parentNode);};}}};/script/body
/html效果
更详细的js内容见下链接
链接https://pan.baidu.com/s/1NDjYPcbzb1ApNq6Vh5j0MQ?pwd19tk 提取码19tk
