javascript

 

19.JavaScript

js和jquery不区分单双引号，推荐单引号引入外部js注意先后顺序

1. 基础语法

1. 引用方式：位于<script>标签之间，可放于body或head之间，也可以用于外部js文件来引用。 
   在head里这样写<script type="text/javascript" src="jsname.js"></script>
2. 大小写敏感，代码块由括号组成，不预编译，浏览器解释并按顺序执行。
3. 变量 标识符 运算符 顺讯结构等等和java基本相同，不同之处：/号不同， js 中不区分单双引号   新增=== !==，代表值和类型都相同，Boolean能转型成Number或者String
4. Js中的条件表达式，在用非布尔值做条件，NaN 0 null “” undefined相  当于false
5. 数据转换：parseInt() parseFloat()  不能转换返回NaN  typeof()  isNaN()
6. 变量: var a; 用var定义变量，变量的数据有类型，没初始化的取值undefined
7. 变量引用的数据类型都是对象(属性 object.name和方法object.method())：
8. null undefined NaN
9. 内置对象：Number String Boolean Function Array Math Date RegExp
10. 外部对象：window对象 document对象
11. Object对象
12. Js循环对象：for(x in Object){}  console.log()

注意：

• <script>标签也是html文档的一部分，也是按照文档的顺序执行，其标签内的内容也是按照顺序执行。
• 每个脚本定义的全局变量和函数都可以被后面的脚本使用。
• 一个脚本内，var a=function(){}必须先声明再调用a()，因为js中var a 默认的是undefined，而function f(){}可以先调用f()再声明函数体。
• Js中，如果出现同名函数，调用的是最后一个加载的函数。

2. 内置对象（方法同java基本相同）

全局函数： evail() isNaN() parseInt() parseFloat() 不--能转换返回NaN

1. String对象(单双引号都可以，可包含使用)

String的方法返回新的字符串。

属性：length

方法：charAt(index) indexOf(str,index) lastIndexOf(str,index) match(str) replace(str,nstr) search(str) split(str,n) toLowerCase() toUpperCase() substring(s,e) substr(s,l) slice(s,e) sub() sup() small() link(url) italics() fontsize(size) fontcolor(color) bold() blink() big()

substring()和substr() slice()区别：

Substring截取的start和end（不包括） substr截取的start和length，并且start可为负，slice参数start和end可为负，最后一个是-1;

match()和search（）区别

search不执行全局匹配，值返回第一个匹配的位置，match返回匹配的字符串。

2. Number对象      toFixed(num) 四舍五入,转换成字符串：
3.  Array对象

定义：new Array()  new Array(3); new Array(21,true); var a=[3,5,8];

Js中的数组元素是Object型，里面存啥都可以。

属性：length

方法：concat() join(str)返回字符串 pop() push()长度 shift() unshift()

reverse() sort(函数) slice(start,length) splice(start,n,addn1,addn2)

sort()函数的用法：

无参sort：按照unicode编码排序

有参sort(函数名) 

var a = [2,8,6,45,8]; function s(a,b){return a-b;}  a.sort(s);

 

4. Boolean对象  new Boolean(value)  对象无value值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false，否则为true
5. Math对象  (使用和java相同，静态方法Math.random())
6. Date对象    new Date() 

方法：get set时间

7. RegExp对象 

定义：Var v = /^[5]\d$/attr  new RegExp(“^[5]\\d$”,a)  g 全局搜索 i 不区分大小 

方法：   test(str) 返回boolean 

String支持regexp的方法：replace() match() search() split()

8. Function对象 js会把函数的参数放在一个arguments数组里面

函数定义： function name(){} 匿名函数： 没有函数名

函数默认返回undefined  可以用return返回值

9. Arguments对象：length  arguments[i]

3.  外置对象

1. window对象

文本框： alert（str） confirm(str) prompt(str1,[str2]) open() close()  window.close()，关闭本网址, 对象.close() 如 var s=open(); s.close()

 周期性定时器：

 setInterval(exp,time) 会返回一个ID值   clearInterval(tID)

