JavaScript DOM HTML CSS.docx

本文记载所有有关JavaScript、HTML、Dom、CSS的笔记，前半部分（HTML库标题之前）是JavaScript以及Dom，后半部分（HTML库标题之后）属于HTML库和CSS.JS基本语法：使用javascript的方式1. Java script像样式一样，声明在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中的forin语法时获取到的是数组的key信息而不是value信息。有的对象中，它的各种属性和方法以key的方式出现的时候，也可以使用这种方式来查看该对象中可以调用和使用的所有属性和方法。例如：6. 创建一个字典集合如下：（注意：是大括号）var set = “百度”:””,”新浪”:””如果这样写就是创建了一个长度为2的数组集合，数组中两个元素的key值分别为“百度”和“新浪”，其对应的值分别为“”和“”。我们可以这样引用它：var 第一个元素的值 = set“百度”;7. 用大括号制造的是key与value的集合，用中括号写的是value，key是0,1,2,3的数。8. join（分隔符）该方法由数组对象调用，用于将数组中的所有元素用分隔符分开制作一个完整的字符串。9.字符串拼接javascript中的字符串拼接同Java类似，支持加号连接。字符串转换为数字var num = 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类：var re = new RegExp(d5);双斜杠表示转义字符“”，“d”表示数字，后面大括号5表示五个数字。简写方式：var re = /d5/;/表达式是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开始的，利用这种方法，整个表达式不算做一个分组。例如对于如下语句：var s = ;var regex = /(.+)(.+)/;那么s.match(regex);将返回一个长度为3的数组，第0个元素为“”，第1个元素为“abc”，第2个元素为“”。也可调用RegExp.$1获取到“abc”，调用RegExp.$2获取到“”，但是调用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”)导向到一个新的页面。该方法在火狐浏览器中不被支持，在windows IE8 浏览器中支持。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代表当前页面的完整地址：例如其值可能是：“http:/localhost:55234/WebFormWinprop.aspx”。如果给该值赋值，则导致浏览器进行重定向。其用法和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空格3738394046Delete键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标签中就有如下调用：由于HTML页面是从上往下依次执行的，所以如果这几行代码放在开头的head标签中，将使得指向百度的该链接出现在网页最开始的地方。当然，在页面中的某个位置（不在head中）进行script的编写也是可以的，那时write方法写入的内容就会出现在那个位置。但是如果放在网页中具体某个元素的事件中进行调用的话，由于那时候整个页面都应该加载完，也就是说document已经将该写的都写完了，所以整个页面都将不见，只在页面最开始的地方出现write方法写上的内容，就像打开了一个空页面重新书写一样。所以只能在页面加载过程之中调用write方法。如果想在页面加载完毕后向网页中加载元素，应该使用下面的方法。5. createElement该方法要求一个字符串参数，参数的值是HTML的标签名字，例如“input”。该方法返回被创建的元素的引用，但是不直接添加到页面中，如需添加到页面中应使用下面的方法：appendChild（要添加的元素）该方法要求一个元素的引用即可，但是本方法并不属于document，HTML中的元素都可以调用这个方法，将元素添加到自身的最后，查看以下代码：该方法每次调用都会将一个按钮添加在body的最后面，根据appendChild方法的调用者不同，被添加的元素所在的位置也不一样。6. removeChild其用法与appendChild一致，用于删除具体的元素，被删除的元素将不再显示，也不在内存中驻留。该方法与上面的appendChild方法必须使用其上层元素对象来调用才有效果。 比如元素是加载在body中，那么必须首先获取body再调用appendChild或removeChild方法。2. document中的变量：1. 变量：title网页的标题。2. 变量：body网页的主体。获取到body以后可以使用body的如下变量：clientWidth：获取body在客户区的宽度。也叫offsetWidth。clientHeight：获取body在客户区的高度。也叫offsetHeight。注意以上值会根据窗口的变化而变化，并且当body过大时很有可能会超越客户区的宽度和高度。并且这两个值要比客户区域的长和宽要小一点。普通元素属性1. childNodes该变量为一个数组，存放所有子元素。2. parentNodes元素的父元素。3. getElementsByTagName在普通元素中也是具有的。4. appendChild向其下添加子元素。子元素默认在最后面。5. setAttribute（属性名字符串，属性值）该方法设置一个元素的某个属性为制定的值。该方法存在的主要原因在于有些元素的属性的名称在JavaScript属于关键字。比如label标签的for属性。如果想设置label标签的for属性不能使用【XXX.for=”value”】这种方式，应该调用该方法，其原因在于for在JavaScript是关键字。该方法还可以设置一个不存在的属性的值，这样该元素中就自动有了那个属性以及属性的值，该技巧可用于存放临时变量等。常用事件：鼠标事件：1. onclick鼠标在元素上单击事件。2. onmousedown鼠标按下未弹起。3. onmouseup鼠标按键释放。4. ondblclick双击事件5. onmousemove鼠标移动6. onmouseout鼠标离开元素范围。7. onmouseover鼠标移动到元素范围网页事件：1. onload网页加载完毕时触发。2. onunload网页关闭后触发。3. onbeforeunload网页将要关闭时触发。在这个事件中可以为window.event.returnValue赋值，当用户尝试关闭时会提示这些消息。但是这些消息的显式并不被火狐浏览器支持。4. onsubmitform表单中的内容将要提交时触发。5. oncopy鼠标选定了某些元素或文字之后右键点击复制时，或者用Ctrl+C进行复制时触发，可以直接给该事件return false表示复制不成功。也可设置window.event.returnValue=false使之不成功，二者的功能是一样的。6. onpaste粘贴事件。如果禁止粘贴不要忘记return false。7. onblur元素失去输入焦点。8. onfocus元素得到输入焦点。焦点的失去和获得往往是成对出现的，也就是说往往是一个元素失去了焦点，而同时另一个元素获取到了输入焦点。这两个事件中onblur先发生。9. onchange该事件常用语select标签，用于下拉列表项变换的时候触发。10.键盘事件：1. onkeydown按键按下消息。2. onkeypress按键被按下弹起事件。使用代码设置事件1. 文档加载完毕：window.onload2. 在文档内双击document.ondblclick3.使用代码触发事件以上事件都是由用户与浏览器的交互产生的事件，这些事件的产生也可以用代码产生。比如调用一个元素的click方法就能触发其点击事件。按钮实例代码：当点击后一个按钮时就会触发前一个按钮的点击事件，从而使得第一个的按钮的点击事件代码被执行。点击后一个按钮时，前一个按钮不会向后一个按钮一样被按下去。只是简单的触发事件。部分这样的对应关系（click方法和onclick事件）是相互联系的。但是也有毫不相关的。例如form表单的事件obsubmit就不会被submit方法触发。onsubmit事件只能通过submit按钮来触发。常用HTML元素的范例：1. 所有的元素都有id属性。几乎所有的元素都有innerText属性，表示其内的纯文本；几乎所有的元素都有innerHTML表示其内的HTML代码。我们可以动态的修改这样的值使其有不同的显式效果。例如有标签如下：如果调用document.getElementsById(“link1”).innerText则返回“大连交通大学”，如果调用document.getElementsById(“link1”).innerHTML则返回“大连交通大学”。值得注意的是，可以动态修改这些值，使其发生动态改变。innerText不被FireFox支持。在FireFox中该属性叫做textContent。2. form元素的onsubmit属性接收一个true或者false，如果是false就不会提交。写法是这样的。当使用getElementById等获取元素的方法获取了一个form的时候，就可以调用submit方法提交表单，但是这时候不会触发onsubmit事件。3. 1. 所有的input元素都有name，value和type属性。不定义的时候为空字符串。不为null，2. text可以调用value获取其值，什么都不填是空字符串，不为null。value可以使用.length求其长度。可以设置readonly=”readonly”使其文本为只读。3. 对于checkbox，radio类型可以使用checked检测是否被选中，将checked属性设置为true将使得复选框处于被选中状态。4. 对于button类型，可以设置disabled = true使其不可用。不可用的按钮不会产生onclick事件。4. 1. 可以调用方式设置其src属性就能使其变换图片。5. 1. 对于获取到的table对象可以调用appendChild向其内添加元素。2. insertRow（index）该方法要求一个数字索引参数，向表格中的指定位置动态的添加一行，并返回该行的引用。如果传递-1则默认添加到行的最后一行。返回的对象代表改行，可以调用insertCell（-1）添加下一个单元数据。注意：insertCell并不是table对象可以调用的的方法。该方法是被IE6支持的。6. JavaScript修改样式利用document.getElementById(id).class无法修改元素的类别，因为这时候的class属性并不是对应的HTML中的class。DOM中对应的为className，应该修改这个值才会成功改变元素的class属性。修改了className属性以后会导致元素重新加载，自动变成我们需要的样式。也可以修改元素的style属性来更改样式，如：btn.style.background=”red”;该行语句将修改元素btn的背景颜色为红色。要注意的是，css中的样式名称和JavaScript中的样式名称是不一样的，例如刚才的样式，其在CSS之中是background-color。不同的还有如下：CSSJavaScriptfont-sizefontSizemargin-topmarginTopbackground-colorbackgroundfloatstyleFloat7. 更改一个元素的显示大小可以使用样式之中的width和height。如果取一个元素的width和height的值，取到的是一个带单位的字符串，如：“12px”。使用的时候应该调用parseInt方法获取数字，parseInt的具体用法可参阅基础语法中的字符串转换为数字。类：1. Date类：方法toLocalString（）返回当前区域时间格式表示的时间。2. Array类：javascript中的数组类。具体查看数组一节。3. Object类：所有类的基类。4. RegExp正则表达式类，具体使用方法可参见正则表达式一节。5. String字符串类，封装了一些对字符串处理的方法。6.HTML库这些段落记载我所遇见的所有HTML标记。HTML中的注释超链接。设置href的值来确定超链接的地址。修饰一段文本，使其字体加粗。HTML中的换行。在HTML文本中只能通过br标签实现文本换行，不能使用n或者直接回车的方式。没有任何标签修饰的文本是无法换行的，而且多个空格会被解析成一个空格。即便人为输入回车键进行换行，也只是解析为一个小空格。元素表示一个层。该层内的文本默认不会在单词内部换行。font标签修饰一段文本，表示使该文本以某种字体显式。fieldset是一个组合框，他将一些空间整合到一起，并在周围用一个矩形实线圈起来，矩形实线的左上角是fieldset的标题。其效果如图：其代码如下：form标签表示一个表单常用子标签：这个标签是form标签中最重要的标签，它可以设置自己的type属性：type的值可以选择如下几种：1 text 表示一个文本框，只有一行，这是input默认的类型。2 password表示一个密码框，也是只有一行，但是回显字符是星号或者圆点。3 checkbox表示一个复选框。可以有多个复选框的名字（name属性）是同一个值，在提交时该属性也对应多个值。可以使checked=”checked”使其处于选中状态。4 radio表示单选按钮。当多个单选按钮的name属性一致时，最多只有一个单元按钮可以处于选中状态。5 file表示文件上传控件。具体操作方式有待进一步研究。6 submit表示提交按钮。7 reset重置当前表单到最初的状态。8 button普通的一个按钮。9 hidden表示该内容是隐藏的。select表示一个下拉列表。下拉列表中的每一项用内容来定义。select标签可以设置name值，却没有value值，而option子标签没有name属性，却有value值，二者嵌套使用，成为一个name-value对儿。可以放置于form标签中。select的事件为onchange。select的DOM对象有options属性，为该属性的length赋值为0将直接清空所有option。如果尝试删除其中一个option，该option的后续options会将被删除的位置填入。所以如果执行删除操作，应该从后往前删除。 尝试设置multiple = “multiple”或者设置size成一个大于1的数。将使其变成ListBox。只是multiple的情况下允许多选。这5个标签（从到）用来修饰一段文本，表示该文本是作为标题（Head）出现的，作为标题的文本加粗，字体加大。尾数越大，字体越小，加粗效果越不明显。1为最大。这5个标签所修饰的内容会另起一行来显示。在页面贯穿左右画出一道直线。表示一个图片其属性src表示该图片的地址。alt表示一个简短的描述信息该标签之中可以放置一段文本。其中的for属性很有用， for属性应该指定需要关联的其他元素的id值。如果在该label上点击，关联的元素便会一同获得焦点。常用于复选框的选择。该标签定义文本以新的一个段落开始。开头有锁紧，并且从前一行换行。该标签表示预定义格式，表示完全按照其内的文本进行显示，有多少空格就显示多少空格，有多少回车就显示多少回车。table标签表示一个可以设置边框的表格。属性border：边框的粗细，值为数字，0表示不显式边框，默认是0，数字越大边框越粗。子标签：:table row表示表格的一行开始。的子标签里是普通的表格单元数据属性：align表示文本的对齐方式。可选值有center、left、right、标题的单元数据，这里的字体加粗且在表格中居中显式。可选属性和一致。 Text Area表示一个多行多列的文本域。可以当作评论框。用下划线修饰文本。转义字符： 表示一个空格。CSS（注：文本内关键字均以紫色加粗，小四字体显式；示例代码为绿色加粗，并以三号Consolas字体显式，着重显式的内容用红色加粗显示）简介CSS的全称是Cascading Style Sheets（层叠样式表），这个样式表定义了HTML元素怎样去显示。CSS分为内部样式表和外部样式表两种，内部样式表和HTML文件写在一起，外部样式表写在一个单独的CSS文件之中。优先级同一个HTML中的元素，可以由多个样式去修饰它，样式表修改HTML元素的表现方式是有优先级的，从低到高分别是：1. 浏览器默认。2. 外部样式表。（CSS文件）3. 内部样式表。（在head标签内指定的）4. 行内样式。（在一个HTML元素内）选择器1. CSS的语法由三部分构成： 选择器，属性，和属性的值。基本形式为：Selector property: value选择器是你希望去定义的HTML标签的名字，每个属性可以有一个值，属性和值由冒号区分开，外面用大括号括起来。例如： Body color: black如果值为多个单词必须用双引号给该值引起来：p font-family: “sans serif”如果要指定多个“属性-值”对儿，则需用分号将每对儿隔开：p text-align: center; color: red还可以将选择器组合，用逗号分隔每个选择器的名字：h1, h2, h3, h4, h5 color: green2. 要求HTML使用样式的方法：1. 指定外部样式表，在标签内添加子标签，并指定以下属性：2. 指定内嵌样式表，在标签内添加子标签，并在关闭这个标签之前，写入自己定义的样式表。例如：样式表内容3. 行内样式表，在任意一个元素中指定style属性的值即可实现行内样式表，style属性的值用双引号引起来，替换以前的大括号。多个样式用分号隔开。4. 如果某个标签表经过2种以上的方式指定，则效果为组合效果，且优先级高的起作用。如果内部的没有，则取外部的，如果内部外部都有，则取内部的。3. 类（class属性）选择器：在HTML的每一个标签中，都可以指定class属性，属性的值可以任意的指定一个名称，表明该标签是属于某一个类别的。CSS的选择器除了可以指定特定的HTML标签的显示样式之外，还可以细粒度的指定每一个类别的显示样式。语法格式为：Selector.classproperty:value，例如p.right text-align: right该语法表示凡是指定了class的值为right的标签将使得文本居右对齐显式。也可以直接省略选择器的名称而使用（点类别）的格式指定样式。例如：.right text-align: right该语法表示凡是指定了class的值为right的任何标签将使得文本居右对齐显式。不要以数字为开头指定class属性的值，这在某些浏览器中不支持。4. ID选择器：在HTML的每一个标签中，都可以指定id属性。CSS的ID选择器将使得id值为某个特定值的标签的具有CSS表所定义的表现样式。句法格式为：#idproperty:value，例如：#green color: green但是HTML中id本来是用来唯一标志某个标签的，不应该使得多个标签具有同一个id值。但是这样不会出错。也可以像类选择器一样，前面加上标签名来使用，例如：p#green color: green表示凡是指定了id值为green的标签将使得文本的颜色为绿色。同class属性一样，id属性的值也不要以数字为开头。5. 通配符选择器星号表示匹配所有标签。故而*.red表示设置了class值为red的所有标签。6. 属性选择器属性选择器使用中括号表示，例如a.href表示设置了href属性的标签。a.hreftitle表示同时设置的href和title属性的标签。7. 伪类选择器这种选择器一般用于标签，也可以用于其它标签。a:link表示从来没有点击过的链接。a:visited表示已经访问过的链接。a:hover表示鼠标悬停在链接上。a:active表示鼠标在超链接上点击并未放开。8.CSS库以下样式的值，仅当其修饰的元素支持这些样式的时候才起作用，如果给不支持某些样式的元素设置那些样式，相当于没设置。 比如对于元素来说，他本身就不支持border-color和background-color样式，设置了也没有效果。1. background-image：指定背景图像：值为url(图像地址”)2. background-color：指定背景的颜色。3. border：统一设置边框，格式为宽度空格风格空格颜色。4. border-color：指定边框的颜色。5. border-style：指定边框的风格。可用的值有dotted（点）、solid（实线）、double（双线）等。6. border-width：边框的宽度单位为px，如可以设置20px。也有几个预定义值，如thin。7. color：文本的颜色值。可以为red，green，blue等颜色单词，也可以为井号#开头的六位十六进制数，代表红绿蓝。8. cursor：设置鼠标移动到元素上时，指针的样子。pointer（手的形状）help（带一个小问号的指针）9. display：HTML中的元素按摆放规则分为两种，一种叫做区块元素，另一种叫做内联元素。区块元素在一行只能显示一个，例如。而内联元素是指在一行能显示多个元素，例如。将元素设置成内联元素使用display:inline、设置成区块元素用display:block、设置成不显式可以用display:none。10. filter：设置过滤，值为颜色，表示将所有的色彩全部过滤为改色，比如哀悼日的灰白色，就可以给图片设置该值为Gray。11. float：设置元素的排布位置：从左往右排还是从右往左排：可取值为right或left。如果指定right就是显示在右边。12. font-size：指定文本字体的大小，值为数字，单位为pt13. font-variant：该属性为两个值可选，第一个是normal表示无变化，默认值；第二个值为small-caps，表示文本中的大写不变，小写字符改写成小字体的大写字母。14. ime-mode可设置为disabled，表示为禁用输入法，只能输入英文。15. left：该属性表示元素的左侧距离窗口左侧多少距离。值为像素，单位px。16. list-style-type：设置列表中的某一项前面的标识，默认为比如ul默认现实一个黑色实心圆。可用值：none（什么也不显式）17. margin：统一设置margin-right，margin-left等值。规定元素的上下左右间距。要注意，元素的该值不总是为0的，将其强制设置为0以后会有所变化。18. margin-left：设置元素的左间隙。当文本靠左对齐时左边缩进量，值为数字，单位为px像素，也可以不写px直接写数字。仅仅在文本靠左对齐时才有效。19. margin-right：设置元素的右间隙。当文本靠右对齐时右边缩进量，值为数字，单位为px像素，也可以不写px直接写数字。仅仅在文本靠右对齐时才有效。20. opacity：设置元素的透明度，取值范围为0.0-1.0。默认值为1，表示不透明。21. padding：统一设置内容与边框的空隙（统一了padding-top、padding-right，padding-bottom，padding-left）四个值按顺序输入，中间空格隔开，单位为px。如果只输入一个值表示为四个值赋相同的该值。22. position指元素的定位，其值有以下几种：static：无定位，显式在默认位置。absolute：绝对定位。一般情况下，设置了该值之后还要设置top和left的值，用于指定具体的位置，单位为px。如果设置的绝对定位，那么有可能元素的出现会覆盖掉之前的元素。fixed：相对于窗口的固定位置，不会随着浏览器的滚动而发生变化，IE6不支持。relative：相对元素默认位置的定位。23. text-align：指定文本的对齐方式，值可以为left靠左，right靠右，等对齐显示。24. text-transform：指定文本转换的方式，可用值有none不转换，lowercase小写，uppercase大写等。25. z-index：指定一个数字，该数字为层数（高层可覆盖低层）。该属性仅在有定位的元素上有效，例如设置了（position：absolute）的 元素。26. width设置元素的宽度27. height设置元素的高度28. line-height设置元素的行间距。29. background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。可选值为scroll或fixed。不解释。30. overflow该属性定义当元素内的内容过多而超过元素的宽度和高度时所使用的策略，可用值为scroll，始终显示滚动条；hidden，超出内容会被修剪，并且其余内容是不可见的；visible，内容不会被修剪，会呈现在元素之外。auto，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。JQueryJQuery用于解决不同浏览器上DOM不一致性问题，无法解决CSS的不一致性。JQuery的使用JQuery的语法1. 通过选择器将HTML中的元素转换为JQuery对象：A. 通过id选择该方式取得id的值为login的HTML元素的Jquery对象。相当于JavaScript中的getElementById(“login”);也可以首先通过Dom的方法获取元素，然后再将该元素转换为Jquery对象：B. 通过标签名选择$(tagName)这样的写法会获取到所有的标签名为“tagName”的Jquery对象。相当于getElementsByTagName。对该元素的操作会隐式的影响所有标签名为“tagName”的HTML对象。C. 通过class选择$(.className)区别于其他选择器，class选择器在参数中追加了点（.）。用于选择class的值为指定值的所有元素。D. 多条件选择多条件选择是指在括号中加入多个选择条件，凡是符合一项即被选择。例如如下语句：表示，选择所有的p标签、所有的div标签，以及所有的class的值为menuitem的span标签。E. 层次选择器（全部子元素）层次选择器用于选择在某层之下的某某元素。例如： $(div li)表示获取div下的所有li元素。经过测试发现，该选择器会选择出所有的div元素下的所有的li元素，但是，如果调用html()方法查看HTML代码时，则只返回第一个div元素下的第一个li元素中的HTML。但是调用html()方法设置其内容时，则对所有div中的li元素有效。或者使用：$(div *)将选择其下所有的元素。F. 层次选择器（直接子元素）还是以上面的代码为例。将之改变为： $(div li)则表示尝试获取获取div下的所有li子元素。该li子元素必须与div元素属于直接父子关系，否则获取不到。而对于不加大于号的层次选择器，则没有这一条限制规则。“注意：本选择器中，div和大于号，大于号和li之间都有一个空格，该空格不可以缺少。”这句话是教程中说的，在IE8中测试，发现加或不加都可以。G. 层次原则器（平行，首个）$(A + B)该选择器用于选择出现在指定元素A之后的第一个B元素。这两个元素必须为同一阶级。否则选择不到。$(div + p)该语句会选择出所有div后续的第一个p元素。所以若是有不止一个div元素，则选择到的也不止一个。H. 层次原则器（平行，全部）$(A B)该选择器用于选择出现在指定元素A之后的所有B元素。这两个元素必须为同一阶级。否则选择不到。I. 基本过滤选择器废话不多直接正文：1. $(div:first).css(background,red);选择第一个div元素，没有second选项。2. $(div:last).css(background,red);选择最后一个div元素。3. $(div:not(.div1).css(background,red);选择div当中，class属性值不为div1的元素。4. $(div:even).css(background,red);even的意思是偶数，但是选择器获取的元素是从0开始的，所以就选择第0个，第2个，第4个。从表面上看来确实选择了第一个，第三个，第五个。5. $(div:odd).css(background,red);odd的意思是奇数，但是选择器获取的元素是从0开始的，所以就选择第1个，第3个，第5个。从表面上看来确实选择了第二个，第四个，第六个。6. $(div:eq(2).css(background,red);选取角标等于（equal）2的div元素。但是选择器获取的元素是从0开始的，所以就选择了第三个。7. $(div:gt(1).css(background,red);选取角标大于（greater than）1的div元素。8. $(div:lt(1).css(background,red);选取角标小于（less than）1的div元素。9.这些基本过滤器都可以相互组合比如选择大于0的奇数就可以这样写【$(div:gt(0):odd).css(background,red);】非常的高科技啊！J. 相对选择器相对选择器是指选取的元素在指定的位置之内。比如：【$(ul, $(#div)】将选取在id为div的元素内的ul元素。K. 属性过滤选择器该选择器是指选择出定义了某