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.οnclick=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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
