JavaScript学习笔记——基本知识

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>输出函数测试</title>
</head>

<body>
<script>
    <!-- 弹出对话框显示 -->
    alert("<h1>测试</h1>");

    <!-- 页面显示 -->
    document.write("<h1>测试教程</h1>");

    <!-- 弹出输入对话框，一个提示参数，一个输入参数 -->
       var value=prompt("please enter your name","")
       <!-- 显示输入的参数 -->
       alert(value);
</script>
</body>
</html>

测试教程#

2.JavaScript如何在html页面当中进行放置#

A.　　放在中间，也可以放在中间，有两个属性，一个是type，另外一个是language

div中加样式：写class，，然后在中写

<style>
   .one{
     width:100px;
     height:100px;
     background:red;
     font-size:12px;
     color:blue;
   }
</style>

JavaScript可以在html页面当中的任何位置来进行调用，但是他们还是一个整体，是相互联系，相互影响。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript放置</title>
<script type="text/javascript" language="javascript" >
   var a="这是测试"
</script>
<style>
   .one{
     width:100px;
     height:100px;
     background:red;
     font-size:12px;
     color:blue;
   }
</style>
</head>

<body>

<script type="text/javascript" language="javascript">
   a="这是测试demo"
   document.write(a);
</script>

 
    测试demo！
 

 <script type="text/javascript" language="javascript">
   alert(a);
</script>
</body>
</html>

B.可以在超链接或是重定向的位置调用javascript代码

格式：”javascript:alert(‘我是超链接’)”
重定向格式：action=”javascript:alert(‘我是表单’)”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>place2</title>
<style>
   .one{
     width:100px;
     height:100px;
     background:red;
     font-size:12px;
     color:blue;
   }
</style>
</head>

<body>
  
　　 测试demo！
 

 <!-- 点击链接，弹出对话框 -->
 [链接](javascript:alert('我是超链接'))

 <!-- from表单，提交表单后弹出对话框 -->
 <form action="javascript:alert('我是表单')" method="post">
  <input type="text" name="names">
  <!-- type是submit，点击按钮后直接提交表单 -->
  <input type="submit" value="提交">
 </form>
</body>
</html>

C.在事件后面进行调用
1>.格式：onclick=”alert(‘我是事件’)”
2>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>place3</title>
<style>
   .one{
     width:100px;
     height:100px;
     background:red;
     font-size:12px;
     color:blue;
   }

    .two{
     width:200px;
     height:300px;
     background:blue;
     font-size:12px;
     color:red;
   }
</style>

<!-- for属性表示为了那个ID，一般不用 -->
<script for="two" event="onclick">
  alert("我是DIV2");
</script>
</head>

<body>
  <!-- 点击这个div弹出对话框 -->
  
　　 测试demo！
  

  
　　 测试demo！
  

</body>
</html>

3.调用外部javascript文件#

格式：　　在中加入

1	<script src="2.txt"></script>

　　　　js文件

1 2	var a="test"; alert(a);

注意：在调用页面块中的函数，使用和调用的时候，应该先定义，后执行。

四、函数的参数和return语句#

一、参数(最多是25)
可以动态的改变函数体内对应的变量的类型或值，使同一函数体得到不同的结果。

形参:在定义函数的时候，函数括号中定义的变量叫做形参。
实参:调用函数的时候，在括号中传入的变量或值叫做实参。

1.参数的类型
可以是任何的数据类型

2.参数的个数(最多是25)
A.实参和形参数量相等，一一对应。

B.形参的数量多于实参
**********************************************
不会报错，但是多出的参数他的值，会自动赋值为undefined
******************************************
C.实参的数量多于形参
********************************************
不会报错，但是要得到多出的实参的值，要用arguments对象

************************************************

二、Arguments对象

每创建一个函数，该函数就会隐式创建一个arguments对象，他包含有实际传入参数的信息。

1.length 检测实际传入参数的个数
2.callee 对本身的调用
3.访问传入参数的具体的值。([下标])(如arguments[0])

三、函数重载

同一个函数因为参数的类型或数量不同，可以对应多个函数的实现，每种实现对应一个函数体。

四、return 语句

一、停止并且跳出当前的函数
1.在ruturn 语句后面的函数体内所有内容都不会输出。
2.在函数体内可以有多个return语句，但是只会执行一个。(判断语句)

二、给函数返回一个值 return [返回值];
1.返回值可以是任何的数据类型
2.只能返回一个返回值。
3.如果函数没有返回值，那么这个函数的值就会自动的赋值为undefined

五、javascript 内置顶层函数#

名词解释:

1.函数

2.内置: ECMAscript

内置函数:ECMAscript 自带的函数 Number()

宿主函数: BOM DOM alert() prompt() confirm();

//confirm() 弹出一个带有确定和取消按钮的一个对话框，确定返回真，取消返回假。

3.顶层

字符串函数：字符串.函数（）

数组函数

顶层对象的函数，可以作用于任何对象。

内置顶层函数

1.escape() 对字符串进行编码

2.unescape() 对编码的字符串进行解码

3.Number() 转换成数值类型

4.String() 转换成字符串类型

5.Boolean() 转换成布尔类型

6.parseInt() 将字符串转换为整型

7.parseFloat() 转换为小数

8.isNaN() 判断一个数能否转换为数值类型。

9.isFinite() 判断一个数是否为有穷的数字。将不是有穷的数字或不能转换为数值类型的数返回假。

10.eval() 将字符串转换成javascript命令执行(必须符合javascript语法规范，否则会出错)。

IE:
eval() 在当前作用域生效
window.eval() 在当前作用域生效
execScript()

FF:

eval() 在当前作用域生效
window.eval() 在全局生效

使代码在作用于上兼容IE

function evals (str) {
   if(typeof str!="string"){
     return;
   }
  if(window.execScript){
     window.execScript(str);
  }else{
    window.eval(str);
  }

}

7.javascript数组#

数组是一个可以存储一组或是一系列相关数据的容器

javascript数组可以存储任何类型的值

一、如何创建数组#

(1) 通过对象的方式来创建。

1 2	var a=new Array();

A.直接赋值

var a=new Array(元素1，元素2，元素3，元素4,........)

var a=new Array(数值)

如果只有一个元素，并且这个元素是数值类型的，那么他就是指定数组的长度。

并且他的值都是undefined

数组的属性:length属性

B.声明以后再赋值

var a=new Array();

a[0]=1;
a[2]=2;
a[0]=3;

(2)隐形声明的方式

1
2

var a=[];

A.直接赋值:

1 2	var a=[1,2,3,4];

B.声明以后再赋值

var a=[];
a[0]=1;
a[1]=2;
a[2]=3;

二、访问数组的元素#

通过数组的(中括号)下标访问。

数组下标从0开始，他的最大值，是length属性-1

三、遍历数组的元素#

(1) for 循环

//  for (var i=0; i<arr.length; i++) {
//    alert(arr[i]);
//  }
//  var a=0

(2) while();

// while (a<arr.length) {
//    alert(arr[a]);
//    a++
// }

(3) for in
有两个作用:
第一:用于数组的遍历
第二:用于对象属性的遍历

1
2
3

//for (var i in arr) {
//  alert(arr[i]);
//}&nbsp;