一次性定时器：

 setTimeout(exp,time)  会返回一个ID值 clearTimeout(tID)

定时器使用获得定时器的id，达到条件再停止定时器，函数是一个主线程，再里面设置定时器是一个分线程，但是主线程不会等待分线程的结束，会继续执行主线程的下一行。

2. screen对象 : width height  availwidth  availheight
3. history对象 : length   back() forward() go(num)
4. location对象 : href  reload()
5. navigator对象  获取客户端浏览器和操作系统的信息
6. document对象

1. 页面加载时，浏览器创建页面的DOM，js能改变html、css样式，事件作出的反应。
2. 查找HTML元素

1. id查找：document.getElementById(idName)
2. 标签名查找,返回数组：document.getElementsByTagName(name) 
3. 根据name属性查找返回数组  getElementsByName(name);

1. 修改或者获取节点信息：

   属性：className  nodeName nodeValue nodeType innerText  innerHTML  parentNode childNodes

2. 如下表单控件可以读取节点的值： input textarea select  除label  其他控件都有 如input.value 
3. 读写节点属性：

1. 通过方法读写   getAttribute(name) setAttribute(name，value)  removeAttribute(name)
2.  通过属性名读写(只能读几个) className style id 事件属性 可以通过这种方式读写，Object.style.color="red" Object.style.display="none/block"设置元素隐藏显示 其他属性是非标准的API，即新版浏览器可以使用，但旧版浏览器不能使用，如a.href 
3. document.write(str) 绝不要在文档加载之后使用 document.write()。这会覆盖该文档。
4. 创建节点：var s1 = document.createElement(str) 
5. 添加节点：parentNode.appendChild(s2)  最后一个节点
6. 添加节点： parentNode.insertBefore（new，bfNode） 相对节点的前一个
7. 删除节点：parentNode.removeChild（child）必须通过父节点删除子节点，并且子节点的后代会跟着一起被删除。
8. 替换节点：replaceChild(new,old)

每个函数都是作为一个对象被维护和运行的，函数默认返回undefined，可以用return返回具体指，函数没有重载，传入不同参数，Function创建方法：

function func1(…){…}  

var func2=function(…){…};  

var func3=function func4(…){…};   

var func5=new Function("参数1",“”参数2”，“代码体”);      括号里是函数的参数和函数代码。很少用

 

需要注意的是，尽管下面两种创建函数的方法是等价的：

 

以下是引用片段：

1  function funcName(){  

  //函数体  

}  

//等价于  

2   var  a=function funcName(){

//函数体

}

3  var funcName=function(){  

  //函数体  

}   

使用都可以是funcNmae()

 

　　但前面一种方式创建的是有名函数，而后面是创建了一个无名函数，只是让一个变量指向了这个无名函数。在使用上仅有一点区别，就是：对于有名函数，它可以出现在调用之后再定义；而对于无名函数，它必须是在调用之前就已经定义。2创建一个函数，用funcName指向这个函数，a也是指向这个函数，所有a()和fucName()功能一样，

arguments对象:在函数执行时函数内部就会有arguments数组对象，它包含了所有的参数，arguments的length属性报告了传入参数个数

function fnTest() {

        for (var i=0;i< arguments.length;i++) {

            alert(arguments[i]);

        }

    }

    fnTest(1,2,3);

    fnTest(45);

使用arguments对象模拟函数重载

function fnTest() {

var args = arguments;

switch (arguments.length) {

case 0 :

return "没有输入！！！";

case 1 :

return "一个参数："+args[0];

case 2 :

return "二个参数："+args[0]+" 和 "+ args[1];

}

}

alert(fnTest());

alert(fnTest(1));

alert(fnTest(2));

arguments对象补充:arguments对象的callee属性指向它所在的函数

匿名函数自调用：

(function funcName(){ })()；

等价于function (funcName(){}（）);

1. 自定义js对象（属性和方法构成,方法只是附在对象上的函数而已）

