JavaScript进阶高级

Posted 2020-12-07 zhaot1993

一、基础

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(){
有名函数;
有名函数
} //这种匿名函数的方式就能写很多有名函数