js学习教程
1.操作html元素
document.getElementById(id)
得到html的值document.getElementById(id).value
2.js输出
(1)替换页面中某个标签的值
document.getElementById("demo").innerHTML=“”
(2)覆盖整个页面
document.write(“ ”)
3.从js数组和js对象到js对象数组
(1)数组
第一种方式:var names=["liuwen", "zhuyao"]
第二种方式:var names=new Array;
names[0]="liuwen";
names[1]="zhuyao"
第三种方式:var names=new Arrays("liuwen","zhuyao")
很显然:一般都用第一种方式
(2)js对象
var person1={name:"liuwen",age:18}
var person2={name:"zhuyao",age:19}
和json一个格式
得到对象的属性值:
第一种方式person1.name
第二种方式person1[name]
person1,person2代表对象名称,name,age为对象的属性,liuwen,18为属性的值
(3)js对象数组
var person1={name:"liuwen",age:18};
var person2={name:"zhuyao",age:19};
var person=[person1,person2]
注:document.getElementById("demo").innerHTML=person[0].name得到对象person1的值,并输出给demo
4.js全局变量
<script>
var name;
function myFunction()
{
name="liuwen"
}
function myFunction2(){
document.getElementById("demo").innerHTML=name
}
</script>
执行结果:页面中id为demo的value呗替换为liuwen
5.for/in循环
for/in循环涌来遍历对象
var person={name:"liuwen",age:19}
for(var x in person){
var txt=person[x]
}
输出age的值
5.try catch throw
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
catch会自动获取错误
6.js得到页面中的标签
/*
*查询整个页面中p标签,并输出p标签的值
*/
var y=document.getElementsByTagName("p");
document.write(y[0].innerHTML)
/*
*查询id="main"中p标签,并输出p标签的值
*/
var y=document.getElementById("main").getElementsByTagName("p");
document.write(y[0].innerHTML)
/*
*同理,查询整个页面中input标签,并输出input标签的值
*/
var y=document.getElementsByTagName("input");
document.write(y[0].value)
7.改变html元素的属性
(1)document.getElementById(id).属性=""
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
(2)改变html元素的样式
document.getElementById(id).style.property=new style
8.js HTML事件
(1)onload,onunload,页面载入和离开
(2)onchange,用户改变输入内容时
(3)onmouseover,onmouseout,鼠标移入和移出事件
(4)onmousedown,onmouseout,鼠标点击和释放,onclick只有点击
(5)onfoucus,获取焦点时出发事件
onfoucus()常被用来验证不通过时获取焦点(id.onfoucus())
9.js 字符串的操作
(1)为字符串添加样式
(2)计算长度
(3)字符串中制定字符首次出现的位置:indexOf()和java中的一样
(4)match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符
(5)replace() 方法在字符串中用某些字符替换另一些字符
document.write(str.replace(/ab/,"a"))
document.write(str.replace("ab","a"))
(6)....http://www.w3school.com.cn/jsref/jsref_obj_string.asp
10.js的window对象
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
1.操作html元素
document.getElementById(id)
得到html的值document.getElementById(id).value
2.js输出
(1)替换页面中某个标签的值
document.getElementById("demo").innerHTML=“”
(2)覆盖整个页面
document.write(“ ”)
3.从js数组和js对象到js对象数组
(1)数组
第一种方式:var names=["liuwen", "zhuyao"]
第二种方式:var names=new Array;
names[0]="liuwen";
names[1]="zhuyao"
第三种方式:var names=new Arrays("liuwen","zhuyao")
很显然:一般都用第一种方式
(2)js对象
var person1={name:"liuwen",age:18}
var person2={name:"zhuyao",age:19}
和json一个格式
得到对象的属性值:
第一种方式person1.name
第二种方式person1[name]
person1,person2代表对象名称,name,age为对象的属性,liuwen,18为属性的值
(3)js对象数组
var person1={name:"liuwen",age:18};
var person2={name:"zhuyao",age:19};
var person=[person1,person2]
注:document.getElementById("demo").innerHTML=person[0].name得到对象person1的值,并输出给demo
4.js全局变量
<script>
var name;
function myFunction()
{
name="liuwen"
}
function myFunction2(){
document.getElementById("demo").innerHTML=name
}
</script>
执行结果:页面中id为demo的value呗替换为liuwen
5.for/in循环
for/in循环涌来遍历对象
var person={name:"liuwen",age:19}
for(var x in person){
var txt=person[x]
}
输出age的值
5.try catch throw
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
catch会自动获取错误
6.js得到页面中的标签
/*
*查询整个页面中p标签,并输出p标签的值
*/
var y=document.getElementsByTagName("p");
document.write(y[0].innerHTML)
/*
*查询id="main"中p标签,并输出p标签的值
*/
var y=document.getElementById("main").getElementsByTagName("p");
document.write(y[0].innerHTML)
/*
*同理,查询整个页面中input标签,并输出input标签的值
*/
var y=document.getElementsByTagName("input");
document.write(y[0].value)
7.改变html元素的属性
(1)document.getElementById(id).属性=""
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
(2)改变html元素的样式
document.getElementById(id).style.property=new style
8.js HTML事件
(1)onload,onunload,页面载入和离开
(2)onchange,用户改变输入内容时
(3)onmouseover,onmouseout,鼠标移入和移出事件
(4)onmousedown,onmouseout,鼠标点击和释放,onclick只有点击
(5)onfoucus,获取焦点时出发事件
onfoucus()常被用来验证不通过时获取焦点(id.onfoucus())
9.js 字符串的操作
(1)为字符串添加样式
(2)计算长度
(3)字符串中制定字符首次出现的位置:indexOf()和java中的一样
(4)match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符
(5)replace() 方法在字符串中用某些字符替换另一些字符
document.write(str.replace(/ab/,"a"))
document.write(str.replace("ab","a"))
(6)....http://www.w3school.com.cn/jsref/jsref_obj_string.asp
10.js的window对象
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员