目录
-
js控制css
// 语法:
元素.style.样式名 = 样式值
-
注意:在CSS中的样式名如果含有“-”,则这种名称在JS中是不合法的。则这种名称需要修改为驼峰命名法(即去掉减号,把减号后的第一个字母改大写)
-
通过style属性设置的样式都说内联样式,而内联样式有较高的优先级,所以通过js修改的样式往往都会立即显示。但是如果在样式中写了!important,则此时样式会具有最高优先级,即使是通过js也不能进行覆盖,此时将会导致js样式失效。所以尽量不要使用!important
-
通过style属性只能读取内联样式,无法读取样式表中的样式
// 获取元素的当前显示的样式
元素.currenStyle.样式名
-
注意:currenStyle只有IE浏览器支持=
// getComputedStyle()语法
两个参数:
1、要获取样式的元素
2、可以传递一个伪元素,一般都是传null
var timer = setInterval(function(){
console.log(num++);
}, 100);
clearInterval()函数关闭一个定时器
clearInterval(timer);
setTimeout()函数延时调用
setTimeout(function(){
console.log(num++);
},3000);
-
在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式
-
getComputedStyle()是window的方法,可以直接使用
-
两个参数:
-
要获取样式的元素
-
可以传递一个伪元素,一般都是传null
-
-
该方法会返回一个对象,对象中封装了当前元素对应的样式
-
可以通过“对象.样式名”来读取样式
-
如果获取的样式没有设置值,则会获取到真实的值,而不是默认值。比如:没有设置width,它不会获取到auto,而是一个长度
-
注意:不支持IE8及以下的浏览器
-
// 定义一个函数,用来获取指定元素的当前样式 // 参数:1、obj:要获取样式的元素;2、name:要获取的样式名 function getStyle(obj, name){ if(getComputedStyle){ return getComputedStyle(obj, null)[name]; }else{ return obj.currentStyle[name]; } }
-
其他样式相关属性
-
我跳了……(110P)
-
-
事件的冒泡
-
指定的是事件向上传导,当后代元素上的事件被接触时,其祖先元素的相同事件也会被触发
-
取消冒泡:将事件对象的cancelBubble属性设置为true即可取消冒泡
-
-
事件的委派
-
事件的委派指的是将事件统一绑定给元素的共同祖先元素,这样后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件
-
利用了事件的冒泡,通过委派可以减少绑定的次数,提高性能
-
-
绑定多个响应函数
-
单个:“对象.事件 = 函数”单个
-
使用对象.事件 = 函数的形式绑定响应函数,只能同时为一个元素绑定一个响应函数
-
不能绑定多个,绑定多个时,最后一个会把前面的覆盖
-
-
多个:addEventListener()方法
-
通过这个方法可以为元素绑定多个响应函数
-
参数
-
事件的名称(字符串,不要on,如onclick写click即可)
-
回调函数,当事件出发时该函数会被调用
-
是否在捕获阶段触发事件,需要一个布尔值,一般传false
-
-
false时,先绑定先执行;true时,先绑定后执行
-
this是绑定事件的对象
-
不支持IE8及以下浏览器
-
-
-
多个:attachEvent()函数绑定
-
后绑定先执行
-
在IE8及以下中使用
-
this是window
-
参数:
-
事件名称,需要on
-
回调函数
-
-
btn01.attachEvent("onclick", function(){ alert(1); });
-
兼容所有浏览器的版本
-
参数:
-
obj:要绑定事件的对象
-
eventStr:事件的名称,字符串,不要on
-
callback:回调函数
-
-
-
function bind(obj, eventStr, callback){ if(obj.addEventListener){ obj.addEventListener(eventStr, callback, false); }else{ obj.attachEvent("on" + eventStr, function(){ // 匿名函数中调用回调函数 // 下面的方法可以把this从window改为调用对象 callback.call(obj); }); } }
-
事件的传播
-
三个阶段:
-
捕获阶段:
-
在捕获阶段时从最外层的祖先元素向目标元素进行事件的捕获,但是默认此时不会触发事件
-
IE8及以下,没有捕获阶段
-
-
目标阶段:
-
事件捕获到目标,捕获结束开始在目标元素上触发
-
-
冒泡阶段:
-
事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
-
-
-
-
-
滚轮事件
-
onmousewheel鼠标滚轮滚动事件
-
event.wheelDelta 判断滚轮滚动的方向(正值是向上,负值是向下)
-
滚轮滚动时,如果浏览器的滚条随之滚动,这是浏览器的默认行为,可以通过return false来取消默认行为
-
-
键盘事件
-
键盘事件:
-
onkeydown:按键被按下,按下不放时事件会连续触发。连续触发时,第一次后会停顿一下,之后会很快执行下一次
-
onkeyup:按键被松开
-
-
键盘事件一般会绑定给一些可以获取到焦点的对象,或者是document
-
四个属性:
-
keyCode属性
-
可以通过keyCode属性来获取按键的编码,可以判断是哪个按键(注意:使用英文输入法,中文会一直是229)
-
-
altkey
-
ctrlkey
-
shiftkey
-
这三个属性用来判断alt、ctrl、shift是否被按下,按下返回true,否则返回false
-
-
-
浏览器对象模型BOM
-
BOM可以是我们通过JS来操作浏览器
-
BOM对象:
-
window:
-
代表整个浏览器的窗口,同时也是网页中的全局对象
-
-
Navigator:
-
代表当前浏览器的信息,通过该对象可以识别不同的浏览器
-
-
Location:
-
代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
-
直接打印location会打印出当前页面的完整路径
-
直接修改location属性的值为一个完整的路径,则页面会自动跳转到该路径,并生成相应的历史记录
-
assign()方法:用来跳转到其他页面,效果个直接修改location的值一样
-
reload()方法:刷新,重新加载当前页面
-
传入true时,会强制清空缓存刷新页面
-
-
replace()方法:使用一个新页面替换当前页面,不会生成历史记录
-
-
History
-
代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
-
由于隐私问题,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,而且该操作只在当次访问有效
-
lenght属性:可以获取当前访问的链接数量
-
back()方法:可以用来回退到是一个页面
-
forward()方法:可以用来跳转到下一个页面
-
go():可以跳转到指定的页面,需要一个整数作为参数
-
0是当前页面
-
正数是向前跳转n个页面
-
负数是向后跳转n个页面
-
-
-
Screen
-
代表用户的屏幕信息,通过该对象可以获取到用户的显示器的相关信息
-
-
-
-
定时器
-
setInterval()函数开启定时器
-
定时调用,每隔一段时间调用一次函数
-
参数:
-
回调函数,该函数会每隔一段时间被调用一次;
-
每次调用间隔的时间,单位是毫秒
-
-
返回值:
-
返回一个Number类型的数据,该数据作为该定时器的唯一标识
-
-
-
-
-
clearInterval(计时器标识)用来关闭一个定时器
-
可以接受任意标识符,如果是有效定时器则停止,如果不是则没有效果
-
-
-
延长一段时间之后再调用函数执行,只执行一次
-