javascript一些知识点记录

javascript一些知识点记录

1.substring，slice，substr的用法

substring 和slice 都有startIndex 和 endIndex（不包括endInex），区别就在于slice取负数;

例如：var str='x123';

slice(-1,-2) -1指的就是3 负-2指的就是2； substring的中的负数，当做零来处理

substring中可以颠倒startIndex 和 endIndex的顺序，它会自动将最小的识别为开始的索引，最大的为结束索引；

substr(startIndex,length);开始位置，然后指定要截取的长度

2.instanceof 的用法

我们用一段伪代码来解释它的作用原理：

//接下来我们用伪代码来解释instance of 的使用滴啊
function instance_of(l,r){
//l表示 表达式的左边
//r表示 表示的右边
var prototype=r.prototype;
var l=l.__proto__;
while(true){
if(l===null){
return false;
}
if(prototype===l){
return true;
}else{
//继续循环
l=l.__proto__;//往上一层循环滴呀
}
}
}
function prove(){
//有了上面的代码我们就可以证明
alert(Array instanceof Object);
alert(Date instanceof Object);
alert(Function instanceof Object);
alert(Number instanceof Object);
alert(Boolean instanceof Object);
alert(String instanceof Object);
//以上都是true

alert(Number instanceof Number); //false
var num=new Number(1);
alert(num instanceof Number); //true

//同样的
alert(String instanceof String);//false

}

3.javascript:void(expression)的使用

点击后不做任何事情

<a href="javascript:void(0)">click</a>
<a href="javascript:;">click</a>
<a href="####">click</a>

ps：补充一点小知识;

void 是javascript的操作符，意思是：只执行表达式，但没有返回值；

<a href="#">click</> 默认的锚点跳转是我们的top 页面首页；

点击后响应用户自定义的事件;

<a href="javascript:void(0)" onclick="doSomething()">click</a>
<a href="#" onclick="doSomething;return false;">click</a>

再来一个小实例：

function newPage(param,obj){
obj.target="_blank";
obj.href="web/info/data?"+param;
obj.click();
}

html代码

<a href="javascript:void(0)" onclick="newPage(3,this)">go</a>

4.默认事件和阻止默认事件

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

两种模型
以前，Netscape和Microsoft是不同的实现方式。

Netscape中，div先触发，这就叫做事件捕获。

Microsoft中，p先触发，这就叫做事件冒泡。

W3C模型
W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。

然后，再从事件源往上进行 事件冒泡，直到到达document。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

(IE只支持事件冒泡)

事件传播的阻止

在w3c中，使用的是stopPropagation

ie中，设置cancleBubble=true

阻止默认事件

在w3c中，使用preventDefault()方法

在ie下，使用window.event.returnValue=false;

5.获取行间样式；

