JavaScript DOM HTML CSS

本文记载所有有关JavaScript、HTML、Dom、CSS的笔记，前半部分（HTML库标题之前）是JavaScript以及Dom，后半部分（HTML库标题之后）属于HTML库和CSS.JS基本语法：使用javascript的方式1.Javascript像样式一样，声明在head标签中其实定义在任何一个位置都可以，只有HTML页面执行到那个位置时才执行。2.引用外部js文件：函数及变量定义1.定义函数：function函数名字（参数）{}2.定义变量：var变量名，页面中某个元素的name值中可以有破折线（-），但是变量名中不可有破折线。这句话的意思是获取id的值为username的元素（不是元素上的值）。可以调用username.value来取得上面的文本。3.javascript中的变量严格区分大小写。数组与字典1.javascript中的数组是Array类。声明一个数组用如下的语法：2.javascript中数组的长度是不受限制的，声明的上述names数组变量以后可以以如下方式添加元素：3.声明数组的简化方式：4.数组有属性length表示数组的长度。5.使用javascript中的for……in语法时获取到的是数组的key信息而不是value信息。有的对象中，它的各种属性和方法以key的方式出现的时候，也可以使用这种方式来查看该对象中可以调用和使用的所有属性和方法。例如：6.创建一个字典集合如下：（注意：是大括号）varset={“百度”:””,”新浪”:””}如果这样写就是创建了一个长度为2的数组集合，数组中两个元素的key值分别为“百度”和“新浪”，其对应的值分别为“”和“”。我们可以这样引用它：var第一个元素的值=set[“百度”];7.用大括号制造的是key与value的集合，用中括号写的是value，key是0,1,2,3的数。8.join（分隔符）该方法由数组对象调用，用于将数组中的所有元素用分隔符分开制作一个完整的字符串。9.字符串拼接javascript中的字符串拼接同Java类似，支持加号连接。字符串转换为数字varnum=parseInt(“待转化的字符串”,进制数);比如将字符串“123”转换成10进制数这样写：num=parseInt(“123”,10);该方法尽最大可能将字符串转化为数字，意思是说，如果给定的字符串不全为数字也能成功转化。for循环javascript中的for循环同java以及c#一样分为两种，一种传统模式：另一种是in模式：这种模式会取到radios当中的key值而不是value值，所以如果遍历某个对象，不应该使用这种方式，例如遍历一个数组，得到的结果就是0,1,2,3的值，主要就是因为这种for循环取得的是对象的key值。this关键字this关键字指代发生事件的元素，只能在事件语句中使用，不可以在调用函数中使用。相当于window.event.srcElement。但二者并不完全一致，这主要体现在事件冒泡之中，事件冒泡中，子元素触发的事件能使得父元素也触发事件，比如点击事件。这时候如果是子元素触发的事件，在父元素中使用srcElement会得到子元素，但是在父元素中使用this就是undefined。正则表达式创建一个正则表达式用RegExp类：varre=newRegExp(\\d{5});双斜杠表示转义字符“\”，“\d”表示数字，后面大括号5表示五个数字。简写方式：varre=/\d{5}/;/表达式是JavaScript专门为简化正则表达式编写而提供的语法，写在/表达式/中的正则表达式就不用管转义字符了。符号含义/表示正则表达式开始（表达式结束时也应该加一个该符号）\d数字\D任何一个非数字字符\s任何空白，空格，制表符，换页符。\S任何一个非上述字符\w任何一个字母，数字，下划线\W任何一个非字母，数字，下划线i(结束后)表示不区分大小写g(结束后)表示正则表达式进行全文匹配。{数字A}表示必须匹配A次{数字A,}表示至少匹配A次{数字A,数字B}表示最少出现A次，最多出现B次。.代表任意的字符+一个或多个字符*零个或多个字符?匹配零个或一个()括号中包含一些元素，用于匹配分组。^(6上面)表示开头。$表示结束位置。正则表达式变量可调用的方法：1.test(str);该方法返回true或者false，来判断某个字符窜是否符合正则表达式。2.exec(str);对字符串进行匹配搜索，返回值为匹配的组。与上述表格中的括号（），一同使用。整个表达式也相当于一个分组。3.compile编译表达式，提高运行速度。字符串类String，也封装了一些对正则表达式的操作。1.match（正则表达式）该方法返回本字符串中匹配正则表达式的所有组。分组的用括号表示。整个表达式也相当于一个分组。通过match和exec方法都能获取匹配的所有组，因为这两个方法都返回数组。也可以使用RegExp.$1的方式获取第一个组，然后RegExp.$2获取第二个组。美刀符号是从1开始的，利用这种方法，整个表达式不算做一个分组。例如对于如下语句：vars=[e-mail];varregex=/(.+)@(.+)/;那么s.match(regex);将返回一个长度为3的数组，第0个元素为“[e-mail]”，第1个元素为“abc”，第2个元素为“qq.com”。也可调用RegExp.$1获取到“abc”，调用RegExp.$2获取到“qq.com”，但是调用RegExp.$0将得到undefined。这是一种非常奇怪的语法。2.replace（字符串1，字符串2）该方法用于将出现字符串1的地方替换为字符串2。其中字符串1的位置也可以写入正则表达式。3.charCodeAt（index）取字符串中某个位置的字符的ASCII码。常用对象：window1.window对象常用方法：window对象的方法均可以省略window关键字。1.alert（字符串）弹出一个警告框。2.confirm(字符串)弹出一个对话框，对话框中有确认和取消两个按钮，如果点击确认则返回true，如果点击取消则返回false。3.navigate(“url”)导向到一个新的页面。该方法在火狐浏览器中不被支持，在windowsIE8浏览器中支持。4.setInterval（“被调用的方法或者代码”，时间间隔）该函数每隔指定的时间执行指定的代码。返回值为定时器的标识（ID）。注意被指定的代码是字符串格式。也可以写一个匿名或非匿名函数。注意，该方法每次调用都将产生一个新的定时器。5.clearInterval（定时器的ID）取消setInterval的定时执行。6.setTimeout（“被调用的方法或者代码”，时间间隔）该方法也是定时指定，但只是执行一次。7.clearTimeout（定时器的ID）清除定时，使用方法同clearInterval函数。window对象的属性：1.innerHeight浏览器客户区域的高2.innerWidth浏览器客户区域的宽3.screenLeft客户区左上角的屏幕坐标X（相对于整个屏幕）4.screenTop客户区左上角的屏幕坐标Y（相对于整个屏幕）5.window.clipboardDataclipbordData代表剪切板。剪切板中有如下几个常用方法：1.setData（“text”，“被设定的值”）该方法的第一个值必须是“text”。方法调用之后就可以使用粘贴功能将本函数的第二个参数的值粘贴出来。text本身大小写皆可。2.clearData（“text”）清空剪切板。3.getData（“text”）得到剪切板的值。window.location1.方法：1.location.reload()刷新本页面。2.属性：1.href代表当前页面的完整地址：例如其值可能是：“”。如果给该值赋值，则导致浏览器进行重定向。其用法和navigate方法类似，但是navigate不被火狐支持，而通过修改该值进行重定向在火狐中是可以的。经过测试，在IE8中也是可以的。window.event该对象为所有事件的描述对象，当事件发生时在这个对象中查找事件参数。但是该对象并不被火狐支持。1.属性：1.altKey布尔类型，指示发生事件时alt键是否按下。2.ctrlKey布尔类型，指示发生事件时ctrl键是否按下。3.shiftKey布尔类型，指示发生事件时shift键是否按下。4.clientX，clientY发生事件时鼠标在客户区的X和Y坐标。（无论事件是否由鼠标触发）5.screenX，screenY发生事件时鼠标在屏幕上的坐标。但是，如果不是由鼠标点击触发的本事件，则这两个值一直为客户区域左上角在整个屏幕上的坐标。6.offsetX，offsetY发生事件时鼠标相对于事件源左上角的偏移量。7.srcElement表示发生事件的源。该属性仅仅在IE中有效，在FireFox中叫做target。8.returnValue设置为false则阻止事件的进一步执行。9.keyCode表示发生onKeyDown事件时的键位码，键位码同ASCII码不完全一致（小键盘的数字键和主键盘的数字键键位码不一样），键位码不与Shift，Alt键的状态有关，下面是对照表：KeyCode表示的按键8退格键9Table键13回车（主小一致）16左右Shift17左右Ctrl18左右Alt32空格37←38↑39→40↓46Delete键48-57主键盘区数字0-965-90A-Z键96-105小键盘区数字0-9106小键盘区乘号*107小键盘区加号+109小键盘区减号-110小键盘区小数点111小键盘区除号/188逗号189主键盘区减号-191问号，反斜杠190主键盘区小数点键位码替换：可以动态的给keyCode的值赋值，用来欺骗计算机，比如可以把13（回车键）替换为9（Table键），用以实现敲击回车的时候也实现Table功能。但是并不是所有的按键都支持键位码替换，只有少数的键位码支持替换，大部分不行，有权限问题。window.screen1.属性：1.width显示器的横向分辨率。2.height显示器的纵向分辨率。window.history利用该对象可以实现浏览器的前进后退操作。方法：1.back（）使浏览器后退。2.forward（）使浏览器前进。3.go(数字)go（-1）到前一个页面；go（1）到后一个页面。这两种调用就相当于back和forward方法。当然也可以使用go（-2）使其后退两个页面。document1.document中的方法：1.getElementById指定id参数，返回具体某个元素。2.getElementsByName指定name参数，返回一个元素数组。数组像java中的一样，也有length属性。这个方法同上一个方法相差一个s。3.getElementsByTagName指定tagname参数，返回指定标签名字的元素。其实以上三个方法在所有的DOM元素中都存在，只不过document是对应的全部的页面，如果在单一的元素中调用这些方法，则只会取到其下的元素，不会超出自身的范围。4.write和writeLine这两个方法向网页中写入内容，例如在script标签中就有如下调用：5.createElement该方法要求一个字符串参数，参数的值是HTML的标签名字，例如“input”。该方法返回被创建的元素的引用，但是不直接添加到页面中，如需添加到页面中应使用下面的方法：appendChild（要添加的元素）该方法要求一个元素的引用即可，但是本方法并不属于document，HTML中的元素都可以调用这个方法，将元素添加到自身的最后，查看以下代