JS的组成
- JS基础学习ECMAScript基础语法为后面做铺垫，Web APIs 是JS的应用，大量使用JS基础语法做交互效果
- API 是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能 - Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
Web API主要是针对浏览器提供的接口，主要针对于浏览器做交互效果
DOM
-
文档对象模型（DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式
-
DOM树
一个页面就是一个文档，DOM中使用document表示
页面中的所有标签都是元素，DOM中使用element表示
网页中的所有内容都是节点（标签，属性，文本，注释），DOM中使用node表示 -
通过DOM获取页面元素
（1） ID
因为我们文档页面从上往下加载，所以先得有标签，所以我们script写到标签的表面
//参数id是大小写敏感的字符串
//返回的是一个元素对象，Element对象。若没有这个元素返回null。
var timer = document.getElementById(‘time’);
//打印返回的元素对象，更好的查看里面的属性和方法
console.dir(timer);
（2） document.getElementsByTagName();通过标签名字获取
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName(‘li’);
console.log(lis);
console.log(lis[0]);
//2.我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);}
（3） 通过HTML5新增的方法获取
1， getElementByClassName 根据类名获得某些元素集合
2， querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号
（4）
1. 获取Body元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
2. 获取html元素
var htmlEle = document.documentElement;
console.log(htmlEle);
-
事件基础
JS使我们有能力创建动态页面，而事件是可以被js侦测到的行为
简单理解：触发—响应机制 -
事件三要素：事件源，事件类型，事件处理程序
执行事件步骤：
1,。 获取事件源 （按钮）
2，。 绑定事件也叫注册事件 （点击）
3，。 添加事件处理程序 （弹出窗口） -
常见鼠标事件
-
操作元素（js的DOM操作可以改变网页内容，结构和样式，我们可以利用DOM操作元素来改变元素里面的内容，属性等。）
（1）改变元素内容 -
innerText 不能识别html标签，去除空格和换行
innerHTML可以识别html标签，起始位置到终止为种子的全部内容，包括html标签，同时保留空格和换行
这两个属性是可读写的（可读写的意思是都可以改变元素的标签都可以获取元素的标签） 可以获取元素里面的内容 -
-
表单操作
（1）表单里面的值 文字内容是通过value来修改的
input.value = ‘被点击了’;
（2）如果想要某个表单被禁用 不能再点击disabled 我们想要这个按钮 button禁用
btn.disabled = true;
this.disabled = true; 指向的是事件函数的调用者
（3）
-
京东密码框案例
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="images/close.png" alt="" id="eye">
</label>
<input type="password" id="pwd">
</div>
<script>
//1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
//注册事件 处理程序
var flag = 0;
eye.onclick = function() {
if (flag == 0) {
pwd.type = 'text';
flag = 1;
} else {
pwd.type = 'password';
flag = 0;
}
}
</script>
-
样式属性操作
可以通过JS修改元素的大小、颜色、位置等样式
JS里面的样式采取驼峰命名法，比如 fontSize,backgroundColor
JS修改style样式操作，产生的是行内样式，css权重比较高
我们可以通过，修改元素的className更改元素的样式 适合于修改的样式较多或者功能复杂的情况this.className = ‘change’;
新类名会覆盖原先的类名
要想保留原先的类，又想要现在的类
this.className = ‘big change’; -
显示和隐藏
点击btn,box隐藏
btn.onclick = function() {
box.style.display = ‘none’;
} -
焦点事件
获得焦点 onfocus 失去焦点 onblur
var text = document.querySelector('input');
//注册事件 获得焦点事件 onfocus
text.onfocus = function() {
// console.log('得到了焦点');
if (this.value === '手机') {
this.value = '';
}
//获得焦点把文本框内的颜色变黑
this.style.color = 'black';
}
//失去焦点事件 onblur
text.onblur = function() {
if (this.value === '') {
this.value = '手机';
}
this.style.color = '#999';
}
<style>
.register {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
color: #999;
font-size: 12px;
padding-left: 10px;
}
.wrong {
color: red;
}
.right {
color: green;
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
//注册事件，失去焦点
ipt.onblur = function() {
//根据表单里面值的长度
if (this.value.length < 6 || this.value.length > 16) {
message.className = 'message wrong';
message.innerHTML = '你的位数不对，要求6-16位';
} else {
message.className = 'message right';
message.innerHTML = '恭喜你，输入正确';
}
}
</script>
- 操作元素总计
- 排他思想
如果想给相同的一组元素，设置样式，可以利用for循环；
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法- 所有元素全部清除样式（去掉其他人）
- 给当前元素设置样式（留下我自己）
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
<script>
var btns = document.getElementsByTagName('button');
// btns得到的是一个伪数组，里面每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
//(1) 把所有按钮背景颜色去掉
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
//(2)然后才让当前元素背景颜色为pink
this.style.backgroundColor = 'pink';
}
}
</script>
17. 给body换背景图片 hbody.style.backgroundImage = ‘url(’ + this.src + ‘)’;
`
- 表格隔行变色 遍历所有的行，用querSelectorAll ****querySelectorAll('tr') 鼠标经过事件和鼠标离开事件的分别注册事件
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr');
//循环遍历 注册事件
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function() {
this.className = 'bg';
}
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
- 表单全选取消全选案例
<table cellspacing=0 cellpadding=0>
<thead>
<td>
<input type="checkbox" name="" id="j_cbAll" />
</td>
<td>商品</td>
<td>价钱</td>
</thead>
<tbody id="j_tbs">
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
</tbody>
</table>
<script>
// 全选和取消全选的做法
var j_cbAll = document.getElementById('j_cbAll');
var j_tbs = document.getElementById('j_tbs').getElementsByTagName('input');
//注册事件
j_cbAll.onclick = function() {
// this.checked 可以得到当前复选框的选中状态,如果是true,就是选中。
for (var i = 0; i < j_tbs.length; i++) {
//遍历j_tbs，如果this.checked为true则都为true
j_tbs[i].checked = this.checked;
}
}
//复选框需要全部选中，上面全选才能选中：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面的所有复选框是否有没有选中的，如果有一个没选中，上面全选就不选中
for (var i = 0; i < j_tbs.length; i++) { //遍历，给每一个小的按钮绑定一个点击事件
j_tbs[i].onclick = function() {
// flag 控制全选按钮是否选中
var flag = true; //一点击下面的按钮 flag就是true 就会执行下面的循环
for (var i = 0; i < j_tbs.length; i++) { //循环小按钮，如果有一个没有被点击的flag就为false
if (!j_tbs[i].checked) {
flag = false;
break;
}
}
j_cbAll.checked = flag; //最后让上面的按钮执行 flag值
}
}
</script>
扫一扫
119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