四、数组的分类#

1.下标的类型
　　A.下标是数字的类型的(索引数组)
　　B.下标是字符串类型的(关联数组)

2.维度来分类
　　A.一维数组

　　B.二维数组

　　声明二维数组:
　　　　// var arr=[[1,2,3],[4,5,6]];
　　　　// alert(arr[1][1])

注意:
1.可以存储任何类型的数据

2.只支持一维数组。

3.长度可变。

4.如果是索引数组，下标始终从0开始，如果指定了长度，但是没有赋值，他的值就会自动赋值为undefined;

8.javascript对象基础#

一、创建对象#

1.构造函数方法:

function fun1 () {
   
}
 var obj=new fun1();
 alert(typeof obj)

2.Object方法

var obj=new Object();
function Object () {
　　alert(123);
}

3.json方法(javascript object notation) 原生格式

1	var obj={};

二、如何添加属性和方法#

　　如果属性的值是函数，我们叫做他是对象的方法，否则叫做是属性。

1.构造方法
　　A.声明以后再添加

//A.声明以后再添加
    function fun1 () {
    }
    var obj=new fun1();
    obj.name="zhangsan";
    obj.say=function  () {
       var a="说话";
        return a;
    }

　　B.声明的时候再添加

//A.声明的时候添加
function fun1 () {
  this.name="张三";
  this.eat=function  () {
    alert("我能吃饭");
  }
}
var obj=new fun1();
obj.eat()

2.json方法
　　A.声明的时候添加
　　var obj={属性名:属性值，属性名2:属性值2，属性名3:属性值3，……};

//A.声明的时候添加
var obj={name:"张三",say:function  () {
   alert("说话");
}};
        
        alert(obj.name);
        obj.say();

　　B.声明以后再添加

//B.声明以后再添加
var obj={};
obj.name="张三";
obj.sex="man";
obj.play=function  () {
  alert("我会玩");
}

alert(obj.sex);
obj.play();

三、访问对象的属性和方法#

引用值.属性

引用值.属性();

四、如何销毁对象#

javascript自己的垃圾回收机制，就是在对象没有引用的时候释放内存(销毁);

　　对象=null;

五、如何删除对象的属性#

**　　delete**

9.javascript对象的遍历、内存分布和封装特性#

一、javascript对象遍历#

1.javascript属性访问
对象.属性
对象[属性] //字符串格式

//javascript属性的访问方法
   var ren ={};
   ren.name="张三";
   ren.sex="男";
   ren.eat=function  () {
      alert("吃饭");
   }
   alert(ren.name);
   alert(ren["name"]);

2.javascript属性遍历

for in

//javascript属性遍历
var ren ={};
  ren.name="张三";
  ren.sex="男";
  ren.eat=function  () {
     alert("吃饭");
  }

 for (var i in ren) {
    alert(ren[i])
 }

通过arguments来遍历传入的参数

  function myArray () {
  var lengs=  arguments.length;
   for (var i=0; i<lengs; i++) {
      this[i]=arguments[i];
   }
  }
var arr=new myArray(1,2,3);
alert(arr[0]);

二、内存分布#

三、对象的特性之封装#

把对象所有的组成部分组合起来，尽可能的隐藏对象的部分细节，使其受到保护。
只保留有限的接口和外部发生联系。

　　一、工厂函数

 //工厂函数
function dianshi (color,size,brand) {
  var Tv={};
 Tv.color=color;
 Tv.size=size;
 Tv.brand=brand;
 Tv.look=function  () {
    alert("看电视");
 }
 Tv.play=function  () {
    alert("玩游戏");
 }
 Tv.dvd=function  () { 
    alert("DVD");
 } 
   return Tv;
  }

var ds=dianshi("red","30inch","sony");
//alert(typeof ds)
alert(ds.color)

var ds1=dianshi("blue","40inch","changh");
alert(ds1["size"])

　　二、构造函数　

//构造方法的形式
function Tv(color,size,brand) {
  this.color=color;
  this.size=size;
  this.brand=brand;
  this.play=function  () {
     alert("玩游戏");
  }
  this.look=function  () {
     alert("看电视");
  }
  this.dvd=function  () {
     alert("DVD");
  }
}
var sony=new Tv("red","20 inch","sony");
  alert(sony.color)

　　三、prototype方法

**　　对原型属性的修改将影响到所有的实例**

 //prototype方法
    function Tv(color,size,brand) {
      this.color=color;
      this.size=size;
      this.brand=brand;
      this.play=function  () {
         alert("玩游戏");
      }
    
    }

      Tv.prototype.look=function  () {
         alert("看电视");
      }
      Tv.prototype.dvd=function  () {
         alert("DVD");
      }
      Tv.prototype.aaa={name:"张三"};
    var sony=new Tv("red","20 inch","sony");
    var changhong =new Tv("red","20 inch","CH");
//      delete sony.color
//      delete sony.play
//      delete sony.look
//      alert(sony.color)
//       alert(sony.play)
//       alert(sony.look)
//   sony.look();
//   changhong.look();

alert(sony.aaa.name="李四");
alert(changhong.aaa.name);

　　四、混合方法

//混合方式
function Tv(color,size,brand) {
      this.color=color;
      this.size=size;
      this.brand=brand;
      this.play=function  () {
         alert("玩游戏");
      }
    
     Tv.prototype.aaa={name:"张三"};

    }

      Tv.prototype.look=function  () {
         alert("看电视");
      }
      Tv.prototype.dvd=function  () {
         alert("DVD");
      }

10.javascript对象的继承和Object对象#

对象的一个类可以从现有的类中派生，并且拥有现有的类的方法或是属性，这和过程叫做继承。被继承的类叫做父类或是基类，继承的类叫做子类。

(一个对象拥有另一个对象的属性和方法)

优点:

提高代码的重用性

提高代码的可维护性

提高代码的逻辑性

一、Object对象

var obj=new Object()

属性：

**　　1.constructor**
　　对创建对象的函数的引用（指针）。

//1.constructor 
    //对创建对象的函数的引用（指针）

  var obj=new Object();
 alert(obj.constructor)

**　　2.Prototype 原型**

　　**********************************************
　　对该函数对象的对象原型的引用。是函数对象的默认属性

　　**********************************************

//Prototype  
      //对该函数对象的对象原型的引用。

     var obj=new fun1();
     function fun1 () {
      this.name="zhangsan";
    }
     alert(obj.prototype)
    alert(fun1.prototype)

　　A.对象的共享属性存放到代码段当中。

　　B.可以实现继承。

方法：

　　A.hasOwnProperty(property)
　　判断对象是否有某个特定的属性，返回true或者false

1	alert(obj.hasOwnProperty("name"))

　　B.IsPrototypeOf(object)
　　判断该对象是否为另一个对象的原型。(用来检测对象的类型)

　　var arr=new Array();
　　alert(Array.prototype.isPrototypeOf(arr))

　　c.运算符
　　instanceof

　　 java 中的instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例

1	alert(arr instanceof Array)

二、继承

1.原型继承

function person () {
  this.name="张三";
  this.say=function  () {
    alert(this.name)
  }
}

function student () {
}
student.prototype=new person()

var zhangsan=new student ();
zhangsan.say()

2.对象冒充的形式
　　A.call
　　obj1.fun.call(obj2,参数1……)

　　B.apply
　　obj1.fun.call(obj2,[参数1，参数2….])

　　让对象1的方法冒充成对象2的方法。

//对象冒充
/*
function person () {
   this.name="张三";
   this.say=function  () {
     alert(this.name)
   }
}

function student () {
  this.name="李四";
}
var ren=new person ();
var zhangsan=new student ();

ren.say.call(zhangsan)

*/
function person (name) {
   this.name=name;
   this.say=function  () {
     alert(this.name)
   }
}

function student () {
 window.person.apply(this,["zhangsan"])
}

var zhangsan=new student ();
  alert(zhangsan.name)
  zhangsan.say();

11.对象的继承顺序#

一、对象的继承顺序

//对象的继承顺序
    Object.prototype.say=function  () {
       alert("我是顶层的方法");
    }
    function person () {
        this.say=function  () {
           alert("我是父类的方法");
        }
    }

    person.prototype.say=function  () {
         alert("我是父类原型的方法");
    }

    function study () {
    this.say=function  () {
       alert("本身的方法");
    }
       
    }
    study.prototype=new person();
     study.prototype.say=function  () {
       alert("本身原型的方法");
     } 
    var zhangsan=new study ();
    alert(zhangsan.say)

12.对象的分类#

一、对象的分类#

**　　1.内置对象**
　　　　Global

　　　　Math

**　　2.本地对象**
　　　　Array
　　　　Number
　　　　String
　　　　Boolean
　　　　Function
　　　　RegExp

　　3.宿主对象
　　　　DOM
　　　　BOM

二、Math对象#

格式: Math.方法(参数)

　　1.取绝对值
　　　　Math.abs();

1 2	var num1=-2.4; alert(Math.abs(num1))

　　2.取近似整数
　　　　//Math.round() 四舍五入

1
2
3

//Math.round()  //四舍五入
var num=2.1;
alert(Math.round(num))

　　　　//Math.floor() 对数进行下取舍

1 2	//Math.floor() 对数进行下取舍 alert(Math.floor(num))

　　　　//Math.ceil() 对数进行上取舍

1 2	//Math.ceil() 对数进行上取舍 alert(Math.ceil(num))

**　　3.取最大值或最小值**
　　　　Math.max(参数….)
　　　　Math.min(参数…..)

var num1=1;
var num2=2;
var num3=3;
var num4=4;
alert(Math.max(num1,num2,num3,num4))
alert(Math.min(num1,num2,num3,num4))

**　　4.取随机数**
　　　　Math.random();

1	//Math.random(); 从0到1的随机数

三、javascript字符串对象#

　　一、属性
**　　　　1.length**
　　　　计算字符串的长度(不区分中英文)

var str="bbs.houdunwang.com";
alert(str.length)
var str1="你好";
alert(str1.length);

**　　　　2.constructor**

　　　　对象的构造函数

1 2	var str="你好"; alert(str.constructor)

**　　二、方法**

**　　　　(1)获取类型**

　　　　　　1.myString.charAt(num)
　　　　　　返回在指定位置的字符

1
2
3

var str="你好";
alert(str.charAt(2));
alert(str[0])

　　　　　　2.myString.charCodeAt(num)
　　　　　　返回指定位置的字符的Unicode编码

var str="ABC";
  alert(str.charCodeAt(0))
  alert(str.charCodeAt(1))
  alert(str.charCodeAt(2))

　　　　　　3. String.fromCharCode()

　　　　　　接受一个或多个指定的Unicode值，然后返回一个或多个字符串

1	alert(String.fromCharCode(65,66,67))

**　　　　(2)查找类型**
　　　　　　1.myString.indexOf()
　　　　　　返回某个指定的字符串，在字符串中首次出现的位置

1 2	var str="你好"; alert(str.indexOf("好"))

　　　　　　2. myString.lastIndexOf()

　　　　　　返回一个字符串值末次出现的位置

1 2	var str="bbs.houdunwang.com"; alert(str.lastIndexOf("."))

　　　　　　3. myString.match()

　　　　　　在字符串中检索指定的值，返回的值就是指定的类型(值)

1 2	var str="后1盾2网3论4坛"; alert(str.match(/\d+/g))

　　　　　　4.search()

　　　　　　只能作用于正则。

　　　　　　5. myString.replace()
　　　　　　将字符串中的一些字符替换为另外一些字符

1 2	var str="你好"; alert(str.replace("好","hao"))

**　　　　(3) 截取类型**

　　　　　　1.myString.slice(start,end)

　　　　　　截取从指定的开始位置，到结束位置(不包括)的所有字符串。如果不指定结束位置，则从指定的开始位置，取到结尾

1 2	var str="你好"; alert(str.slice(0,1))

　　　　　　2.substring(start,end)

　　　　　　截取从指定的开始位置，到结束位置(不包括)的所有字符串。如果不指定结束位置，则从指定的开始位置，取到结尾

1 2	var str="你好"; alert(str.substring(0))

　　　　　　3.substr(start,length)

　　　　　　从指定的位置开始截取指定长度的字符串。如果没有指定长度，从指定开始的位置取到结尾

1 2	var str="你好"; alert(str.substr(0,1))

　　　　　　***************************************************************************

　　　　　　　　slice(start,end) vs substring(start,end)
　　　　　　　　slice参数可以是负数，如果是负数，从-1开始指的是字符串结尾。
　　　　　　　　substring参数是负数的时候，会自动转换为0
　　　　　　***************************************************************************

**　　　　(5)转换类型**

　　　　　　1. split(“分割位置”,[指定的长度])
　　　　　　将一个字符串分割成数组

1 2	var str="你好，视频，教程"; alert(str.split("，"))

　　　　　　2.toLowerCase();

　　　　　　用于把字符串转换为小写

　　　　　　3.toUpperCase()
　　　　　　将字符串转换为大写

1 2	var str="HOUDUNWANG"; alert(str.toLowerCase(). toUpperCase())

**　　　　(6) 样式类型**

　　　　　　1.fontcolor()
　　　　　　给字符串指定颜色，十六进制表示、red、rgb(255,0,0)

1
2
3

var str="你好";
//document.write(str.fontcolor("red"))
//document.write(str.fontcolor("#aaaaaa"))

　　　　　　2.fontsize()

　　　　　　指定字符串的大小 (1-7)

1
2
3

document.write(str.fontsize(1))
document.write(str.fontsize(3))
document.write(str.fontsize(7))

四、JavaScript数组对象#

**　　一、属性**
　　　　1.length
　　　　设置或返回数组元素的数目

var a=["a","b",1,2];
 alert(a.length=5)
 alert(a.length)
 alert(a)

　　　　2.constructor

　　　　返回构造函数的引用

1 2	var a=["a","b",1,2]; alert(a.constructor)

**　　二、方法**
**　　　　A.删除或添加类**

　　　　　　1. myarr.push(数组元素……)
　　　　　　向数组的末尾添加新的元素，返回值是新数组的长度。
　　　　　　可以一次添加多个元素

1
2
3

var a=["a","b",1,2];
alert(a.push("c","d"))
alert(a)

　　　　　　2. myarr.unshift(数组元素…..)

