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); //
//也可以将选中的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);
}