js学习总结

转自 http://blog.sina.com.cn/s/blog_75cf5f3201011csu.html

一： 关于基本数据类型在栈内存和堆内存中的关系

基本数据对于栈内存和堆内存是可以复制的，可以把a变量里的数据赋值给b变量同时在栈内存里面为每个变量各保存一个对象，改变其他某个变量的值将不影响其他对变量的值。

列子1：var num1 = 6;

var num2 = num1;

在此num1与num2保存着相同的值，但是他们是完全独立的，相互做任何操作不受影响。

列子2： var obj1 = new object（）；

var obj2 = obj1；

obj1.name = 'Nicholas'；

alert(obj2.name);  //'Nicholas'

在此obj1与obj2保存着同样的值，他们两个实际上是一个指针，多指向堆内存中的一个对象，因此他们是相互受影响的，改变其中一个，就会影响到另一个。

二：关于复杂数据类型在栈内存和堆内存中的关系

复杂数据对于栈内存和堆内存他们只指向同一个对象，不会因为堆内存里多个变量赋值后在栈内存里面产生多个对象，其中改变某个变量的值将影响其他变量的值，只有创建一个新对象，并将原对象的属性用for  in语句遍历出来赋值给新对象，这样栈内存里就有了两个对象了，改变其中某一个对象不会影响另一个对象。

三：关于对象

创建新对象有两种写法：1  var a = new object();  2  var a = {}；

对于创建的新对象我们也可以为其添加属性和方法：a.name = 'attributively';

alert(a.name); (结果)//attributively

访问属性： 1 对象.属性 = 属性值 （以点来访问对象的属性）    2  对象 = {属性 ：属性值}；（以冒号访问属性） ;

对象有个索引值的概念，他类似数组的下标，也是用访问数组下标的形式访问它的索引值，如：classes['today'];这是访问classes对象中的today属性。

classes[topclass]这种形式一般是当对象的属性是可变的，动态的时候才用这种形式访问或者改变的。。。

修改属性默认特性（低版本浏览器不支持这些属性）：

var ceShi = {};

ceShi.name = 10;

Object.defineProperty(ceShi, 'name', {writable:false});// 设置该对象属性值不能被修改Object.defineProperty(ceShi, 'name', {configurable:false});//设置该对象的属性不能被删除

四：创建数组：

创建数组有两种写法：1  var = a = new Array();    2  var a = [];

数组的排序方法是由数字排第一，字母第二，文字第三且有顺序的排列；

五:字面量概念：

字符串字面量是不需要创建过程就可使用的对象，所以它既没有变量那样的声明或者定义（字符串字面量是无名对 象），也不需要象动态分配的对象那样进行动态分配。由于这个原因，用来限定变量的类型限定符（如 const、volatile）以及存储类别指示符（如 extern、static、auto、register）不能用在修饰字符串字面量上。

六：有关于变量  环境搜索方式相关概念

1、所有全局变量和函数多事作为window对象的属性和方法创建的。

2、每个环境多可以向上收缩作用域链，以查询变量名和函数名；但任何环境多不能通过向下搜索作用域链而进入另一个执行环境。

3、

合法的变量名遵循的规则：1  第一个字符必须是一个 ASCII 字母（大小写均可），或一个下划线(_)。注意第一个字符不能是数字。

2：后续的字符必须是字母、数字或下划线。

3：变量名称一定不能是 保留字。

七：函数的参数概念：

定义函数的参数我们可以把它当做一个局部变量，局部变量他执行完后就会销毁，而全局变量只有当你关掉网页才会销毁

参数分为形参和实参，形参就相当于当前函数的一个局部变量，实参就是调用的时候，

所传的参数，

就必须是有值的变量或常量或者字符串。

八：函数相关问题

1 多个相同的元素就可以创建一个数组保存   2  不同的则该创建一个对象保存。

3、把一个函数赋值给一个变量，结果是把这个函数返回的结果赋值给了这个变量。

九：关于面相对象的程序设计：

关于面向对象的程序设计要掌握的基本几点：1 要有类的概念，把属性方法一样的相似的东西抽象为一类。

2： 类的继承   3： 类里面的属性方法可以单独改变、

十：通过用函数定义一个方法并在相同效果情况下调用

在我们做js效果的时候常常会遇到很多情况下多是做同一种效果，因此，js代码也差不多，可以说是一样。

在这种情况下，有些人会在每个函数里多写上显示这种效果的方法，包括我自己也是，这样的话，要是很多样子多是这种效果的话，那我们的js就要写很多代码了。当我昨天在做一个文件栏的时候，每一个栏目多是一样的事件，偶尔想到用一个函数把每个栏目一样的几个事件用方法定义在一个函数里面。