　　　　　　向数组的开头加入新的元素，返回值是新数组的长度
　　　　　　可以一次添加多个元素

1
2
3

var a=["a","b",1,2];
alert(a.unshift("c","d"))
alert(a)

　　　　　　3. myarr.pop()

　　　　　　删除数组的最后一个元素，返回删除的元素

1
2
3

 var a=["a","b",1,2];
alert(a.pop())
alert(a)

　　　　　　4. myarr.shift()

　　　　　　删除数组的第一个元素，返回删除的元素

1
2
3

var a=["a","b",1,2];
alert(a.shift())
alert(a)

　　　　　　5.万能的添加删除函数

　　　　　　myarr.splice(index,数量,添加的元素…..)
　　　　　　　　(1)index　　从何处开始添加或删除，必须是数值类型(数组的下标)
　　　　　　　　(2) 数量　　规定了删除的个数，如果是0，则不删除
　　　　　　　　(3) 需要添加的元素　　可以当作替换的元素

1
2
3

var a=["a","b",1,2];
alert(a.splice(1,0,"c","d"))
alert(a)

　　　　　　　　************************************

　　　　　　　　如果有删除的元素，返回删除的元素
　　　　　　　　************************************

**　　　　B.数组的转换**
　　　　　　mystr.split()
　　　　　　myarr.join([分隔符])
　　　　　　把数组元素按照指定分隔符组合成一个字符串，如果没有指定分隔符，默认是用“,”
　　　　　　返回结果就是组合成的字符串

1
2
3

var a=["a","b",1,2];
//alert(a.join())
alert(a.join("-"))

**　　　　C.数组的分割**
　　　　　　myarr.slice()
　　　　　　截取从指定的开始位置，到结束位置(不包括)的元素。如果不指定结束位置，则从指定的开始位置，取到结尾(数组的下标)
　　　　　　支持负数(-1开头) 返回新数组。

var a=["a","b",1,2,"你好","你好吗"];
 alert(a.slice(2,4))
 alert(a.slice(2))
 alert(a.slice(-2,-1))
 alert(a)

**　　　　D.排序**
　　　　　　冒泡排序

function mySort (fun) {

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

                  for (var j=0; j<this.length-i; j++) {
                     if(this[j]>this[j+1]){
                        var aa=this[j];
                       this[j]=this[j+1]
                       this[j+1]=aa;
                     }
                  }
            }
            return this
}


    Array.prototype.mySort=    mySort    
      alert(arr.mySort())

**　　　　　　myarr.sort()**

　　　　　　对数组进行排序，如果没有参数，则按照字母的编码进行排序，如果要按照其他的顺序来排序，要提供一个函数。
　　　　　　会提供两个参数(a,b) 此时按从小到大排序
　　　　　　　　a<b a在b前
　　　　　　　　a=b
　　　　　　　　a<b

var a=[12,34,123]
a.sort(function  (a,b) {
   return a=b
});
alert(a)

**　　　　F.数组的连接**
　　　　　　myarr.concat()
　　　　　　连接两个或更多的数组，并返回新数组，但是对原数组没有任何影响.

var a=[1,2,3];
//var b=["你好","你好吗","hello world"]
//var c=["a","b","c"]
//alert(a.concat(b,c))
//alert(a)
alert(a.concat("a","c"))
alert(a)

**　　　　G.自定义一个函数(删除数组的重复元素)**

var arr=[1,5,2,3,5,4,5,6,7,8,5,9,5]
Array.prototype.deleteit=function deleteit(){
    for(var i=0;i<=this.length;i++){
        for(var j=i+1;j<=this.length;j++){
            if(this[i]==this[j]){
           //this.splice(this[j],1);
            this.splice(j,1);
            j--;
           alert("第"+i+"个数字"+"["+this[i]+"]"+"和第"+j+"个数字"+"["+this[j]+"]"+"相同，已删除！");
            }
        }
    }return this;
}
alert(arr.deleteit())

五、javascript时间对象#

日期对象

在javascript中日期也是他的内置对象，所以我们要对日期进行获取和操作，必须实例化对象。

1.创建日期对象
　　var dateobj=new Date();
　　将会包含本地时间的信息，包括年月日时分秒星期

　　A.可传入的参数格式
　　　　1.”时:分:秒日/月/年” “日/月/年时:分:秒” 字符串
　　　　2.年,月,日,时,分,秒不能加””
　　注意:月份和星期都是从0开始计算的

2.获取日期信息的方法
Date 对象方法
FF: Firefox, IE: Internet Explorer

方法描述 FF IE
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。

3.设置日期的方法

setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。 
setMonth() 设置 Date 对象中月份 (0 ~ 11)。 
setFullYear() 设置 Date 对象中的年份（四位数字）。 
setYear() 请使用 setFullYear() 方法代替。 
setHours() 设置 Date 对象中的小时 (0 ~ 23)。 
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。 
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。 
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。 
setTime() 以毫秒设置 Date 对象。 
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 
setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。

13.DOM_document对象#

javascript-document对象详解

DOM document(html xml) object modle

document对象(DOM核心对象)

作用：
　　1.内容 innerHTML
　　2.属性
　　3.样式

document对象

一、属性
　　title 返回或设置当前文档的标题

1 2	alert(document.title) document.title="你好";

　　URL 返回当前文档的url

1 2	alert(document.URL) alert(location.href)

　　bgColor 设置文档的背景色

1	document.bgColor="red";

　　fgColor 设置文档的前景色(设置文字颜色)

1	document.fgColor="blue";

二、方法

　　getElementById(idname) 返回拥有指定id的（第一个）对象的引用

　　　　innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML

1 2	var div1=document.getElementById("one"); alert(div1.innerHTML)

1
2
3


你好

　　getElementsByTagName(tagname) 返回带有指定标签名的对象的集合

var divs=document.getElementsByTagName("div");
  var lengths=divs.length;
  //alert(lengths)
  //通过下标来访问
    //alert(divs[1].innerHTML)
    for (var i=0; i<lengths; i++) {
    alert(divs[i].innerHTML)
    }

　　getElementsByName(name) 返回带有指定name指定名称的对象的集合

1
2
3

var inputs=document.getElementsByName("text1");
var lengths=inputs.length;
alert(lengths)

　　write()

　　**************************************************************
　　getElementsByName(name)在IE中是不兼容的，在IE的表单中是可以兼容的。
　　　　如果是IE：
　　　　　　如果该对象的标准属性包含有name,那么可以正确的使用。否则不可以使用。
　　　　如果是FF:
　　　　　　该方法可以适用于任何情况。
　　　　结论:
　　　　　　主要是适用于表单。
　　**************************************************************

　　getElementsByClassName() 返回带有指定classname指定名称的对象的集合

1 2	//var aaas=document.getElementsByClassName("aaa"); //alert(aaas.length)


test


test

　　**********************************************************************
　　不兼容，可以自己写一个兼容性函数

  function byclass (classname) {
     if(document.getElementsByClassName){
       return document.getElementsByClassName(classname)
     }else{
       var tag= document.getElementsByTagName("*");
        var lengths=tag.length;
        var divs=[];
        for (var i=0; i<lengths; i++) {
           if(tag[i].className==classname){
              divs.push(tag[i])
           }
        }
        return divs;
     }
     
  }

alert(byclass("aaa").length)

　　**********************************************************************

三、dcoument对象的集合

　　A.all 所有元素的集合，不兼容

1	alert(document.all)

　　B.forms 返回对文档中所有form对象的引用

1	alert(document.forms.length)

　　　　通过集合来访问相应的对象

　　　　1.通过下标的形式，弹出表单的name

1 2	//访问 1.下标 //alert(document.forms[1].name)

　　　　2.通过name形式

1 2	//2.name属性 alert(document.forms["myform1"].text1.value)

　　C. anchors 返回对文档中所有anchors 对象的引用(即所有a链接)

　　D.images 返回对文档中所有image 对象的引用
　　F.links 返回对文档中所有area 对象和link对象的引用

javascript-对文档对象的内容、属性、样式的操作

一、操作内容
　　1.　　innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签)
　　2.　　innerText 用来设置或获取对象起始和结束标签内的内容 (兼容IE，获取文本)
　　　　 textContent用来设置或获取对象起始和结束标签内的内容 (兼容FF，获取文本)

　　　　　　注意区别innerHTML和innerText，第一个会识别样式，第二个只会识别文本

**　　　　　　　　但是在FF中不兼容，要使用textContent，以下是兼容函数****　**

**　　　　　　　　支持document.all的是IE**

function getContent (objs,val) {
     if(document.all){
       if(val){
         objs.innerText=val
       }else{
          return  objs.innerText
       }
     }else{
        if(val){
         objs.textContent=val
       }else{
          return  objs.textContent
       }
     
     }
  }
  window.onload=function  () {
    var div1=document.getElementById("div1");
    var div2=document.getElementById("div2");
    var but=document.getElementById("but");
     but.onclick=function  () {
        //var contents=div1.innerHTML;
        //div2.innerHTML=contents;
         var contents=getContent(div1)
        getContent(div2,contents);
     }
  }


  <h3>
    this is my test！
  </h3>

<input type="button" value="&darr;&darr;" id="but" >

　　3.　　outerHTML 用来设置或获取包括本对象在内起始和结束标签内的内容(识别html标签)

　　　　 outerText 用来设置或获取包括本对象在内起始和结束标签内的内容

二、操作属性
　　1.直接操作
　　　　对象.属性
　　　　对象.属性=值 (设置、获取、添加属性(属性值))

**　　2.获取和设置**

　　　　getAttribute(“属性”) 获取给定的属性的值
　　　　setAttribute(“属性”,”值”) 设置或是添加属性

window.onload=function  () {
  var links=document.getElementsByTagName("a")[0];
  //alert(links.href)
  //links.href="2.html";
  //alert(links.title)
  //links.title="test";
  //links.title="test";
   //getAttribute("属性")  获取给定的属性的值
   // setAttribute("属性","值")  设置或是添加属性

   alert(links.getAttribute("href"))
   links.setAttribute("href","2.html")
  
}

三、操作样式

**　　1.行内样式**
　　　　对象.style.属性
　　　　对象.style.属性=值 (设置、获取、添加属性)

window.onload=function  () {
  var one=document.getElementById("one");
  one.onmouseover=function  () {
    //alert(one.style.color)
     one.style.color="blue";
     one.style.backgroundColor="red";
     one.style.fontSize="13px";
  }
  one.onmouseout=function  () {
     one.style.color="red";
     one.style.backgroundColor="blue";
     one.style.fontSize="11px";

  }
}

[链接](#)

　　　　****************************************************

　　　　遇到属性是”-“链接的，要将”-“去掉，后面的单词的首字母大写
　　　　****************************************************

**　　**

**　　2.css层叠样式**

　　　　1>通过更改ID来更改样式（一般不用，不更改ID）

<style>
   #one{
     width:200px;
     height:200px;
     border:1px solid red;
     color:red;
     font-size:14px;
     padding:24px;
   }
   #two{
     width:200px;
     height:200px;
     border:1px solid blue;
     color:blue;
     font-size:19px;
     padding:15px;
   }
</style>
<script>
   window.onload=function  () {
      var one=document.getElementById("one");
      var but=document.getElementById("but");
      but.onclick=function  () {
        one.id="two";
      }

   }
</script>


   你好

<input type="button" value="更改样式" id="but">

　　　　2>通过className更改样式

<style>
   .div1{
     
     height:200px;
     border:1px solid red;
     color:red;
     font-size:14px;
     padding:24px;
   }
   .div2{
     width:200px;
     height:200px;
     border:1px solid blue;
     color:blue;
     font-size:19px;
     padding:15px;
   }
</style>

window.onload=function  () {
   var one=document.getElementById("one");
   var but=document.getElementById("but");
   but.onclick=function  () {
     one.className="div2";
   }
 }


   你好

<input type="button" value="更改样式" id="but">

　　　　*******************************************

　　　　适合批量更改
　　　　*******************************************

　　　　3>更改或者获取或者设置某个属性的值

　　　　**************************************************************
　　　　document.styleSheets[下标].rules[下标].style.属性
　　　　document.styleSheets[下标].rules[下标].style.属性=值

　　　　document.styleSheets 样式表的集合，即是的数量
　　　　document.styleSheets[0].rules 样式规则的列表，即其中的等的个数
　　　　document.styleSheets[0].rules.style 样式规则的集合
　　　　document.styleSheets[下标].rules[下标].style.属性

1	alert(document.styleSheets[0].rules[0].style.width)

**　　　　适用于IE**

**　　　　****************************************************************

　　　　**************************************************************
　　　　document.styleSheets[下标].cssRules[下标].style.属性
　　　　document.styleSheets[下标].cssRules[下标].style.属性=值
**　　　　适用于FF**
　　　　***************************************************************

**　　　　4> 动态的添加删除css样式规则**
　　　　document.styleSheets[下标].insertRule(“选择器{属性:值}”,位置) FF w3c
　　　　deleteRule(位置) FF w3c

　　　　document.styleSheets[下标].addRule(“选择器”,”属性:值”,位置) IE removeRule(位置) IE

1 2	//document.styleSheets[0].addRule(".div1","margin:200px",0); //document.styleSheets[0].removeRule(1);

**　　3.行内样式和css层叠样式通用的方式**
　　　　对象.currentStyle.属性 IE 用来获得实际的样式属性
　　　　getComputedStyle(对象,null) FF 用来获得实际的样式属性

   //对象.currentStyle.属性  IE   用来获得实际的样式属性
//getComputedStyle(对象,null)   FF  用来获得实际的样式属性
   //alert(one.currentStyle.width)
   alert(getComputedStyle(one,null).width)

　　　　*******************************

　　　　只能获取不能设置
　　　　*******************************

14.BOM_window对象#

javascript浏览器对象模型-window对象

BOM Browser Object Model
window对象是BOM中所有对象的核心。

一、属性

1.(位置类型-获得浏览器的位置)
　　IE:
　　window.screenLeft
　　可以获得浏览器距屏幕左上角的左边距
　　window.screenTop
　　可以获得浏览器距屏幕左上角的上边距

//IE
   //左边距
   //alert(screenLeft)
   //上边距
   //alert(screenTop)

　　FF:
　　alert(screenX)
　　alert(screenY)