1. 直接定义并创建：

var p = new Object();

p.name = “zy”;

p.age = 21;  //定义属性

p.show = function(a,b){ //定义方法

return a+b;

};

2. JOSN定义：

var  a = {“name”:”zs”,”age”:12,”show”:function(){}}  {}代表一个对象，内含多组键值对，key一般是字符串，value可以使任意类型,元素属性用逗号隔开。

3.使用对象构造器

声明函数，首字母大写

声明参数，明确指示调用者传入哪些参数。

对象要记录这些参数

function Person(a,b){

this.name = a;

this.age=b;

this.show = function(){

alert(“定义一个方法”)

}

};

var p = new Person(“zy”,21);

 

event事件：

事件定义：页面状态改变都会产生一个event对象。记录事件发生时的鼠标位置，按键状态，触发对象等，

1.event属性：鼠标事件、键盘事件、状态事件

2.event事件的处理方式。

• 1在html标签里直接处理：<input type="button" value="按钮" onclick="f();">
• 2获取这个节点后，node.事件  （常用这个，能有效降低耦合度）

3.事件取消

• onXXX="return false;"

4.获取event对象：在函数定义中传入一个参数，然后在使用函数时把event当做实参写进去，能做到浏览器的兼容

5.event属性：clientX clientY  cancelBubble

6.事件源：触发事件的元素，由于不同浏览器的兼容性  所以使用 e.srcElement||e.target  兼容，这里的||是js里面的或符号，那个为真就返回哪个

7。事件的冒泡机制：父子定义了相同的事件,如果子节点触发了事件，父节点同样会触发事件。这种处理的方法是取消事件的冒泡，同样的为了兼容不同浏览器，if(e&&e.stopPropagation){

event.stopPropagation()}else{

event.cancelBubble=true}

 

补充：

1.js有自动补充分号的功能， 最好自己写分号，自己书写代码的时候: 一条完整的语句加分号, 函数声明不加分号

逻辑与&&和逻辑或||操作符可以应用于任何类型的操作数，而不仅仅是布尔值。

　　几乎所有语言中||和&&都遵循“短路”原理， 如&&中第一个表达式为假就不会去处理第二个表达式，而||正好相反。js同样也遵循上述原则：

• 当逻辑或||时，找到为true的分项就停止处理，并返回该分项的值，否则执行完，并返回最后分项的值。
• 当逻辑与&&时，找到为false的分项就停止处理，并返回该分项的值。

1 var a = "" || null || 3 || 4;//32 alert(a);3 var b = 4 && 5 && null && "0";//null4 alert(b); 

 

js中null和undefined的区别

 

null 表示一个对象，但是为空。因为是对象，所以 typeof null 返回 'object'，null==undefined，而且都表示false。  

undefined表示没有值，通常用在一下方面：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

js中==和===区别：js中==运算时会先进行两边的类型转换，比如字符串和数值比较先转换成数值，再比较，而===表示类型和值都相等。

javascript:void(0);

有时候我们在编写js过程中，需要触发事件而不需要返回值，那么就可能需要这样的写法

在做页面时，如果想做一个链接点击后不做任何事情，或者响应点击而完成其他事情，可以设置其属性 href = "#"，但是，这样会有一个问题，就是当页面有滚动条时，点击后会返回到页面顶端，用户体验不好。

目前有如下几种解决办法：

1)点击链接后不做任何事情 

1 2 3	<a href="javascript：void(0);" >test</a> 这时死链接，表示执行javascript的脚本语句，void是运算符，void(0)就是不执行 <a href="#" >test</a>   //不好，一个#会自动链接到页面最顶部 <a href="####" >test</a> //使用1个到4个#，见的大多是"####"，也有使用"#all"等

2)点击链接后，响应用户自定义的点击事件

1 2 3

<a href="javascript：void(0)" onclick="doSomething();">test</a> <a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> <a href="#" onclick="alert();event.returnValue=false;">test</a>