javascript 基础知识总结

 1、变量的定义 、输出、类型

//变量的定义

var   a = 1;

 

//输出-弹出

alert(a);

 

//输出-控制台

console.log(a);

 

//输出-页面

document.write(a);




//检索 变量类型

var type = typeof a(变量)

//变量类型

type:String、number、boolean、undefined、null、object

2、doc获取元素

//通过ID获取元素

document.getElementById( 'id' );

 

//通过Class获取元素

document.getElementsByClassName( 'class' );

 

//通过标签获取元素

document.getElementsByTagName( 'tag' );




//通过name获取元素

document.getElementsByName('name');





3、事件




//单击事件: onclick 

 

对象.onclick =  function (){

    

};

document.getElementById( 'id' ).onclick = function(){   

};

//双击事件: ondblclick 

 

对象.ondblclick =  function (){

 

}

 

//鼠标移入事件: onmouseover 

 

对象.onmouseover =  function (){

 

}

 

//鼠标移出事件: onmouseout

 

对象.onmouseout =  function (){

 

}

4、js动态控制




（1）控制html值




HTML 操作非表单和按钮元素 如 div p a span 等标签

 

//改变对象内的HTML内容

对象.innerHTML = 内容;

 

//获得对象内的HTML内容

var  data = 对象.innerHTML;

 

Value 操作表单 如 input textarea 等标签

//改变对象内的内容

对象.value = 内容;

 

//获得对象内的内容

var  data = 对象.value;

（2）控制css样式




//改变对象的class

对象.className = class;

 

//改变对象的id

对象.id = id;

 

//改变对象的样式

对象.style.width = 宽度;

对象.style.backgroundColor = 颜色;




5、定时器




//时间

1000毫秒 = 1秒

 

//一次定时器

设置:  var  timer = setTimeout( function (){

     

},时间/毫秒);

清除: clearTimeout(timer);

 

 

//循环定时器

设置:  var  timer = setInterval( function (){

     

},时间/毫秒);

清除: clearInterval(timer);




6、dom操作基础




// 获取元素的子元素

父级.children;

父级.childNodes; 获取子节点   不兼容  把空格也算上一个节点

 

// 获取父元素

子级.parentNode; 

 

// 获取兄弟节点

 

下一个兄弟节点

obj.nextSibling 兼容 ie 6 7 8   算上了空格

obj.nextElementSibling  兼容 IE9+ FF Chrome 

 

||  或的用法  

obj.nextElementSibling ||  obj.nextSibling

 

上一个兄弟节点

obj.previousSibling 兼容 ie 6 7 8   算上了空格

obj.previousElementSibling 兼容 IE9+ FF Chrome 

 

// 首节点

obj.firstChild 兼容 ie 6 7 8   算上了空格

obj.firstElementChild 兼容 IE9+ FF Chrome 

obj.firstElementChild || obj.firstChlid

 

// 尾节点

obj.lastChild

obj.lastElementChild




7、创建插入子元素




//创建子div元素

var  oDiv = document.createElement( 'div' );

oDiv.id = id;

oDiv.className = class;

oDiv.style....

 

 

//插入子元素

父级.appendChild(子级);




实例1：

 document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

代码如下:

        <script type="text/javascript">
            var board = document.getElementById("board");
            var e2 = document.createElement("select");
            e2.options[0] = new Option("加载项1", "");
            e2.options[1] = new Option("加载项2", "");
            e2.size = "2";
            var object = board.appendChild(e2);
        </script>

e.size == e.setAttribute("size","2")

效果：在标签board中加载一个下拉列表框，属性值为“加载项1”和“加载项2”。

实例2：

在下面这个div中插入一个子节点P时：<div id="test"><p id="x1">Node</p><p>Node</p></div>

代码如下:

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var refChild = document.getElementById("x1");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,refChild);
</script>

效果：这个例子将在x1节点前面插入一个新的节点

8、自定义属性标签

    定义和用法

   getAttribute() 方法返回指定属性名的属性值。

//定义属性标签

对象.setAttribute( '标签名' ,值);

 

//获得属性标签

var  变量 = 对象.getAttribute( '标签名' );

获得链接的 target 属性：

document.getElementsByTagName("a")[0].getAttribute("target");

结果：

_blank

9、获取屏幕宽度、高度

//高度

var  高度 = document.documentElement.clientHeight || document.body.clientHeight;

 

//宽度

var  宽度 = document.documentElement.clientWidth || document.body.clientWidth;

10、数组

数组的定义

var  a=[]; 性能高 ，因为短

var  a= new  Array();

 

length 是可以获取，也可以设置

如果数组里面有6个值，你设置a.length=3;那么数组就会被定义成3个，后面的3个值，将不存在

可以快速清空一个数组 直接让length等于0就ok了

一个数组里面最好只存一种类型的数据

 

//末尾

arr.push(‘1’，‘2’); 往数组的末尾添加一位

相反

arr.pop();删除数组末尾的最后一位

 

//开头

arr.unshift(); 往数组头部添加一位

arr.shift(); 删除数组头部一位

delete  a[1];

 

//splice 可以从数组中间添加东西

splice(起点,删除长度,元素1,元素2,...);

splice(起点,删多少个);删除元素

splice(起点,0, 'a' , 'b' ); 插入元素  //替换

splice(起点,2 'b' , 'c' ); 先删除2个元素，在添加2个元素

 

//数组链接

concat();

var  a=[1,2,3];

var  b=[4,5,6];

a.concat(b);