//样式的获取
function getStyle(obj,name){
if(obj.currentStyle!=undefined){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}

6.Javascript中callee和caller的作用

calle的定义：返回一个对函数的引用，该函数调用了当前函数。r

如果是自己的函数体内调用该方法：则返回null；

实例:

function a(){
alert(a.caller); //返回的是空
}
a();
function b(){
a(); //alert 弹出的是b（函数对象引用）,也就是是 function b(){alert(a())}
}
b();

callee的定义：返回正在执行的函数本身的引用，它是arguments的一个属性；

注意：

1 这个属性只有在函数执行时才有效；

2它有个length属性，可以用来获得形惨的个数；因此可以用来比较形参和实参个数是否一致；

arguments.call.length 和arguments.length;

3.可以用来进行匿名函数递归

实例：

var a=function (){

alert(arguments.callee);//返回额函数体函数的引用 也就是 function (){alert(arguments.callee)}

}
var b=function (){
a();   //返回额函数体函数的引用 也就是 function (){alert(arguments.callee)} ,不是调用它的函数体
}

b();

那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少

对兔子？（使用callee完成）

var result=[];
function fn(n){
if(n==1){
return 1;
}else if(n==2){
return 2;
}else{
if (result
){
return result
;
}else{
//arguments.callee() 表示函数体本身，也就是fn
result
=arguments.callee(n-1)+arguments.call(n-2);
return result
;
}
}
}

7.关于获取的一个简单封装

var obj={
$id:function(id){
return document.getElementById(id);
},
getByClass:function(className,parent){
var oParent=parent?this.$id(parent):document;
if(oParent.getElementsByClassName){
return oParent.getElementsByClassName(className);
}else{
var result=[];
//获取父元素下的所有元素
var childs=oParent.getElementsByTagName('*');
for(var i=0,len=childs.length;i<len;i++){
if(childs[i].className==className){
result.push(childs[i]);
}
}
return result;
}
},
getFirstByClass:function (className,parent){
var eles=this.getByClass(className,parent);
return eles[0];
}
}

8.bind的用法

在EcmaScript5中也扩展了叫bind的方法（IE6,7,8不支持）

具体看实例：

function func(name,id){
console.log(name,id,this);
}
func('jack','son');
//使用bind 返回改变上文的this后的函数；
var a=func.bind('jack','son',"-->");
a();//这样才执行滴呀

//call是改变上下文并执行函数
var b=func.call('jack','son',"-->");

参数方面的特点：

function f(a,b,c){
console.log(a,b,c);
}
var f_extend=f.bind(null,'extend_A');
f('a','b','c'); //结果a b c
f_extend('a','b','c'); //结果 extend_A a b
f_extend('b','c');     //结果 extend_A b c
//结论：实参则是在bind中传入参数的基础上往后

9.关于Array.prototype.slice用途

将像arguments那种的类数组对象转换为数组的形式

实例:(至于原理，我以后再研究)

function test1(){
var a={length:2,0:'first',1:'seconde'};
var b=Array.prototype.slice.call(a);
console.log(b);  // ["first", "seconde"]
//Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组，
//除了IE下的节点集合（因为ie下的dom对象是以com对象的形式实现的，
//js对象与com对象不能进行转换）

//对于字符串
var c="today";
var d=Array.prototype.slice.call(c);
console.log(d); //["t", "o", "d", "a", "y"]

//对于数字
var num=12345;
var numVal=Array.prototype.slice.call(num);
console.log(numVal);//[] 空的

var jq={length:2};
var jqVal=Array.prototype.slice.call(jq);
console.log(jqVal); //[] 空的
console.log(jq.length); //2

//也可以将选中的DOM元素转换成数组

}
test1();
//在IE下就会有误

10.递归的使用

//递归:方式一
function gui(num){
if(num<=1){
return 1;
}else{
return num*gui(num-1)
}
}
alert(gui(5));
//递归方式二： 使用命名函数表达式实现递归
var factorial=(function f(num){
if(num<=1){
return 1;
}else {
return num * f(num-1);
}
});
alert(factorial(5));

11.querySelector和querySelectorAll 的用法

定义： querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回 Null。

querySelectorAll 返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空

实例：

window.onload=function (){

var obj=document.querySelector("#outer");
var obj0=document.querySelectorAll("#outer")[0];

//tmd 的 这个是支持我们css的选择器滴呀
var obj=document.querySelector("div.test>p:first-child");
var obj0=document.querySelectorAll("div.test >p:first-child")[0];
var objlist=document.querySelectorAll('div.test>p'); //这个将以数组的形式显示滴呀
//这是原生方法，比起jquery速度快，缺点是IE6、7不支持。

var list=document.querySelectorAll(".info");
var len=list.length;
for(var i=0;i<len;i++){
list[i].style.fontWeight='bold';
}
}

bug-以及解决方案

html

<div class="test" id="testId">
<p><span>Test</span></p>
</div>

js：

function show(){
var obj=document.getElementById("testId");
var ele=obj.querySelector('.test span');
var eleList=obj.querySelectorAll('.test span');

console.log(ele); //<span>Test</span>>
console.log(eleList);//[span]

}

按照W3C的来理解，这个例子应该返回：element：null；elementList：[];

因为作为baseElement的 testElement里面根本没有符合selectors的匹配子节点；

但浏览器却好像无视了baseElement，只在乎selectors，也就是说此时baseElement近乎document；

这和我们的预期结果不合，也许随着浏览器的不断升级，这个问题会得到统一口径！(也就是说，没有限制到收索范围)

用jquery把，

12.javascript中的私有变量（块级作用域）

实例一

(function (window){
var name='jack';
var F=function (){};
F.prototype.getName=function (){
return name;
};
F.prototype.setName=function (str){
name=str;
};
window.F=F;  //相当于初始化
//独立的块级作用区域
//避免申明大量的公共变量；
})(window);
var a=new F();
a.getName();
a.setName('tom');
a.getName();

实例二

(function ($){
$("#id");
})(jQuery);

13.$.extend 和$.fn.extend的区别

//extend的基本使用
var target={name:'jack',fn:function (){alert('')}};
var obj={age:18,show:function (){alert('show')}};
var newTarget=$.extend(target,obj);
//新的对象就有了旧的对象的方法;
//给我们的targe添加扩展
newTarget.show();
alert(newTarget.age);

//如果没有设定target对象，则，扩展的是我们jQuery对象的方法；
$.extend({
test:function (){
alert('test');
}
})
//使用
$.test();
/*
$.fn=$.prototype
//这个就是原型滴呀
*/
$.fn.extend({
check:function (){
alert('check');
}
})
//这样调用无效
$.check();
//应该制定到某个对象上
$("#info").check();

14 eq 和get

eq返回的是一个jquery对象，get返回的是一个html 对象数组