一、BOM:浏览器对象模型(Browser Object Model)
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构;
BOM可实现功能:
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退
window对象的常用属性:
属性名称 | 说 明 |
---|---|
history | 有关客户访问过的URL的信息 |
location | 有关当前 URL 的信息 |
**语法:**window.属性名= “属性值”
示例:
window.location="https://www.baidu.com" ; -----表示跳转到百度首页
window对象的常用方法 :
方法名称方法名称 | 说 明 |
---|---|
prompt( ) | 显示可提示用户输入的对话框 |
alert( ) | 显示带有一个提示信息和一个确定按钮的警示框 |
confirm( ) | 显示一个带有提示信息、确定和取消按钮的对话框 |
close( ) | 关闭浏览器窗口 |
open( ) | 打开一个新的浏览器窗口,加载给定 URL 所指定的文档 |
setTimeout( ) | 在指定的毫秒数后调用函数或计算表达式 |
setInterval ( ) | 按照指定的周期(以毫秒计)来调用函数或表达式 |
1、confirm()方法 :
**语法:**confirm(“对话框中显示的纯文本”)
示例:
<script type="text/javascript">
var flag=confirm("确认要删除此条信息吗?");
if(flag==true){
alert("删除成功!");
}else{
alert("你取消了删除");
}
</script>
confirm()与alert ()、 prompt()区别:
-
**alert( ):**一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变。
-
**prompt( ):**两个参数,输入对话框,用来提示用户输入一些信息,单击“取消”按钮则返回null,单击“确定”按钮则返回用户输入的值,常用于收集用户关于特定问题而反馈的信息。
-
**confirm( ):**一个参数,确认对话框,显示提示对话框的消息、“确定”按钮和“取消”按钮,单击“确定”按钮返回true,单击“取消”按钮返回false,因此与if-else语句搭配使用。
2、open()方法:
**语法:**window.open(“弹出窗口的URL”,“窗口名称”,"窗口特征”)
属性名称 | 说 明 |
---|---|
height、width | 窗口文档显示区的高度、宽度。以像素计 |
left、top | 窗口的x坐标、y坐标。以像素计 |
toolbar=yes | no|1 | 0 | 是否显示浏览器的工具栏。黙认是yes |
scrollbars=yes|no|1|0 | 是否显示滚动条。黙认是yes |
location=yes |no|1 |0 | 是否显示地址地段。黙认是yes |
status=yes | no|1| 0 | 是否添加状态栏。黙认是yes |
menubar=yes|no|1 |0 | 是否显示菜单栏。黙认是yes |
resizable=yes|no|1| 0 | 窗口是否可调节尺寸。黙认是yes |
titlebar=yes | no |1| 0 | 是否显示标题栏。黙认是yes |
fullscreen=yes|no|1|0 | 是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式 |
history对象 :
常用方法名称 | 说 明 |
---|---|
back() | 加载 history 对象列表中的前一个URL |
forward() | 加载 history 对象列表中的下一个URL |
go() | 加载 history 对象列表中的某个具体URL |
history.back() -------- history.go(-1) 后退
history.forward() -------- history.go(1) 前进
location对象 :
常用属性名称 | 说 明 |
---|---|
host | 设置或返回主机名和当前URL的端口号 |
hostname | 设置或返回当前URL的主机名 |
href | 设置或返回完整的URL |
常用方法名称 | 说 明 |
---|---|
reload() | 重新加载当前文档 |
replace() | 用新的文档替换当前文档 |
示例:
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
<a href="javascript:history.back()">返回主页面</a>
Document对象 :
常用属性名称 | 说 明 |
---|---|
referrer | 返回载入当前文档的URL |
URL | 返回当前文档的URL |
语法:
document.referrer
document.URL
常用方法 名称 | 说 明 |
---|---|
getElementById() | 返回对拥有指定id的第一个对象的引用 ( 对象的id唯一 ) |
getElementsByName() | 返回带有指定名称的对象的集合 ( 相同name属性 ) |
getElementsByTagName() | 返回带有指定标签名的对象的集合 ( 相同的元素 ) |
write() | 向文档写文本、HTML表达式或JavaScript代码 |
示例:
1、动态改变层、标签中的内容:
document.getElementById("book"). innerHTML="现象级全球畅销书";
2、访问相同name的元素
var aInput=document.getElementsByName("season");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" ";
}
document.getElementById("replace").innerHTML=sStr;
3、访问相同标签的元素
var aInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" ";
}
document.getElementById("replace").innerHTML=sStr;
补充提交表单的方法:
语法:document.表单名. submit();
JavaScript内置对象 :
- Array:用于在单独的变量名中存储一系列的值
- String:用于支持对字符串的处理
- Math:用于执行常用的数学任务,它包含了若干个数字常量和函数
- Date:用于操作日期和时间
Date对象:
语法: var 日期对象=new Date(参数)
参数格式:MM DD,YYYY,hh:mm:ss
常用方法 | 说 明 |
---|---|
getDate() | 返回 Date 对象的一个月中的每一天,其值介于1~31之间 |
getDay() | 返回 Date 对象的星期中的每一天,其值介于0~6之间 |
getHours() | 返回 Date 对象的小时数,其值介于0~23之间 |
getMinutes() | 返回 Date 对象的分钟数,其值介于0~59之间 |
getSeconds() | 返回 Date 对象的秒数,其值介于0~59之间 |
getMonth() | 返回 Date 对象的月份,其值介于0~11之间 |
getFullYear() | 返回 Date 对象的年份,其值为4位数 |
getTime() | 返回自某一时刻(1970年1月1日)以来的毫秒数 |
Math对象 :
常用方法 | 说 明 | 示例 |
---|---|---|
ceil() | 对数进行上舍入 | Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 |
floor() | 对数进行下舍入 | Math.floor(25.5);返回25 Math.floor(-25.5);返回-26 |
round() | 把数四舍五入为最接近的数 | Math.round(25.5);返回26 Math.round(-25.5);返回-26 |
random() | 返回0~1之间的随机数 | Math.random();例如:0.6273608814137365 该值大于等于0.0且小于1.0,不包括1.0,即取值范围是[0.0,1.0)的左闭右开区间 |
定时函数 :
1、setTimeout():
**语法:**setTimeout(“调用的函数”,等待的毫秒数)
var myTime=setTimeout("disptime() ", 1000 );
----(1秒(1000毫秒)之后执行函数disptime()一次)
2、setInterval() :
**语法:**setInterval(“调用的函数”,间隔的毫秒数)
var myTime=setInterval("disptime() ", 1000 );
----(每隔1秒(1000毫秒)执行函数disptime()一次)
3、clearTimeout():
**语法:**clearTimeout(setTimeOut()返回的ID值)
var myTime=setTimeout("disptime() ", 1000 );
clearTimeout(myTime);
4、clearInterval () :
**语法:**clearInterval(setInterval()返回的ID值)
var myTime=setInterval("disptime() ", 1000 );
clearInterval(myTime);
二、DOM(Document Object Model(文档对象模型) )
根据层次关系访问节点,使用getElement系列方法访问指定节点:
-
getElementById()
-
getElementsByName()
-
getElementsByTagName()
1、节点属性:
属性名称 | 描述 |
---|---|
parentNode | 返回节点的父节点 |
childNodes | 返回子节点集合,childNodes[i] |
firstChild | 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点 |
lastChild | 返回节点的最后一个子节点 |
nextSibling | 下一个节点 |
previousSibling | 上一个节点 |
查找每个 p 元素的所有类名为 “selected” 的所有同胞元素:
$("p").siblings(".selected")
2、element属性:
属性名称 | 描述 |
---|---|
firstElementChild | 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点 |
lastElementChild | 返回节点的最后一个子节点 |
nextElementSibling | 下一个节点 |
previousElementSibling | 上一个节点 |
示例:
oNext = oParent.nextElementSibling || oParent.nextSibling
oPre = oParent.previousElementSibling || oParent.previousSibling
oFirst = oParent. firstElementChild || oParent.firstChild
oLast = oParent.lastElementChild || oParent.lastChild
3、节点信息:
节点类型(nodeType) | 节点值(nodeType) |
---|---|
元素element | 1 |
属性attr | 2 |
文本text | 3 |
注释comments | 8 |
文档document | 9 |
节点操作:
1、操作节点的属性:
1、获得属性值:getAttribute("属性名")
2、设置属性值:setAttribute("属性名","属性值")
2、创建和插入节点:
名称 | 描述 |
---|---|
createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
A.appendChild( B ) | 把B节点追加至A节点的末尾 |
insertBefore( A , B ) | 把A节点插入到B节点之前 |
cloneNode(deep) | 复制某个指定的节点(true表示复制父节点中的自己和子节点;false表示只复制父节点,不复制子节点) |
3、删除和替换节点:
名称 | 描述 |
---|---|
removeChild( node ) | 删除指定的节点 |
replaceChild( newNode ,oldNode )属性attr | 用其他的节点替换指定的节点 |
示例:
var delNode=document.getElementById("first);
delNode.parentNode.removeChild(delNode); ---- 要通过父节点来删除子节点
var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);
4、操作节点样式:
名称 | 描述 |
---|---|
onclick | 当用户单击某个对象时调用事件 |
onmouseover | 鼠标移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
onmousedown | 鼠标按钮被按下 |
4.1、style属性:
**语法:**HTML元素.style.样式属性="值"
示例:
document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="25px ";
4.2、className属性 :
**语法:**HTML元素.className=“样式名称” (多个值的话用空格 隔开)
示例:
function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
}
function out(){
document.getElementById("cart").className="cartOut";
document.getElementById("cartList").className="cartListOut";
}
4.3、获取元素的样式 :
**语法:**HTML元素.style.样式属性;
示例:
alert(document.getElementById("cartList").display);
**语法:**document.defaultView.getComputedStyle(元素,null).属性;
示例:
var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);
**语法:**HTML元素. currentStyle.样式属性;
alert(document.getElementById("cartList").currentStyle.display);(兼容IE浏览器)
style、currentStyle、getComputedStyle的区别:
-
style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的。
-
currentStyle可以弥补style的不足,但是只适用于IE。
-
getComputedStyle同currentStyle作用相同,但是适用于FireFox、opera、safari、chrome。
-
**.html()😗*读取和修改一个元素的HTML内容
-
**.text():**读取和修改一个元素的文本内容
-
**.val():**读取和修改一个表单元素的value字段值
5、获取元素的样式
HTML中元素属性应用:
属性 | 描述 |
---|---|
offsetLeft | 返回当前元素左边界到它上级元素的左边界的距离,只读属性 |
offsetTop | 返回当前元素上边界到它上级元素的上边界的距离,只读属性 |
offsetHeight | 返回元素的高度 |
offsetWidth | 返回元素的宽度 |
offsetParent | 返回元素的偏移容器,即对最近的动态定位的包含元素的引用 |
scrollTop | 返回匹配元素的滚动条的垂直位置 |
scrollLeft | 返回匹配元素的滚动条的水平位置 |
clientWidth | 返回元素的可见宽度 |
clientHeight | 返回元素的可见高度 |
元素属性应用:
语法: document.documentElement.scrollTop;
document.documentElement.scrollLeft; ----标准浏览器( IE )
或者
document.body.scrollTop;
document.body.scrollLeft; ----Chrome或火狐
示例: