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)

tonglin0325的个人主页