a.concat(b).concat(c); //链接多个＝ a.concat(b,c,'11'); 如果放字符串也可以链接上，系统会做隐式转换

如果想让b数组在前面

b.concat(a);

 

//join  链接数组间的元素，并变成字符串 数组转字符串

var  a=[1,2,3,4];

arr.join( '-' ); 中间的-随意

arr.join( '' ); 引号里面不传值 默认一个一个链接

结果 1-2-3-4

 

//sort 数组内元素排序

var  a=[ 'float' , 'width' , 'zoom' , 'left' ];

arr.sort();  //按首字母排序

alert(arr);

 

var  b=[11,24,45,7];

arr.sort();

会把数组里的元素当成字符串，不认识数字

出来的结果会是按第一位进行排序 把所有第一位是1的放在前面

解决办法:

arr.sort( function (n1,n2){  //比较函数

     if (n1n2){

         return  1; 只要是整数就行

     } else {

         return  0;

     }

     另外一种写法

     return  n1-n2;

});

 

// reverse(); 翻转数组 [1,2,3] => [3,2,1]

arr.reverse();

11、JSON

//JSON的定义

var  json = {键:值,键:值....};

 

 

//一维JSON的写法

var  json1 = { 'name' : '名字' , 'age' , '值' };

 

//一维JSON的访问

对象.键名

值 =  json1.名字

//二维JSON的写法

var  json2 = {

     name: 'tom' ,

     age: '18'

     borther:{

         name: 'jerry' ,

         age: '16'

     }

}

 

//二维JSON的访问

对象.一维JSON的键名.二维JSON的键名

 

 

//解析JSON的两种方式 eval() , JSON.parse()




//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码

 

var  data = eval( '(' +json+ ')' );

//实例：

eval("2+3")	// 返回 5




//JSON转换成对象

//parse 用于从一个字符串中解析出json 对象。例如

  

var  str= '{"name":"名字","age":"1","type":"普通"}'

  

经 JSON.parse(str) 得到：

  

Object: type:"普通"




age: "1"

  

      name: "东翌学院"

  

单引号写在{}外，每个属性都必须双引号，否则会抛出异常

 

 

//JSON转换成字符串

  

stringify用于从一个对象解析出字符串，例如

  

var  a={a:1,b:2}

  

经 JSON.stringify(a)得到：

  

'{ "a" :1, "b" :2}




12、循环语句




1, for  循环

     for (初始化,条件,自增){

         //条件成立执行代码

     }

     for ( var  a=0;a< 10;a++){

         console.log(a);

     }

 

2, for  in  循环 *专门用来循环json

 

     for (初始化  in  值){

         //条件成立执行代码

     }

     for ( var  a  in  json){

         console.log(a);  // a 为键

         console.log(json[a]);  // json[a] 为值

     }

13、分支语句

//判断语句

if  else  /  if  else  if  /  switch

 

if (判断){

     成立

} else {

     不成立

}

 

if (判断){

     成立

} else  if (再判断){

     成立

} else {

     不成立

}

 

switch (值){

     case  '对比值1' :

         成立 语句

     break ;

     case  '对比值2' :

         成立 语句

     break ;

     

     default : 默认

         语句

     break ;

     

}

 

 

//三元运算符

a > b ? 正确的:错误的




14、字符串操作




//字符串

str.length 字符串长度

str[下标值] ECMAScript 5 可以通过访问数组的方式，通过下标访问字符串的值

str.charAt(1); 字符串下标

str.indexOf( 'a' ); 找a在字符串中的位置 从左向右找 ,区分大小写

      找到第一个的位置，就结束寻找，

str.indexOf( 'abc' );  找不到时出现-1

str.lastIndexOf(); 从右向左找

str.substring(开始的位置,结束的位置) 截取扩展名 .jpg 注 不包含截取的那个字符串

str.substring(开始的位置）   从开始位置一直截取到最后

.html str.substring(n+1) +1 就是让索引前进以为 截取的是 html

 

//字符串转数组

str.split(切的方式); 如果没有切的方式，会按一个一个字母来切

 

//替换

str.replace(被替换的值,替换为某个值);

 

//字符串大小写转换

str.toUpperCase(); 转大写

str.toLowerCase(); 转小写




15、break/continue区别




1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

break 是用来跳出循环的   for ( var  a=0;a<10;a++){      console.log(a);      if (a == 5){          break ;  //本次循环结束      } } 结果 1,2,3,4,5    continue 是跳出本次循环 for ( var  a=0;a<10;a++){            if (a == 5){          continue ;       }       console.log(a); }   结果 1,2,3,4,6,7,8,9

16、函数




//函数的定义

function  函数名称(){

 

}

 

//函数的调用

函数名称();

 

//返回值

return

1,函数向外界返回东西

2, return  之后的代码就不执行;

什么时候用 return  ?

需要返回东西

 

//匿名函数

( function (){

 

})();

 

//函数的嵌套

function  a(){

 

     return  function  b(){

         return  1;

     }

 

}

 

//变量作用域

var  a = 0;

( function  (){

     alert(a);

     var  a = 10;

     alert(a);

})();

a = 20;

alert(a);

 

//传参

function  say(name){

     return  name;

}

 

say( '啊啊' );

 

//回调

function  register(name,password,succFn,errorFn){

     if (name ==  '啊啊啊'  && password ==  '123' ){

         succFn();

     } else {

         errorFn();

     }

}

register( '啊啊啊' , '123' , function (){

 

}, function (){

 

});