JS 学习记录
2015-07-10 16:12
609 查看
js
1.换行反斜杠\
2.y=123e5 //12300000
x=123e-5 //0.00123
3.数组
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
var cars=new Array("Audi","BMW","Volvo");
var cars=["Audi","BMW","Volvo"];
4.对象
var person={firstname:"Bill", lastname:"Gates", id:5566};
对象属性寻址方式：
name=person.lastname;
name=person["lastname"];
4.1属性和方法
car.name=Fiat
car.start()
4.2
var txt = "Hello";
txt.length=5
txt.indexOf()
txt.toUpperCase();
txt.replace()
txt.search()
4.3
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
5.Undefined 和 Null
var person;
var car="Volvo";
var house=null
6.声明变量类型
关键词 "new" 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
7.function 传参
<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
7.1 function return
function myFunction()
{
var x=5;
return x;
}
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
8 document.getElementById
document.getElementById("demo").innerHTML=myFunction();
document.getElementById("demo").innerHTML=myFunction(4,3);
9.JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
值赋给尚未声明的变量，该变量将被自动作为全局变量声明.即使它在函数内执行。
10.运算符
10.1
string 相加
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
10.2 比较
== 等于 x==8 为 false
=== 全等（值和类型） x===5 为 true；x==="5" 为 false
10.3逻辑运算符
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true
10.4三目表达式
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
11 try catch throw
<body>
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="错误：" + err + "。";
}
}
</script>
<h1>我的第一个 JavaScript 程序</h1>
<p>请输入 5 到 10 之间的数字：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入值</button>
<p id="mess"></p>
</body>
11.E-mail 验证
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
13.改变 HTML 属性
document.getElementById(id).attribute=new value
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
14.改变 HTML 样式
document.getElementById(id).style.property=new style
<script>
document.getElementById("p2").style.color="blue";
</script>
HTML DOM Style 对象参考手册
http://www.w3school.com.cn/jsref/dom_obj_style.asp
15，onload事件
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。处理 cookie。
Navigator 对象包含有关浏览器的信息。
onmouseover 和 onmouseout 事件onfocus
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
15.juery 添加新元素
var txt1="<b>I </b>"; // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素
var txt3=document.createElement("big"); // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);
16. 换行样式
style='word-wrap:break-word;white-space:normal;width:400px;border:1px'
document.getElementById("finalPrice").setAttribute("readonly", "true");
document.getElementById("housesearch").disabled = true;
document.getElementById("buttondiv").style.display = "none";
1.换行反斜杠\
2.y=123e5 //12300000
x=123e-5 //0.00123
3.数组
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
var cars=new Array("Audi","BMW","Volvo");
var cars=["Audi","BMW","Volvo"];
4.对象
var person={firstname:"Bill", lastname:"Gates", id:5566};
对象属性寻址方式：
name=person.lastname;
name=person["lastname"];
4.1属性和方法
car.name=Fiat
car.start()
4.2
var txt = "Hello";
txt.length=5
txt.indexOf()
txt.toUpperCase();
txt.replace()
txt.search()
4.3
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
5.Undefined 和 Null
var person;
var car="Volvo";
var house=null
6.声明变量类型
关键词 "new" 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
7.function 传参
<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
7.1 function return
function myFunction()
{
var x=5;
return x;
}
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
8 document.getElementById
document.getElementById("demo").innerHTML=myFunction();
document.getElementById("demo").innerHTML=myFunction(4,3);
9.JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
值赋给尚未声明的变量，该变量将被自动作为全局变量声明.即使它在函数内执行。
10.运算符
10.1
string 相加
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
10.2 比较
== 等于 x==8 为 false
=== 全等（值和类型） x===5 为 true；x==="5" 为 false
10.3逻辑运算符
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true
10.4三目表达式
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
11 try catch throw
<body>
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="错误：" + err + "。";
}
}
</script>
<h1>我的第一个 JavaScript 程序</h1>
<p>请输入 5 到 10 之间的数字：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入值</button>
<p id="mess"></p>
</body>
11.E-mail 验证
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
13.改变 HTML 属性
document.getElementById(id).attribute=new value
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
14.改变 HTML 样式
document.getElementById(id).style.property=new style
<script>
document.getElementById("p2").style.color="blue";
</script>
HTML DOM Style 对象参考手册
http://www.w3school.com.cn/jsref/dom_obj_style.asp
15，onload事件
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。处理 cookie。
Navigator 对象包含有关浏览器的信息。
onmouseover 和 onmouseout 事件onfocus
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
15.juery 添加新元素
var txt1="<b>I </b>"; // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素
var txt3=document.createElement("big"); // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);
16. 换行样式
style='word-wrap:break-word;white-space:normal;width:400px;border:1px'
document.getElementById("finalPrice").setAttribute("readonly", "true");
document.getElementById("housesearch").disabled = true;
document.getElementById("buttondiv").style.display = "none";
(new Number(text.houseArea)).toFixed(2)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- json格式封装，以及格式转换
- 原型prototype -- 深入理解javascript
- jsp页面使用 jstl，出现 Unknown tag (c:foreach)
- js RegExp 替换括号
- <A href="javascript:void(0)">什么意思？
- js Date扩展Format()函数
- js之轮播再改进
- JS的全局变量与局部变量
- JS字符(字母)ASCII码转换方法
- 自定义脚本运行TestComplete项目
- 高质量的javascript代码 -- 深入理解Javascript
- RequestAnimationFrame更好的实现Javascript动画
- JSP——EL表达式
- ExtJs Grid 日期控件列 显示问题
- JS加分隔符
- Jsoup学习笔记5：Jsoup 解析SAZ文件中的htm文档源码实例
- javascript:void(0) 点#链接不跳到顶部
- Js 小技巧
- ExtJS xtype大全【精】
- TweenMax.js 用法