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>

原文地址:https://www.cnblogs.com/Jayvenlee/p/3828978.html