1.js组成
基本语法掌握后,我们要学习DOM和BOM,页面交互功能
API: 就是一个接口,一些预定义的函数。
2.DOM(文档对象模型)
文档:一个页面就是一个文档,document
元素:网页中的标签都是元素,element
节点:网页中的内容就是节点,node
①获取网页元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='xiaodi'>小邸</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="nav">
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
<div class="hezi">盒子1</div>
<div class="hezi">盒子2</div>
<!--此处的js需要写在下面,因为页面加载从上往下-->
<script>
// 1.通过Id获取
var byid = document.getElementById('xiaodi');
console.dir(byid);
// 2.通过标签获取
// byelement是存放所有标签的数组,获取直接遍历
var byelement = document.getElementsByTagName('li');
// 这样操作会获得所有的li标签,我只想获取上边的怎么办呢
// 可以先通过id来获取
var nav = document.getElementById('nav');
var nav_li = nav.getElementsByTagName('li');
console.log(nav_li[0]);
// 3.html5新增,支持ie9以上的类名获取
var byclass = document.getElementsByClassName('hezi');
console.log(byclass);
// 4.querySelector返回第一个元素,任何选择器
var first = querySelector('.hezi');
var first1 = querySelector('#id');
// 或者使用querySelectorAll()全部获取
// 特殊元素html和body
var bodyele = document.body;
var htmlele = document.documentElement;
</script>
</body>
</html>
②事件基础
出发响应机制,分为三个部分,分别为事件源,事件类型,事件处理程序。
事件源就是谁触发事件,类型就是什么样的事件,处理程序就是干什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点击弹出对话框</button>
<div id="nav">你中奖了!</div>
<script>
// 获取事件源
var btn = document.getElementById('btn');
// 触发事件包括点击,鼠标经过,键盘,滚轮等等
btn.onclick = function() {
alert('出来了');
}
var nav = document.getElementById('nav');
nav.onclick = function() {
alert('中了');
}
</script>
</body>
</html>
③操作元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点击</button>
<div id="box">点击按钮出时间</div>
<p>不点也能获取</p>
<div id="box1"></div>
<script>
// 1.改变元素内容innerText,不识别html标签
var btn = document.querySelector('#btn');
btn.onclick = function() {
var box = document.querySelector('#box');
// 改变内容
box.innerText = getTime();
}
// 不要点击刷新直接得到时间
var p = document.querySelector('p');
p.innerText = getTime();
function getTime() {
var date1 = new Date();
var date2 = date1.getFullYear() + '年' + (date1.getMonth() + 1) + '月' + date1.getDate() + '日' + date1.getHours() + '时' + date1.getMinutes() + '分' + date1.getSeconds() + '秒' + ' 星期' + date1.getDay();
return date2;
}
// 2.innerHtml识别html标签
var box1 = document.querySelector('#box1');
// box1.innerText = '<strong>加粗文字</strong>'; // 不好使,不识别
box1.innerHTML = '<strong>加粗文字</strong>';
// 两种操作元素的方法都可以获得元素内容和修改元素
//
</script>
</body>
</html>
④改变元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="xi">喜羊羊</button>
<button id="lan">懒洋洋</button>
<div>
<img src="C:\java-script_learning\image\xi.jpg" title="喜羊羊">
</div>
<button id="btn">获取</button>
<input type="text" value="输入内容">
<script>
// 切换图片
var xi = document.querySelector('#xi');
var lan = document.querySelector('#lan');
var image = document.querySelector('img');
lan.onclick = function() {
image.src = 'C:\\java-script_learning\\image\\lan.jpg';
image.title = '懒洋洋'; }
xi.onclick = function() {
image.src = 'C:\\java-script_learning\\image\\xi.jpg';
image.title = '懒洋洋';
}
// 改变文本框内容
var btn = document.querySelector('#btn');
var input = document.querySelector('input');
btn.onclick = function() {
input.value = '别输入';
btn.disabled = true;
}
</script>
</body>
</html>
简单得密码隐藏和显示例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: 0;
}
.box img {
width: 20px;
height: 20px;
top: 25px;
right: 2px;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
用户名<input type="text" id="name"><br>
</div>
<div class="box">
<label for="">
<img src="C:\java-script_learning\image\yanj1.jpg" alt="">
</label>
密码<input type="password" id="pass">
</div>
<script>
var pass = document.querySelector('#pass');
var btn = document.querySelector('button');
var image = document.querySelector('img');
flag = 0;
image.onclick = function() {
if(flag == 0) {
pass.type = 'text';
image.src = 'C:\\java-script_learning\\image\\yanj2.jpg';
flag = 1;
}else {
pass.type = 'password';
image.src = 'C:\\java-script_learning\\image\\yanj1.jpg';
flag = 0;
}
}
</script>
</body>
</html>
⑤操作元素样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
<script>
// 点击盒子变颜色,操作样式
var box = document.querySelector('div');
box.onclick = function() {
box.style.backgroundColor = '#ccc';
}
</script>
</body>
</html>
或者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.change {
background-color: aqua;
color: brown;
font-size: large;
}
</style>
</head>
<body>
<div>
哈哈
</div>
<script>
var box = document.querySelector('div');
box.onclick = function() {
// 增加类名给样式
this.className = 'change';
}
</script>
</body>
</html>
文本消失复原案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" value="手机">
<script>
var te = document.querySelector('input');
// onfocus获取焦点
te.onfocus = function() {
if(te.value === '手机') {
te.value = '';
}else {
te.value = te.value;
}
}
// onblur失去焦点
te.onblur = function() {
if(te.value === '') {
te.value = '手机';
}
}
</script>
</body>
</html>
总结