1 <script> 2 // 将一个不是数组的数转换成数组 3 // 类数组转换为数组方法一： 4 var box=document.getElementById('box'); 5 var nodes=box.childNodes; 6 console.og(nodes.item[1]); 7 console.og(nodes[1]); 8 //nodeList是childNodes里面的原型；有一个item和length方法； 9 function makeArray(nodeList){ 10 var arr=new Array(); 11 for(var i=0,len=nodeList.length;i<len;i++){ 12 arr.push(nodeList[i]); 13 } 14 return arr; 15 } 16 // 类数组转换为数组方法二： 17 function makeArray(nodeList){ 18 var arr=new Array(); 19 for(var i=0,len=nodeList.length;i<len;i++){ 20 arr.push(nodeList[i]); 21 } 22 return Array.prototype.slice.call(nodeList); 23 } 24 // 兼容方法 25 function makeArray(nodeList){ 26 var arr=null; 27 try{ 28 return Array.prototype.slice.call(nodeList); 29 }catch(e){ 30 arr=new Array(); 31 for(var i=0,len=nodeList.length;i<len;i++){ 32 arr.push(nodeList[i]); 33 } 34 } 35 return arr; 36 } 37 // 类数组对象HTMLCollection:包含了item.length;namedItem3个方法； 38 //namedItem3个方法；只返回第一个； 39 document.scripts;//返回页面中个所有script元素的集合; 40 document.links;//返回a元素; 41 docuemnt.images; 42 document.images; 43 document.forms; 44 cells=document.getElementById('tr').cells;//返回所有tr的td的集合； 45 document.getElementById('select').options; 46 // 类数组对象NamedNodeMap 47 Element.attributes();//得到的是NamedNodeMap的对象，是元素的属性； 48 // HTMLCollection是动态的；会随着创建的元素变化 49 var divs=document.getElementsByTagName('div'); 50 var length=divs.length;//为了不让他随着创建的元素变化 51 var i=0; 52 while(i<length){ 53 document.body.appendChild(document.createElement('div')); 54 i++; 55 } 56 // 节点查找方法 57 getElementByName(); 58 </script>
变量，值类型的不可修改，用typeof检测，只有完全相等时候才相等，复制是copy；引用类型的用instansof检测，引用相同就相等；复制就是改变引用；
1 <script> 2 // 函数是对象，可以给添加属性和方法 3 function add(num1,num2){ 4 return num1+num2; 5 } 6 add.sex='male'; 7 add.setSex=function(sex){ 8 this.sex=sex; 9 } 10 console.log(add.sex);//'male' 11 console.log(add.setSex('female'));//undefined;因为方法没有返回值 12 console.log(add(1,2));//3; 13 // 函数也保存在堆中 14 // 函数名复制就是一个变量 15 // 函数名加括号就是函数的调用；不加括号得到的是函数的本体 16 setTimeout(function(){ 17 consoel.log('1'); 18 },1000); 19 // 等价于 20 function fn(){ 21 console.log('1'); 22 } 23 setTimeout(fn,1000);//这里就相当于将函数的本体穿进去； 24 // 函数作为返回值 25 function fn(){ 26 return function(){ 27 console.log(1); 28 } 29 }; 30 // 调用方式：1. 31 var result=fn(); 32 result();//1 33 // 调用方式2： 34 var fn()();//1 35 // 构造函数 36 var add=new Function('num1','num2','return num1+num2;'); 37 add(); 38 // 函数预解析 39 console.log(add());//1 40 function add(){ 41 return 1; 42 } 43 console.log(add());//1 44 // 使用函数声明的方式的时候，调用写前写后都没有关系 45 // 赋值语句方式 46 console.log(add())//undefined; 47 var add=function(){//add是变量声明提前；预解析的时候会将其提前，并赋值为undefined; 48 return 1; 49 } 50 console.log(add())//1; 51 // 预解析的时候找function 和var; 52 // 函数作用域 53 // if和for代码块中的函数作用域；js没有块级作用域； 54 if(true){ 55 function add(argument){ 56 //body 57 } 58 }else{ 59 function substract(argument){ 60 //body 61 } 62 } 63 //上面中不管是if还是else;add和substract都会被执行；因为没有块级作用域，所以函数的声明都会被提前到if/else语句前面去； 64 //函数赋值 65 if(true){ 66 var add=function(){ 67 68 } 69 }else{ 70 var substract=function(){ 71 72 } 73 } 74 // 解析过程 75 add=undefined; 76 substract=undefined; 77 add=function(){ 78 // 79 } 80 // 最后得到add是一个函数，substract是一个undefined; 81 // 不建议在if/else中声明函数 82 // 对象中的函数定义 83 var person={ 84 name:'xm', 85 setSex:function(sex){//方法1； 86 this.sex=name; 87 } 88 }; 89 person.setName=function(name){ 90 this.name=name; 91 } 92 person.setSex();//调用的时候需要加上person; 93 // 函数调用 94 // 匿名函数： 95 // 1：变成命名函数:将其赋值给一个变量；用变量名直接调用； 96 function(){ 97 console.log(1); 98 99 } 100 var add=function(){ 101 console.log(1); 102 } 103 // 2.让function不打头；将函数体用括号括起来 104 var add=function(){ 105 console.log(1); 106 }();//1 107 (function(){ 108 console.log(1) 109 })()//1; 110 (function(){ 111 console.log(1) 112 }());//1; 113 +-function(){ 114 console.log(1) 115 }()//1等一元用算符； 116 // 递归调用:递归某种程度上代替循环； 117 function factorial(num){ 118 if(num<=1) return 1; 119 return num*factorial(num-1); 120 } 121 console.log(factorial(5)); 122 // 方法的调用 123 document.onclick=function(){ 124 console.log('你点击了文档'); 125 }; 126 // 不用点击也可以调用 127 document.onclick(); 128 // 对象里面的方法，即是方法也是属性 129 // 方法的链式调用 130 var operaiton={ 131 add:function(num1,num2){ 132 console.log(num1+num2); 133 return this; 134 }, 135 substarct:function(num1,num2){ 136 console.log(num1-num2); 137 }, 138 '@':function(){//不合法的函数或者变量名用引号引起来就可以了； 139 console.log('@'); 140 }, 141 key:function(){ 142 143 } 144 }; 145 operation.add(1,2).substract(2,1);//3,1 146 // 构造函数的调用方式 147 function Person(){ 148 149 } 150 // 调用方式必须是通过new关键字 151 var obj=new Person();//返回的是一个对象；也就是实例化一个函数，生成一个对象；交给变量保存； 152 // 间接调用 153 var name='xm'; 154 var person={}; 155 person.name='xh'; 156 person.getName=function(){ 157 return this.name; 158 }; 159 console.log(person.getName());//xh; 160 console.log(person.getName.call(window));//xm;call是用来改变this的值的。原来是person变成了window; 161 console.log(person.getName.applay(window));//xm;//apply的第二个参数必须是一个数组。apply只有两个参数； 162 function add(num1,num2){ 163 return num1+num2; 164 } 165 console.log(add(1,2))//3 166 console.log(add.call(window,1,2)); 167 console.log(add.call(window,[1,2])); 168 // apply的用处 169 // 如果从其他地方得到的参数是一个数组；可以直接将其放进到apply中；借用方法； 170 function add(num1,num2){ 171 return num1+num2; 172 } 173 var datas=[1,2]; 174 console.log(add.apply(window,datas));//3 175 // 函数的参数 176 // 类型 177 function add(num1,num2){//形参 178 return num1+num2; 179 } 180 add(1,2)//实参； 181 // 参数传递的本质就是将实参赋值给形参； 182 num1=1; 183 num2=2; 184 // 因为是基本类型，所以相当于copy; 185 var person={}; 186 function setPerson(obj){ 187 obj.name='xm'; 188 } 189 setPerson(person); 190 obj=person; 191 //因为person是引用类型的值，所以复制的是地址；person会多一个name的属性；而形参的变化也会影响到实参的变化； 192 // 参数的个数 193 // 设置默认参数：当传入该参数的时候就用传入的参数，如果不传入急用默认值； 194 function pow(base,power){ 195 power=power||2; 196 return Math.pow(base,powe); 197 } 198 console.log(pow(3));//9; 199 console.log(pow(3,3)); 200 //不知道写几个参数的时候：可接收任意多参数； 201 function add(){ 202 if(arguments.length==0) return; 203 var sum=0; 204 for(var i=0;i<arguments.length;i++){ 205 sum+=arguments[i]; 206 } 207 return sum; 208 } 209 console.log(add()); 210 console.log(1,2,3,4,5)//15; 211 // arguments:是一个类数组的对象；arguments和形参一一对应； 212 // { 213 // '0': 1, 214 // '1': 2, 215 // '2': 3, 216 // length:3 217 // } 218 function fn(){ 219 console.log(arguments);//[1] 220 function fn2(){ 221 console.log(arguments);//[2] 222 } 223 fn2(2); 224 } 225 fn(1); 226 // 每个函数有各自的arguments:有一个callee代表的额是函数的本体；arguments.callee; 227 function add(num1,num2){ 228 alert(arguments.calee);//函数体 229 } 230 add(); 231 // argument.callee经常用在递归里面,严格模式下不可以用； 232 function jiecheng(num){ 233 if(num<=1) return 1; 234 return num*arguments.callee(num-1); 235 } 236 console.log(jiecheng(5)); 237 console.log(jiecheng(4)); 238 // argument.callee经常用在递归里面,严格模式下不可以用；解决办法 239 var jiecheng=function fn(num){ 240 if(num<=1) return 1; 241 return num*fun(num-1); 242 }; 243 console.log(jiecheng(5)); 244 console.log(jiecheng(4)); 245 // 函数有一个属性length得到函数形参的个数，arguments是实参 246 function add(num1,num2){ 247 if(argument.length!=add.length) throw new Error('请传入'+add.length+'个参数！'); 248 return num1+num2; 249 } 250 console.log(add(1,1)); 251 console.log(add(1)); 252 console.log(add(1,2,3)); 253 // 什么是参数 254 // 将数组当作参数 255 $.each([1,2,3],function(index,item){ 256 console.log(index)//0,1,2 257 console.log(item)//1,2,3 258 }) 259 $.each({name:'xm',sex:'male'},function(index,item){ 260 console.log(index)//name,sex 261 console.log(item)//xm,male 262 }) 263 // 对象做参数 264 function setPerson(name,sex){ 265 var person={}; 266 person.name=name; 267 person.sex=sex; 268 } 269 setPerson('xm','male'); 270 function setPerson(name,sex,age,tel,addr){ 271 var persoon={}; 272 person.name=name; 273 person.age=age; 274 person.sex=sex; 275 person.tel=tel; 276 person.addr=addr; 277 } 278 setPerson('xm','male',18,'182..','china')//这里如果不传入某个值的时候需要传入undefined当作占位符； 279 // 推荐做法：当有3个以上的参数的时候； 280 function setPerson(name,sex,age,tel,addr){ 281 var persoon={}; 282 person.name=name||'xj'; 283 person.age=age||'18'; 284 person.sex=sex||'male'; 285 person.tel=tel||'142'; 286 person.addr=addr||'china'; 287 } 288 setPerson({ 289 name:'xm', 290 age:'19', 291 addr:'china', 292 sex:'male' 293 });//想传几个传入几个，还不用注意顺序； 294 // 将函数作为参数 295 $.each(function(){ 296 297 }) 298 setTimeout(function(){},1000); 299 // 函数输出 300 // return //函数的返回；结束；退出当前函数； 301 // continue 跳出本(次)循环，进入下次循环； 302 for(var i=0;i<10;i++){ 303 if(i==4) continue; 304 console.log(i);//12356789 305 } 306 for(var i=0;i<10;i++){ 307 if(i==4) break;//跳出当前循环； 308 console.log(i);//1234 309 } 310 console.log('i am go out')//i am go out; 311 // if(11){ 312 // return true; 313 // }else{ 314 // return false; 315 // } 316 // 面向对象 317 // 属性：事物的特性； 318 // 方法：事物的功能； 319 // 对象：事物的实例（众人中的一个）； 320 // 原型：js函数中由prototype属性引用了一个对象即原型对象（原型） 321 function F(){//自定义函数，每个自定义函数都有一个prototype属性； 322 323 } 324 alert(F.prototype);//[object,object]这里的F.protytype指向的 是内存中的一个地址。这个地址中存储的是一个对象，所以F.prototype也是一个对象； 325 alert(F.prototype instanceof Object);//true; 326 // Object是js的父对象 327 // 通过new Function(){}构造出来的对象叫函数对象，其他的都叫普通对象； 328 var obj=new Function('a','b','return a+b'); 329 var s=obj(2,5); 330 alert(s); 331 // 闭包:特点:函数b是在函数a中嵌套的，函数a需要返回函数b; 332 // 闭包是一个拥有很多变量和绑定了这些变量的环境的表达式（通常是一个函数） 333 // 函数外部访问不到里面的变量 334 function f1(){ 335 var n=999;//函数内var声明的变量是局部变量；省略则是全局变量； 336 } 337 f1(); 338 alert(n);//n没有定义； 339 // 闭包：1.读取函数内部的变量；2.让i变量的值保留在内存中 340 function a(){ 341 var i=0; 342 function b(){ 343 alert(++i); 344 } 345 return b; 346 } 347 var c=a(); 348 c();//1; 349 function f1(){ 350 var n=999; 351 nAdd=function(){ 352 n=n+1; 353 } 354 function f2(){ 355 alert(n); 356 } 357 return f2; 358 } 359 var rs=f1(); 360 rs();//999; 361 nAddd();//执行了；/// 闭包：1.读取函数内部的变量；2.让i变量的值保留在内存中 362 rs();//1000; 363 // 闭包的优缺点：利于封装；可以访问内部变量；内存占用，浪费严重；内存泄漏 364 // js中声明对象 365 function person(name,sex,age){ 366 this.name=name; 367 this.age=age; 368 this.sex=sex;//this.sex属性；name参数；习惯上将属性名称==参数； 369 this.show=function(){ 370 alert(this.name+"---"+this.sex+"---"+this.age); 371 } 372 } 373 // 实例对象 374 var obj1=new person('zhangsan','nan',19); 375 obj1.show()// 376 var obj2=new person('lisi','nv',20); 377 obj2.show(); 378 //this代表的是当前对象。obj1和obj2两者之间是独立的，函数内部只能用this访问属性和方法； 379 // 工厂模式创建对象： 380 function createObject(name,age){ 381 var obj=new Object(); 382 obj.name=name; 383 obj.age=age; 384 obj.run=function(){ 385 return this.name+'----'+this.age+"运行中"; 386 } 387 obj.say=function(){ 388 return '今天天气真不错；' 389 } 390 return obj;//必须放回object本身； 391 } 392 var box1=createObject('张三',18); 393 var box2=createObject('李四',20); 394 alert(box2.name); 395 // box1和box2是没有关系的 396 // 执行：先将工厂函数载入，然后遇到box1直接执行 397 // Dom操作 398 document.createElement();//创建元素节点； 399 document.createTextNode();//文本节点； 400 document.createDocumentFragment();//将文档片段 401 document.createComment();//注释节点 402 li.createElement('li'); 403 ul.appendChild(li); 404 var txt=document.createTextNode('item'); 405 li.appendChild(txt); 406 407 408 409 var fragement=document.createDocumentFragment(); 410 var ul=document.getElementById('myList'); 411 var li=null; 412 for(var i=0;i<3;i++){ 413 li=document.createElement('li'); 414 li.appendChild(document.createTextNode('item'+(i+1))); 415 fragement.appendChild(li); 416 } 417 ul.appendChild(fragment); 418 419 // split()方法用于将一个字符串分割成字符串数组； 420 // string.split(separator,howmany); 421 var str='how are you doing today?' 422 console.log(str.split(' '+'<br/>'))//How,are,you,doing,today? 423 console.log(str.split(''+'<br/>'))//H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,? 424 console.log(str.split(' ',3));//How,are,you 425 "2:3:4:5".split(":");////将返回["2", "3", "4", "5"] 426 "|a|b|c".split("|") //将返回["", "a", "b", "c"] 427 var words=sentence.split(' ');//句子分割成单词； 428 var words=sentence.split(/s+/);// 429 'hello'.split('')////可返回 ["h", "e", "l", "l", "o"] 430 // 若只需要返回一部分字符，请使用 howmany 参数： 431 "hello".split("", 3) //可返回 ["h", "e", "l"] 432 // 高效创建节点的方法 433 var str='<p>this is a p</p>' 434 +"<ul>" 435 +"<li>item1</li>" 436 +"<li>item2</li>" 437 +"<li>item3</li>" 438 +"</ul>"; 439 content.innerHTML=str; 440 // outerHtml(); 441 console.log(content.outerHTML);//返回的元素是包含content元素的，这个是其与innerHTML的区别； 442 firstChild.lastChild.parentNode.nextSibling.//(下一个兄弟节点) 443 previousSibling//获得当前元素前面的兄弟节点； 444 //每个节点都有一个childNodes的属性；里面保存着nodeList对象；nodeList是类数组对象，用于保存一组有序的节点；可以通过位置来访问这些节点； 445 childeNodes[1];//方法1； 446 childNodes.item(1);//方法2； 447 document.getElementById("demo").ownerDocument;//返回元素的 ownerDocument： 448 hasChildeNodes();//是否由子节点； 449 console.log(p.hasChildNodes());//false; 450 451 </script>