//FF
  //左边距
  // alert(screenX)
  //上边距
  // alert(screenY)

**　　(获得浏览器的尺寸)**

　　FF:window.innerWidth 获得窗口的宽度
　　window.innerHeight 获得窗口的高度

//获取浏览器的尺寸

    //FF:
      //alert(window.innerWidth);
      //alert(window.innerHeight);

    //IE和FF通用:
        alert(document.documentElement.clientWidth)
        alert(document.documentElement.clientHeight)

2.关系类型

　　A.parent返回父窗口
　　B.top 返回顶层窗口

　　C.self===window 相当于window

3.stutas 设置窗口状态栏的文本

1	window.status="自定义的状态栏文字"

二、方法

1.窗体控制
　　A.对窗体的移动

　　window.moveBy(x,y) 相对于当前位置沿着X\Y轴移动指定的像素，如负数是反方向
　　moveTo(x,y) 相对于浏览器的左上角沿着X\Y轴移动到指定的像素，如负数是反方向

1
2
3

//位置
moveBy(100,100);
 //moveTo(200,200)

　　B.窗体尺寸的改变

　　resizeBy(x,y) 相对于当前窗体的大小，调整宽度和高度
　　resizeTo(x,y) 把窗体调整为指定宽度和高度

1
2
3

//尺寸
 window.resizeBy(100,100)
 resizeTo(400,400)

2.对窗体滚动条的控制

　　scrollBy(x,y) 相对于当前滚动条的位置移动的像素(前提有滚动条)
　　scrollTo(x,y) 相对于当前窗口的高度或宽度，移动到指定的像素

1 2	//scrollBy(0,100) //scrollTo(0,200)

3.时间间隔的函数

　　setInterval(“函数或者代码串”,指定的时间(毫秒)) 按照指定的周期(毫秒)不断的执行函数或是代码串

// setInterval("函数或者代码串",指定的时间(毫秒))  按照指定的周期(毫秒)不断的执行函  数或是代码串

//第一种调用方式
 // setInterval("alert('你好')",1000);\
//  var i=0
// setInterval(changes,1000)
// function changes () {
//  alert(i)
//  i++
// }

//第二种调用方式
//var a=0;
//setInterval(function  () {
//  alert(a);
//  a++
//},1000)

//第三种调用方式
 //var i=0;
// setInterval("changes(0)",1000)
// function changes (i) {
//  alert(i)
//  i++
// }

　　clearInterval()

//停止调用
 
  window.onload=function  () {
    var t=setInterval('alert("你好")',5000)
   var aa=document.getElementById("stop");
   aa.onclick=function  () {
    clearInterval(t)
   }
  }

1	<input type="button" value="停止" id="stop">

　　setTimeout(“函数或者代码串”,指定的时间(毫秒)) 在指定的毫秒数后只执行一次函数或代码。

　　clearTimeout()

window.onload=function  () {
    var aa =setTimeout("alert('bbs.houdunwang.com')",5000)
   var bb=document.getElementById("stop");
   bb.onclick=function  () {
    clearTimeout(aa)
   }
  }

4.打开新的窗口

　　open(url,name,feafurse,replace) 通过脚本打开新的窗口

window.onload=function  () {
var names=document.getElementById("names");
  var but=document.getElementById("but");
  but.onclick=function  () {
  open("26.1.html","windows","status=0,menubar=0,toolbar=0")
  }

}

javascript-History、Location、Screnn对象

一、history对象
包含浏览器访问过的url

　　1.属性
　　length 返回浏览器历史记录的数量

1	alert(history.length)

　　2.方法

　　back() 后退
　　forward() 前进
　　go(number) 如果参数是正数，那么就是前进相应的数目，如果是负数那么反之，如果是0那么就是刷新

window.onload=function  () {
   var one=document.getElementById("one");
   one.onclick=function  () {
      //history.forward()
      history.go(3)
   }
}

二、location对象包含有当前url的相关信息

**　　1.属性**
　　href 设置或返回完整的url

1	alert(location.href);

　　search 返回url?后面的查询部分

1	alert(location.href="location2.html?1234")

1	alert(location.search)

**　　2.方法**
　　assign() 加载新的文档

1	location.assign("location2.html");

　　reload(boolean) 重新加载文档, 当参数是true，任何时候都会重新加载，false的时候，只有在文档改变的时候才会加载，否则直接读取内存当中的。

1	location.reload()

　　replace() 用新的文档代替当前的文档（没有历史记录）

1	location.replace("location2.html")

三、screen对象
记录了客户端显示屏的信息

　　属性：
　　availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
　　availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。

　　height 返回显示屏幕的高度。
　　width 返回显示屏幕的宽度。

document.write(screen.availHeight)
document.write("<br/>")
document.write(screen.height)
 document.write("<hr/>")
document.write(screen.availWidth)
 document.write("<br/>")
document.write(screen.width)

15.JavaScript操作节点#

javascript-节点属性详解

根据 DOM，HTML 文档中的每个成分都是一个节点。

　　DOM 是这样规定的：

　　　　整个文档是一个文档节点
　　　　每个 HTML 标签是一个元素节点
　　　　包含在 HTML 元素中的文本是文本节点
　　　　每一个 HTML 属性是一个属性节点
　　　　注释属于**注释节点 **

一、如何获得节点引用

** 1.旧的获取节点引用方式**
　　getElementById()

//查找文档中的一个特定的元素，最有效的方法是 getElementById(),一定要有document
var outdiv=document.getElementById("outdiv");

var childs=outdiv.childNodes;
     
alert(childs.length);

getElementByTagName() 　　//返回带有指定标签名的对象集合

getElementByName()
*******************************************
劣势：
1.浪费内存
2.逻辑性不强
*******************************************

** 2.通过节点关系属性获得节点的引用**
对象.parentNode 获得父节点的引用

//父节点
 
 var innerdiv=document.getElementById("innerdiv");
 var father=innerdiv.parentNode;
 alert(father.nodeName);

对象.childNodes 获得子节点的集合

对象.firstChild 获得第一个子节点
对象.lastChild 获得最后个子节点

//最后一个子节点
 
var innerdiv=document.getElementById("innerdiv");
var last=innerdiv.lastChild;
alert(last.nodeName);

对象.nextSibling 获得下一个兄弟节点的引用

对象.previousSibling 获得上一个兄弟节点的引用

****************************************************************
劣势:兼容性不好。

FF会把例如后面的所有的空白节点都读成一个子节点

IE会把最后一个空白节点读成子节点

****************************************************************

二、节点的信息(属性)

         节点类型           节点名字        节点值<br />            nodeType(数值)       nodeName      nodeValue

nodeType 属性返回以数字值返回指定节点的节点类型。

如果节点是元素节点，则 nodeType 属性将返回 1。

如果节点是属性节点，则 nodeType 属性将返回 2

元素节点 1 标签名 null
属性节点 2 属性名属性值
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null

 alert(outdiv.nodeType)     
alert(document.nodeType)
alert(document.nodeName)
 alert(document.nodeValue)

三、兼容性的方法

javascript-节点的增、删、改、查实例讲解

一、创建节点

** 　　1>创建元素节点**
　　　　document.createElement(“元素标签名”);

