JavaScript进阶高级

Posted zhaot1993

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript进阶高级相关的知识,希望对你有一定的参考价值。

一、基础
1、在firbug调试器的控制台输出内容。
function(){
console.log()
}
2、argument。没有形参也可表示传进来的参数,用数组表示,如argument[0],argument[1]
3、函数自调用。
function get(){
if(n==1)
return 1;
return n*arguments.callee(n-1);
}
4、匿名函数执行。
(function(){
console.log(“hello”);
})();  
//它还可以传形参,如:(function(title){ console.log(“hello”+title); })(“我是形参”);
//这相当于
var get = function(){
console.log(“hello”);
};
get();
匿名函数好处:程序代码没有停顿,立即执行,可以避免变量污染,比如jquery框架,就是个很大的匿名函数自调用。
5、全局变量。
function f1(){
subject =”hello”;  //函数内部也能声明全局变量,但需要调用一下函数才管用
}
f1();
console.log(subject);

6、数组赋值。

比如:animal[‘mm’] = “apple”; animal.north = “wolf”;

7、数组遍历。

for(var 下标变量 in 数组/对象)  如:
for (var k in animal){
console.log( animal [k] );
}

 

8、eval(“字符串”)。
运行字符串里的js代码,字符串内容必须符合js语法规则。eval()主要用于把其他用户传递过来的字符串信息转变为js的实体(对象、数组等),比如把接口返回的内容转为对象。

 

 
二、DOM

 

1、获取节点属性。
如:获取一个input标签的节点属性值

 

var nm = document.getElementsByTagName(‘input’)[0];
function f1(){
console.log(nm.type);
console.log(nm.name);
console.log(nm.value);
console.log(nm.class); //class是js的关键字,需要变形为className操作:nm.className
}
2、attributes。
console.log(nm.attributes); //以类似json格式返回对应节点内部的全部属性节点信息
如:[type=text,class=orange,weight=130]
当然也可获取单个节点的值。如 nm.attributes.value

 

3、nodeType。不同值代表不同节点类型,1为元素节点 ,2为属性节点 等等

 

 

4、节点复制。被复制节点.cloneNode(true/false);  true是深层复制,复制本身节点和内部节点;false是浅层复制,只复制本身节点。如:

 

<ul id=”ning”> <li> aaa</li> </ul>
var ning = document.getElementById(‘ning’);
var fu = ning.cloneNode(true);  //深层复制,连ul里li的aaa也都复制了
var south = document.getElementById(“south”);
south.appendChild(fu);

 

5、dom操作css样式

 

获取css样式: 元素节点.style.css样式名称; 如 divnode.style.width;
设置css样式: 如 divnode.style.width = 500px’ ;
注意:dom操作css样式只能操作行内样式,且样式有则改之,无则新增,复合样式font-size要变为fontSize。

 

6、dom2级事件。

 

 

  6.1主流浏览器方式(ie9以上):

 

    itnode.addEventListener(事件类型,事件处理[,事件流]);  //设置 事件流可以不设置
    itnode.removeEventListener(事件类型,事件处理[,事件流]);  //取消

 

  6.2Ie浏览器方式(ie6/7/8):

 

    itnode.attachEvent(事件类型,事件处理);  //设置
    itnode.detachEvent(事件类型,事件处理);  //取消
事件类型:主流浏览器没有on,如addEventListener(click,……);ie浏览器有on
事件处理:一个有名或匿名函数,如addEventListener(click,function(){})
事件流:
  true捕捉型:事件从内部往外部依次执行,
  [false冒泡型]:事件从外部往内部依次执行(默认),如div里有p,p里有span,他仨都有onclick事件
事件取消(removeEventListener/detachEvent)操作具体要求:
  ①事件处理 必须是有名函数,不可以是匿名函数
  ②事件取消的参数与绑定的参数完全一致(数量/内容)
7、return false只针对dom1级事件起作用event.preventDefault(); dom1和dom2都起作用。(比如这次方法能阻断post请求的浏览器跳转)
8、加载事件:文档加载完成后,执行js
两种设置方式:
window.onload = 有名函数  //这中dom1级事件只能设一个,多了会覆盖
Window.onload = function(){
有名函数;
有名函数
} //这种匿名函数的方式就能写很多有名函数

以上是关于JavaScript进阶高级的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript高级-----8.函数进阶

前端高级进阶:Javascript 代码是如何被压缩的

前端高级进阶:javascript 代码是如何被压缩的

前端高级进阶2 | javascript 代码是如何被压缩的

Atom编辑器入门到精通 Atom使用进阶

Atom编辑器入门到精通 Atom使用进阶