2018-09-26 11:19:04 +08:00
|
|
|
|
>大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......
|
|
|
|
|
>
|
|
|
|
|
> - github:https://github.com/Daotin/Web
|
|
|
|
|
> - 微信公众号:[Web前端之巅](https://github.com/Daotin/pic/raw/master/wx.jpg)
|
|
|
|
|
> - 博客园:http://www.cnblogs.com/lvonve/
|
|
|
|
|
>
|
|
|
|
|
> 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
|
|
|
|
|
|
|
|
|
|
![](https://github.com/Daotin/pic/raw/master/fgx.png)
|
|
|
|
|
|
2018-06-20 18:32:41 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 1、对样式的操作
|
|
|
|
|
|
|
|
|
|
### 1.1、点击按钮设置 div 的宽高和背景颜色
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<body>
|
|
|
|
|
<input type="button" value="显示颜色" id="btn">
|
|
|
|
|
<div id="dv"></div>
|
|
|
|
|
|
|
|
|
|
<script src="common.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
my$("btn").onclick = function () {
|
|
|
|
|
my$("dv").style.width = "200px";
|
|
|
|
|
my$("dv").style.height = "100px";
|
|
|
|
|
my$("dv").style.backgroundColor = "pink";
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
> 凡是 css 属性时由多个单词构成的,那么在 js 中设置的时候需要把 "-" 去掉,然后除第一个单词的首字母大写即可。
|
|
|
|
|
>
|
|
|
|
|
> 比如:css里面的 `background-color`,在js里面的写法是 `backgroundColor`.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 1.2、点击按钮隐藏和显示 div 标签
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<body>
|
|
|
|
|
<input type="button" value="hide" id="btn">
|
|
|
|
|
<div id="dv" style="width: 200px; height: 100px; background-color: pink;"></div>
|
|
|
|
|
|
|
|
|
|
<script src="common.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
my$("btn").onclick = function () {
|
|
|
|
|
if(this.value === "hide") {
|
|
|
|
|
my$("dv").style.display = "none";
|
|
|
|
|
this.value = "show";
|
|
|
|
|
}else if(this.value === "show") {
|
|
|
|
|
my$("dv").style.display = "block"; // block是显示标签
|
|
|
|
|
this.value = "hide";
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 1.3、网页开关灯
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Title</title>
|
|
|
|
|
<style>
|
|
|
|
|
.cls {
|
|
|
|
|
background-color: #000;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="">
|
|
|
|
|
<input type="button" value="ON/OFF" id="btn">
|
|
|
|
|
|
|
|
|
|
<script src="common.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
my$("btn").onclick = function () {
|
|
|
|
|
document.body.className = document.body.className !== "cls" ? "cls" : "";
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
> document.body 可以选中 body 标签。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 1.4、阻止超链接默认跳转
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<body>
|
|
|
|
|
<!--方式一-->
|
|
|
|
|
<a href="http://www.baidu.com" onclick="alert('------'); return false;">百度</a>
|
|
|
|
|
|
|
|
|
|
<!--方式二-->
|
|
|
|
|
<a href="http://www.baidu.com" onclick="return f1()">百度</a>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
function f1() {
|
|
|
|
|
alert("---------");
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!--方式三-->
|
|
|
|
|
<a href="http://www.baidu.com" id="ah">百度</a>
|
|
|
|
|
<script>
|
|
|
|
|
document.getElementById("ah").onclick = function () {
|
|
|
|
|
alert("------");
|
|
|
|
|
return false;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
<!--方式四-->
|
|
|
|
|
<a href="http://www.baidu.com" id="ah">百度</a>
|
|
|
|
|
<script>
|
|
|
|
|
document.getElementById("ah").onclick = function (e) {
|
|
|
|
|
alert("------");
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
> 阻止超链接的跳转:返回给 onclick 事件一个` return false`,而不单单是 false。
|
|
|
|
|
>
|
|
|
|
|
> 方式二:当使用内联 js 的时候,onclick 里面是 f1() 而不是 f1。是函数的执行,而不是函数体本身。但是在外面写 js 的时候,赋值给 onclick 的是函数体本身,认不是函数的执行。
|
|
|
|
|
>
|
|
|
|
|
> 方式二中之所以加 return,是因为 f1() 执行后返回的是 false,而不是 return false,所以要加一个 return。
|
|
|
|
|
>
|
|
|
|
|
> 方式四:调用事件参数对象的 preventDefault() 方法:`e.preventDefault();` 可以阻止超链接跳转。注意 IE8 不支持。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 1.5、点击小图在小图下显示大图
|
|
|
|
|
|
|
|
|
|
```html
|
2018-11-06 20:56:58 +08:00
|
|
|
|
<a href="images/big.png" id="ah">
|
|
|
|
|
<img src="images/small.png">
|
|
|
|
|
</a>
|
2018-06-20 18:32:41 +08:00
|
|
|
|
<img src="" id="im">
|
2018-11-06 20:56:58 +08:00
|
|
|
|
|
2018-06-20 18:32:41 +08:00
|
|
|
|
<script src="common.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
my$("ah").onclick = function () {
|
|
|
|
|
my$("im").src = this.href;
|
|
|
|
|
return false;
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
> 使用 ` return false; ` 阻止链接原本的跳转。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 1.6、列表高亮显示
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Title</title>
|
|
|
|
|
<style>
|
|
|
|
|
ul {
|
|
|
|
|
list-style: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>哈哈哈</li>
|
|
|
|
|
<li>哈哈哈</li>
|
|
|
|
|
<li>哈哈哈</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<script src="common.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
var liObjs = document.getElementsByTagName("li");
|
|
|
|
|
|
|
|
|
|
for(var i=0; i<liObjs.length; i++) {
|
|
|
|
|
// 鼠标进入事件
|
|
|
|
|
liObjs[i].onmouseover = function () {
|
|
|
|
|
this.style.backgroundColor = "pink";
|
|
|
|
|
};
|
|
|
|
|
// 鼠标离开事件
|
|
|
|
|
liObjs[i].onmouseout = function () {
|
|
|
|
|
this.style.backgroundColor = ""; // 空表示恢复之前的颜色
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 1.7、通过 name 属性获取元素
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<input type="button" value="按钮" id="btn"><br>
|
|
|
|
|
<input type="text" value="lvonve" name="nm1"><br>
|
|
|
|
|
<input type="text" value="lvonve" name="nm2"><br>
|
|
|
|
|
<input type="text" value="lvonve" name="nm1"><br>
|
|
|
|
|
<input type="text" value="lvonve" name="nm3"><br>
|
|
|
|
|
<input type="text" value="lvonve" name="nm1"><br>
|
|
|
|
|
|
|
|
|
|
<script src="common.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
my$("btn").onclick = function () {
|
|
|
|
|
var inputs = document.getElementsByName("nm1");
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < inputs.length; i++) {
|
|
|
|
|
inputs[i].value = "Daotin";
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
> **通过 name 属性获取元素适用于表单标签,基本标签没有 name 属性**
|
|
|
|
|
>
|
|
|
|
|
> 基本标签:`div,p,h1,ul,li,br`等
|
|
|
|
|
>
|
|
|
|
|
> 表单标签:`input, select,option,form,textarea,datalist,label`等
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 1.8、根据类样式的名字获取元素
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Title</title>
|
|
|
|
|
<style>
|
|
|
|
|
.cls {
|
|
|
|
|
background-color: yellow;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<p class="cls">第一个p标签</p>
|
|
|
|
|
<p>第二个p标签</p>
|
|
|
|
|
<span class="cls">第一个span</span><br>
|
|
|
|
|
<span>第二个span</span>
|
|
|
|
|
<div>第一个div</div>
|
|
|
|
|
<div class="cls">第二个div</div>
|
|
|
|
|
<input type="button" value="按钮" id="btn">
|
|
|
|
|
|
|
|
|
|
<script src="common.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
my$("btn").onclick = function () {
|
|
|
|
|
var objs = document.getElementsByClassName("cls");
|
|
|
|
|
|
|
|
|
|
for(var i=0; i<objs.length; i++) {
|
|
|
|
|
objs[i].style.backgroundColor = "red";
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
> 注意:getElementsByClassName 在IE8等低版本浏览器不支持。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 2、获取元素的方式总结
|
|
|
|
|
|
|
|
|
|
**1、根据 id 的属性的值获取元素,返回值是一个元素对象**
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
document.getElementById("id属性的值");
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**2、根据标签名获取元素,返回值是包含多个元素对象的伪数组**
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
document.getElementsByTagName("标签名字");
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**3、根据 name 属性的值获取元素,返回值是包含多个元素对象的伪数组**
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
document.getElementsByName("name属性的值");
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**4、根据 class 类样式的名字获取元素,返回值是包含多个元素对象的伪数组**
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
document.getElementsByClassName("class类样式的值");
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**5、根据 CSS 选择器获取元素,返回值是一个元素对象**
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
document.querySelector("#id属性的值");
|
|
|
|
|
document.querySelector("标签的名字");
|
|
|
|
|
document.querySelector(".class类样式的值");
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**6、根据 CSS 选择器获取元素,返回值是包含多个元素对象的伪数组**
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
document.querySelectorAll("#id属性的值");
|
|
|
|
|
document.querySelectorAll("标签的名字");
|
|
|
|
|
document.querySelectorAll(".class类样式的值");
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
> 注意区分是名字还是值。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2018-11-08 09:23:15 +08:00
|
|
|
|
### **注意:以上方法获取的元素的集合都是伪数组。**
|
|
|
|
|
|
|
|
|
|
判断伪数组的方式是伪数组不能调用数组的方法。(Boolean(list.sort) == false)或者使用instanceof (list instanceof Array)。
|
|
|
|
|
|
|
|
|
|
**伪数组怎么变为真数组?**
|
|
|
|
|
|
|
|
|
|
定义一个空数组,把伪数组的所有内容复制过去即可。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2018-06-20 18:32:41 +08:00
|
|
|
|
## 3、案例:模拟搜索框
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Title</title>
|
|
|
|
|
<style>
|
|
|
|
|
input {
|
|
|
|
|
color: gray;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<input type="text" value="请输入搜索内容">
|
|
|
|
|
|
|
|
|
|
<script src="common.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
// 获取文本框对象
|
|
|
|
|
var inputObj = document.getElementsByTagName("input")[0];
|
|
|
|
|
|
|
|
|
|
// 为文本框注册获取焦点事件
|
|
|
|
|
inputObj.onfocus = function () {
|
|
|
|
|
if(this.value === "请输入搜索内容") {
|
|
|
|
|
this.value = "";
|
|
|
|
|
this.style.color = "#000";
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 为文本框注册失去焦点事件
|
|
|
|
|
inputObj.onblur = function () {
|
|
|
|
|
if(this.value.length === 0) {
|
|
|
|
|
this.value = "请输入搜索内容";
|
|
|
|
|
this.style.color = "gray";
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
> 文本框注册失去焦点事件的时候使用 `this.value.length === 0`,而不使用 `this.value === "请输入搜索内容"` 是因为数字的比较比字符串的比较效率更高。
|
|
|
|
|
|