这样哪里需要这种效果，调用这个函数就可以了，还有就是可以节省很多代码。

定义一个onclick点击事件改变class类名方法的函数：

var dJShiJian = function(dJs, cLsL) {

if (dJs.className == '') {

addClass(dJs, cLsL);

}else if (dJs.className == cLsL) {

removeClass(dJs, cLsL);

}

}

定义一个onclick点击事件改变img属性值方法的函数：

var hTShiJian = function(gHs) {

if(gHs.getAttribute("src") == "../img/tp7.gif") {

gHs.setAttribute("src", "../img/bjt1.gif");

}else if (gHs.getAttribute("src") == "../img/bjt1.gif") {

gHs.setAttribute("src", "../img/tp7.gif");

}

}

在你需要这种效果的时候直接调用定义好的函数，：

function zhanKai(hTu) {

dJShiJian(dUl[0], 'lB');

hTShiJian(hTu);

}

这样即使需要这种效果的样子再多，只要调用定义好的函数，把参数下就可以了。

 

十一 创建元素 createElement_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x（）：

使用该方法尅一创建一个新元素。这个方法只接受一个参数，就是要创建元素的标签名。

 

 

十二 操作节点  a（）与insertBefore（）  的用法：

appendChiild（）用于在指定元素里面的末尾添加一个节点。

insertBefore（）用于在指定元素里面的某个位置添加一个节点，这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞，同时被方法返回。

十三  设置或获取位于对象起始和结束标签内的 HTML   innerHTML

改属性是基本上每个标签对象里面多有的属性，它用于在某标签内添加html代码或文字。并替换当前标签里面的所有子节点，也就是代码。

十四  Math对象

Math对象提供了计算机功能。

random（）方法   返回一个随机数，语法：【Math.random() *可能值的总数 + 第一个可能的值。】

十五  parseInt（） 方法：

parseInt（） 方法返回由字符串转换得到的整数。

十六  函数     函数的参数     return语句：

1、函数的一个重要特点：命名的参数只提供便利，但不是必须的。就相当于一个临时变量。

2、 return  语句：从当前函数退出，并返回一个值。

function sum (num1, num2) {

xnum1 + num2;

}

十七  tagName属性    toLowerCase（）方法：

1、tagName属性用来获取对象的标签。

2、toLowerCase（）方法用来返回一个字符串，该字符串中的字母被转换为小写字母

ie6不支持大写，为了兼容ie6，一般多会转换为小写。

十八  js手册自有的方法

1、indexOf（）方法 用于返回 String（字符串） 对象内第一次出现子字符串的字符位置。（查询该对象是否有这指定的字符串。）

2、lastIndexOf（）方法用于返回 String 对象中子字符串最后出现的位置。

比如当一个图片的路径是相对路径的时候ie6得到的图片路径多是绝对路径，其他标准浏览器得到的是相对路径。

这种情况在写js代码的时候，特别是在if判断语句的时候很容易碰到这种问题，结果不相等，因为绝得路径跟相对路径字符串不同。这个时候我们就要用到indexof来解决这个问题

列子：if (huanTuimgJiHe[0].getAttribute('src').indexOf('5.png') > -1)，这里是只要这个图片地址有个5.png就相等。

列子2：if ($('p').get(0).innerHTML.indexOf('qwer') > -1) //这里需要记住的是indexOf属于字符换对象的方法。然而.点运算符一般是用来对象.点属性。所以点.的右边是属性，左边就是对象了。所以很多时候要注意.点右边的属性和方法是不是.点左边对象的属性或者方法。比如上面的列子开始我们得到的一个标签对象。而标签对象没有indexOf方法，所以要用innerHTML得到里面的字符串才行。。。

3、charAt()方法用来得到指定位置的字符串，字符串的位置默认是从0开始，也就是说要得到一个字符串的第一个字符就用下标0来访问。

列子：var ziFuShuZi = dRadio[i].value.charAt(0); //得到input的value属性值的第一个字符。

4、substr()方法可以得到一个字符串中任何位置的字符，也可以得到某些字符串之间的所有字符。

列子：var dName = $('div').attr('name').substr(0,1); // 得到div标签的name属性值里面的第一个和第二个之间的字符。

4、isNaN（）方法用来指明得到的值是数字还是字符，如果是数字那么就返回false，否则就是返回true

列子：alert(isNaN(1651651)); //返回false

十九： 记录写代码时需要注意的地方：

1、为某个事情用一个函数定义一个方法，该函数如果有参数那么他的的参数要在函数体里面用到，这里需要注意，在函数体里面用这个参数的时候直接用这个函数的参数名，不能把该参数改成字符串的形式在里面用等等、、、、。

