JS学习笔记(九)
JS学习笔记(九)
存档P110和window的一系列函数。
文章目录
一、BOM对象
BOM - browser object model 浏览器对象模型
BOM提供了一组对象,可以使我们通过JS来操作浏览器。
如下这些BOM对象在浏览器中都是作为window对象的属性保存的,可以通过window对象来使用,也可以直接使用。
console.log(window.navigator);
console.log(location);
console.log(history);
1.window
window代表的是整个浏览器的窗口,同时window也是网页中的全局对象。
2.navigator
代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器。
var ua = navigator.userAgent;
console.log(ua);
if(/firefox/i.test(ua)){
alert("你是火狐!!!");
}else if(/chrome/i.test(ua)){
alert("你是Chrome");
}else if(/msie/i.test(ua)){
alert("你是IE浏览器~~~");
}else if("ActiveXObject" in window){
alert("你是IE11,枪毙了你~~~");
}
如果通过UserAgent不能判断IE11,还可以通过一些浏览器中特有的对象,来判断浏览器的信息,比如:ActiveXObject。
if("ActiveXObject" in window){
alert("你是IE,我已经抓住你了~~~");
}else{
alert("你不是IE~~~");
}
3.location
封装了当前浏览器的地址栏信息。通过Location可以获取地址栏信息,或者操作浏览器跳转页面
- 直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)
alert(location);
- 直接将location属性修改为一个完整的路径/相对路径,页面会自动跳转到该路径,并且会生成相应的历史记录。
location = "http://www.baidu.com";
location = "01.BOM.html";
- location.assign() 跳转到其他的页面,作用和直接修改location一样
location.assign("http://www.baidu.com");
-
location.reload() 重新加载当前页面,作用和刷新按钮一样
如果在方法中传递一个true,作为参数,则会强制清空缓存刷新页面 -
location.replace() 使用一个新的页面替换当前页面,调用完毕也会跳转页面;不会生成历史记录,不能使用回退按钮回退。
4.history
代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录。
- 由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页。
- 该操作只在当次访问时有效。
- 属性 length history.length可以获取到当成访问的链接数量
- 方法 back() history.back()回退到上一个页面,作用和浏览器的回退按钮一样
- 方法 forward() history.forward()跳转下一个页面,作用和浏览器的前进按钮一样
- 方法 go() history.go()需要一个整数作为参数,用来跳转到指定的页面;正数向前跳转,负数向后回退。
5.screen
代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息。
二、元素样式
1.通过JS修改元素样式
- 语法: 元素.style.样式名 = 样式值
注意:
- 如果CSS的样式名中含有-,这种名称在JS中是不合法的比如background-color
需要将这种样式名修改为驼峰命名法,去掉-,然后将-后的字母大写。 - 我们通过style属性设置的样式都是内联样式,而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示。
- 如果在样式中写了**!important**,则此时样式会有最高的优先级,即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效,所以尽量不要为样式添加!important。
2.通过JS读取元素内联样式
- 语法: 元素.style.样式名
- 通过style属性设置和读取的都是内联样式,无法读取样式表中的样式。
3.通过JS读取元素非内联样式
- 在IE浏览器中 获取元素当前显示的样式 语法:元素.currentSyle.样式名。
- 在其他浏览器,但不包括E8及以下的浏览器 ,可以使用**getComputedStyle()**方法来获取元素当前的样式。**getComputedStyle()**方法需要两个参数 第一个:要获取样式的元素 第二个:可以传递一个伪元素,一般都传null。该方法会返回一个对象,对象中封装了当前元素对应的样式,可以通过对象.样式名来读取样式。(建议使用)
- currentStyle只有IE浏览器支持,其他的浏览器都不支持。
- currentStyle方法读取元素样式,如果获取的样式没有设置,会获取它的默认值。。
- getComputedStyle()方法来获取元素当前的样式,是window的方法,可以直接使用。
- getComputedStyle()方法读取元素样式,如果获取的样式没有设置,则会获取到真实的值,而不是默认值。比如:没有设置width,它不会获取到auto,而是一个长度。
alert(box1.cuurentStyle.width); //auto 默认
var obj = getComputedStyle(box1,null);
alert(getComputedStyle(obj.width);//1350px 真实长度
alert(getComputedStyle(box1,null).backgroundColor);
- 通过currentStyle和getComputedStyle()读取到的样式都是只读的,不能修改,如果要修改必须通过style属性
/*
* 定义一个函数,用来获取指定元素的当前的样式
* 参数:
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj , name){
//getComputedStyle是一个函数,也是对象。
// 变量没找到-报错 属性没找到-返回undefined
//变量没找到,影响if语句执行,报错。因此加window
if(window.getComputedStyle){
//正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE8的方式,没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
4.其他样式属性(开发常用 没看 结合CSS看)
- clientWidth,clientHeigh 元素的可见宽度和高度
- 这些属性都是不带px的,返回都是一个数字,可以直接进行计算。
- 会获取元素宽度和高度,包括内容区和内边距。
- 只读。
- offsetWidth offsetHeight 元素的整个的宽度和高度,包括内容区、内边距和边框
- offsetParent 获取当前元素的定位父元素
- 获取到离当前元素最近的开启了定位的祖先元素。如果所有的祖先元素都没有开启定位,则返回body
- offsetLeft 当前元素相对于其定位父元素的水平偏移量
- offsetTop 当前元素相对于其定位父元素的垂直偏移量
- scrollWidth scrollHeight 获取元素整个滚动区域的宽度和高度
- scrollLeft 可以获取水平滚动条滚动的距离
- scrollTop 可以获取垂直滚动条滚动的距离
三、事件
1.事件对象(event)
当事件的响应函数被触发时,浏览器每次都会将一个事件对象(event)作为实参传递进响应函数,在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向等等。
- 在IE8中,响应函数被处罚时,浏览器不会传递事件对象。在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的,即window.event.clientX,Chrome也是这种方式。
areaDiv.onmousemove = function(event){
var x = window.event.clientX;
console.log(x);
};
2.事件的冒泡(Bubble)
所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发。
在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
var s1 = document.getElementById("s1");
s1.onclick = function(event){
event = event || window.event;
alert("我是span的单击响应函数");
//取消冒泡
//可以将事件对象的cancelBubble设置为true,即可取消冒泡
event.cancelBubble = true;
};
3.事件的委派
事件的委派指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能。
- target
event.target,event中的target表示的触发事件的对象
4.事件的绑定
- 使用 对象.事件 = 函数 的形式绑定响应函数,
它只能同时为一个元素的一个事件绑定仅一个响应函数,不能绑定多个,如果绑定了多个,则后边会覆盖掉前边的。
- 对象.addEventListener( ) 注:不支持IE8及以下的浏览器
- 参数:
1.事件的字符串,不要on,例如"click"。
2.回调函数,当事件触发时该函数会被调用。
3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false。
例如:
btn01.addEventListener("click", function(){ alert(1);}, false);
- 对象.attachEvent() 后绑定先执行,执行顺序和addEventListener()相反
- 参数:
1.事件的字符串,要on
2.回调函数
例如:
btn01.attachEvent("onclick", function(){ alert(2); } );
5.事件的传播
关于事件的传播网景公司和微软公司有不同的理解。
微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,然后在向内传播给后代元素。
W3C综合了两个公司的方案,将事件传播分成了三个阶段。
1.捕获阶段
在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件。
2.目标阶段
事件捕获到目标元素,捕获结束开始在目标元素上触发事件。
3.冒泡阶段
事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件。
如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true,一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false。
四、事件函数举例
1.鼠标操作相关事件
例如:
拖拽元素的拖拽的流程:
1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
2.键盘操作相关事件
- 可以通过keyCode来获取按键的编码,通过它可以判断哪个按键被按下。altKey,ctrlKey,shiftKey,这个三个用来判断alt、ctrl 、shift是否被按下 如果按下则返回true,否则返回false。
1.onkeydown 按键被按下
- 对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发。
- 当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常的快,这种设计是为了防止误操作的发生。
2.onkeyup 按键被松开
- 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。
3.鼠标滚轴事件
onMouseWheel 待查
六、系统对话框
1.alert()
2.confirm()
confirm弹出的对话框有一个确认和取消按钮。用户可以通过按钮来确认是否执行操作。
- 函数的执行会返回一个布尔值,如果选择确定则返回true,如果点击取消则返回false。
var res = confirm("确认删除?");
if(res == true)
tr.parentNode.removeChild(tr);