Js结束，项目进行中

在上周我们结束了对js的学习，现在开始理解对象的概念，什么是面向对象编程，我们在做这个项目的过程中慢慢学习，Js需要我们掌握的东西，知识点也是很多的。

下面这些就是HTML+CSS+JS 需要我们掌握的重点内容...

Html 超文本标记 网页内容 块级元素：要自动换行 有哪些：div、p、h1-h6、table、ul ol dl、pre、form、hr、iframe 内嵌元素：不换行 有哪些：span、a、img、lable、input、select、textarea 常用的元素属性:id、name、class、style。 input---type的值:text、password、button、submit、reset、image、checkbox、radio html和xhtml：规范 标签规范 html :<input type=text> xhtml:<input type="text"/>

CSS 层叠样式表 网页样式美化 如何引入到html: 外联、内嵌、内联： 优先级从高到低 -----内联（元素属性中style）> -----内嵌（head标签里style标签）> -----外联（.css文件通过link方式引入） CSS组成 选择器、属性、值。 选择器：选择如何对元素进行样式美化 常规分为3种：id、类、元素 优先级：id>类>元素  所有CSS中最高优先:!important

其他的选择器： 伪元素伪类选择器(:hover、:active、:focus)、 后代(选择器 选择器)、 属性(选择器[属性=属性值])、 并集(选择器，选择器，选择器) 交集(元素选择器.类选择器   元素选择器#id选择器)。

常用的属性： 字体：font---fontsize、fontfamily、fontweight、fontstyle 文本：text---textdecoration、textalign、textindent、wordwrap、 lineheight（上下居中 时 设置值为height） 背景：background--backgroundcolor、backgroundimage、**position、**repeat、 边框：border--**width、**color、**style 布局：  定位: position：absolute、relative、fixed、static  边距：外(margin)：元素和元素之间距离  可以为负   margin:上 右 下 左（4个）、上 左右 下（3个） 、上下 左右（2个）、 全部（1个）        内(padding)：元素和元素内容的距离  不能为负  轮廓：outline(@)  浮漂：float left、right    为了不受浮漂影响 clear的值 left right both 宽和高：width、height  （px 、%） 导航：list-style

特殊属性： display:none inline block visibility:hidden visiable 区别：display:none不会占据原有位置 脱离文档流  CSS3的过度效果 是没用的 visibility:hidden 会继续占据原有位置

CSS3常用的属性： 元素阴影:boxshadow 字体阴影:textshadow 过渡：transition 转换：transform rotateX() rotateY() skew() scale() 动画: animation  form{}to{}  百分比{} 圆角：border-radius 线性渐变 :linear-gradient 边框图片(@) :border-image 透明度:opacity 默认都1  0-1之间 浏览器 :-webkit- chrome         -moz-   firefox  -ms- IE  -o- opera

网页布局：div+css

javascript(通过操作交互，来改变网页上内容、样式，从而到达动态网页的效果)  1.引入JS方式有：  外联：<script type="text/javascript" src=""/>  内嵌：<script type="text/javascript" ></script>  属性：事件类型  伪Url:<a href="javascript:函数名()"></a>

 js是什么语言:脚本语言 只能运行在浏览器  弱类型语言体现在：对于数据类型 没有像C/c++ java严谨

 2.js数据类型  (1)原始数据类型：undefined、null、Number、String、boolean  (2)引用数据类型:原生对象（Object、Date、Array、Boolean、Number、String）、    内置对象（Global、Math）parseInt() parseFloat() IsNaN() eval()、    宿主对象、    自定义对象  3.变量的声明方式：var a=值  通过值来判定a属于的类型  4.函数：重用、复用、分离代码   function  函数名(参数可有可无){   语句   var a=1(函数调用是);   }   什么时候执行：调用时、函数里的语句从开始执行到结束或则执行返回语句 return   如何调用：函数名();   函数有返回值：返回调用者，调用者就必须用一个变量来接收var b=test();   函数无返回值

  与之比较：直接在<script type="text/javascript" >    执行代码    var a=1(网页加载的时候就执行了)    </script>   函数的调用通常都是通过事件来触发函数执行 5.事件类型：   键盘事件：按下Onkeydown (*)、按住不放  OnKeyPress、放开键盘OnKeyUp()   鼠标事件：OnmouseOver(*) mouseOut(*) click(*) mouseMove(*)、   Html事件：change、onload（body）、focus、blur、submit、reset、scroll   什么是事件：在网页上发生一系列的操作，事情

  所有的元素中基本都有这样事件

  如何添加事件：   1.传统事件添加(*)：(1).元素属性添加事件     (2).元素.事件=function(){}   2.现代事件添加：(1)IE 元素.attachEvent("onclick",函数名);        DOM 元素.addEventListener("click",函数,事件冒泡) 6.DOM  为什么js可以更改内容和样式 ：document是文档流对象模型中的根节点  可以通过document来获取页面上任何的元素节点，从而操作

 如何获取和如何操作：   （因为ID是唯一的）   1.获取方式有：（1）document.getElementById();通过元素的ID属性对应值来获取该元素节点          （2）document.getElementsByName()通过来元素的name属性对应值来获取一堆元素节点          （3）document.getElementsByTagName()通过元素名来获取一堆元素节点   2.获取节点的内容：firstChild() nextsbling() childNodes()   3.获取节点后，获取了节点上的所有的属性（来自于html对该元素有哪些属性决定）内容     属性获取的方式：节点对象.属性              节点对象.getAttribute("属性名");

      4.操作：(1)增加 createElement() 节点  createTextNode()文本 createAttribute()创建    （存在节点之间添加 appendChild，文本添加到节点 appendData，属性添加到节点 setAttribute）     (2)删除 removeChild()     (3)替换 replaceChild()     (4)插入 insertBefore()     innerHtml:既是获得内容 var a =节点对象.innerHtml        也是添加内容或则节点 节点对象.innerHtml=内容        （注意：需要把原来的节点内容保留+新的内容）        节点对象.innerHtml=节点对象.innerHtml+内容     innerText:专门针对文本内容添加。   innerHtml="<div>1111</div>" (正确)   innerHtml="<option>1111</option>"（老版本的浏览器不支持option tr td） 7.DOM改变CSS样式表（节点都有style属性）  CSS2中   设置样式：节点.style.属性名=值   获取样式：CSS内联的 获取方式 节点.style.属性名          CSS外联和内嵌（不是在属性style中去设置）(@)      css选择器写的顺序会影响获取时结果      IE/DOM访问方式不同rules和CSSRules      解决方案（需要获取的属性 直接写在元素属性sytle中去）

  获取最终样式：IE：元素节点.currentStyle.属性          DOM：document.defaultView.getComputedStyle(元素节点,null).属性名

8.DOM表单  1.表单对象的获取方式：DOM ：document.getElementById("");        BOM ：document.forms[0]  dom里document 文档对象模型的根节点 和bom里document window的子属性

 2.表达提交方式：1.传统 submit按钮 结合 form标签中添加属性onsubmit="return 表单验证函数()" 作用：处理表单输入内容验证   通过return 表单验证函数()来触发阻止默认行为         2.由JS事件调用函数，函数获取form表单节点，通过form节点对象调用submit()；

 3.正则表达式：/^$/ 以^开头 以$结尾        var a =/^[1-9][a-z]$/        a.test(内容也就是值)  返回true和false

       内容.match(/^[1-9][a-z]$/) 返回true和false 9.BOM 浏览器对象模型   window---document ---forms         ---localtion ---href        ---reload   时间间隔 setInterval(函数,间隔多少毫秒)   延迟     setTimeOut()

  <script type="text/javascript">    var aa =setInterval(show(),3000);    function myOnmouseOver(){     clearInterval(aa);清除上面的时间间隔执行    }    function myOnmouseOut(){     aa=setInterval(show(),3000)    }   </scirpt>