javascript基础知识小结

最新推荐文章于 2024-07-19 10:28:14 发布

iteye_2722

最新推荐文章于 2024-07-19 10:28:14 发布

阅读量105

点赞数

分类专栏： ajax 文章标签： JavaScript prototype json 编程正则表达式 ViewUI

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

javascript基础知识

undefind:表示不确定的类型，只是定义了一个变量，但具体什么类型并不知道，也就是var j; 只定义但并没有赋值

Javascript类型转换
转换为Number 通过parseInt进行转换
转换为String 任何数据类型+String类型=String 类型
转换为Boolean ture false 所有非0数字为true,反之为false.
Undefined,null转换为false

如：

if(undefined||null){
	alert("haha");
}else{
	//会走这里
	alert("nohaha");
}
if(2){//会走这里
	alert("haha");
}else{
	alert("nohaha");
}

数据传递：
基本类型为：值传递

  function addNum(i){
    	i = i + 5;
  }
  function test(){
	var i = 0;
	addNum(i);
	alert(i);//打印出来的值为0
  }

函数和事件通常是一种绑定关系，通过事件调用函数。如果绑定多个函数，中间用分号隔开

<marquee onmouseover="this.stop()" onmouseout="this.start()">跑马灯效果，欢迎大家学习！</marquee>

选择之后直接新打开一个页面：

function goToUrl(){
	var s = document.getElementById("toUrl");
	if(s.options[s.selectedIndex].value != -1){
		//window.location.href="http://www." + s.options[s.selectedIndex].value + ".com";
		window.open("http://www." + s.options[s.selectedIndex].value + ".com","_blank");
	}
}

<select onchange="goToUrl();" id="toUrl">
	<option value="-1">请选择要去的网站</option>
	<option value="sina">新浪网</option>
	<option value="baidu">百度</option>
</select>

***************************************************
这段代码是屏闭鼠标右键功能及复制功能

<body onmouseup="document.selection.empty();" oncontextmenu="return false;" 
  onmousemove="document.selection.empty(); onCopy="document.selection.empty();"
   onselect="document.selection.empty();">

################################################################
动态添加事件：

<script type="text/javascript">
		function mt1(){
			alert("1");
		}
		function mt2(){
			alert("2");
		}
		function mt3(){
			alert("3");
		}
		function init(){
			var btn1 = document.getElementById("button1");
			if(window.ActiveXObject){
				//这是IE浏览器,需要写全 onclick,也不需要false
				btn1.attachEvent("onclick",mt1);
			}else{//这是firefox浏览器
				btn1.addEventListener("click",mt1,false);
			}

			//btn1.addEventListener("click",mt2,false);
			//btn1.addEventListener("click",mt3,false);
		}
	</script>
  </head>

  <body onload="init();">
  	<input type="button" value="button1" id="button1"/>
  </body>

########################################################################
全选
隐藏，显示层
折叠菜单效果
###################################################################

<script language="javascript">
	function selectAll(){
		var al = document.getElementById("all");
		/*全选功能
		if(al.checked == true){
			var cbs = document.getElementsByName("cb");
			for(var i = 0; i < cbs.length; i++){
				cbs[i].checked = true;
			}
		}else{
			var cbs = document.getElementsByName("cb");
			for(var i = 0; i < cbs.length; i++){
				cbs[i].checked = false;
			}
		}
		*/	
		//全选功能
		var cbs = document.getElementsByName("cb");
		for(var i = 0; i < cbs.length; i++){
			cbs[i].checked = al.checked;
		}	
	}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    全选
      <input type="checkbox" name="checkbox2" value="checkbox" id="all" onclick="selectAll();"/>
  </p>
  <p>
    <input type="checkbox" name="cb" value="checkbox" />
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />  
    <input type="checkbox" name="cb" value="checkbox" />
  </p>
</form>
</body>
</html>

####################################################################
隐藏，显示层

<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:17px;
	top:26px;
	width:96px;
	height:215px;
	z-index:1;
	background-color: #FF6600;

}
#Layer2 {
	position:absolute;
	left:806px;
	top:16px;
	width:104px;
	height:225px;
	z-index:2;
	background-color: #FF6600;
}
#Layer3 {
	position:absolute;
	left:297px;
	top:18px;
	width:353px;
	height:31px;
	z-index:3;
}
-->
</style>
<script language="javascript">
	function hiddenAll(){
		var l1 = document.getElementById("Layer1");
		var l2 = document.getElementById("Layer2");
		l1.style.display = "none";
		l2.style.display = "none";
	}
	function showAll(){
		var l1 = document.getElementById("Layer1");
		var l2 = document.getElementById("Layer2");
		l1.style.display = "block";
		l2.style.display = "block";
	}
</script>
</head>

<body>
<div id="Layer1">
  <p>test学院</p>
  <p>Js教程</p>
  <p>火热发布中！</p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p>　　　　<span onclick="hiddenAll();" style="cursor:pointer">关闭</span></p>
