2018-11-10-JavaScript复习总结
2018-11-12 本文已影响0人
ATM_shark
一、JavaScript
JavaScript——》ECMAScript+BOM+DOM
ECMAScript:Js语法规范
BOM：浏览器对象模型
DOM：文档对象模型
1、BOM——》以window（窗口）为对象进行对话
window.open('URL')——》新建窗口打开URL网页
window.close()——》关闭当前网页
window.setTimeOut(事件(一般是函数），时间间隔（单位是毫秒）)——》延时多少毫秒后执行事件；var aaa=window.setTimeOut(事件(一般是函数），时间间隔（单位是毫秒）)
window.setInterval(一般是函数），时间间隔（单位是毫秒）)——》间隔多少毫秒执行一次事件；
window.clearInterval(变量名)/window.clearInterval(变量名)——>停止计时器命令,括号内跟变量名,所以如果要使用停止命令,则需要对计时命令进行变量命名;例如:window.clearInterval(aaa)
window.location——》用于获取当前页面地址，配合document.write()使用可在当前页面显示地址信息，例如document.write(window.location)
window.location.hostname——》获取当前页面域名
window.location.pathname——》获取当前页面路径和文件名
window.location.port——》获取...端口
window.location.protocol——》获取...协议（http或者https）
window.location.href——》获取...页面地址
window.location.assign('')——》加载括号文档
window.history.back()——>返回上一个历史页面
window.history.forward()——>进入下一个历史页面
window.navigator ——>获取包含访问者在内的浏览器信息
new date() ——>获取当前时间
========================================
JS在浏览器中创建三个消息框:警告框/确认框/提示框
window.alert('...')——>警告框,框中有确认按钮和括号内容
window.confirm('...')——>确认框,框中有确认和取消按钮以及括号内容
window.prompt('...','默认值')——>提示框,框中需要用户输入内容并点击确认按钮才可进行下一步操作;
2、DOM——>HTML
1、获取HTML元素(标签)
注明:使用JS对HTML元素进行修改时,需要获取其元素
a、通过ID获取
b、通过标签名获取
c、通过类名
目前总共有5种获取元素的方式
通过document对象获取页面元素（标签）的常用方法有5个；
1、document.getElementById('...')——》通过ID获取单个元素,不需要加#；
2.document.getElementsByTagName('...')——>通过标签名获取标签的列表(伪列表);后面跟[x]可获取列表中下标对应的单个元素;
3.document.getElementsByClassName('...')——>通过类名获取标签的列表;
4.document.querySelector('...')——>通过样式表选择器获取单个元素;括号里可以是标签名、类名、ID；
5.document.querySelectorAll('...')——>通过样式表选择器获取元素的列表(伪列表);括号里可以是标签名、类名、ID；
2、修改HTML元素属性
a、innerHTML——>修改元素内容
将获取的元素实现设置为一变量,再对变量就行修改
如: var aaa=document.querySelector('')
aaa.innerHTML='新内容'
b、textcontent——>修改元素内容
注意:innerHTML能识别新内容中的实体替换字符
例如: 空格字符,会以空格呈现在内容中
但是textcontent不能识别实体替换符,例如 会以 呈现,而不是空格;
c、其他属性 attribute
例如img标签的src属性,a标签的href属性,还有标签的name,value等等属性;
3、修改CSS样式
修改CSS样式语法同修改HTML元素属性
a、先获取某个标签,并赋予一变量;
var aaa=document.querySelector('')
b、选择要修改的样式属性并赋新值;
aaa.style.property='新值'
例如:修改文本颜色:aaa.style.color='blue'
修改字体大小:aaa.style.fontSize='18px'
注意:JS标签中的属性名都是驼峰式命名方法,跟style标签中的属性名不一样;变量名后面必跟style;
4、事件 event
我们可以对HTML的元素和标签的内容和属性进行修改;也可将修改属性这个事件绑定在其他触发事件上,
触发事件包含但不限于:mouseover ——鼠标划过
mouseout——鼠标离开
mousedown——鼠标按下
mouseup——鼠标松开
mousemove——鼠标移动
keydown——键盘按下
keyup——键盘弹起
例如 <h1 onmousedown='this.style.color='red'' onmouseup='this.style.color='white''>人生苦短 我用Python</h1>
效果是鼠标按下,字体变红,鼠标弹起,字体变白;
注意:this相当于Python中的self;
5、事件监听 addEventListener()
当我们需要在触发事件发生时修改某个标签属性,就需要监听此标签的触发事件;
格式: element.addEventListener(触发事件event,修改属性事件function(){},true/false(默认是false))
elementmen——某个标签,一般是一个变量,即先获取标签并将其赋值给一个变量;
触发事件——即本监听的事件,一般指的就是鼠标点击/移动,键盘点击事件,例如'click','mousedown'
修改属性事件——一般是一个回调函数;当触发事件发生,即执行回调函数;
true/false——当事件发生时,执行的回调函数会有捕获/冒泡现象发生;
冒泡:参数值为false,默认参数为false; 子标签执行回调函数后,其父标签也会随后执行回调函数,然后是其父父标签,由内向外传,传至<body>标签为止;
捕获:参数值为true;与冒泡执行函数的顺序相反,由外到内传,由<body>传至当前标签;
注意:冒泡和捕获现象发生的前提是父标签们对同一个触发事件也进行了监听,并有相应的回调函数执行;
阻止冒泡/捕获——>在回电函数中加入代码串——evt/this.stopPropagation;
删除事件监听:
格式:element.removeEventListener(event,function)
目的:删除某元素的某个触发事件发生时会执行相应回调函数的功能;
6、元素的增删改
a/增加子标签 appendChild()
第一步:创建新标签/元素 var aa=document.createElement('...') 括号内跟标签名(p/img/a/div/li/h1-h6)
第二步:将其添加至父元素里面 bb.document.appendChild(aa) 将aa创建的标签添加至bb父标签中
注意:insertBefore(子元素,位置)也能添加子元素,appendChild()是将子元素添加在父元素下的最后面,insertBefore()能将子元素添加在任何位置;
例如: bb.document.insertBefore(aa,bb.firstChild)
b/删除子标签
第一步:获取要被删除的标签 var aa=document.getElementById('...') 获取被删子元素赋值给aa
第二步:以其父元素的身份执行删除命令 bb.document.removeChild(aa) 在父元素bb中执行删除命令
c/替换子标签
第一步:获取新旧子元素
第二步:在父元素中执行替换命令
例如:cc.documen.replaceChild(aa,bb) ——用bb元素替换cc中的aa子元素
d/修改标签属性和内容详见######1/2
三、jQuery
详见二阶段day9-10
jQuery用法详解
http://www.runoob.com/jquery/jquery-tutorial.html
