大一开始接触Javascript,感觉很困难,就在网上做小抄,即使不写,也摸着怎么去修改js效果。大二的时候学习javascript,感觉特简单,很快把基础学完,但是,还是很难写出好的效果,然后也在网上抄,不过做修改的能力提高了很多。大二过了一段时间,我了解到Jquery框架,于是有了JS和面向对象作为基础,很快把Jquery学好,而且很快做出各种各样的效果,Jquery真的很爽。

   到了现在,大四了,隔了一段时间没有用JS,忘记的比较快,不过一看书,看快复习好,并且总结起来,这次就花两个钟头去总结了JS的基础以及面向对象。作为Jquery的基础吧。


特点:

弱类型,声明变量类型:var a=2;


数组:(是总结网上的内容)

数组声明:

var arrayObj = new Array();//创建一个数组

var arrayObj = new Array([size]);//创建一个数组并指定长度,注意不是上限,是长度

var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);//创建一个数组并赋值


数组元素的删除

arrayObj.pop(); //移除最后一个元素并返回该元素值

arrayObj.shift();
//移除最前一个元素并返回该元素值,数组中元素自动前移

arrayObj.splice(deletePos,deleteCount);
//删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素


数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);
//将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组


数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);
//将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组


数组的拷贝

arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向

arrayObj.concat();
//返回数组的拷贝数组,注意是一个新的数组,不是指向



数组元素的排序

arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址

arrayObj.sort();
//对数组元素排序,返回数组地址



数组元素的字符串化

arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。

toLocaleString
toString valueOf:可以看作是join的特殊用法,不常用



length 属性

Length属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0开始,所以一个数组的上下限分别是:0length-1。和其他大多数语言不同的是,JavaScript数组的length属性是可变的,这一点需要特别注意。当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。


var arr=[12,23,5,3,25,98,76,54,56,76];

//定义了一个包含10个数字的数组

alert(arr.length);
//显示数组的长度10

arr.length=12;
//增大数组的长度

alert(arr.length);
//显示数组的长度已经变为12

alert(arr[8]);
//显示第9个元素的值,为56

arr.length=5;
//将数组的长度减少到5,索引等于或超过5的元素被丢弃

alert(arr[8]);
//显示第9个元素已经变为"undefined"

arr.length=10;
//将数组长度恢复为10

alert(arr[8]);
//虽然长度被恢复为10,但第9个元素却无法收回,显示"undefined"




prototype属性


返回对象类型原型的引用。prototype属性是 object 共有的。

objectName.prototype

objectName 参数是object对象的名称。

说明:用 prototype 属性提供对象的类的一组基本功能。对象的新实例继承赋予该对象原型的操作。

对于数组对象,以以下例子说明prototype 属性的用途。

给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype并使用它。


function array_max(){

var i,
   max =
this[0];

for (i = 1; i < this.length; i++)

   {

if (max < this[i])

       max =
this[i];


   }

return max;

}

Array.prototype.max = array_max;

var x = new Array(1, 2, 3, 4, 5, 6);

var y = x.max();


constructor属性

表示创建对象的函数。

object.constructor //object是对象或函数的名称。

说明:constructor属性是所有具有 prototype 的对象的成员。它们包括除 Global Math 对象以外的所有JScript 固有对象。constructor属性保存了对构造特定对象实例的函数的引用。

例:

x = new String("Hi");

if (x.constructor == String) // 进行处理(条件为真)。


y = new MyFunc;

if (y.constructor == MyFunc) // 进行处理(条件为真)。

写在<body>之间:

做文本输出

在页面上打印:

document.write(“hello dragon”);

警告框:

alert(“n”); confirm(“n”)->返回bool;prompt(“n”,”value”)返回value;

(下图是在学习PHP100的时候剪出来的图片)可以参照:

 ​Javascript学习笔记总结_javascript 基础 面向对象 d



条件语句:

1.

if(条件){

        …

}

2.

if(条件){

        …

}else{

        …

}


3.

if(条件){

        …

}else if(条件){

        …

}else{

        …

}


4.

switch(value){

case条件:

                  …

break;


case条件:

                  …

break;

        ……

default:

                  …

break;

}



循环语句:

for(i=0;i<100;i++){

        …

}


while(条件){

        …

}


函数:

