获取元素 如果id是变量不需要加引号,如果是字符串需要添加 引号""
document.getElementById("id名称")
获取元素里面的值value
document.getElementById("id名称").value;
警告框:
alert();
向页面指定位置写入内容:
innerHTML(属性)
向页面写入内容:
document.write(“”);
Html部分代码:
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="1300px" style="display: none;" id="img1"/>
设置标签内属性值。
//根据id获取dom对象
var imgEl = document.getElementById("img1");
//设置标签的src属性
imgEl.src="../img/"+i+".jpg";
//设置图片的属性(display)让其显示
imgEl.style.display="block";
//获取图片并设置隐藏的属性
document.getElementById("img1").style.display="none";
页面加载事件onload)并为其绑定一个函数init()onload 加在body里面!
<body onload="init()">
Location 对象
Location 对象包含有关当前 URL 的信息。
href:该属性可以完成通过JS代码控制页面的跳转。
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
<script>
function tiao() {
window.location.href = "http://www.baidu.com";
}
</script>
</head>
<body>
<a href="#" onclick="tiao()">跳转到百度首页</a>
</body>
</html>
History对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。
历史页面:使用location页面(把href属性值改为当前的history)
History页面代码:
<input type="button" value="返回上一个页面" onclick="javascript:history.back()"/>
go(参数)
参数:-1 返回上一个历史记录页面;-2返回上上一个历史记录页面,1进入下一个历史记录页面
Navigator对象
Navigator 对象包含有关浏览器的信息
Screen对象
Screen 对象包含有关客户端显示屏幕的信息。
向页面指定位置写入内容:innerHTML属性(该属性的值存在覆盖现象)
//获取span元素,给出提示信
document.getElementById(id+"span").innerHTML="<font color='gray'>"+xxxx+"</font>";
javascript的事件
设置背景颜色(.style.backgroundColor)
<script>
function changeColor(id,flag){
if(flag=="over"){
document.getElementById(id).style.backgroundColor="red";
}else if(flag=="out"){
document.getElementById(id).style.backgroundColor="white";
}
}
使用JS完成表格的一个隔行换色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行换色</title>
</head>
<script>
function init(){
//获取table对象
var elementById = document.getElementById("myTable");
//获取tbody行数
var length = elementById.tBodies[0].rows.length;
//遍历获取tbody
for (var i = 0; i < length; i++) {
//判断奇数偶数
if(i%2==0){
//获取当前行
elementById.tBodies[0].rows[i].style.backgroundColor="red";
}else{
elementById.tBodies[0].rows[i].style.backgroundColor="blue";
}
}
}
</script>
<body onload="init()">
<table bgcolor="#faebd7" border="1" width="500" align="center" id="myTable">
<thead>
<tr>
<th>编号</th>
<th>名字</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>张三</th>
<th>12</th>
</tr>
<tr>
<th>2</th>
<th>李四</th>
<th>12</th>
</tr>
<tr>
<th>3</th>
<th>王五</th>
<th>12</th>
</tr>
<tr>
<th>4</th>
<th>马六</th>
<th>12</th>
</tr>
</tbody>
</table>
</body>
</html>
使用js实现一个表格鼠标聚焦和失焦的高亮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格高亮显示</title>
</head>
<script>
function trChange(id,flag) {
if (flag=='over') {
document.getElementById(id).style.backgroundColor="red";
}else{
document.getElementById(id).style.backgroundColor="white";
}
}
</script>
<body >
<table bgcolor="white" border="1" width="500" align="center" >
<thead>
<tr>
<th>编号</th>
<th>名字</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr onmouseover="trChange('tr1','over')" onmouseout="trChange('tr1','out')" id="tr1">
<th>1</th>
<th>张三</th>
<th>12</th>
</tr>
<tr onmouseover="trChange('tr2','over')" onmouseout="trChange('tr2','out')" id="tr2">
<th>2</th>
<th>李四</th>
<th>12</th>
</tr>
<tr onmouseover="trChange('tr3','over')" onmouseout="trChange('tr3','out')" id="tr3">
<th>3</th>
<th>王五</th>
<th>12</th>
</tr>
<tr onmouseover="trChange('tr4','over')" onmouseout="trChange('tr4','out')" id="tr4">
<th>4</th>
<th>马六</th>
<th>12</th>
</tr>
</tbody>
</table>
</body>
</html>
使用JS完成省市二级联动
事件(onchange)
使用一个二维数组来存储省份和城市(二维数组的创建?)
获取用户选择的省份(使用方法传参的方式:this.value)
遍历数组(获取省份与用户选择的省份比较,如果相同了,继续遍历该省份下所有的城市)
创建文本节点和元素节点并进行添加操作
createTextNode()
createElement()
appendChild()
javascript的DOM操作
Document对象
整个html文件都成为一个document文档
Element对象
我们所认知的html页面中所有的标签都是element元素
Attribute对象
我们所认知的html页面中所有标签里面的属性都是attribute
常用方法:
方法 | 描述 |
---|---|
getElementById() | 返回带有指定 ID 的元素。 |
getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 |
getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
appendChild() | 把新的子节点添加到指定节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
insertBefore() | 在指定的子节点前面插入新的子节点。 |
createAttribute() | 创建属性节点。 |
createElement() | 创建元素节点。 |
createTextNode() | 创建文本节点。 |
getAttribute() | 返回指定的属性值。 |
setAttribute() | 把指定属性设置或修改为指定的值。 |