var elea=document.createElement("a");
  elea.href="#";
  elea.title="我是一个链接";
  elea.innerHTML="链接";
  elea.style.color="red";

 document.body.appendChild(elea);

　　2>创建属性节点
　　　　document.createAttribute(“属性名”);
　　　　对象.属性=”属性值”
　　　　对象.setAttribute(属性名,属性值)
　　　　对象.getAttribute(属性名,属性值)
　　3>创建文本节点
　　　　对象.innerHTML=””;

1	elea.innerHTML="链接";

　　　　document.createTextNode(“文本”);

1	var h3text=document.createTextNode("测试");

二、追加到页面当中

　　父对象.appendChild(追加的对象) 插入到最后

1	document.body.appendChild(elea);

　　父对象.insertBefore(要插入的对象,之前的对象) 插入到最后

var innerdiv=document.getElementById("innerdiv");
 var spans=innerdiv.firstChild;
 var eleh3=document.createElement("h3");
 var h3text=document.createTextNode("测试");
     eleh3.appendChild(h3text);
     innerdiv.insertBefore(eleh3,spans);

三、修改(替换)节点

　　父对象.replaceChild(要修改的对象,被修改的);

1	innerdiv.replaceChild(elep,eleh3)

四、删除节点

　　父对象.removeChild(删除的对象)
　　如果确定要删除节点，最好也清空内存对象=null;

1
2
3

innerdiv.removeChild(elep)
elep=null;
alert(elep.innerHTML);

16.JavaScript操作表单#

javascript-对表单的操作

<form name="myform" id="form1" action="" method="post">
   姓名:<input type="text" name="names" id="names" value="zhangsan"><br/>
   年龄:<input type="text" name="age" value="19"><br/>
   性别：<input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女<br/>
   爱好:<input type="checkbox" name="like[]" value="play">玩  
        <input type="checkbox" name="like[]" value="run">跑步
        <input type="checkbox" name="like[]" value="study">学习<br/>
    毕业院校:
        <select name="school">
          <option>
              北京大学
          </option>
                <option>
              清华大学
          </option>
                <option>
              南开大学
          </option>
        </select>
        <br/>
    简介：<textarea cols="60" rows="10" name="info">测试</textarea><br/>
    <input type="button" value="提交">
</form>

一、获得表单引用
　　1>通过直接定位的方式来获取
　　document.getElementById();
　　document.getElementsByName();
　　document.getElementsByTagName();

 //var myform=document.getElementById("form1");
 //alert(myform.name);
 //var myform=document.getElementsByName("myform")[0];
// alert(myform.name);

　　2>通过集合的方式来获取引用

　　document.forms[下标]
　　document.forms[“name”]
　　document.forms.name

//var myform=document.forms[0];
//var myform=document.forms["myform"];
//var myform=document.forms.myform;
//alert(myform.name)

　　3>通过name直接获取“（只适用于表单）

　　document.name

1 2	//var myform=document.myform; //alert(myform.name);

二、获得表单元素的引用

　　1>直接获取
　　document.getElementById();
　　document.getElementsByName();
　　document.getElementsByTagName();

//直接获取
 // var names=document.getElementById("names").value;
 // alert(names)

 //var names=document.getElementsByName("names")[0].value
// alert(names)

　　2>通过集合来获取
　　表单对象.elements 获得表单里面所有元素的集合
　　表单对象.elements[下标]
　　表单对象.elements[“name”]
　　表单对象.elements.name

//var eles=document.myform.elements.length;
//alert(eles)

 //var names=document.myform.elements[0].value;
   //var names=document.myform.elements["names"].value;
  // var names=document.myform.elements.names.value;
 //alert(names)

　　3>直接通过name的形式
　　
　　表单对象.name

 //var age=document.myform.age.value;
 //alert(age);
// var info=document.myform.info.value;
// alert(info)

三、表单元素共同的属性和方法

** 　　1>获取表单元素的值**
　　表单元素对象.value 获取或是设置值

1 2	// document.getElementById("fom1").names // document.forms[0].elements[0]

** 　　2>属性**
　　disabled 获取或设置表单控件是否禁用 true false

1
2
3

//disabled 
 //var names=document.myform.names.disabled =true;
 //var school=document.myform.school.disabled =true;

　　form 指向包含本元素的表单的引用

1
2
3

//form
 //var age=document.forms[0].elements.age.form
 //alert(age.name);

** 　　3>方法**
　　blur()失去焦点
　　focus() 获得焦点

1 2	//foucs var name=document.forms.myform.elements.names.focus();

四、文本域
　　
　　***********************************
　　操作文本域的值
　　value 属性设置或者获取值

1
2
3

//文本域
//var names=document.forms[0].elements.names.value="lisi";
//alert(names)

　　***********************************

五、单选按钮

　　*******************************************
　　checked 返回或者设置单选的选中状态
　　true 选中 false 未选中

　　value 属性获取选中的值，必须先判断选中状态。

var sex=document.myform.sex;
   sex[0].checked=true;
  for (var i=0; i<sex.length; i++) {
    if(sex[i].checked){
      alert(sex[i].value)
    }
  }

　　*******************************************

六、多选按钮

　　*******************************************
　　checked 返回或者设置单选的选中状态
　　true 选中 false 未选中

　　value 属性获取选中的值，必须先判断选中状态。

var likes=document.forms.myform["like[]"];
  likes[2].checked=true;