function fun(e){

        …

}



事件触发:

1.

<inputtype="button" value="确定" onclick="alert('确认')" />


2.

        <script type="text/javascript">

                  function dianji(){

                           alert("你点击了自定义函数");      

                           }

   </script>  

   <input type="button" value="函数"  />


3.

        <scripttype="text/javascript">

                  function dianji(val){

                           alert(val);          

                           }

   </script>  

    <input type="text"value="函数"onclick="dianji(this.value)" />

 ​Javascript学习笔记总结_javascript 基础 面向对象 d_02





document对象:

1.获取标签:

        <scripttype="text/javascript">

                  functiondianji(){

                           var value = document.form.t.value;//打印出文本框的值

                           var len = document.form.t.value.length;//打印出文本框的长度

                           var flag = document.form.c.checked; //获取bool


                           if(len<3){

                                    alert("获取到文本框的值:"+value);

                           }else{

                                    if(flag){

                                              alert("checkbox:"+flag);

                                    }else{

                                              alert("checkbox:"+flag);

                                              }

                                    }

                           }

</script>  


       <form action="" name="form"onsubmit="return dianji()">

            <input type="text"id="t" name="t" />

      <input type="checkbox" name="c"value="check" />

      <input type="submit" value="提交"/>

  </form>


2.获取标签和HTML值:

        <scripttype="text/javascript">

                  functiongetText(){

                  varcon=document.getElementById("content").innerHTML;

                                    alert(con);

                           }

  </script>  


        <ahref="#" onclick="getText()">获取HTML内容</a>

        <divid="content">

恭喜你获取到HTML的值啦

  </div>


3.改变HTML的值

        <scripttype="text/javascript">

                  functiongetText(){

                            document.getElementById("content").innerHTML= "哈哈,我改变了HTML的值啊";

                           }

  </script>  


        <ahref="#" onclick="getText()">获取HTML内容</a>

        <divid="content">

恭喜你获取到HTML的值啦<br/>

  </div>


4.设置样式和图片切换(引用例子):

<body id="uu2">

<scripttype="text/jscript">


  //设置值

 function subs(m){

   document.getElementById("uu").src=m;

        }

         //设置样式

        functionsub2(m){

   document.getElementById("uu2").style.background=m;

        }

</script>

<img src="101.png"  id="uu" width="50"height="50" />

<selectonchange="subs(this.value)">

<option value="001.JPG">第一个</option>

<option value="101.png">第二个</option>

</select>


改变颜色

<selectonchange="sub2(this.value)">

<option value="red">红色</option>

<option value="blue">蓝色</option>

<option value="yellow">×××</option>

</select>

</body>


JS面向对象:

//1种写法,类(js没有类的说法)

        <scripttype="text/javascript">  

                  functionCircle(r) {  

                             this.r = r;  //成员函数

                  }  

                  //常量

                  Circle.PI= 3.14159;  

                  //成员函数

                  Circle.prototype.area= function() {  

                           return Circle.PI * this.r * this.r;  

                  }  

                  /************************************/  

                  varc = new Circle(1.0);      

                  alert(c.area());

        </script>


//2种写法

        <scripttype="text/javascript">

                  varCircle = function() {  

                     var obj = new Object();  

                     obj.PI = 3.14159;  

                    //函数

                     obj.area = function( r ) {  

                              return this.PI * r * r;  

                     }  

                     return obj;  

                  }  

                  /************************************/    

                  varc = new Circle();  

                  alert(c.area( 1.0 ) );

        </script>


//3种写法

        <scripttype="text/javascript">

                  varCircle = new Object();


                  Circle.PI= 3.14159;

                  Circle.Area= function( r ) {

                              return this.PI * r * r;

                  }


                  alert(Circle.Area( 1.0 ) );

        </script>


//4种写法

        <scripttype="text/javascript">

                  varCircle={

                     "PI":3.14159,

                   "area":function(r){

                                      return this.PI * r * r;

                                    }

                  };

        /************************************/          

                  alert(Circle.area(1.0) );

        </script>


//5种写法(匿名函数)

        <scripttype="text/javascript">


                  varCircle = new Function("this.PI = 3.14159;this.area = function( r ) {returnr*r*this.PI;}");


                  alert((new Circle()).area(1.0) );

        </script>



一般使用125种比较直观