这篇博客介绍了JavaScript的核心概念，包括API和Web API的使用，DOM的基本概念和DOM树，详细讲解了如何获取和操作页面元素，特别是事件的基础知识和常见鼠标事件。还探讨了改变元素内容、属性操作及样式修改的方法，并提供了几个实用案例，如点击显示隐藏密码和循环精灵图。
JS核心第一天
一.API 和Web API
- API是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现
- Web API主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。
- Web API -般都有输入和输出(函数的传参和返回值), Web API很多都是方法(函数)
4.学习Web API可以结合前面学习内置对象方法的思路学习
二.DOM简介
1.1什么是DOM
文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言( HTML
或者XML )的标准编程接口。
W3C已经定义了一-系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
1.2DOM树
三.获取元素
- 根据ID获取
var element= document.getElementById(id);
- 根据标签名获取
var element= document.getElementByTagName()
//返回带有指定标签名的对象集合,以伪数组的形式储存
还可以获取某个元素(父元素)内部所有指定标签名的子元素.
element .getElementsByTagName( '标签名');
注意:父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。
- 通过HTML5新增的方法获取
1.document . getElementsByClassName(类名') ; //根据类名返回元素对象集合
2.document . querySelector ( '选择器') ;
//根据指定选择器返回第一个元素对象
3.document . querySe1ectorAll( '选择器');
//根据指定选择器返回
- 特殊元素获取
获取body元素
1. doucumnet. body // 返回body元素对象
获取htmI元素
1. document . documentElement
//返回htm1元素对象
四.事件基础
3.1事件概述：
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。
简单理解:触发–响应机制。网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。
<body>
<button id= "btn">唐伯虎</ button>
<script>
//点击一个按钮，弹出对话框
// 1.事件是有三部分组成 事件源事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源事件被触发的对象 谁按钮
var btn = document . getElementById('btn' );
//(2) 事件类型
如何触发什么事件比如鼠标点击(onclick)还是鼠标经过还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式完成
btn.onclick = function() {
alert('点秋香');
}
</script>
</body>
3.2执行事件的步骤
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)
3.3常见的鼠标事件
五.操作元素
1.改变元素内容
element.innerText=’ ’
从起始位置到终止位置的内容,但它不识别html标签，同时空格和换行也会去掉
element.innerHTML=’ ’
起始位置到终止位置的全部内容,识别html标签,同时保留空格和换行
2.常用元素属性操作
- innerText、 innerHTML 改变元素内容
- src、href
- id、alt、title
3表单元素的属性操作
利用DOM可以操作如下表单元素的属性:
type、value、checked、 selected、 disabled
以value为例
<button>按钮</button>
<input type="text" value="输入 内容">
<script>
// 1.获取元素
var btn = document . querySelector( ' button');
var input = document . querySelector( ' input');
// 2.注册事件处理程序
btn.onclick = function() {
// input. innerHTML = ' 点击了';
这个是普通盒子比如div标签里面的内容
//表单里面的值文字内容是通过value 来修改的
input.value = '被点击了';
</script>
4.样式属性操作
我们可以通过JS修改元素的大小、颜色、位置等样式。
- element. style行内样式操作
- element. className类名样式操作
注意:
- JS里面的样式采取驼峰命名法比如fontSize、 backgroundColor
- JS修改style样式操作,产生的是行内样式, Css权重比较高
- 如果样式修改较多,可以采取操作类名方式更改元素样式。
- class因为是个保留字,因此使用className来操作元素类名属性
- className会直接更改元素的类名,会覆盖原先的类名。
5.自定义属性的操作
1.获取属性值
element .属性 获取属性值。
element .getAttribute( ‘属性’);
区别:
element .属性获取内置属性值 (元素本身自带的属性)
element .getAttribute( ‘属性’ );主要获得自定义的属性 ( 标准)我们程序员自定义的属性
2.设置属性值
element.属性=‘值’
设置内置属性值。
element . setAttribute(‘属性’，‘值’) ;
3.移除属性值
element . removeAttribute (‘属性’) ;
六.案例
1.点击显示隐藏密码
<!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 {
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.box input {
width: 370px;
height: 30px;
outline: none;
border: 0;
}
.box label img {
width: 24px;
position: absolute;
top: 5px;
right: 2px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="1.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
var flag = 0;
eye.onclick = function () {
if (flag == 0) {
pwd.type = 'text';
eye.src = "3.png";
flag = 1;
} else {
pwd.type = 'password';
eye.src = "1.png";
flag = 0;
}
}
</script>
</body>
</html>
2.循环精灵图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(images/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 1. 获取元素 所有的小li
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 让索引号 乘以 44 就是每个li 的背景y坐标 index就是我们的y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
</body>
</html>
3.下拉菜单
<!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>
* {
margin: 0px;
padding: 0px;
}
.nav {
margin: 100px auto;
background-color: rgb(182, 177, 177);
width: 100px;
height: 40px;
}
ul {
list-style: none;
}
ul li {
text-align: center;
line-height: 40px;
}
ul li ul {
display: none;
}
a {
text-decoration: none;
color: #000;
/* display: block; */
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li id="li1"><a href="#">课程大厅</a>
<ul id="ul1">
<li><a href="#">JavaScript</a></li>
<li><a href="#">Html/CSS</a></li>
</ul>
</li>
</ul>
</div>
</body>
<script>
var li1 = document.getElementById('li1');
var ul1 = document.getElementById('ul1');
li1.onmouseover = function () {
ul1.style.display = 'block';
}
li1.onmouseout = function () {
ul1.style.display = 'none';
}
</script>
</html>
七.积累
1.获取时间的函数
<body>
<div id="timer"></div>
<script type="text/javascript">
function current() {
var d = new Date(),
str = '';
str += d.getFullYear() + '年'; //获取当前年份
str += d.getMonth() + 1 + '月'; //获取当前月份（0——11）
str += d.getDate() + '日';
str += d.getHours() + '时';
str += d.getMinutes() + '分';
str += d.getSeconds() + '秒';
return str;
}
window.onload = function () {
var timer = document.getElementById("timer");
timer.innerHTML = current();
}
</script>
</body>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
