javascript知识点记录（1）
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[n]){ return result[n]; }else{ //arguments.callee() 表示函数体本身，也就是fn result[n]=arguments.callee(n-1)+arguments.call(n-2); return result[n]; } } }
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 对象数组
15.js数组排序的问题
看代码
function Person(name,age){ this.name=name; this.age=age; } function show(){ //sort方法是按ascii字母顺序排序的 var arr1=['b','a','c']; var result=arr1.sort(); console.log(arr1); // a b c console.log(result); // a b c var arr2=[0,21,4]; var result=arr2.sort(); console.log(arr2); //0 21 4 console.log(result); //0 21 4 //正确的写法; var arr3=[0,21,4]; arr3.sort(function (a,b){ return a-b; }) console.log(arr3); //0 21 4 var arr4=[0,21,4]; arr4.sort(function (a,b){ return b-a; }) console.log(arr4); //21 4 0 //自定义对象的排序的呀 var arr5=[]; arr5.push(new Person('jack',19)); arr5.push(new Person('Tom',18)); arr5.push(new Person('frank',20)); arr5.sort(function (a,b){ return a.age-b.age; }) console.log(arr5); }
顺便补充一下随机数的生成。
//放置重复的覆盖独享的值滴啊 function show(){ //这个是生成一个0-1之间的浮点数 var num=Math.random(); console.log(num); //1-10 var val1=Math.floor(Math.random()*10+1); console.log(val1); //0-9 var val2=Math.floor(Math.random()*10); console.log(val2); } //返回一个指定范围的随机数滴呀 var rand={}; rand.get=function (start,end){ return Math.floor(Math.random()*(end-start)+begin); }
16.字符串和json之间的互相转换
//方式一：eval function strToJson(str){ var data=eval('('+str+')') return data; } //第二种是使用一种new function的方式滴呀 function strToJson1(str){ var json=(new Function("return"+str))(); return json; } //方式三：使用全局的对象； function strToJson2(str){ return JSON.parse(str); //使用JSON.parse需严格遵守JSON规范，如属性都需用引号引起来 //jQuery中也有将字符串转为JSON格式的方法jQuery.parseJSON( json ), //接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript （JSON） } //同样我们也有jsonto字符串额转换方式滴呀； function jsonToStr(json){ //在Firefox，chrome，opera，safari，ie9，ie8等高级浏览器直接可以用JSON对象的stringify() var result=JSON.stringify(json); return result; }
17. 利用createDocumentFragment，进行优化
function slowAdd(){ for(var i=0;i<10000;i++){ var span=document.createElement('span'); var text=document.createTextNode('nodeValue'); span.appendChild(text); document.body.appendChild(span); } } function fastAdd(){ var oFragMent=document.createDocumentFragment(); for(var i=0;i<10000;i++){ var span=document.createElement('span'); var text=document.createTextNode('data'); span.appendChild(text); oFragMent.appenChild(span); } document.body.appendChild(oFragMent); }
