变量
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变量和操作元素的更多相关文章

  1. Javascript入门(二)变量、获取元素、操作元素

    一.变量 Javascript 有五种基本数据类型 number.String.boolean.undefined.null 一种复合类型:object 二.使用getElementById方法获取元 ...

  2. 前端开发JavaScript入门——JavaScript介绍&基本数据类型

    JavaScript 诞生于1995年,它的出现主要是用于处理网页中的 前端验证. • 所谓的前端验证,就是指检查用户输入的内容是否符合一定的 规则. • 比如:用户名的长度,密码的长度,邮箱的格式等 ...

  3. 开心菜鸟系列----变量的解读(javascript入门篇)

                       console.info(         console.info(window['weiwu'])          console.info(window. ...

  4. javascript 操作元素属性的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. javascript 里找元素操作元素

      javascript  一.找到元素. var d = document.getElementById("") var d = document.getElementsByNa ...

  6. 每天一个JavaScript实例-操作元素定位元素

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. python 之 前端开发( JavaScript变量、数据类型、内置对象、运算符、流程控制、函数)

    11.4 JavaScript 11.41 变量 1.声明变量的语法 // 1. 先声明后定义 var name; // 声明变量时无需指定类型,变量name可以接受任意类型 name= " ...

  8. Javascript操作元素属性方法总结

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

随机推荐

  1. Android怎样监听蓝牙耳机的按键事件

    Android怎样监听蓝牙耳机的按键事件 写在前面: 直接想要代码非常easy,你直接把滚动栏拉到最底端就能够看到.假设想要十分地了解为什么,那就依照我规划的一步一步来理解.下面測试环境以手头上有的「 ...

  2. js坑爹笔试题目汇总(持续更新中)

    把你的面试官问倒,你就是一个合格的面试者了,以下总结一些易错的js笔试题目,会持续更新中.欢迎关注 1,考察this var length = 10 function fn(){ alert(this ...

  3. MySQL中文參考手冊

    非常好的中文手冊: 链接:http://www.sdau.edu.cn/support/mysq_doc/manual_toc.html

  4. DSPC6748中某问题的解决方式

    因为之前没有做过DSP相关的开发,属于菜鸟中的菜鸟.出现故障后.不知道从哪方面来解决这些小问题. 开发环境:CCS5.5.0 开发板:TI公司的TMS320C6748 问题: 控制台出现初始化结束后多 ...

  5. Android实战技巧之八:Ubuntu下切换JDK版本【转】

    本文转载自:http://blog.csdn.net/lincyang/article/details/42024565 Android L之后推荐使用JDK7编译程序,这是自然发展规律,就像是4年前 ...

  6. node inspector的安装以及使用【已经淘汰了】

    https://github.com/node-inspector/node-inspector 前提 1.npm install -g node-pre-gyp https://github.com ...

  7. android.content.ReceiverCallNotAllowedException: 解决方法

    一. android.content.ReceiverCallNotAllowedException: IntentReceiver components are not allowed to reg ...

  8. Opencv+Zbar二维码识别(二维码校正)

    二维码和车牌识别基本都会涉及到图像的校正,主要是形变和倾斜角度的校正,一种二维码的畸变如下图: 这个码用微信扫了一下,识别不出来,但是用Zbar还是可以准确识别的~~. 这里介绍一种二维码校正方法,通 ...

  9. ZOJ 3964 Yet Another Game of Stones Nim游戏变种

    ZOJ3964 解题思路 此题的题意比较容易理解,可以简单的看着 Nim 博弈的变种.但问题在于 Alice 对第 i 堆石子的取法必须根据 bi 确定.所以如果这个问题能够归结到正常的 Nim 博弈 ...

  10. 22.Extjs Panel中显示多行工具栏(tbar)

    转自:http://blog.sina.com.cn/s/blog_454fbf740100t0xj.html 在应用程序的制作中,我们经常性的会用到工具栏,在Extjs中Panel中提供了tbar和 ...