2、++ 递增运算符要记住，在写代码的时候经常用到，他表示表达式每执行一次该变量就加1，直到表达式不运行。

3、在写代码的时候要注意：思路要清晰，把想到的思路用注释写在代码里，这样就不会忘记。

每部分的代码是用来干什么的多要用注释写清楚，这样方便以后找。

还有做网页写代码时命名很重要：命名要看得懂，体现明这个名是用来干什么的。

4、写代码好的调试方法是很重要的，js调试方法要充分利用alert语句调试，比如某个条件不成立，我们要知道他为什么不成立，这个时候可以再if条件前面打印出来这个条件到底是什么，有时候火狐也不是很准。

5、当我们一听到要遍历数组，查找某个数组就要想到循环语句：

fon循环   fon  in  循环   while循环   do  while循环、、、

6、在写代码的时候定义一个全局变量来保存当前选中的节点对象这种思路很常用，要切记。

7、js里面每个方法或属性里面有的是有很多单词组成，每个单词的第一个字母要大写。

8、访问对象的属性有两种方法：一个是就是  .  点运算符，还有个就是  [] 中括号。

二十二 event对象用法以及阻止事件冒泡的属性

event对象必须写在处理程序里面才有意义，或者在处理程序调用event对象，因为只有当你触发这个处理程序的时候，浏览器才会把event及属性传进来。

阻止事件冒泡：当某事件在某标签对象上触发时，就阻止该事件从改标签上向上冒泡。

得到你想阻止的那个标签对象就用event对象的target属性。。

returnValue 属性是event对象的一个属性用在ie中阻止默认动作。

cancelBubble 属性也是event对象的一个属性用在ie中取消冒泡事件。

二十三  在js里面跟哪个标签添加一个事件的方法：

标准浏览器添加事件的方法：addEventListener（事件名， 函数， false冒泡阶段）；//如果函数在其他地方已经申明，那么这里直接填已经申明的函数名就可以了

标准浏览器删除事件的方法：removeEventListener(事件名， 函数名， false);

非标准浏览器添加事件的方法：attavhEvent(事件名， 函数);

非标准被浏览器删除事件的方法：detachEvent(事件名， 保存函数的变量);

注意的是非标准浏览器里添加或删除事件它只支持冒泡事件，所以不用加false，还有就是非标准浏览器方法里面的第一个事件名前面要加个on，而标准浏览器不需要加on。

二十四：关于鼠标坐标

Alt键设置或检索一个值，指示Alt键的状态。

altLeft获取或设置一个值，指示左边的ALT键的状态。

的cancelBubble集或检索当前事件是否应的事件处理程序的层次结构得到冒泡。

clientX设置或获取鼠标指针位置相对于窗口的客户区的x坐标，窗口装饰和滚动条除外。

clientY设置或获取鼠标指针位置相对于窗口的客户区的y坐标，窗口装饰和滚动条除外。

ctrlKey属性设置或检索CTRL键的状态。

ctrlLeft设置或获取左Ctrl键的状态。

dataTransfer提供拖放式操作使用预定义的剪贴板格式的访问。

offsetX设置或获取鼠标指针位置相对于触发事件的对象的x坐标。

offsetY设置或获取鼠标指针位置相对于触发事件的对象的y坐标。

的returnValue设置或检索从事件的返回值。

screenX检索用户的屏幕上鼠标指针的相对位置的x坐标。

screenY设置或获取鼠标指针位置相对于用户屏幕的y坐标。

shiftLeft获取左Shift键的状态。

srcElement设置或获取触发事件的对象。

类型设置或检索从事件对象事件的名称。

x设置或检索的x坐标，以像素为单位，鼠标指针的一个相对定位的父元素的相对位置。

Ÿ设置或检索的y坐标，以像素为单位，鼠标指针的一个相对定位的父元素的相对位置。

二十五 添加事件处理程序的一种简单的方法：

在为添加事件的标签的父元素上面添加一个事件处理程序，在处理程序里面用判断语句判断用户触发的是哪个事件目标，在各为其做出需要做的事情。

判断方法：标准浏览器：if(event.target == 事件目标) {}

ie浏览器： if (event.srcElement == 事件目标) {}

添加事件的这种方法可以直接使用this

兼容所有浏览器的事件目标：var target = ev.target || ev.srcElement;

二十六：返回值和拖曳效果

1、一个返回值基本上是用来做比较运算或赋值运算的。自定义对象里面的属性和属性值之间是用：冒号分隔的、

2、网页制作里面的拖曳效果一般分为3部分，onmousedown  onmousemove   onmouseup   对之  拖动开始  拖动中  拖动结束