</div>
<div id="Layer2">
  <p>test学院</p>
  <p>Js教程</p>
  <p>火热发布中！</p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p>　　　　<span onclick="hiddenAll();" style="cursor:pointer">关闭</span></p>
</div>
<div id="Layer3">
  <div align="center"><span onclick="showAll()" style="cursor:pointer">显示广告</span></div>
</div>
</body>
</html>

###############################################################

折叠菜单效果

<script language="javascript">
	function showInfo(str){
		//先隐藏所有
		for(var i = 1; i <= 3; i++){
			document.getElementById("tr"+i).style.display="none";
		}
		//显示指定对象
		document.getElementById(str).style.display="block";
	}
</script>
</head>

<body>
<table width="166" border="1">
  <tr>
    <td height="22" style="cursor:pointer;" onclick="showInfo('tr1')">Js教程</td>
  </tr>
  <tr id="tr1">
    <td height="65" valign="top"><table width="100%" border="0">
      <tr>
        <td>第一讲</td>
      </tr>
      <tr>
        <td>第二讲</td>
      </tr>
      <tr>
        <td>第三讲</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="22" style="cursor:pointer;" onclick="showInfo('tr2')">css教程</td>
  </tr>
  <tr id="tr2" style="display:none;">
    <td height="65" valign="top"><table width="100%" border="0">
      <tr>
        <td>第一讲</td>
      </tr>
      <tr>
        <td>第二讲</td>
      </tr>
      <tr>
        <td>第三讲</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="23" style="cursor:pointer;" onclick="showInfo('tr3')">JavaEE教程</td>
  </tr>
  <tr id="tr3" style="display:none;">
    <td height="65" valign="top"><table width="100%" border="0">
      <tr>
        <td>第一讲</td>
      </tr>
      <tr>
        <td>第二讲</td>
      </tr>
      <tr>
        <td>第三讲</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

#################################################################

js里的常用对象：字符串及日期;

function testMath(){
		//round四舍五入
		//var money = document.getElementById("money").value;;
		//alert(Math.round(money));
		//random产生随机数
		//alert(Math.floor(Math.random()*30));

	}
	function testDate(){
		var d = new Date();
		//alert(d.getYear());//取得后两位年份
		//alert(d.getFullYear());//得到完整年份
		//alert(d.getMonth() + 1);//月份，0-11
		//alert(d.getDate());
		//alert(d.getDay());//星期几
		//alert(d.getHours());//小时
		//alert(d.getMinutes());//分钟
		//alert(d.getSeconds());//秒
		document.getElementById("money").value = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
		setTimeout("testDate()",1000);
	}
	function testString(){
		//var stringname= new String("字符串");
		//var s = "字符串";
		//var em = document.getElementById("money").value;//判断电子邮件合法性
		//if(em.indexOf("@") == "-1"){
		//	alert("缺少@");
		//}
		//replace
		//while(document.getElementById("money").value.indexOf("delete") != -1){
		//d	document.getElementById("money").value=document.getElementById("money").value.replace("delete","删除");
		}
	}

##############################################################
正则表达式：

<script language="javascript">
	function check(){
		var pattern = /^[0-9]{5}[a-zA-Z]*$/;
		var v = document.getElementById("userName").value;
		var flag = pattern.test(v);
		alert(flag);
	}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input type="text" name="textfield" id="userName"/>
  <input type="button" name="Submit" value="按钮" onclick="check();"/>
</form>
</body>
</html>

##############################################################
javascript面向对象编程：
Javascript中类(对象)用function即函数来体现。
对象的定义与访问
定义属性，方法
1.使用prototype创建
2.使用this创建
3.JSON方式创建
4.其它方式创建：如动态创建
5.其它方式创建:在内置对象中添加属性或方法

####################################################################

使用prototype创建对象：
	//定义一个对象
	function test(){
		//定义属性
		test.prototype.username="baby";
		//定义一个方法
		test.prototype.sayHello=function(name){
			alert(name + "Hello!");
		}
		//也是定义一个方法
		test.prototype.sayHello2=sayHello_fun;
	}
	function sayHello_fun(){
		alert("Hello!");
	}


	function testObject(){
		//创建一个test对象
		var _o = new test();
		//调用test对象的属性
		alert(_o.username);
		//调用方法
		_o.sayHello();

		var _boy = new boy();
		alert(_boy.age);
		_boy.say("Bye!");
	}

//使用this定义一个对象 
	function boy(){
		//定义对象的属性
		this.name="小新";
		this.age=18;
		//定义方法
		this.say=function(s){
			alert(s);
		}
	}
//JSON方式创建对象 键值对方式 建议使用这种方式
	function testJson(){
		//创建一个obj的对象
		var obj = {name:"abc",age:18};
		alert(obj.age);

	}
	function showObj(o){
		alert(o.name);
		//alert(o["name"]);
	}
	function strToObj(){
		//定义一个字符串
		var strObject = "{name:'bcd',age:22}";
		showObj(eval("("+strObject+")"));
	}
