HTML5笔记1.docx
《HTML5笔记1.docx》由会员分享,可在线阅读,更多相关《HTML5笔记1.docx(27页珍藏版)》请在冰点文库上搜索。
HTML5笔记1
为什么学习HTML5
1.很受广大浏览器欢迎和支持
2.跨平台运行
3.硬件要求低
4.flash之外的选择
环境:
(最低配置)
1.硬件:
双核,2G内存
2.软件:
windows,MaxOSX,Linux
什么是HTML5
描述网页的一种语言,超文本标记语言,不是编程语言,是一种标记语言
新特性:
用于绘画的canvas标签
用于媒介回放的video和audio元素
对本地离线储存的更好支持
新的特殊内容元素
如:
article,footer,header,nav,section
新的表单控件
calendar,date,time,email,url,search
定义粗体文本
定义大号字
定义着重文字
定义斜体字
定义小号字
定义加重语气
定义下标字
定义上标字
定义插入字
定义删除字
标签:
3.内联样式表:
red">alt说明这是什么表格定义表格cellpadding边距cellspacing单元格之间的间距bgcolor背景颜色background背景图片定义表格标题定义表格的表头定义表格的行定义表格的单元定义表格的页眉定义表格的主体定义表格的页脚定义表格的列属性定义边框横向合并表格定义无序列表type=disc实体圆crircle空心圆square方块实体定义有序列表type=A,a,1,i,start定义列表元素列表列表项描述HTML块元素块元素在显示时,通常会以新行开始如:,HTML内联元素内联元素通常不会以新行开始如:,,HTML元素元素也被称为块元素,其主要是组合HTML元素的容器HTML元素元素是内联元素,可以作为文本的容器clear:both;清除所有效果表单表单输入域文本域控制标签定义域域的标题选择列表选择组下拉列表中的选项按钮文本密码复选框单选框下拉列表下拉列表1下拉列表2文本域:按钮提交www.apachefrinds.orgXAMPPeclipes框架框架标签框架集标签固定框架大小列行内联框架实体<<>>css3背景:background-attachment背景图像是否固定或者随页面的其余部分滚动background-color设置元素的背景颜色background-img把图片设置为背景background-position设置背景图片的起始位置background-repeat设置背景图片是否及如何重复background-size设置背景图片的尺寸background-origin设置背景图片的定位区域background-clip设置背景的绘制区域文本:color文本颜色direction文本方向line-height行高letter-spacing字符间距text-align对齐元素中的文本text-decoration向文本添加修饰text-indent缩进元素中文本的首行text-transform元素中的字母capitalize所有字母首字母大写lowercase所有字母都小写uppercase所有字母都大写unicode-bidi设置文本方向white-space元素中空白的处理方式word-spacing字间距text-shadow向文本添加阴影word-wrap规定文本的换行规则字体:font-family设置字体系列font-size设置字体的尺寸font-style设置字体的风格font-variant以小型大写字体或正常字体显示文本font-weight设置字体的粗细连接:a:link普通的,未被访问的连接a:visited用户已访问的链接a:hover鼠标指针位于链接的上方a:active链接被点击的时刻text-decoration去掉连接的下划线列表:list-style简写列表项list-style-image列表项图像list-style-position列表标志位置list-style-type列表类型表格:border-collapse:collapse;折叠边框轮廓:(突出元素的作用)outline设置轮廓属性outline-color设置轮廓的颜色outline-style设置轮廓的样式outline-width设置轮廓的宽度派生选择器listring{}id选择器#id名类选择器.class名属性选择器[title=""]{}盒子内边距属性:padding设置所有边距padding-bottom设置底边距padding-left设置左边距padding-right设置右边距padding-top设置上边距边框border-style10种边框样式border-radius圆角边框box-shadow边框阴影border-image边框图片外边距margin设置所有边距margin-bottom设置底边距margin-left设置左边距margin-right设置右边距margin-top设置上边距定位属性:position把元素放在一个静态的(static),相对的(relative),绝对的(absolute),或固定的(fixed)位置中top元素向上的偏移量left元素向左的偏移量right元素向右的偏移量bottom元素向下的偏移量overflow设置元素溢出其区域发生的事情clip设置元素显示的形状oertical-align设置元素垂直对齐方式z-index设置元素是堆叠顺序浮动floatleft元素向左浮动right元素向右浮动none元素不浮动inherit从父级继承浮动属性clearleft去掉元素向左浮动right去掉元素向右浮动both左右两侧均去掉浮动inherit从父级继承clear属性cursor规定当指向某元素之上时显示的指针类型display设置是否及如何显示元素visibility设置元素是否可见或者不可见动画效果1.2D,3D转换2D转换方法translate()【转化,翻译】rotate()【旋转】scale()【剥落】matrix()【矩阵】skew()【斜交】transfrom:translate(200px,100px);-webkit-transform:translate(200px,100px);safarichrome-ms-transform:translate(200px,100px);IE-o-transform:translate(200px,100px);opera-moz-transform:translate(200px,100px);firfox3D转换方法rotateX()rotateY()transfrom:rotate(200deg);-webkit-transform:rotate(200deg);safarichrome-ms-transform:rotate(200deg);IE-o-transform:rotate(200deg);opera-moz-transform:rotate(200deg);firfox2.过渡transition设置四个过渡属性transition-property过渡的名称transition-duration过渡效果花费的时间transition-timing-function过渡效果的时间曲线transition-delay过渡效果开始时间div{width:100px;height:100px;background-color:blue;-webkit-transition:width2s,height2s,-webkit-transform2s;transition:width2s,height2s,-webkit-transform2s;}div:hover{width:200px;height:200px;transform:rotate(360deg);-webkit-transition:rotate(360deg);}3.动画@keyframesdiv{width:100px;height:100px;background-color:blue;position:relative;animation:anim5s;-webkit-animation:anim5s;}@keyframesanim{0%{background:red;left0px;top0px;}25%{background:blue;left200px;top0px;}50%{background:#ccffcc;left200px;top200px;}75%{background:#ffffffleft0px;top200px;}100%{background:red;left0px;top0px;}}@-webkit-keyframesanim{0%{background:red;left0px;top0px;}25%{background:blue;left200px;top0px;}50%{background:#ccffcc;left200px;top200px;}75%{background:#ffffffleft0px;top200px;}100%{background:red;left0px;top0px;}}4.多列column-countcolumn-gapcolumn-rulediv{column-count:4;-webkit-column-count:4;-webkit-column-gap:30px;column-gap:30px;column-rule:5pxoutset#ff0000;-webkit-column-rule:5pxoutset#ff0000;}Javascript1.JavaScript是互联网上最流行的脚本语言,这门语言可用于web和HTML,更可广泛用于服务器,pc端,移动端2.Javascript脚本语言JavaScript是一种轻量级的编程语言Javascript是可插入HEML页面的编程代码Javascript插入HEML页面后,可由所有的浏览器执行连接document.write("helloboy");hellodocument.getElementById("pid").innerHTML="你好";var定义变量运算符1.算术运算符+,-,*,/,++,--2.赋值运算符=,+=,-=,*=,%=3.字符串操作4.比较运算符==,===,!=,!==,>,<,>=,<=5.逻辑运算符&&,||,!6.条件运算符函数functiondemo(a,b){varsum=a+b;--方法-->returnsum;}varv1=demo(10,10);alert(v1);事件onClick单击事件onMouseOver鼠标经过事件onMouseOut鼠标移出事件onChange文本内容改变事件onSelect文本框选中事件onFocus光标聚集事件onBlur移开光标事件onLoad网页加载事件onUnload关闭网页事件HtmlDOM当网页被加载时,浏览器会创建页面的文档对象模型(DocumentObjectModel)一.DOM操作Html1.改变Html输出流:注意:绝对不要在文档加载完成之后使用document.write()。这会覆盖该文档2.寻找元素:通过id找到Html元素通过标签名找到Html元素document.getelementbyid()document.getElementByTagName()//如相同元素会找到相同元素是第一个3.改变Html内容使用属性:innerHtml4.改变Html属性使用属性:attribute二.DOM操作CSS1.通过DOM对象改变CSS语法:document.getElementById(id).style.property=newstyleDOMEventListener1.DOMEventListener方法:addEventListener();removeEventListener();2.addEventListener():方法用于向指定元素添加事件句柄3.removeEventListener()移出方法添加的事件句柄三.事件流1.事件流:描述的是在页面中接受事件的顺序2.事件冒泡:由最具体的元素接受,然后逐级向上传播至最不具体的元素的节点(文档)3.事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接受事件四.事件的处理1.Html事件处理直接添加到Html结构中2.DOMO级事件处理把一个函数赋值给一个事件处理程序属性3.DOM2级事件处理addEventListener(“事件名”,“事件处理函数”,“布尔值”)true:事件捕获false:事件冒泡4.IE事件处理程序attachEventdetachEvent五.事件对象1.事件对象在触发DOM事件的时候都会产生一个对象2.事件对象event:1.type:获取事件类型2.target:获取事件目标3.stopPropagation():阻止事件冒泡4.preventDefault():阻止事件默认行为六.对象1.什么是对象JavaScript中的所有事物都是对象:字符串,数值,数组,函数。。。每个对象带有属性和方法JavaScript允许自定义对象2.自定义对象定义并创建对象实例使用函数来定义对象,然后创建新的对象实例indexOf()//对字符串的查询match()//内容匹配replace("原来的","替换的")//替换内容toUpperCase()/toLowerCase()//字符串大小写转换string>split()//字符串转为数组属性:length,prototype,constructor方法:charAt(),charCodeAt(),concat(),fromCharCode()indexOf(),lastIndexOf(),match(),replace(),search()slice(),substring(),substr(),valueOf(),toLowerCase(),toUpperCase(),split()Date对象日期对象用于处理日期和时间获得当日的日期常用方法getFullYear():获得年份getTime():获取毫秒setFullYear():设置具体的日期getDay():获取星期Array对象使用单独的变量名来存储一系列的值数组常用方法concat()合并数组sort()排序push()末尾追加元素reverse()数组元素翻转Math对象执行常见的算术任务常用方法round():四舍五入random():随机数0~1max():返回最大值min():返回最小值abs():返回绝对值DOM对象控制HTML1.方法:getElementsByName()获取name同名字通过集合存储getElementsByTagName()获取元素getAttribute()获取元素属性setAttribute()设置元素属性childNode()访问子节点parentNode()访问父节点createElement()创建元素节点createTextNode()创建文本节点insertBefore()插入节点removeChild()删除节点offsetHeight()网页尺寸scrollHeight()网页尺寸浏览器对象window对象window对象是BOM的核心,WIndow对象指当前的浏览器窗口所有JavaScript全局对象,函数以及变量均自动成为window对象是成员全局变量是window对象的属性全局函数是window对象是方法document也是window对象的属性之一window.innerHeight浏览器窗口的内部高度window.innerWidth浏览器窗口的内部宽度window.open()打开新窗口window.close()关闭当前窗口计时器setlnterval()间隔指定的毫秒数不停地执行指定的代码clearlnterval()方法用于停止setlnterval()方法执行的函数代码setTimeout()暂停指定的毫秒数后执行指定的代码clearTimeout()方法用于停止执行setTimeout()方法的函数代码History对象history.back()与在浏览器点击后退按钮相同history.forward()与在浏览器中点击按钮向前相同history.go()进入历史中的某个页面Location对象获取当前页面的地址location.hostname返回web主机的域名location.pathname返回当前页面的路径和文件名location.port返回web主机的端口location.protocol返回所使用的web协议location.href属性返回当前页面的URLlocation.assign()方法加载新的文档Screen对象screen.availWidth可用的屏幕宽度screen.availHeight可用的屏幕高度screen.Height屏幕高度screen.Width屏幕宽度Navigator对象弹出窗口Cookies访问父节点:parentNode访问子节点:childNodeHTML新特性一.音频播放1.Audio(音频)2.control(控制器)3.标签:定义声音规定多媒体资源,可以是多个4.编辑码工具:FFmpegwww.ffmpeg.org二.HTML5拖放拖放(Drag和drop)是HTML5标准的组成部分拖动开始:ondragstart:调用了一个函数,dr 文档加载中……请稍候! 如果长时间未打开,您也可以点击刷新试试。 下载文档到电脑,查找使用更方便 下载 加入VIP,免费下载 还剩页未读,继续阅读 举报 版权申诉 word格式文档无特别注明外均可编辑修改;预览文档经过压缩,下载后原文更清晰! 立即下载 配套讲稿:如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。 特殊限制:部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。 关 键 词: HTML5 笔记 冰点文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。 该用户的其他资源 更多>> #电控发动机的故障诊断与排除.docx 《财务管理学》人大版第五章习题答案.docx 《公路养护工程量清单及计量规范》编制.docx 《反抗之真心英雄》读后感.docx 《C语言程序设计》阅读程序写结果试题汇总.docx 《汉书艺文志》小说家与子部小说著录.docx 《江苏省建设工程施工项目经理部和项目监理机构主要管理人员配备办法》.docx 《C语言程序设计》课程形成性考核作业.docx 《诚实与信任》教学设计.docx 《变化社会中的政治秩序》读后感.docx 《44光的折射》教案.docx 《归去来兮辞》优化教案及课文解析.docx 《大数据导论》19秋期末考核0001.docx 《大型养路机械使用管理规则》.docx 《混凝土结构工程施工质量验收规范》GB 条文说明.docx 《会计基础》练习答案解析.docx 《民法典》试题第三编合同二试题及答案.docx 《建设工程消防监督管理规定》公安部119号令1101.docx 《赢》杰克韦尔奇读书笔记.docx 《活出全新的自己》读后感精选9篇.docx 《拿破仑传》读后感范文5篇.docx 《去年的树》课堂实录及点评doc.docx 《人体解剖生理学》练习题库.docx 00以内整数加减.docx 《手工制作中培养幼儿创意能力的实践研究》完整.docx 《校园防汛工作计划》.docx 06年批发零售业研究报告.docx 《小王子》金句赏析英语作文.docx 《中华人民共和国职业病防治法》条文释义下.docx 007电子请柬.docx 1物业事业部运营管理方案.docx 《新闻写作教程》中篇整理资料.docx 猜你喜欢 高考语文文言文阅读翻译.docx 高考重庆卷语文试题及参考答案.docx 高三高考物理二轮复习专题强化练习卷机械能守恒及能量守恒定律.docx 高三下学期语文教学工作总结.docx 高速公路项目质量奖惩细则课件.docx 高压输配电线路施工运行与维护专业.docx 小学英语总复习计划4篇.docx 小学语文拼音教学教案经典.docx 高中历史第12课土耳其国父凯末尔导学doc.docx 高中文言文阅读翻译题及标准译文答案.docx 校园物流创业计划书范文五篇.docx 高中语文 55 恶乎往而不可课后强化作业 新人教版选修《先秦诸子选读》.docx 高中政治三年易错知识点整理2.docx 个人房屋土地转让协议书范本.docx 个人与团队管理复习资料.docx 新版教科版小学四年级科学下册全册教案.docx 给老师的一封信合集15篇模板.docx 梗阳人员定位系统技术方案.docx 工程管理和工程监理方案.docx 关于本文 本文标题:HTML5笔记1.docx 链接地址:https://www.bingdoc.com/p-14249604.html 相关资源 更多 产褥期康复与母乳喂养ppt.ppt 春季流行性感冒的防治【共45张PPT】.pptx 常见的i志愿平台注册流程.ppt 《烹饪概论》教学课件-2中国烹饪简史.pptx 桩基础课件PPT.pptx 国庆节前安全教育培训.ppt word2010基础教程ppt课件.pptx 小学生注意力训练课用PPT课件.ppt 国家-科技报告撰写方法-.ppt 《高职应用数学(机电类)》教学课件-第3章--导数与微分及其应用.pptx 相关搜索 HTML5 笔记 热门标签 早产儿机械通气策略 挖掘机操作施工 数控机床工业机器人打造 数控机床维修 阀门维护保养培训教材 注塑模具制作工艺 研制更换分裂导线 制动系统检测故障诊断 逃生紧急救护 自动化生产线认知 关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们 copyright@ 2008-2023 冰点文库 网站版权所有经营许可证编号:鄂ICP备19020893号-2 收起 在线客服 意见反馈 返回顶部 展开 QQ交谈 返回顶部
red">
alt说明这是什么
表格
cellpadding边距
cellspacing单元格之间的间距
bgcolor背景颜色
background背景图片
定义表格的页眉
定义边框
横向合并表格
type=disc实体圆
crircle空心圆
square方块实体
type=A,a,1,i,start
HTML块元素
块元素在显示时,通常会以新行开始
HTML内联元素
内联元素通常不会以新行开始
,,
HTML
HTML元素
元素是内联元素,可以作为文本的容器
clear:
both;清除所有效果
表单
输入域
文本域
控制标签
域的标题
选择列表
选择组
下拉列表中的选项
按钮
文本
密码
复选框
单选框
下拉列表
下拉列表1
下拉列表2
文本域:
提交
www.apachefrinds.org
XAMPP
eclipes
框架
框架标签
框架集标签
固定框架大小
列
行
内联框架
实体
<<
>>
css3
背景:
background-attachment背景图像是否固定或者随页面的其余部分滚动
background-color设置元素的背景颜色
background-img把图片设置为背景
background-position设置背景图片的起始位置
background-repeat设置背景图片是否及如何重复
background-size设置背景图片的尺寸
background-origin设置背景图片的定位区域
background-clip设置背景的绘制区域
文本:
color文本颜色
direction文本方向
line-height行高
letter-spacing字符间距
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-transform元素中的字母
capitalize所有字母首字母大写
lowercase所有字母都小写
uppercase所有字母都大写
unicode-bidi设置文本方向
white-space元素中空白的处理方式
word-spacing字间距
text-shadow向文本添加阴影
word-wrap规定文本的换行规则
字体:
font-family设置字体系列
font-size设置字体的尺寸
font-style设置字体的风格
font-variant以小型大写字体或正常字体显示文本
font-weight设置字体的粗细
连接:
a:
link普通的,未被访问的连接
visited用户已访问的链接
hover鼠标指针位于链接的上方
active链接被点击的时刻
text-decoration去掉连接的下划线
列表:
list-style简写列表项
list-style-image列表项图像
list-style-position列表标志位置
list-style-type列表类型
表格:
border-collapse:
collapse;折叠边框
轮廓:
(突出元素的作用)
outline设置轮廓属性
outline-color设置轮廓的颜色
outline-style设置轮廓的样式
outline-width设置轮廓的宽度
派生选择器
listring{}
id选择器
#id名
类选择器
.class名
属性选择器
[title=""]{}
盒子
内边距
属性:
padding设置所有边距
padding-bottom设置底边距
padding-left设置左边距
padding-right设置右边距
padding-top设置上边距
边框
border-style10种边框样式
border-radius圆角边框
box-shadow边框阴影
border-image边框图片
外边距
margin设置所有边距
margin-bottom设置底边距
margin-left设置左边距
margin-right设置右边距
margin-top设置上边距
定位
position把元素放在一个静态的(static),相对的(relative),绝对的(absolute),或固定的(fixed)位置中
top元素向上的偏移量
left元素向左的偏移量
right元素向右的偏移量
bottom元素向下的偏移量
overflow设置元素溢出其区域发生的事情
clip设置元素显示的形状
oertical-align设置元素垂直对齐方式
z-index设置元素是堆叠顺序
浮动
float
left元素向左浮动
right元素向右浮动
none元素不浮动
inherit从父级继承浮动属性
clear
left去掉元素向左浮动
right去掉元素向右浮动
both左右两侧均去掉浮动
inherit从父级继承clear属性
cursor规定当指向某元素之上时显示的指针类型
display设置是否及如何显示元素
visibility设置元素是否可见或者不可见
动画效果
1.2D,3D转换
2D转换方法
translate()【转化,翻译】
rotate()【旋转】
scale()【剥落】
matrix()【矩阵】
skew()【斜交】
transfrom:
translate(200px,100px);
-webkit-transform:
translate(200px,100px);safarichrome
-ms-transform:
translate(200px,100px);IE
-o-transform:
translate(200px,100px);opera
-moz-transform:
translate(200px,100px);firfox
3D转换方法
rotateX()
rotateY()
rotate(200deg);
rotate(200deg);safarichrome
rotate(200deg);IE
rotate(200deg);opera
rotate(200deg);firfox
2.过渡
transition设置四个过渡属性
transition-property过渡的名称
transition-duration过渡效果花费的时间
transition-timing-function过渡效果的时间曲线
transition-delay过渡效果开始时间
div{
width:
100px;
height:
background-color:
blue;
-webkit-transition:
width2s,height2s,-webkit-transform2s;
transition:
}
div:
hover{
200px;
transform:
rotate(360deg);
3.动画
@keyframes
position:
relative;
animation:
anim5s;
-webkit-animation:
@keyframesanim{
0%{background:
red;left0px;top0px;}
25%{background:
blue;left200px;top0px;}
50%{background:
#ccffcc;left200px;top200px;}
75%{background:
#ffffffleft0px;top200px;}
100%{background:
@-webkit-keyframesanim{
4.多列
column-count
column-gap
column-rule
column-count:
4;
-webkit-column-count:
-webkit-column-gap:
30px;
column-gap:
column-rule:
5pxoutset#ff0000;
-webkit-column-rule:
Javascript
1.JavaScript是互联网上最流行的脚本语言,这门语言可用于web和HTML,更可广泛用于服务器,pc端,移动端
2.Javascript脚本语言
JavaScript是一种轻量级的编程语言
Javascript是可插入HEML页面的编程代码
Javascript插入HEML页面后,可由所有的浏览器执行
连接
document.write("helloboy");
hello
document.getElementById("pid").innerHTML="你好";
var定义变量
运算符
1.算术运算符
+,-,*,/,++,--
2.赋值运算符
=,+=,-=,*=,%=
3.字符串操作
4.比较运算符
==,===,!
=,!
==,>,<,>=,<=
5.逻辑运算符
&&,||,!
6.条件运算符
函数
functiondemo(a,b){
varsum=a+b;
--方法-->
returnsum;
varv1=demo(10,10);
alert(v1);
事件
onClick单击事件
onMouseOver鼠标经过事件
onMouseOut鼠标移出事件
onChange文本内容改变事件
onSelect文本框选中事件
onFocus光标聚集事件
onBlur移开光标事件
onLoad网页加载事件
onUnload关闭网页事件
HtmlDOM
当网页被加载时,浏览器会创建页面的文档对象模型(DocumentObjectModel)
一.DOM操作Html
1.改变Html输出流:
注意:
绝对不要在文档加载完成之后使用document.write()。
这会覆盖该文档
2.寻找元素:
通过id找到Html元素
通过标签名找到Html元素
document.getelementbyid()
document.getElementByTagName()//如相同元素会找到相同元素是第一个
3.改变Html内容
使用属性:
innerHtml
4.改变Html属性
attribute
二.DOM操作CSS
1.通过DOM对象改变CSS
语法:
document.getElementById(id).style.property=newstyle
DOMEventListener
1.DOMEventListener
方法:
addEventListener();
removeEventListener();
2.addEventListener():
方法用于向指定元素添加事件句柄
3.removeEventListener()
移出方法添加的事件句柄
三.事件流
1.事件流:
描述的是在页面中接受事件的顺序
2.事件冒泡:
由最具体的元素接受,然后逐级向上传播至最不具体的元素的节点(文档)
3.事件捕获:
最不具体的节点先接收事件,而最具体的节点应该是最后接受事件
四.事件的处理
1.Html事件处理
直接添加到Html结构中
2.DOMO级事件处理
把一个函数赋值给一个事件处理程序属性
3.DOM2级事件处理
addEventListener(“事件名”,“事件处理函数”,“布尔值”)
true:
事件捕获
false:
事件冒泡
4.IE事件处理程序
attachEvent
detachEvent
五.事件对象
1.事件对象
在触发DOM事件的时候都会产生一个对象
2.事件对象event:
1.type:
获取事件类型
2.target:
获取事件目标
3.stopPropagation():
阻止事件冒泡
4.preventDefault():
阻止事件默认行为
六.对象
1.什么是对象
JavaScript中的所有事物都是对象:
字符串,数值,数组,函数。
。
每个对象带有属性和方法
JavaScript允许自定义对象
2.自定义对象
定义并创建对象实例
使用函数来定义对象,然后创建新的对象实例
indexOf()//对字符串的查询
match()//内容匹配
replace("原来的","替换的")//替换内容
toUpperCase()/toLowerCase()//字符串大小写转换
string>split()//字符串转为数组
length,prototype,constructor
charAt(),charCodeAt(),concat(),fromCharCode()
indexOf(),lastIndexOf(),match(),replace(),search()
slice(),substring(),substr(),valueOf(),toLowerCase(),
toUpperCase(),split()
Date对象
日期对象用于处理日期和时间
获得当日的日期
常用方法
getFullYear():
获得年份
getTime():
获取毫秒
setFullYear():
设置具体的日期
getDay():
获取星期
Array对象
使用单独的变量名来存储一系列的值
数组常用方法
concat()合并数组
sort()排序
push()末尾追加元素
reverse()数组元素翻转
Math对象
执行常见的算术任务
round():
四舍五入
random():
随机数0~1
max():
返回最大值
min():
返回最小值
abs():
返回绝对值
DOM对象控制HTML
1.方法:
getElementsByName()获取name同名字通过集合存储
getElementsByTagName()获取元素
getAttribute()获取元素属性
setAttribute()设置元素属性
childNode()访问子节点
parentNode()访问父节点
createElement()创建元素节点
createTextNode()创建文本节点
insertBefore()插入节点
removeChild()删除节点
offsetHeight()网页尺寸
scrollHeight()网页尺寸
浏览器对象
window对象
window对象是BOM的核心,WIndow对象指当前的浏览器窗口
所有JavaScript全局对象,函数以及变量均自动成为window对象是成员
全局变量是window对象的属性
全局函数是window对象是方法
document也是window对象的属性之一
window.innerHeight浏览器窗口的内部高度
window.innerWidth浏览器窗口的内部宽度
window.open()打开新窗口
window.close()关闭当前窗口
计时器
setlnterval()间隔指定的毫秒数不停地执行指定的代码
clearlnterval()方法用于停止setlnterval()方法执行的函数代码
setTimeout()暂停指定的毫秒数后执行指定的代码
clearTimeout()方法用于停止执行setTimeout()方法的函数代码
History对象
history.back()与在浏览器点击后退按钮相同
history.forward()与在浏览器中点击按钮向前相同
history.go()进入历史中的某个页面
Location对象获取当前页面的地址
location.hostname返回web主机的域名
location.pathname返回当前页面的路径和文件名
location.port返回web主机的端口
location.protocol返回所使用的web协议
location.href属性返回当前页面的URL
location.assign()方法加载新的文档
Screen对象
screen.availWidth可用的屏幕宽度
screen.availHeight可用的屏幕高度
screen.Height屏幕高度
screen.Width屏幕宽度
Navigator对象
弹出窗口
Cookies
访问父节点:
parentNode
访问子节点:
childNode
HTML新特性
一.音频播放
1.Audio(音频)
2.control(控制器)
3.标签:
定义声音规定多媒体资源,可以是多个
4.编辑码工具:
FFmpegwww.ffmpeg.org
二.HTML5拖放
拖放(Drag和drop)是HTML5标准的组成部分
拖动开始:
ondragstart:
调用了一个函数,dr
下载文档到电脑,查找使用更方便
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
copyright@ 2008-2023 冰点文库 网站版权所有
经营许可证编号:鄂ICP备19020893号-2