javascript基础知识小结
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,也不需要falsebtn1.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){//ddocument.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);//调用静态属性：不能通过实例对象调用，结果为undefindalert(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]);//111alert(test.cityName);//结果为undefindnew 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>##################################################