javaScript基础知识汇总

1、 js的三大组成部分分别就是DOM,BOM,ECMAscript;

2、prompt(‘提示文本’,’输入的举例文本’);返回字符串。它可以允许前台数据数据给后台看。var user=prompt('请输入内容','123');

3、js中的函数调用基本结构:函数名称+小括号:  fn(); 其中小括号又称之为执行符号,具有很强的执行力。它表示马上执行函数。

4、*document.getElementById() 表示一个搜索功能,通过id来搜索标签。

5、dom.innerHTML 表示任何标签内部的内容。就是innerHTML属性可以直接修改标签内容。

6、事件源.事件类型=事件助手;

7、《事件原理》 *新的事件类型:

onclick表示单击;ondblclick表示双击;onmouseover 鼠标移上;onmouseout 鼠标离开;onmousedown 鼠标按下;onmouseup 鼠标抬起;

*所有事件的特点:  js中所有事件都是以on开头,并且整个事件类型的单词都是小写的。一切的事件使用方式都遵循事件三要素方式。

网页的制作过程中用户的操作习惯要注意是很少用到双击的。

8、动态添加内容: var user=otxt.value; obox.innerHTML+=user;   otxt.value='';

9、程序就是一堆数据加处理数据的指令,所以说数据和指令是程序永恒不变的主题。   值和指令

10、《五大数据类型》字符型:string;数字型: number;布尔型:翻译 Boolean;对象型:翻译 object;未定义型:undefined

11、***规律:一切来自于前台的数据默认都是字符型数据。

12、typeof 作用:可以返回数据的类型名称;它也有一个小技巧,它也已当成函数形式来使用。

parseInt() 作用:将数字值的字符转为真正的数值类型数据。它是一个js中的内置函数。和alert他们是一类的。

13、document.write() 作用向网页文档中书写内容,常用于测试。

14、《函数的结构》 定义式: function fn(){};  function 表示定义关键词;fn 表示函数名称; () 函数的参数集;

15、总结:函数定义式相当于存储值,调用式相当于执行值。其中要注意的是,函数的定义是占内存的但是函数的调用是不占内存的。变量里面如果存储函数形式的值

称之为高级值可以再次被执行。变量里面如果存储普通类型的值。称之为简单值固定不变不能被再次执行。

16、this:这个this表示调用函数的对象,任何的函数不能自己执行自己都是对象调用的。默认所有自定义的函数天生都是被window调用。

return:表示函数的返回值。这也是函数的一个重要知识点。

17、获取id函数 var getId=function(id){ return document.getElementById(id);  }

18、otxt.onfocus  &&  otxt.onblur     获取焦点跟失去焦点

19、-----------------------0903----------------------------------

1、if( obox.currentStyle ){   alert(obox.currentStyle.width)  }else{  var com=getComputedStyle(obox,null);alert(com.width) }

处理兼容问题,obox.currentStyle 主要是ie的  ,是计算后的样式

2、oul01.parentNode.children[2].style.background='purple'  ; parentNode表示其父类,children表示其小孩

3、parseInt()这个函数具有强制转化为数字的作用。

4、单次定时: setTimeout(指令,时间) 时间的单位是毫秒值,1000毫秒=1秒;

循环定时:setInterval(指令,时间) 特点永不间断一直循环执行。

clearTimeout(定时器所在的内存地址) 参数就是一个全局变量。

clearInterval(变量) 清除循环定时,比较常用。

5、启动动画定时器的步骤:

1.在全局声明两个变量一个num作为累加器,一个timer作为定时器存储。

2.启动定时器并在定时器的内部让累加器递增。

3.经验:如果为了保证定时器不叠加每次启动之前都可以清除一次。

动画定时器的内部永远需要做两件事情,一个是创造数据一个是使用数据。

6、代码分离

window.onload=function(){ 代码要全部写在这里; };

window表示浏览器窗口;

onload表示当加载完以后;

整个事件的作用:表示当网页文档被窗口完全加载完以后再执行助手中的命令。

7、js默认情况都是取行内css样式。

函数基本结构:getComputedStyle(要计算的标签,null)

作用:这个内置函数在任何时候可以直接使用。它计算后会得到指定标签当前所有的css最终计算后的数据集合。

是一个对象,可以再次通过点语法展开其中的css属性。

8、简介:任何的一个标签在js中都可以直接通过一个属性访问自己的父级或者子级;

父级:parentNode 作用直接返回父级标签。

子级:children 作用直接返回所有的子级。

同级:dom.parentNode.children;

总结:父子兄关系访问器可以节省大量的id标记,这是它的一个好处。

9、《随机数方法》Math.random()

------------0904---------

1、var divs=document.getElementsByTagName('div');   通过标签名获取元素

2、var oboxs = obox.getElementsByTagName('*'); 找到所有的元素

3、《排他思想》

在特效当中但凡见到只让自己怎么样,不让别人怎么样的效果都可以用到排他思想。

排他思想非常常用。一共分为两步进行:   第一:先用for循环排除所有人。  第二:再用this确立自己

