码迷,mamicode.com
首页 > 编程语言 > 详细

前端JavaScript入门——JavaScript变量和操作元素

时间:2019-06-06 09:22:59      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:操作   下划线   type   ring   基本   基本数据   window   java   书写方式   

变量
JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’:

var a = 123;
var b = ‘asd‘;
//同时定义多个变量可以用","隔开,公用一个‘var’关键字
var c = 45,d=‘qwe‘,f=‘68‘;
1
2
3
4
变量类型

5种基本数据类型:
number、string、boolean、undefined、null

1种复合类型:
object

变量、函数、属性、函数参数命名规范

区分大小写
第一个字符必须是字母、下划线(_)或者美元符号($)
其他字符可以是字母、下划线、美元符或数字
js定义变量使用var定义,可以一行定义一个,也可以一个var定义多个变量;

js变量声明和类型实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 单行注释

/*
多行注释
下面将两个变量申明合成一句
*/

//var iNum = 12;
//var sTr = ‘abc‘;
var iNum = 12, sTr = ‘abc‘;
var iNum02;
//alert(iNum);
//alert(sTr);
alert(iNum02);
</script>
</head>
<body>

</body>
</html>

js变量声明和类型实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
获取元素方法一
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如:

<script type="text/javascript">
var oDiv = document.getElementById(‘div1‘);
</script>
....
<div id="div1">这是一个div元素</div>
1
2
3
4
5
上面的语句,如果把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载,解决方法有两种:

第一种方法:将javascript放到页面最下边

....
<div id="div1">这是一个div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById(‘div1‘);
</script>
</body>
1
2
3
4
5
6
7
第二种方法:将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,就不会出错了

<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById(‘div1‘);
}
</script>
....
<div id="div1">这是一个div元素</div>
1
2
3
4
5
6
7
如果我们要通过js给元素添加样式,比如设置font-size=30px;注意要将-的书写方式改为驼峰式的书写方式,比如fontSize,否则会报错;

js获取元素改变样式实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
/*
document.getElementById(‘div1‘).style.color = ‘red‘;
document.getElementById(‘div1‘).style.fontSize = ‘30px‘
用变量简化代码:
*/
var oDiv = document.getElementById(‘div1‘);

oDiv.style.color = ‘red‘;
oDiv.style.fontSize = ‘30px‘;
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
<!--<script type="text/javascript">-->
<!--var oDiv = document.getElementById(‘div1‘);-->
<!--oDiv.style.color = ‘red‘;-->
<!--oDiv.style.fontSize = ‘30px‘;-->
<!--</script>-->
</html>

js获取元素改变样式实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
操作元素属性
获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。

操作属性的方法 :

“.” 操作
“[ ]”操作
属性写法

html的属性和js里面属性写法一样
“class” 属性写成 “className”
“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”
通过“.”操作属性:
操作元素属性实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById(‘div1‘);
var oA = document.getElementById(‘link‘);
var oDiv2 = document.getElementById(‘div2‘);

// 读取属性
var sId = oDiv.id;
alert(sId);

// 写属性
oDiv.style.color = "red";
oA.href = "http://www.baidu.com";
oA.title = "这是去到百度网的链接";

// 操作class属性需要写成 className
oDiv2.className = "box2";
}
</script>

<style type="text/css">
.box{
font-size:20px;
color:gold;
}
.box2{
font-size:30px;
color:pink;
}
</style>
</head>
<body>
<div id="div1">这是一个div元素</div>
<a href="#" id="link">这个一个链接</a>
<div class="box" id="div2">这是第二个div</div>
</body>
</html>

操作元素属性实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
通过“[ ]”操作属性:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById(‘div1‘);
var sMystyle = ‘fontSize‘;
var sValue = ‘30px‘;
// oDiv.style.fontSize = sValue; //这句话有效
/*
这一句没有作用:变量sMystyle被认为是一个属性
oDiv.style.sMystyle = sValue;
*/
/* 属性用变量来代替的话需要用[]来操作*/
oDiv.style[sMystyle] = sValue;
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>

通过“[ ]”操作属性示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
改变元素内容

innerHTML
innerHTML可以读取或者写入标签包裹的内容
常用于从数据库读取内容,然后塞入标签内;

innerHTML 示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById(‘div1‘);
// 读取元素里面的内容
var sTr = oDiv.innerHTML;
alert(sTr);
// 写元素里面的内容
//oDiv.innerHTML = "修改的文字";
oDiv.innerHTML = "<a href=‘http://www.baidu.com‘>百度一下</a>"
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>

innerHTML 示例
--------------------- 

前端JavaScript入门——JavaScript变量和操作元素

标签:操作   下划线   type   ring   基本   基本数据   window   java   书写方式   

原文地址:https://www.cnblogs.com/hyhy904/p/10983047.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!