JSON方式创建的对象可以传递，可以与字符串之间进行转换，转换后以键值对存在，eval函数，将字符串转换为对象
	function test1(){}
	function runTest1(){
		//创建一个对象，并动态的添加属性及方法
		var o = new test1();
		o.name="火狐";
		o.age=33;
		o.sayHello=function(){
			alert("haha,Hello!");
		}
		//alert(o.name);
		o.sayHello();
	}

在内置对象中添加属性或方法
	function testWindow(){
		window.alert("nihao");
		window.prototype.shuo=function(s){
			alert(s);
		}
		shuo("你好！");
	}
#####################################################
对象的继承
//定义一个 人 对象
function Person(){
	//这是定义一个静态属性
	Person.cityName="北京";
	Person.prototype.name="张三";
	Person.prototype.age=30;
	Person.prototype.sayHello=function(){
		alert("Hello!");
	}

}
//定义一个学生对象
function Student(){
	//定义一个属性
	Student.prototype.schoolName="中国大学";	
	//定义私有属性
	var gfName = "lingling";
}
function testExt(){
	Student.prototype = new Person();//继承的关键！
	var stu = new Student();
	//alert(stu.name);
	//stu.sayHello();
	//alert(stu.schoolName);
	alert(stu.gfName);//结果为undefind 因为访问了private的属性
	//重新赋值
	//stu.name="李四";
	//alert(stu.name);//结果为 李四

	var p = new Person();
	alert(p.cityName);//调用静态属性：不能通过实例对象调用，结果为undefind
	alert(Person.cityName);//通过类方式直接调用静态属性 结果为:北京
}

##########################################################
备注：使用this及prototype定义都是公有的属性或者方法
直接使用var 定义，为私有属性或方法，只能在其内部访问，不能通过对象去调用
##########################################################

Javascript面向对象和所有面向对象编程语言一样，都是通过实例化的方式进行访问，两个对象间的非静态变量不会被干扰。

JSON中，属性可以是方法，甚至可以是一个子对象。
使用静态变量，需要实例化一下function，告诉浏览器它不是函数，而是对象

function test(){
	//定义一个静态的属性
	test.cityName = "北京";
	test.prototype.name="张三";
	test.prototype.age=19;
}
	//json里可以定义方法，属性也可以是对象
var jobj = 
{
	name : "王五",
	sex : "男",
	age : 33,
	sayHello : function(){alert("Hello!");},
	subObj : {
		subName : "小A"
	}
};

var jsonArray = ["aaa","bbb"];

function run(){
	window.o = function(s){
		alert(s);
	}
	/*
	var t = new test();
	var t1 = new test();
	t1.name = "李四";
	alert(t.name);//张三
	alert(t1.name);//李四
	*/
	//alert(jobj.name);
	//jobj.sayHello();
	//alert(jobj.subObj.subName);
	//alert(jsonArray[0]);//访问数组
	//jobj.name = "找六";
	//alert(jobj.name);//结果为 找六
	//jsonArray[0] = "111";
	//alert(jsonArray[0]);//111

	alert(test.cityName);//结果为undefind
	new test();
	alert(test.cityName);结果：北京

	//var t = new test();
	//var t1 = new test();
	//alert(test.cityName);结果为：北京
	//alert(t.cityName);//undefind javascript中，实例对象不能访问静态变量
	o("hehehe");
}

#############################################################

方法重写覆盖：

function test(){
	test.cityName = "北京";
	test.prototype.name="张三";
	test.prototype.age=19;
	test.prototype.sayHello=function(){
		alert("Hello!");
	}
}
function run(){
	var t = new test();
	//方法重写
	t.sayHello = function(){
		alert("您好！");
	}
	t.sayHello();
}

##################################################
重写window 对象的alert方法

<script language="javascript">
	function test(){
		test.cityName = "北京";
		test.prototype.name="张三";
		test.prototype.age=19;
		test.prototype.sayHello=function(){
			alert("Hello!");
		}
	}
	function run(){		
		window.alert = function(s){
			var o = document.getElementById("Layer1");
			o.innerHTML = "<input name=a type=button value=关闭 onClick='hiddenWindow()'/>" + s;
			o.style.display = "block";
		}
		//通过内置对象方式给对象添加新的方法  很有用
		window.o = function(s){
			alert(s);
		}
		//直接调用  
		o("hahahaha");
	}
	function hiddenWindow(){
		var o = document.getElementById("Layer1");
		o.style.display = "none";
	}
</script>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:221px;
	top:136px;
	width:290px;
	height:151px;
	display:none;
	color:#FFFFFF;
	z-index:1;
	background-color: #0033CC;
}
-->
</style>
</head>

<body>
<div id="Layer1">
</div>
<input name="看结果" type="button" value="看结果"  onclick="run();"/>
</body>
</html>

##################################################

iteye_2722

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript基础知识小结

javascript基础知识undefind:表示不确定的类型，只是定义了一个变量，但具体什么类型并不知道，也就是var j; 只定义但并没有赋值Javascript类型转换转换为Number 通过parseInt进行转换转换为String 任何数据类型+String类型=String 类型转换为Boolean ture false 所有非0数字为true,反之为fal...
复制链接

扫一扫