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

变量
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对象，然后将它赋值给一个变量，比如：

第一种方法：将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触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了

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>





</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”
通过“.”操作属性：
操作元素属性实例

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

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

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

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

Javascript入门(二)变量、获取元素、操作元素
一.变量 Javascript 有五种基本数据类型 number.String.boolean.undefined.null 一种复合类型:object 二.使用getElementById方法获取元 ...
前端开发JavaScript入门——JavaScript介绍&基本数据类型
JavaScript 诞生于1995年,它的出现主要是用于处理网页中的前端验证. • 所谓的前端验证,就是指检查用户输入的内容是否符合一定的规则. • 比如:用户名的长度,密码的长度,邮箱的格式等 ...
开心菜鸟系列－－－－变量的解读（javascript入门篇）
console.info( console.info(window['weiwu']) console.info(window. ...
javascript 操作元素属性的方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
javascript 里找元素操作元素
javascript 一.找到元素. var d = document.getElementById("") var d = document.getElementsByNa ...
每天一个JavaScript实例-操作元素定位元素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
python 之前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）
11.4 JavaScript 11.41 变量 1.声明变量的语法 // 1. 先声明后定义 var name; // 声明变量时无需指定类型,变量name可以接受任意类型 name= " ...
Javascript操作元素属性方法总结
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

随机推荐

Cracking the Coding Interview 150题（一）
1.数组与字符串 1.1 实现一个算法,确定一个字符串的所有字符是否全都不同.假设不允许使用额外的数据结构,又该如何处理? 1.2 用C或C++实现void reverse(char* str)函数, ...
eclipse到Android Studio的项目迁移
一直以来.公司开发都是用eclipse.可是随着我们应用不断成长.项目结构越来越庞大.项目间依赖关系变得非常复杂.用eclipse管理显得非常吃力,常常一个同事更改依赖项目之后,别人在更新.都会出现故 ...
Codeforces Beta Round #2 B. The least round way
这个2B题还好~~ 题目大意: 给出一个矩阵.从左上走到右下,仅仅能往右或下走.路径中每一个格子有一个数.这些数相乘得出一个数. 求这个数末尾零最少的一条路径. 解题思路: 找出一条路径.乘积得数中素 ...
python爬虫【第1篇】
一.文件读写 1.打开文件 # 以读文件模式代开new.txt f=open(r"c:\new.txt",“r”) f=open("c:\new.txt",“r ...
iOS开发——高级篇——iOS中为什么block用copy属性
1. Block的声明和线程安全Block属性的声明,首先需要用copy修饰符,因为只有copy后的Block才会在堆中,栈中的Block的生命周期是和栈绑定的,可以参考之前的文章(iOS: 非ARC ...
【bzoj1452】[JSOI2009]Count
二维树状数组 #include<iostream> #include<cstdio> #include<cstring> using namespace std; ...
(转)web会话管理方式
阅读目录 1. 基于server端session的管理 2. cookie-based的管理方式 3. token-based的管理方式 4. 安全问题 5. 总结 http是无状态的,一次请求结束, ...
彻底弄懂px,em和rem的区别
国内的设计大师都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点: 1.IE无法调整那些使用px作为单位的字体大小: 2.国外大部分网站能够调整的原因 ...
如何在linux 32位机器编译64位程序
编译64位程序,不一定要编译机器是64位的,但是32位机器默认安装的gcc编译环境还是不能用来编译64位程序. 编译64位程序,需要加上-m64编译器参数,默认安装的gcc已经支持该参数,但是缺少64 ...
Git分支管理策略（转）
作者: 阮一峰日期: 2012年7月 5日使用"版本管理系统"(Version Control System). 眼下最流行的"版本管理系统",非Git莫属 ...

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

前端JavaScript入门——JavaScript变量和操作元素的更多相关文章

随机推荐

热门专题