JavaScript学习笔记(3)
1.鼠标
onmousedown事件,鼠标按下时触发;
ondmouseup.鼠标抬起时触发;
这里onmousedown等事件其实是dom对象event的属性,event代表的就是事件的信息,
如果是绑定事件,可以直接用event的属性进行绑定,如果要读事件的信息,就需要手动调用event的属性;
也就是说各个元素的事件属性不是由window提供的,而是由event对象提供的(其实是手动添加了具体对象的事件属性,因为event是内置对象,所以它的属性就变成了关键字之类的东西,无论在哪可以自动识别,具体对象与event无继承关系)
如果在事件函数设置一个参数,浏览器就会把event对象传过来;
2.键盘
键盘事件一般绑定给可以获取焦点的对象或者document对象(只有当获取鼠标焦点时才会触发)
onkeydown
当down事件被连续触发时,第一次和第二次的时间较长,其他较快,是为了防止误操作;
在文本框中输入内容是其onkeydown的默认行为,如果取消了其默认行为,也就是return false后,就无法再去输入内容了;
如果在表单框中,
onkeyup
up事件不会连续触法,松开就是触发一次;
event有keycode属性,返回被按下键的编码;
此外还有ctrlkey.shiftkey,altkey等属性判断是否按下;
********************************************************************************************************************************************************
BOM对象(浏览器提供,有windows,navigator,history,location,而它们又都是window的属性,可以直接用也可以通过window调用)
3.Navigator(浏览器提供的,代表当前浏览器信息的对象)
appname返回浏览器名称不可用
useragent属性是浏览器相关信息,可以用正则表达式对其利用来判断浏览器;
但要是判断ie浏览器还是困难;
可以用window.ActiveXObjet方法来判断是否是ie浏览器(只有ie有,但ie11无效)
此时用in关键字"ActiveXObjet" in window来判断ie(自动返回真假);
4.History(代表浏览器的历史记录,只能向前或者向后翻页且只在当次访问时有效)
属性:length 当前已访问的网页
方法:back()跳到前一个页面
forward()跳到后一个页面
go()参数表示跳转的页面数,1表示前进1,-2表示回退2;
注意:前进后退操作的历史记录是按照访问该网站时的顺序来排的;
5.Location(代表当前浏览器地址栏信息的对象)
直接打印的话是当前网页的完整路径
也可以对其修改,这样它在修改完时会自动跳转网页并且修改路径
方法:assign()跳转到其他页面,和直接修改地址作用一样;
reload()用于重新加载页面,作用和手点刷新,如果传入true会变成强制清空缓存刷新
replace()用新页面代替原来页面,不会生成历史记录;
6.定时器(从属于window)
(1.)设置定时器:window方法setInterval(函数,时间单位ms),会返回定时器的编号,属于定时调用;
(2.)设置延时调用:window方法settimeout(函数,时间),会在一段时间后只调用一次,也会返回定时器编号;
(3.)clearInterval()传入定时器编号来清除定时器;
*****************************************************************************************************************************************************************************************
7.JSON(JS对象表示法)
基础数据所有语言都认识,但是JS的对象只有自己认识,其他语言不认识;
此时要把对象转换成字符串,
JSON就是一种特殊的字符串,这个字符串可以被任意语言识别,并且可以转换为其他语言的对象,JSON在开发中常用于数据交互;
JSON中允许的值有:字符串,数值,布尔值,null,对象,数组但是没有函数;
JSON对象的属性必须要加引号,且本身也要加引号,确保是字符串的类型;
JSON分类:1.对象"{}" 2.数组"[]"
将JSON格式对象转换为JS中的对象,
利用的是工具类叫JSON,这个对象既可以把对象转成JSON,也能把JSON转为对象;
*********************************************************************************************************************************************************************************************************************************************
(这里我想到了一个问题:究竟这工具类的方法和属性到底是调用的谁的,我手动实验了一下,函数是不能自己手动添加独自属于函数的属性和方法的,也就是说不能通过函数去调方法(除了一些系统设定好的属性方法),
函数内的方法多是this.xx=xxx,不是独属于自身的属性,而是给它的实例对象准备的属性;因此如果是要调方法的话,一般就是调用实例对象的方法(虽然起源是构造函数)
拿JSON这个工具类举例子,调用JSON的方法时,实际上是调用的JSON类的实例对象JSON(同名)的方法)
*********************************************************************************************************************************************************************************************************************************************
关于JSON的方法:
JSON.parse()将JSON字符串作为参数,会将该字符串改为JS对象;
JSON.stringify()将JS对象作为参数,会将该JS对象转换为JS字符串;
全局的方法eval()传入js代码字符串形式的参数,可以自动执行并且返回结果(如果传一个对象,带有{}则会被当成代码块,可以'({})'加一个括号来解决);
但eval因为太强大,具有安全隐患;
IE7及一下浏览器没有JSON操作,可以引入Json文件来处理;
(JSON主要是用于普通数据的交互,但没有涉及代码的交互(也就是函数),这一点在json没有函数分类和函数值的身上可以体现,老师的说法是函数只能js自己解析,不能用于交互;但js也提供了全局的方法eval来处理代码的交互)
这里提出一个观点:不同语言的代码是不共通的,只有普通数据共通;也就是说根本上函数无法在不同语言中传递;
8.类的操作
为了避免在js中修改样式时(内联),样式和行为相耦合,而且在js中通过style中修改样式,每修改一次就要重新渲染,性能较差也不方便;
可以通过修改类名来修改样式;
通过改变元素对象独有的classname属性来改变样式,
classname+=" "+新的类名,这样做的好处是一个元素有两个类名,相同的不会变,而不同的属性,后面会覆盖掉前面(相当于有几个类,就渲染了几遍)
但这样最好在前面加一个判断,看这个类名是否在里面,然后再加入,否则会出现类名重复的问题,浪费内存(可以用正则表达式);
如果要删除一个类名,可以用字符串的replace方法结合正则表达式;
至此可以设计出一个工具类 (hasclass,removeclass,addclass都是自己建的)
function toggleclass(obj,cn)
{
if(hasclass(obj,cn))
{remove class(obj,cn)}
else{addclass(obj,cn)}
}