二十七：关于event  this在js中怎样得到以及onmousemove和onmouseove的区别

1、在html标签上利用属性添加事件，在js里面调用的时候如果要用到this或者event对象，就必须先在html标签上事件里的参数传进来才可在js里面用。

2、onmousemove事件和onmouseove是有区别的，onmousemove是指在对象里面每移动一下就会触发该事件。

onmouseove是指移到对象内就触发该事件，只触发一次、

二十八：关于阻止浏览器默认行为在做拖动事件处理程序中的区别、、、

在做拖动效果的网页中，往往很多时候需要阻止在拖动图片的时候的浏览器所产生的默认行为

这时候要注意了，要拖动一个对象就有三个步骤onmousedown（拖动开始）和onmousemove（拖动中）还有onmouseup（拖动结束），而要阻止浏览器默认行为是要在哪个事件处理程序中阻止了？

标准浏览器阻止拖动图片时产生的默认行为是在onmousedown（按下去的时候）中阻止的

而非标准浏览器则是在onmousemove（移动的时候）中阻止的、

二十九：innerHTML与createElement_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x（）以及a（）的用法：

innerHTML是用来设置（添加）html结构或者字符，值是由字符串组成，返回的也是一个字符串。

createElement_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x_x（）是用来添加一个新的标签对象，括号里面的参数就是要添加的标签对象名称，通常多事和innerHTML一起用。

a（）用来添加一个元素在childnodes集合的末尾，括号里面的参数必须是个节点对象，也就是一个标签对象。

 

 

三十：Math对象 random属性 创建随机数，结合+=运算符和for循环语句创建随机显示多个字符串。

 列子：

var htmlfabric = '

' +

'

' +

'' +

'' +

'' +

'视频' +

'

' +

'

';

var numeral = Math.floor(Math.random() * 9 + 2); //创建随机数字。

var randomicity = ''; //因为这个变量不是被赋值的而是被增加的，所以要等与空字符串。不然就会出现undefinde

for (var i = 0; i < numeral; i++) {

randomicity += htmlfabric; //只要i小于随机数numeral，htmlfabric就会递增给randomicity多少次

}

dDIv.innerHTML = randomicity; //循环后的randomicity的次数就等于在网页上添加多少个htmlfabric。

elderP.a(dDIv);//把dDIv添加在elderP的末尾。

Math.floor（）方法用来把Math.random的值转换为整数。

三十一  滚动事件onscroll， 整个网页的滚动事件，必须是在window先才能兼容所有浏览器。

 

三十二 关于js改变某个标签的属性值问题：

js改变某个标签的属性值，可以直接【对象.属性 = ‘属性值’】

也可以用setAttribute()方法来改变某个标签的属性值。

但是这里最好是用用第一种方法，第二种方法适合改变自己创建的新属性。

三十三 关于ajax 问题：

1、表单中的name属性就是参数，value属性就是参数值；

2、ajax的核心技术就是xmlHttpRequest

3、ajax中get传参和post传参，get传参和post传参post比get更安全，get比post速度更快；

post参数每个变量多要用&符号链接起来：var postStr   = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

get参数接受表单的路径：var url = "ajax_output2.php? user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;。

4、添加参数，可以根据需要添加任意多个参数。比如，如果需要增加另一个参数，只需要将其附加到 URL 中并用 “与”（&）字符分开 [第一个参数用问号（?）和脚本名分开]。

5、xmlHttpRequest 的几个属性：

·open()：建立到服务器的新请求。

·send()：向服务器发送请求。

·abort()：退出当前请求。

·readyState：提供当前 HTML 的就绪状态。

·responseText：服务器返回的请求响应文本

status：服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）

responseXML：服务器的响应，表示为XML。这个对象可以解析为一个DOM对象

6、xmlHttpRequest 的几个方法：

abort()：停止当前请求

getAllResponseHeaders()：把HTTP请求的所有响应首部作为键/值对返回

getResponseHeader("header")：返回指定首部的串值

open("method", "url")：建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数

send(content)：向服务器发送请求

setRequestHeader("header", "value")：把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

7、因为安全限制，ajax的POST方法是不支持跨域的。所以你可以通过get方法进行跨域请求。也可以通过

三十四：关于时间戳

时间戳表示1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数

php输出的时间戳是总秒数，而js输出的时间戳是总毫秒数。

获取php时间戳：var endTime = ;

获取js时间戳：ar now = new Date().getTime()

php和js时间戳互转：var startDate = new Date(php时间戳* 1000).getTime();//php时间戳转换为js时间戳

js转换为php时间戳就相反了。