益阳网站建设方案,在线生成签名免费,个人网页完整代码,十大wordpress收费主题目录
一 特色 二 收获编辑 三 什么是web?
四 网站的工作流程 五 web网站的开发模式编辑 六 web开发课程学习安排 七、初始web前端 八 HTML、CSS
8.1 什么是HTNL\CSS(w3cschool)
8.2 HTML快速入门
8.3 VS Code开发工具
8.3.1 插件 8.3.2 主题#xff08;改变颜色改变颜色
8.3.3 设置
8.4 基础标签样式 8.4.1 标题排版
8.4.1.1分析 8.4.2.2 编码开始 8.4.2.3 总结编辑
8.4.2 标题样式1- css样式控制 8.4.2.1 分析
8.4.2.2 编码开始
8.4.2.3 总结 8.4.3 标题样式2- css样式控制
8.4.3.1 分析编辑
8.4.3.2 编码开始 8.4.4 超链接
8.4.4.1 分析
8.4.4.2编码开始
8.4.4.3 总结 8.4.5 正文排名
8.4.5.1 分析
8.4.5.2 编码开始
8.4.5.3 总结 8.4.6 页面布局
8.4.6.1 分析
8.4.6.2 编码开始
8.4.6.3 总结
8.5 表格标签
8.5.1 表格
8.5.2 编码开始
8.5.3 总结
8.6 表单标签
8.6.1 表单标签
8.6.1.1 分析 编辑 8.6.1.2 编码开始
8.6.1.3 总结
8.6.2 表单项标签
8.6.2.1 分析
8.6.2.2 编码开始
8.6.2.3 总结 九 JavaScript 9.1 什么是JavaScript
9.2 js引入方式
9.3 js基础语法
9.3.1 书写语法 输出语句
9.3.2 变量
9.3.2.1 全局 var
9.3.2.2 局部 let
9.3.2.3 常量 const
9.3.3 数据类型
9.3.4 运算符 9.3.5 流程控制语句
9.4 js函数
9.5 js对象
9.5.1 Array数组
9.5.2 String字符串 9.5.3 JSON 9.5.4 BOM
9.5.5 DOM
9.5.5.1 DOM
9.5.5.2 案例
9.6 js事件监听
9.6.1 事件绑定
9.6.2 常见事件
9.6.3 案例 前言跟着老师学开发本课程主要以后端开发为主加油.前端包含html、css、javascript 一 特色 二 收获 三 什么是web? 四 网站的工作流程 五 web网站的开发模式 六 web开发课程学习安排 七、初始web前端 八 HTML、CSS
8.1 什么是HTNL\CSS(w3cschool) 8.2 HTML快速入门 8.3 VS Code开发工具 8.3.1 插件 1 Chinese (Simplified) Language Pack for Visual Studio Code中文语言包2 Code Spell Checker3 HTML CSS Support4 JavaScript(ES6) code code snippets5 Mithril Emmet6 Path Intellisense7 Vue 3 Snippets8 VueHelper9 Auto Close Tag10 Auto Rename Tag11 Beautify 停止维护了12 Bracket Pair Colorizer提示已内置于vscode 有人推荐Bracket Pair Colorizer 213 open in browser14 Vetur15 IntelliJ IDEA Keybindings自己16 Duplicate action # 右击文件复制 8.3.2 主题改变颜色 8.3.3 设置 改变字体大小等 8.4 基础标签样式 8.4.1 标题排版 8.4.1.1分析 8.4.2.2 编码开始 选择自己设置的文件夹VSCODEWORK, 新建一个文件01.新浪新闻-标题排版.html 输入 Enter 一键生成初始化标签 加注释ctrl / 同IDEA (前面装插件实现的)
!-- 文档类型为HTML --
!DOCTYPE html
html langen
head!-- 字符集为UTF-8 --meta charsetUTF-8!-- 设置浏览器兼容性 --meta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈中国底气 新思想夯实大国粮仓/title
/head
body!-- img标签src 图片的资源路径width 宽度 (px ,像素 % 相对于父元素的百分比)height 高度 (px ,像素 % 相对于父元素的百分比)height 高度 -- !-- 路径的指定方式1 绝对路径1.1 绝对磁盘路径1.2 绝对网络路径https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png2 相对路径./ 当前目录 ./ 可以省略../ 上一级目录 --img srcimg/news_logo.png 新浪政务 正文h1焦点访谈中国底气 新思想夯实大国粮仓/h1hr2023年08月15日 23:30 新华社hr/body
/html8.4.2.3 总结
8.4.2 标题样式1- css样式控制 8.4.2.1 分析 8.4.2.2 编码开始 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title访谈底气 新思想夯实大国粮仓/title!-- 方式二内嵌样式 --styleh1 {/* color: red; *//* color: rgb(255, 0, 0); *//* color: #ff0000; */color: #4D4F53;}/style!-- 方式三外联样式 --!-- link relstylesheet hrefcss/news.css --
/head
bodyimg srcimg/news_logo.png 新浪政务 正文!-- 方式一行内样式 --!-- h1 stylecolor: red;访谈底气 新思想夯实大国粮仓/h1 --!-- 与上面方式二配合 --h1访谈底气 新思想夯实大国粮仓/h1 !-- 使用方式三 --!-- h1访谈底气 新思想夯实大国粮仓/h1 --hr2023年08月15日 23:30 菠菜社hr/body
/html8.4.2.3 总结 8.4.3 标题样式2- css样式控制
8.4.3.1 分析
8.4.3.2 编码开始
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title访谈底气 新思想夯实大国粮仓/title!-- 方式二内嵌样式 --styleh1 {/* color: red; *//* color: rgb(255, 0, 0); *//* color: #ff0000; */color: #4D4F53;}/* 元素选择器 *//* span {color: #968d92;} *//* 类选择器 *//* .cls {color: #968d92;} *//* ID选择器 */#time {color: #968d92;font-size: 13px; /*设置字体大小 *//style!-- 方式三外联样式 --!-- link relstylesheet hrefcss/news.css --
/head
bodyimg srcimg/news_logo.png 新浪政务 正文!-- 方式一行内样式 --!-- h1 stylecolor: red;焦点访谈底气 新思想夯实大国粮仓/h1 --!-- 与上面方式二配合 --h1焦点访谈底气 新思想夯实大国粮仓/h1 !-- 使用方式三 --!-- h1访谈底气 新思想夯实大国粮仓/h1 --hrspan classcls idtime2023年08月15日 23:30/span span菠菜社/spanhr/body
/html8.4.3.3 总结 8.4.4 超链接 8.4.4.1 分析 8.4.4.2编码开始
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title访谈底气 新思想夯实大国粮仓/title!-- 方式二内嵌样式 --styleh1 {/* color: red; *//* color: rgb(255, 0, 0); *//* color: #ff0000; */color: #4D4F53;}/* 元素选择器 *//* span {color: #968d92;} *//* 类选择器 *//* .cls {color: #968d92;} *//* ID选择器 */#time {color: #968d92;font-size: 13px;}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 */}/style!-- 方式三外联样式 --!-- link relstylesheet hrefcss/news.css --
/head
bodyimg srcimg/news_logo.png a hrefhttp://gov.sina.com.cn/ target_self新浪政务/a 正文!-- 方式一行内样式 --!-- h1 stylecolor: red;焦点访谈底气 新思想夯实大国粮仓/h1 --!-- 与上面方式二配合 --h1访谈底气 新思想夯实大国粮仓/h1 !-- 使用方式三 --!-- h1访谈底气 新思想夯实大国粮仓/h1 --hrspan classcls idtime2023年08月15日 23:30/span span a hrefhttp://www.news.cn/2023-07/25/c_1129767980.htm target_blank菠菜社/a/spanhr/body
/html8.4.4.3 总结 8.4.5 正文排版
8.4.5.1 分析 8.4.5.2 编码开始
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈中国底气 新思想夯实大国粮仓/title!-- 方式二内嵌样式 --styleh1 {/* color: red; *//* color: rgb(255, 0, 0); *//* color: #ff0000; */color: #4D4F53;}/* 元素选择器 *//* span {color: #968d92;} *//* 类选择器 *//* .cls {color: #968d92;} *//* ID选择器 */#time {color: #968d92;font-size: 13px;}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 */}p {text-indent: 35px; /* 设置首行缩进 */line-height: 40px; /* 设置行高 */}#plast {text-align: right; /* 对齐方式 */}/style!-- 方式三外联样式 --!-- link relstylesheet hrefcss/news.css --
/head
bodyimg srcimg/news_logo.png a hrefhttp://gov.sina.com.cn/ target_self新浪政务/a 正文!-- 方式一行内样式 --!-- h1 stylecolor: red;焦点访谈中国底气 新思想夯实大国粮仓/h1 --!-- 与上面方式二配合 --h1焦点访谈中国底气 新思想夯实大国粮仓/h1 !-- 使用方式三 --!-- h1焦点访谈中国底气 新思想夯实大国粮仓/h1 --hrspan classcls idtime2023年08月15日 23:30/span span a hrefhttp://www.news.cn/2023-07/25/c_1129767980.htm target_blank央视网/a/spanhr!-- 正文 --!-- 视频 --video srcvideo/1.mp4 controls width950px/video!-- 音频 --!-- audio srcaudio/1.mp3 controls/audio --pstrong央视网消息/strong焦点访谈党中央始终把解决粮食安全问题作为治国理政的头等大事重农抓粮一系列政策举措有力有效我国粮食产量站稳1.3万亿斤台阶实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中为保障经济社会发展提供了坚实支撑为应对各种风险挑战赢得了主动。连续八年1.3万亿斤这个沉甸甸的数据是如何取得的呢/pbrp人勤春来早春耕农事忙。立春之后由南到北我国春耕春管工作陆续展开春天的田野处处生机盎然。/pimg srcimg/1.jpgp今年我国启动了新一轮千亿斤粮食产能提升行动这是一个新的起点。2015年以来我国粮食产量连续8年稳定在1.3万亿斤以上人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤粮食产量提高了1500亿斤。/pimg srcimg/2.jpgp国务院发展研究中心农村经济研究部部长叶兴庆“我们研究粮食安全的人有一个概念1000亿斤是一个台阶这就是说我们用十年时间使粮食产量上了一个半台阶。这是在化肥和农药开始减量的情况下取得的是在极端天气事件多发、频发的情况下取得的是在从事农业生产的人口减少的条件下取得的这在中国粮食生产发展历史中是一个了不起的成就。”/pp国家仓廪充实为经济社会行稳致远夯实了根基。14亿人口要吃饭这是中国最大的国情。党的十八大以来书记四次出席中央农村工作会议并发表重要讲话对“三农”工作和粮食生产、粮食安全作出一系列重要指示。2013年12月召开的中央农村工作会议上书记把“确保我国粮食安全”放在首位。/pimg srcimg/3.jpgp中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展意味着我们要立足国内解决14亿多人吃饭的问题。仓廪实天下安。保障粮食安全是一个永恒的课题任何时候都不能放松。在以同志为核心的党中央坚强领导下亿万中国人民辛勤耕耘、不懈奋斗我们就一定能够牢牢守住粮食安全这一“国之大者”把中国人的饭碗牢牢端在自己手中夯实中国式现代化基础。/pp idplast责任编辑 王树淼 SN242/p/body
/html8.4.5.3 总结 8.4.6 页面布局
8.4.6.1 分析 8.4.6.2 编码开始
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈中国底气 新思想夯实大国粮仓/title!-- 方式二内嵌样式 --styleh1 {/* color: red; *//* color: rgb(255, 0, 0); *//* color: #ff0000; */color: #4D4F53;}/* 元素选择器 *//* span {color: #968d92;} *//* 类选择器 *//* .cls {color: #968d92;} *//* ID选择器 */#time {color: #968d92;font-size: 13px;}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 */}p {text-indent: 35px; /* 设置首行缩进 */line-height: 40px; /* 设置行高 */}#plast {text-align: right; /* 对齐方式 */}#center {width: 65%;/* margin: 0% 17.5% 0% 17.5% ; 外边距 上 右 下 左 */margin: 0 auto; /* 外边距 上 下 0 左右自动计算 */}/style!-- 方式三外联样式 --!-- link relstylesheet hrefcss/news.css --
/head
bodydiv idcenter img srcimg/news_logo.png a hrefhttp://gov.sina.com.cn/ target_self新浪政务/a 正文!-- 方式一行内样式 --!-- h1 stylecolor: red;焦点访谈中国底气 新思想夯实大国粮仓/h1 --!-- 与上面方式二配合 --h1焦点访谈中国底气 新思想夯实大国粮仓/h1!-- 使用方式三 --!-- h1焦点访谈中国底气 新思想夯实大国粮仓/h1 --hrspan classcls idtime2023年08月15日 23:30/span span a hrefhttp://www.news.cn/2023-07/25/c_1129767980.htmtarget_blank央视网/a/spanhr!-- 正文 --!-- 视频 --video srcvideo/1.mp4 controls width950px/video!-- 音频 --!-- audio srcaudio/1.mp3 controls/audio --pstrong央视网消息/strong焦点访谈党中央始终把解决粮食安全问题作为治国理政的头等大事重农抓粮一系列政策举措有力有效我国粮食产量站稳1.3万亿斤台阶实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中为保障经济社会发展提供了坚实支撑为应对各种风险挑战赢得了主动。连续八年1.3万亿斤这个沉甸甸的数据是如何取得的呢/pbrp人勤春来早春耕农事忙。立春之后由南到北我国春耕春管工作陆续展开春天的田野处处生机盎然。/pimg srcimg/1.jpgp今年我国启动了新一轮千亿斤粮食产能提升行动这是一个新的起点。2015年以来我国粮食产量连续8年稳定在1.3万亿斤以上人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤粮食产量提高了1500亿斤。/pimg srcimg/2.jpgp国务院发展研究中心农村经济研究部部长叶兴庆“我们研究粮食安全的人有一个概念1000亿斤是一个台阶这就是说我们用十年时间使粮食产量上了一个半台阶。这是在化肥和农药开始减量的情况下取得的是在极端天气事件多发、频发的情况下取得的是在从事农业生产的人口减少的条件下取得的这在中国粮食生产发展历史中是一个了不起的成就。”/pp国家仓廪充实为经济社会行稳致远夯实了根基。14亿人口要吃饭这是中国最大的国情。党的十八大以来书记四次出席中央农村工作会议并发表重要讲话对“三农”工作和粮食生产、粮食安全作出一系列重要指示。2013年12月召开的中央农村工作会议上书记把“确保我国粮食安全”放在首位。/pimg srcimg/3.jpgp中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展意味着我们要立足国内解决14亿多人吃饭的问题。仓廪实天下安。保障粮食安全是一个永恒的课题任何时候都不能放松。在以同志为核心的党中央坚强领导下亿万中国人民辛勤耕耘、不懈奋斗我们就一定能够牢牢守住粮食安全这一“国之大者”把中国人的饭碗牢牢端在自己手中夯实中国式现代化基础。/pp idplast责任编辑 王树淼 SN242/p/div/body
/html8.4.6.3 总结 8.5 表格标签
8.5.1 表格 8.5.2 编码开始
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表格/titlestyletd {text-align: center; /* 单元格内容居中展示 */}/style
/head
bodytable border1px cellspacing0 width600pxtrth序号/thth品牌Logo/thth品牌名称/thth企业名称/th/trtrtd1/tdtd img srcimg/huawei.jpg width100px /tdtd华为/tdtd华为技术有限公司/td/trtrtd2/tdtd img srcimg/alibaba.jpg width100px /tdtd阿里/tdtd阿里巴巴集团控股有限公司/td/tr/table/body
/html
8.5.3 总结 8.6 表单标签
8.6.1 表单标签
8.6.1.1 分析 8.6.1.2 编码开始
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表单/title
/head
body!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?usernameTomage12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-- form action methodpost用户名: input typetext nameusername年龄: input typetext nameageinput typesubmit value提交/form/body
/html
8.6.1.3 总结 8.6.2 表单项标签
8.6.2.1 分析 8.6.2.2 编码开始 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表单项标签/title
/head
body!-- value: 表单项提交的值 --
form action methodpost姓名: input typetext namename brbr密码: input typepassword namepassword brbr 性别: input typeradio namegender value1 男labelinput typeradio namegender value2 女 /label brbr爱好: labelinput typecheckbox namehobby valuejava java /labellabelinput typecheckbox namehobby valuegame game /labellabelinput typecheckbox namehobby valuesing sing /label brbr图像: input typefile nameimage brbr生日: input typedate namebirthday brbr时间: input typetime nametime brbr日期时间: input typedatetime-local namedatetime brbr邮箱: input typeemail nameemail brbr年龄: input typenumber nameage brbr学历: select namedegreeoption value----------- 请选择 -----------/optionoption value1大专/optionoption value2本科/optionoption value3硕士/optionoption value4博士/option/select brbr描述: textarea namedescription cols30 rows10/textarea brbrinput typehidden nameid value1!-- 表单常见按钮 --input typebutton value按钮input typereset value重置 input typesubmit value提交 br
/form/body
/html
8.6.2.3 总结 九 JavaScript 9.1 什么是JavaScript 9.2 js引入方式 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-引入方式/title!-- scriptalert(Hello JS);//定义弹出框/script --
/head
body!-- 内部脚本 --!-- scriptalert(Hello JS);//定义弹出框/script --!-- 外部脚本 --script srcjs/demo.js/script
/body
/html!-- scriptalert(Hello JS);//定义弹出框
/script -- 9.3 js基础语法
9.3.1 书写语法 输出语句 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-基本语法/title
/head
bodyscript// alert(js); // 单行注释 window.alert(Hello JS); //弹出框document.write(Hello JS); //写入HTML页面console.log(Hello JS); //浏览器控制台/script
/body
/html
9.3.2 变量 9.3.2.1 全局 var
9.3.2.2 局部 let
9.3.2.3 常量 const
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-变量/title
/head
bodyscript//定义变量// var a 0;// a A;// alert(a);// 特点 1 : 作用域比较大 全局变量 // 特点 2 var 定义的是一个全局变量 还可以重复声明// {// var a 0;// var a A;// }// alert(a);// let 定义的是一个局部变量 不可以重复声明// {// let a 0;// a A;// alert(a);// }//const 定义的是一个常量const pi 3.14;//pi 3.15;alert(pi);/script
/body
/html
9.3.3 数据类型 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-数据类型/title
/head
body/body
script//原始数据类型alert(typeof 3); //numberalert(typeof 3.14);//numberalert(typeof A); //stringalert(typeof Hello);//stringalert(typeof true);//booleanalert(typeof false);//booleanalert(typeof null);//objectvar a ;alert(typeof a);//undefined?/script
/html 9.3.4 运算符 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-运算符 流程控制/title
/head
body/body
script// var age 20;// var _age 20;// var $age 20;// alert(age _age); //true// alert(age _age); //false// alert(age $age); //true// 类型转换 - 其他类型转为数字// alert(parseInt(12)); //12// alert(parseInt(1222A45)); //1222// alert(parseInt(A45)); //NaN// if(0){// alert(If);// }// 类型转换 - 其他类型转为boolean// if(0){ //false// alert(0 转换为false);// }// if(NaN){ //false// alert(NaN 转换为false);// }// if(-1){ //true// alert(除0和NaN其他数字都转为 true);// }// if(){ //false// alert(空字符串为 false, 其他都是true);// }// if(null){ //false// alert(null 转化为false);// }// if(undefined){ //false// alert(undefined 转化为false);// }/*false0 NaNnullundefined*//script
/html 9.3.5 流程控制语句 9.4 js函数 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-函数/title
/head
body/body
script//定义函数-1// function add(a,b){// return a b;// }//定义函数-2var add function(a,b){return a b;}//函数调用var result add(10,20);alert(result);/script
/html
9.5 js对象
JavaScript 和 HTML DOM 参考手册 本文主要讲三类基础对象、浏览器对象、dom对象 9.5.1 Array数组 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-Array/title
/head
body/body
script//定义数组// var arr new Array(1,2,3,4);// var arr [1,2,3,4];// console.log(arr[0]);// console.log(arr[1]);//特点: 长度可变 类型可变// var arr [1,2,3,4];// arr[10] 50;// console.log(arr[10]);// console.log(arr[9]);// console.log(arr[8]);// arr[9] A;// arr[8] true;// console.log(arr);var arr [1,2,3,4];arr[10] 50;// for (let i 0; i arr.length; i) {// console.log(arr[i]);// }// console.log();//forEach: 遍历数组中有值的元素// arr.forEach(function(e){// console.log(e);// })// //ES6 箭头函数: (...) {...} -- 简化函数定义// arr.forEach((e) {// console.log(e);// }) //push: 添加元素到数组末尾// arr.push(7,8,9);// console.log(arr);//splice: 删除元素arr.splice(2,2);console.log(arr);/script
/html
9.5.2 String字符串 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-String/title
/head
body/body
script//创建字符串对象//var str new String(Hello String);var str Hello String ;console.log(str);//lengthconsole.log(str.length);//charAtconsole.log(str.charAt(4));//indexOfconsole.log(str.indexOf(lo));//trimvar s str.trim();console.log(s);//substring(start,end) --- 开始索引, 结束索引 (含头不含尾)console.log(s.substring(0,5));/script
/html 9.5.3 JSON !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-JSON/title
/head
body/body
script//自定义对象// var user {// name: Tom,// age: 10,// gender: male,// // eat: function(){// // alert(用膳~);// // }// eat(){// alert(用膳~);// }// }// alert(user.name);// user.eat();//定义jsonvar jsonstr {name:Tom, age:18, addr:[北京,上海,西安]};alert(jsonstr.name); // 无法获取数据//json字符串--js对象var obj JSON.parse(jsonstr);alert(obj.name);//js对象--json字符串alert(JSON.stringify(obj));/script
/html 9.5.4 BOM Window Location !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-BOM/title
/head
body/body
script//获取// window.alert(Hello BOM);// alert(Hello BOM Window);//方法//confirm - 对话框 -- 确认: true , 取消: false// var flag confirm(您确认删除该记录吗?);// alert(flag);//定时器 - setInterval -- 周期性的执行某一个函数// var i 0;// setInterval(function(){// i;// console.log(定时器执行了i次);// },2000);//定时器 - setTimeout -- 延迟指定时间执行一次 // setTimeout(function(){// alert(JS);// },3000);//locationalert(location.href);location.href https://www.itcast.cn;/script
/html
9.5.5 DOM
9.5.5.1 DOM 演示案例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-DOM演示/title
/headbodydiv stylefont-size: 30px; text-align: center; idtb1课程表/divtable width800px border1 cellspacing0 aligncentertrth学号/thth姓名/thth分数/thth评语/th/trtr aligncenter classdatatd001/tdtd张三/tdtd90/tdtd很优秀/td/trtr aligncenter classdatatd002/tdtd李四/tdtd92/tdtd优秀/td/trtr aligncenter classdatatd003/tdtd王五/tdtd83/tdtd很努力,不错/td/trtr aligncenter classdatatd004/tdtd赵六/tdtd98/tdtd666/td/tr/tablebrdiv styletext-align: center;input idb1 typebutton value改变标题内容 onclickfn1()input idb2 typebutton value改变标题颜色 onclickfn2()input idb3 typebutton value删除最后一个 onclickfn3()/div
/bodyscriptfunction fn1(){document.getElementById(tb1).innerHTML学员成绩表;}function fn2(){document.getElementById(tb1).stylefont-size: 30px; text-align: center; color: red;}function fn3(){var trs document.getElementsByClassName(data);trs[trs.length-1].remove();}
/script/html 获取元素代码 【重点】
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-DOM/title
/headbodyimg idh1 srcimg/off.gif brbrdiv classcls传智教育/div brdiv classcls黑马程序员/div brinput typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏
/bodyscript//1. 获取Element元素//1.1 获取元素-根据ID获取// var img document.getElementById(h1);// alert(img);//1.2 获取元素-根据标签获取 - div// var divs document.getElementsByTagName(div);// for (let i 0; i divs.length; i) {// alert(divs[i]);// }//1.3 获取元素-根据name属性获取// var ins document.getElementsByName(hobby);// for (let i 0; i ins.length; i) {// alert(ins[i]);// }//1.4 获取元素-根据class属性获取// var divs document.getElementsByClassName(cls);// for (let i 0; i divs.length; i) {// alert(divs[i]);// }//2. 查询参考手册, 属性、方法var divs document.getElementsByClassName(cls);var div1 divs[0];div1.innerHTML 传智教育666;/script
/html
9.5.5.2 案例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-DOM-案例/title
/headbodyimg idh1 srcimg/off.gif brbrdiv classcls传智教育/div brdiv classcls黑马程序员/div brinput typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏
/bodyscript//1. 点亮灯泡 : src 属性值var img document.getElementById(h1);img.src img/on.gif;//2. 将所有div标签的内容后面加上: very good (红色字体) -- font colorred/fontvar divs document.getElementsByTagName(div);for (let i 0; i divs.length; i) {const div divs[i];div.innerHTML font colorredvery good/font; }//3. 使所有的复选框呈现选中状态var ins document.getElementsByName(hobby);for (let i 0; i ins.length; i) {const check ins[i];check.checked true;//选中}/script
/html
9.6 js事件监听 9.6.1 事件绑定 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-事件-事件绑定/title
/headbodyinput typebutton idbtn1 value事件绑定1 onclickon()input typebutton idbtn2 value事件绑定2
/bodyscriptfunction on(){alert(按钮1被点击了...);}document.getElementById(btn2).onclick function(){alert(按钮2被点击了...);}/script
/html
9.6.2 常见事件 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-事件-常见事件/title
/headbody onloadload()form action styletext-align: center; onsubmitsubfn()input typetext nameusername onblurbfn() onfocusffn() onkeydownkfn()input idb1 typesubmit value提交input idb1 typebutton value单击事件 onclickfn1()/form brbrbrtable width800px border1 cellspacing0 aligncenter onmouseoverover() onmouseoutout()trth学号/thth姓名/thth分数/thth评语/th/trtr aligncentertd001/tdtd张三/tdtd90/tdtd很优秀/td/trtr aligncentertd002/tdtd李四/tdtd92/tdtd优秀/td/tr/table/bodyscript//onload : 页面/元素加载完成后触发function load(){console.log(页面加载完成...)}//onclick: 鼠标点击事件function fn1(){console.log(我被点击了...);}//onblur: 失去焦点事件function bfn(){console.log(失去焦点...);}//onfocus: 元素获得焦点function ffn(){console.log(获得焦点...);}//onkeydown: 某个键盘的键被按下function kfn(){console.log(键盘被按下了...);}//onmouseover: 鼠标移动到元素之上function over(){console.log(鼠标移入了...)}//onmouseout: 鼠标移出某元素function out(){console.log(鼠标移出了...)}//onsubmit: 提交表单事件function subfn(){alert(表单被提交了...);}/script
/html
9.6.3 案例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-事件-案例/title
/head
bodyimg idlight srcimg/off.gif brinput typebutton value点亮 onclickon() input typebutton value熄灭 onclickoff()br brinput typetext idname valueITCAST onfocuslower() onblurupper()br brinput typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏brinput typebutton value全选 onclickcheckAll() input typebutton value反选 onclickreverse()/bodyscript//1. 点击 点亮 按钮, 点亮灯泡; 点击 熄灭 按钮, 熄灭灯泡; -- onclickfunction on(){//a. 获取img元素对象var img document.getElementById(light);//b. 设置src属性img.src img/on.gif;}function off(){//a. 获取img元素对象var img document.getElementById(light);//b. 设置src属性img.src img/off.gif;}//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblurfunction lower(){//小写//a. 获取输入框元素对象var input document.getElementById(name);//b. 将值转为小写input.value input.value.toLowerCase();}function upper(){//大写//a. 获取输入框元素对象var input document.getElementById(name);//b. 将值转为大写input.value input.value.toUpperCase();}//3. 点击 全选 按钮使所有的复选框呈现选中状态 ; 点击 反选 按钮使所有的复选框呈现取消勾选的状态 ; -- onclickfunction checkAll(){//a. 获取所有复选框元素对象var hobbys document.getElementsByName(hobby);//b. 设置选中状态for (let i 0; i hobbys.length; i) {const element hobbys[i];element.checked true;}}function reverse(){//a. 获取所有复选框元素对象var hobbys document.getElementsByName(hobby);//b. 设置未选中状态for (let i 0; i hobbys.length; i) {const element hobbys[i];element.checked false;}}/script
/html