for (var i=0; i<likes.length; i++) {
   if(likes[i].checked){
     alert(likes[i].value);
   }

　　*******************************************

七、下拉框

　　************************************************
　　selected 设置或返回下拉框的选中状态
　　true 选中 false 未选中

　　selectedIndex 设置或返回下拉框被选中的索引号

 //var school=document.myform.school;
// var school=document.myform.school.options;
 //alert(school.length)
 //selected设置选中状态
   //school[1].selected=true;
 //selectedIndex设置选中状态
    //school.selectedIndex=2;

　　************************************************

八、文本区域

***************************************

value 操作值

1
2
3

<form name="myform">
  <textarea name="info" rows="7" cols="60"></textarea>
</form>

1	var str=info.value;

九、验证表单

1.事件
onsubmit 当表单提交的时候触发的事件
onblur
onfocus
onchange

2.return false; 阻止事件的默认行为(适用于所有事件)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript-对表单的操作实例讲解(上)</title>
<script>
  function check (obj) {
    if(obj.names.value==""){
      alert("姓名不能为空");
      return false;
    }
    if(obj.age.value==""){
     alert("年龄不能为空");
      return false;
     }
     var statu=0;
     for (var i=0; i<obj.sex.length; i++) {
      if(obj.sex[i].checked){
        statu=1;
      }
     }
     if(!statu){
       alert("性别不能为空");
       return false;
     }
  }
</script>
</head>

<body>
<form name="myform" id="form1" action="" method="post" onsubmit=" return check(this)">
   姓名:<input type="text" name="names" id="names" ><br/>
   年龄:<input type="text" name="age" ><br/>
   性别：<input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女<br/>
   爱好:<input type="checkbox" name="like[]" value="play">玩  
        <input type="checkbox" name="like[]" value="run">跑步
        <input type="checkbox" name="like[]" value="study">学习<br/>
    毕业院校:
        <select name="school">
          <option>
              北京大学
          </option>
                <option>
              清华大学
          </option>
                <option>
              南开大学
          </option>
        </select>
        <br/>
    简介：<textarea cols="60" rows="10" name="info">测试</textarea><br/>
    <input type="submit" value="提交">
</form>

</body>
</html>

十、提交方法

表单的方法
表单对象.submit()

<script>
  window.onload=function  () {
    var subs=document.myform.subs;
     subs.onclick=function  () {
      document.myform.action="1.html";
      document.myform.submit();
    }

    setTimeout(function  () {
       document.myform.action="2.html";
      document.myform.submit();
    },4000)
  }
</script>

17.JavaScript事件#

javascript事件基础和事件绑定

一、事件驱动
1.事件
　　javascript侦测到的用户的操作或是页面的一些行为(怎么发生的)
2.事件源
　　引发事件的元素。(发生在谁的身上)
3.事件处理程序
　　对事件处理的程序或是函数 (发生了什么事)

二、事件的分类

<body>
<input type="button" value="改变" id="one" >

</body>

1.鼠标事件

onclick

var one=document.getElementById("one");
one.onclick=function  () {
  alert("点击");
}

    var one=document.getElementById("one");

one.onclick=aa;
alert(aa)
function aa () {
  alert("点击");
}

ondblclick

onmousedowm
onmouseup
onmousemove
onmouseover
onmouseout

** 2.键盘事件**
onkeyup
onkeydown
onkeypress 鼠标按下或按住

** 3.表单事件**
onsubmit
onblur
onfoucs
onchange

** 4.页面事件**
onload
onunload
onbeforeunload

三、如何绑定事件

1.在脚本中绑定
2.直接在HTML元素绑定
3.

四、同一个事件绑定多个事件处理程序

1.自己写的
2.IE:
对象.attachEvent(“事件(on)”,”处理程序”) 　　添加
对象.dettachEvent(“事件(on)”,”处理程序”) 　　删除

one.attachEvent("onclick",aa);
one.attachEvent("onclick",bb);
function aa () {
   alert("aa");
}
   function bb() {
   alert("bb");
}

one.detachEvent("onclick",bb)
one.attachEvent("onclick",function  () {
 alert("cc");
});
   one.detachEvent("onclick",function  () {
 alert("cc");
});

FF:
对象.addEventListener(“事件”,”处理程序”,布尔值) 　　添加
对象.removeEventListener(“事件”,”处理程序”,布尔值) 　　删除

one.addEventListener("click",bb,false)
  one.addEventListener("click",aa,false)
   one.addEventListener("click",function  () {
     alert("cc");
   },false)
    one.removeEventListener("click",function  () {
     alert("cc");
   },false)
 function aa () {
      alert("aa");
   }
     function bb() {
      alert("bb");
   }

Mozilla中：

addEventListener的使用方式：

target.addEventListener(type, listener, useCapture);

target：文档节点、document、window 或 XMLHttpRequest。
type：字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById(“testText”).addEventListener(“keydown”, function (event) { alert(event.keyCode); }, false);

IE中：

target.attachEvent(type, listener);
target：文档节点、document、window 或 XMLHttpRequest。
type：字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener
：实现了 EventListener 接口或者是 JavaScript 中的函数。
例如：document.getElementById(“txt”).attachEvent(“onclick”,function(event){alert(event.keyCode);});

javascript事件对象实例讲解

一、事件对象
用来记录一些事件发生时的相关的信息的对象
1.只有当事件发生的时候才产生，只能在处理函数内部访问

2.处理函数运行结束后自动销毁。

二、如何获取事件对象

IE：window.event

FF:<br />      对象.on事件=function (e){}

三、事件对象的属性

** 1.关于鼠标事件的事件对象**

 相对于**浏览器**位置的<br />     clientX  当鼠标事件发生的时候，鼠标相对于**浏览器X轴**的位置<br />     clientY  当鼠标事件发生的时候，鼠标相对于**浏览器Y轴**的位置

相对于屏幕位置的
screenX 当鼠标事件发生的时候，鼠标相对于屏幕X轴的位置
screenY 当鼠标事件发生的时候，鼠标相对于屏幕Y轴的位置

document.onmousemove=function  (e) {
  var ev=e||window.event;
  var cx=ev.clientX;
  var cy=ev.clientY;
  var sx=ev.screenX;
  var sy=ev.screenY;
  div1.innerHTML="cx:"+cx+"--cy:"+cy+"<br/>sx:"+sx+"--sy:"+sy;
}

相对于事件源的位置
IE:
offsetX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置
offsetY

FF:
layerX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置
laterY

div1.onclick=function  (e) {
  var ev=e||window.event;
  var ox=ev.offsetX ||ev.layerX;
  var oy=ev.offsetY ||ev.layerY;
div1.innerHTML="ox:"+ox+"--oy:"+oy;
}

** 2.关于键盘事件的事件对象**

**　　keyCode 获得键盘码**
　　　　空格:32 回车13 左上右下：37 38 39 40

**　　altKey 判断alt键是否被按下** 按下是true 反之是false 布尔值

document.body.onkeydown=function  (e) {
  var ev=e||window.event;
  alert(ev.keyCode)
  alert(ev.altKey)
  alert(ev.type)
}

ctrlKey
shiftKey
type 用来检测事件的类型主要是用于多个事件通用一个事件处理程序的时候

javascript事件流讲解和实例应用

当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定
顺序相应该元素的触发事件，事件传播的顺序叫做事件流程。

一、事件流的分类

** 　　1.冒泡型事件(所有的浏览器都支持)**
　　　　由明确的事件源到最不确定的事件源依次向上触发。

** 　　2.捕获型事件(IE不支持 w3c标准火狐)**
　　　　不确定的事件源到明确的事件源一次向下触发。
　　　　addEventListener(事件，处理函数，false)
　　　　addEventListener(事件，处理函数，true)

二、阻止事件流
　　IE:
　　　　事件对象.cancelBubble=true;
　　FF:
　　　　事件对象.stopPropagation();

三、目标事件源的对象
　　IE：事件对象.srcElement
　　FF:事件对象.target

<br />

tonglin0325的个人主页

1.JavaScript的放置和注释#

1.输出工具#

测试教程#

2.JavaScript如何在html页面当中进行放置#

3.调用外部javascript文件#

四、函数的参数和return语句#

五、javascript 内置顶层函数#

7.javascript数组#

一、如何创建数组#

二、访问数组的元素#

三、遍历数组的元素#

四、数组的分类#

8.javascript对象基础#

一、创建对象#

二、如何添加属性和方法#

三、访问对象的属性和方法#

四、如何销毁对象#

五、如何删除对象的属性#

9.javascript对象的遍历、内存分布和封装特性#

一、javascript对象遍历#

二、内存分布#

三、对象的特性之封装#

10.javascript对象的继承和Object对象#

11.对象的继承顺序#

12.对象的分类#

一、对象的分类#

二、Math对象#

三、javascript字符串对象#

四、JavaScript数组对象#

五、javascript时间对象#

13.DOM_document对象#

14.BOM_window对象#

15.JavaScript操作节点#

16.JavaScript操作表单#

17.JavaScript事件#

tonglin0325

标签

标签云

文章归档

最近文章