js基本应用

最新推荐文章于 2019-08-27 11:41:58 发布

Ageless11

最新推荐文章于 2019-08-27 11:41:58 发布

阅读量585

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/Ageless11/article/details/49424645

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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 对象的成员

Ageless11

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js基本应用

js学习教程1.操作html元素document.getElementById(id)得到html的值document.getElementById(id).value2.js输出（1）替换页面中某个标签的值document.getElementById("demo").innerHTML=“”（2）覆盖整个页面document.write（“ ”）3.
复制链接

扫一扫

专栏目录