大一开始接触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开始,所以一个数组的上下限分别是:0和length-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的时候剪出来的图片)可以参照:
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)" />
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>
//第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>
一般使用1、2、5种比较直观