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>##################################################