4、document.createElement(新节点名称)   作用:可以在内存中直接创建任意的新标签。

5、追加函数: dom.appendChild(新节点)  作用:将内存中的新节点追加的指定容器内部的结尾处。

dom.insertBefore(新节点,参考节点);作用:将指定节点追加到容器内部的开头处,参数2表示在谁的前面。

6、《点语法的第二种访问形式》  基本结构: 任何的点语法去访问的地方都可以换成如下方式;

json.k == json[‘k’]   作用:中括号的这种访问属性的方式有自己的一个巨大的优点,就是可以将属性动态化。(可以将属性改成变量)

7、《遍历数据》  简介:一提到遍历数据肯定是挨个处理v,而不是处理K.

数组遍历主要用for循环语句。而json遍历主要用forIn语句来实现。其中json遍历要注意不能使用点语法来访问json中的属性。只能使用[]形式来访问。

------------【offset属性】----------------

dom.offsetWidth 表示一个元素的实体总尺寸。包括w,p,b;

dom.offsetHeight 同上。包括 h,p,b;

dom.offsetLeft 表示元素的当前定位偏移横坐标。

dom.offsetTop 表示元素定位偏移纵坐标。

dom.offsetParent 表示元素的相对定位父级。

总结:这一组属性都是js提供用来测量的,所以只能访问不能修改。此外还有一个好处就是测量出来的数据都不带单位。

------------【运动学公式】---------------------

引导者数字的位置:     当前位置=当前位置+(目标-当前位置)*比率;   可以简写为: 当前位置+=(目标-当前位置)*比率;

其中比率决定运动的快慢,0.2是一个比较合适的比率。

价值:运动学公式做动画是公认的效率最高的动画形式。这种动画形式是基于距离的。

-----------------事件对象---------------------------

事件对象工作原理:

当事件类型被触发的时候,它会将自己打包成一个事件对象,然后自动传递给事件助手。

事件助手通过一个形参e来接受这个事件对象。这样的话在事件助手的函数体里面就可以使用事件对象了。

-----------------事件坐标------------------------

坐标属性:

视口坐标:全兼容    e.clientX   e.clientY;             client:客户端的意思

文档坐标:ie8不兼容,  e.pageX    e.pageY;

在定级窗口和标签页中,”视口“只是实际显示文档内容的浏览器的一部分:它不包括浏览器的“外壳”(如菜单、工具条和标签页)。

-----------------兼容性问题------------------------

兼容性处理的一个小技巧:

不同浏览器的兼容性处理通过双向条件判断是最常用的方式,除此之外还可以通过或运算符来处理 ||  例如事件对象兼容性问题可以在助手中写为如下形式:

var e=e||event;

event是ie原来使用的方式,正在被淘汰,现在ie9已经采取和谷歌一样的访问对象方式了。所以如果你的项目不需要兼容低版本浏览器那么就不需要考虑这个问题。

----------------《事件对象属性》--------------------------------

e.type 表示当前发生的事件类型。

e.currentTarget 表示当前发生事件的事件源。

-----------------《右键菜单事件》----------------------------

事件类型:oncontextmenu;

事件作用:当右击鼠标的时候触发指令。

注意事项:任何的浏览器都有自己天生的右键菜单,所以这个事件是拥有自己默认行为的。

在js中很多事件都拥有默认行为有的地方又称之为事件内置行为。如果要阻止事件的默认行为最简单的办法就是在事件助手的最后执行一个 return false;

------------------------《默认结构访问》-------------------------------

document.title 访问标题元素;

document.head 访问head标签;

document.body 访问body标签

document.documentElement 访问html标签  ***

-----------------page坐标还有一个就是对事件对象本身的访问问题。------------------????

什么是事件对象???? :当触发某个事件的时候,会产生一个事件对象,这个对象包含着所有的与事件有关的信息,

包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。

事件对象:我们一般称作 为event对象 ,这个对象是浏览器通过函数把这个对象作为参数传递过来的,可以通过arguments来获得函数传递过来的参数。

---------------《client属性组》--------------------------

简介:这个属性组和offset是对应的。client这个单词表示客户,客人。可以范围以用户区或可视区的意思。

尺寸测量:

dom.clientWidth

dom.clientHeight

作用:测量盒子padding加宽高的尺寸。

坐标测量:

dom.clientLeft

dom.clientTop

作用:测量自己边框的粗细。(这两个属性实际上是测量可视区距离外容器的距离的,但是这个距离实际上肯定就等于border的尺寸。)

--------------------《滚动事件》---------------------------

事件类型:onscroll;表示当网页滚动的时候触发;

使用方式:全兼容的方式是给window绑定这个事件。

***滚动坐标值的获取:

滚动坐标值的获取一致存在兼容性问题。主要是通过两种方式得到所以可以用以下方法

解决: var num=document.body.scrollTop||document.documentElement.scrollTop;

-------------------------------------------------

你可能感兴趣的:(javaScript基础知识汇总)