前端基础应用：js文件编写
jss文件在前端网页页面制作过程中作用主要是控制html文件中标签的逻辑问题，增强操作性实用性.
一、js的作用，写代码的位置
1)作用
1.修改双标签的标签内容
例如：改变他的文本
<p id="p1">我是段落1p>
<button onclick="document.getElementById('p1').innerText = 'hello world!'">修改button>
2.修改标签属性
例如：改变他的网址链接
<a id="a1" href="https://www.baidu.com" target="_blank">打开网页a>
<button onclick="document.getElementById('a1').href = 'https://www.taobao.com/'">淘宝button>
3.修改标签样式
例如：改变段落的颜色和随时间改变它的字体大小
<p id="p3">我是段落2p>
<script>
function changeColor(){
// 0 ~ 1
r = parseInt(Math.random() * 255)
g = parseInt(Math.random() * 255)
b = parseInt(Math.random() * 255)
document.getElementById('p3').style.color = 'rgb('+r+', '+g+', '+b+')'
}
fs = 10
t1 = setInterval(function(){
r = parseInt(Math.random() * 255)
g = parseInt(Math.random() * 255)
b = parseInt(Math.random() * 255)
document.getElementById('p3').style.color = 'rgb('+r+', '+g+', '+b+')'
fs += 2
if(fs >= 40){
fs = 10
}
document.getElementById('p3').style.fontSize = fs + 'px'
}, 500)
script>
2）代码位置
.js代码写在哪儿？
1）将js代码写在标签的事件属性中
<button onclick="alert('你好!')">确定button>
2)将js代码写在script标签中(script标签可以放在html文件中的任何位置)
<body>
<p id="p1">我是段落1p>
body>
<script>
document.getElementById('p1').innerText = 'hello world!'
script>
3)将js代码写在外部的js文件中，然后在html文件中用script标签导入
可以直接编写js文件，用下列代码导入html文件
<script src="js/demo.js">script>
二、DOM操作标签
DOM(document object mode)操作：
通过document对象直接或者间接的操作网页内容
js中的document对象代表网页内容
DOM操作主要内容：
获取标签、添加标签、删除标签、操作标签内容、操作标签属性、操作标签样式
1.获取标签
1)直接获取标签 - 直接通过document对象获取标签
document.getElementById(id属性值)
获取网页中id属性值为指定值的标签，返回值是标签对象
document.getElementsByClassName(class属性值)
获取网页中class属性值为指定值的所有标签，返回值是数组(列表),数组中的元素是标签对象
document.getElementsByTagName(标签名)
获取网页中所有指定的标签,返回值是数组(列表),数组中的元素是标签对象
document.getElementsByName(name属性值)
获取网页中所有name属性值为指定值的标签
2）间接获取标签 - 通过父标签获取子标签，或者通过子标签获取父标签
a. 获取一个标签所有的子标签: 标签对象.children
b.获取一个标签的第一个子标签: 标签对象.firstElementChild
c.获取最后一个子标签：标签对象.lastElementChild
d.获取父标签: 标签对象.parentElement
*console.log(result)*在网页控制台中获取result的值
<body>
<div id="box1">
<p class="c1">我是段落1p>
<a>我是超链接1a>
<span class="c1">我是span1span>
<p id="p1">我是段落2p>
<p>我是段落3p>
div>
<div id="box2">
<span>我是span2span>
<a class="c1">我是超链接2a>
<input type="text" name="username" id="">
<input type="radio" name="gender">男
<input type="radio" name="gender">女
div>
body>
<script type="text/javascript">
// 通过id值获取标签
result = document.getElementById('p1')
console.log(result)
// 通过class属性获取标签
result = document.getElementsByClassName('c1')
console.log(result)
console.log(result[2])
// 通过标签名获取标签
result = document.getElementsByTagName('p')
console.log(result)
// 通过name属性值获取标签(了解)
result = document.getElementsByName('gender')
console.log(result)
script>
<script>
console.log('----------------------------------------------')
// 1.获取子标签
var box1 = document.getElementById('box1')
// 1）获取一个标签所有的子标签: 标签对象.children
result = box1.children
console.log(result)
// 2)获取一个标签的第一个子标签
result = box1.firstElementChild
console.log(result)
// 3)获取最后一个子标签
result = box1.lastElementChild
console.log(result)
// 2.获取父标签
result = box1.parentElement
console.log(result)
var p = document.getElementById('p1')
result = p.parentElement
console.log(result)
script>
三、添加和删除标签
1.添加标签: 创建标签 -> 添加标签
1)创建标签:document.createElement(标签名)
<script>
var p1 = document.createElement('p') // 创建一个空的p标签
p1.innerText = '我是段落2'
var a1 = document.createElement('a')
var img1 = document.createElement('img')
var i1 = document.createElement('input')
script>
**2)添加标签: **
父标签对象.appendChild(标签) - 在父标签对象里面的最后添加指定标签
父标签对象.insertBefore(标签1, 标签2) - 将标签1插入到父标签对象中标签2的前面
<script>
var box = document.getElementById('box')
box.appendChild(p1)
box.appendChild(a1)
box.insertBefore(img1, a1)
box.insertBefore(i1, box.firstElementChild)
script>
2.删除标签: 标签对象.remove()
<script>
var p3 = document.getElementById('p2')
p3.remove()
script>
四、操作标签
1.操作双标签的标签内容
1) innterText(只能处理文字内容)
标签对象.innerText - 获取指定标签的标签内容
标签对象.innerText = 字符串 - 修改指定标签的标签内容
var p1 = document.getElementById('p1')
var result = p1.innerText
p1.innerText = '<a href="https://www.baidu.com">百度a>'
2)innerHTML(可以处理子标签)
var p2 = document.getElementById('p2')
p2.innerHTML = '<a href="https://www.baidu.com">百度a>'
2.操作标签属性
1)获取属性值：标签对象.html属性名
var result1 = img1.title
var result2 = img1.src
2）修改属性值：标签对象.html属性名 = 新值
img1.title = 'JingDong'
3.操作标签样式:
1)单独设置某个样式：标签对象.style.css属性名 = ‘css属性值’
// 注意：css属性名中如果有‘-’，在js中用‘-’后面的第一个字母大写的方式来取消’-’
p1.style.color = '#ff00f9'
p1.style.fontSize = '50px'
p1.style.backgroundColor = 'yellow'
// 2）同时设置多个样式：标签对象.style = ‘css原生样式表’
p2.style = 'color:red; font-size:50px; background-color:yellow;'
五、点击按钮操作页面
按钮建立,然后赋予功能
<body>
<button onclick="add()">确定button>
body>
<script>
function add(){
console.log('hello world!')
console.log('结束！')
}
script>
六、隐藏超过父标签的部分
其实属于是css的部分
七、彩色变化案例
例如：使p标签的背景颜色随机
r = parseInt(Math.random()*255)
g = parseInt(Math.random()*255)
b = parseInt(Math.random()*255)
p.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.4)`
八、定时器
1.Interval对应的定时器 - 每间隔指定时间就执行一次指定的操作(指定的操作会被反复执行多次)
// 1）创建并启动定时器：setInterval(需要执行的操作对应的函数,间隔时间)
// 2) 关闭定时器：clearInterval(定时器对象)
// 注意：时间的单位是毫秒(1000毫秒等于1秒)
例1、间断输出
t1 = setInterval(function(){
// 每间隔指定时间要做的事情
console.log('hello world!')
},5000)
2.一个移动而且变大的图形
原始的条件
<body>
<div id="box">div>
body>
<style>
#box{
width: 60px;
height: 60px;
background-color: skyblue;
position: absolute;
top: 10px;
}
style>
// 用定时器实现标签自动移动的功能
boxTop = 10
t2 = setInterval(function(){
boxTop += 2
document.getElementById('box').style.top = boxTop + 'px'
}, 150)
// 用定时器实现放大的功能
boxSzie = 60
t3 = setInterval(function(){
boxSzie += 2
document.getElementById('box').style.width = boxSzie + 'px'
document.getElementById('box').style.height = boxSzie + 'px'
}, 150)
3.自动跳转网页
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<p id="p1">5秒后自动跳转到百度...p>
body>
<script>
t = 5
t1 = setInterval(function(){
t -= 1
document.getElementById('p1').innerText = t + '秒后自动跳转到百度...'
if(t==0){
open('https://www.baidu.com')
clearInterval(t1)
}
}, 1000)
script>
html>
2. Timeout对应的定时器 - 到了指定时间就执行指定操作(指定操作只会执行一次)
// 1)创建并启动定时器：setTimeout(需要执行的操作对应的函数,间隔时间)
// 2)关闭定时器：clearTimeout(定时器对象)
t4 = setTimeout(function(){
console.log('爆炸！')
open('https://www.baidu.com')
},5000)
九、事件绑定方法
1.事件绑定
当某个标签发生了某件事件之后就做什么(xxx发生xxx就干xxx)
2.事件绑定三要素：
事件源、事件、事件驱动程序
3.绑定事件的两种方式:
1)在html代码中直接给事件源对应标签的事件属性赋值
2)在js中给事件源对应的标签对象的事件属性赋值
<body>
<button id="btn1">按钮1button>
<button onclick="btn1Action()">问候2button>
body>
<script>
// 1)在html通过标签绑定事件
function btn1Action(){
alert('hello world!')
}
// 2)在js中通过标签对象绑定事件
var btn1 = document.getElementById('btn1')
// btn1.onclick = btn1Action
btn1.onclick = function(){
alert('hello js!')
script>
4.两种不同绑定方式的选择
1)如果是通过js代码创建的标签，需要绑定事件的时候只能用第二种方法
2)第一种绑定方式，事情驱动程序对应的函数中的this是window对象；第二种绑定方式事件驱动程序中的this是事件源
十、常见事件类型
1.鼠标相关事件(针对所有的可见标签有效)
1)onclick - 点击事件
2)onmousedown - 鼠标在标签上按下
3)onmouseover - 鼠标悬停在标签上
4)onmouseout - 鼠标从标签上离开
2.键盘相关事件(针对输入框)
1）onkeydown - 当标签处于活跃状态的时候按下一个按键
2)onkeyup - 当标签处于活跃状态的时候按键弹起
3)onkeypress - 当标签处于活跃状态的时候按键一个键
3.值改变: onchange
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<button onmousedown="alert('按下')">按钮1button>
<img src="img/l-icon.png" onclick="alert('点击图片')">
<button id="btn1">按钮2button>
<br>
<div id="div1" style="background-color: saddlebrown; height:80px; width: 100px;">div>
<br>
<input type="text" onkeypress="alert('键盘事件')">
<textarea cols="30" rows="10" id="i1">textarea>
<br><br>
<select name="" id="c1">
<option value="成都">成都option>
<option value="重庆" selected>重庆option>
<option value="北京">北京option>
<option value="上海">上海option>
<option value="广州">广州option>
select>
<span id="city">重庆span>
body>
html>
<script>
document.getElementById('btn1').onmousedown = function(evt){
console.log(evt)
// 获取鼠标触发事件的那一瞬间，鼠标在标签上的位置
console.log(evt.offsetX, evt.offsetY)
}
// 练习：点击div的左边让div变成红色，点击div的右边就有让它变成绿色
document.getElementById('div1').onclick = function(evt){
var x = evt.offsetX
var width = this.style.width
var half_width = width.slice(0, width.length-2) / 2
if(x<half_width){
this.style.backgroundColor = "red"
}else(
this.style.backgroundColor = "green"
)
}
document.getElementById('i1').onkeydown = function(evt){
console.log('有按键按下')
// 获取当前按的是哪个键
console.log(evt.key)
// 获取当前输入框中已经输入的内容
console.log(this.value)
}
// 3.值改变: onchange
document.getElementById('c1').onchange = function(){
console.log('城市发生改变', this.value)
document.getElementById('city').innerText = this.value
}
script>
十六、各种弹框的使用
1.点击可以出现提示文字
<body>
<button onclick="alert('删除成功!')">弹框1button>
body>
2.点击删除文本内容
<body>
<span id="s1">要删除的数据span>
<button onclick="confirmAction()">删除button>
body>
<script>
function confirmAction(){
var result = confirm('是否真的要删除这个数据?')
// console.log(result)
if(result==true){
document.getElementById('s1').remove()
}
}
script>
3.点击添加输入的内容
<body>
<button onclick="promptAction()">添加button>
body>
<script>
function promptAction(){
var result = prompt('请输入添加的学生的名字:', '小明')
console.log(result)
if(result != null && result.length != 0){
var p = document.createElement('p')
p.innerText = result
var body = document.getElementsByTagName('body')[0]
body.appendChild(p)
}
}
script>
十七、轮播图
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
#box{
width: 940px;
height: 430px;
margin-left: auto;
margin-right: auto;
position: relative;
}
#imgBox{
width: 100%;
height: 100%;
}
#pointBox{
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
#pointBox>span{
color: rgb(220, 210, 210);
margin-left: 5px;
margin-right: 5px;
/* 让鼠标变成手指 */
cursor: pointer;
}
style>
head>
<body>
<div id="box">
<a href="" id="a1" target="_blank">
<img id="imgBox" src="img/slide-1.jpg" alt="">
a>
<div id="pointBox">div>
div>
body>
html>
<script>
// 1.准备数据
var imgUrls = [
['img/slide-1.jpg', 'https://www.baidu.com'],
['img/slide-2.jpg', 'https://www.taobao.com'],
['img/slide-3.jpg', 'https://www.jd.com'],
['img/slide-4.jpg', 'https://www.51job.com'],
['https://img2.baidu.com/it/u=1246423168,2248525401&fm=253&fmt=auto&app=138&f=JPEG?w=969&h=500','https://www.baidu.com'],
['https://img2.baidu.com/it/u=5239947,3885195473&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=375', 'https://cn.vuejs.org/guide/introduction.html#what-is-vue']
]
currentIndex = 0 // 当前显示的图片在列表中的下标
var count = imgUrls.length
// 2.根据数据创建标签显示数据
// 显示第一张图片
document.getElementById('imgBox').src = imgUrls[0][0]
document.getElementById('a1').href = imgUrls[0][1]
// 创建所有图片对应点
for(x in imgUrls){
var span = document.createElement('span')
span.innerText = '●'
span.index = parseInt(x) // 让点和下标关联
document.getElementById('pointBox').appendChild(span)
if(x == 0){
span.style.color = '#aaaaaa'
}
// 给每一个点对应的标签绑定鼠标悬停事件
span.onmouseover = function(){
// 关闭定时器
clearInterval(t1)
// 手动控制切换图片
if(this.index != currentIndex){
// 在切换之前获取currentIndex对应的点，修改状态为未选中状态
var allPoint = document.getElementById('pointBox').children
allPoint[currentIndex].style.color = 'rgb(220, 210, 210)'
// 将当前选中的点设置为选中状态
this.style.color = '#aaaaaa'
// 获取当前点对应的下标，找到对应的图片
currentIndex = this.index
document.getElementById('imgBox').src = imgUrls[currentIndex][0]
document.getElementById('a1').href = imgUrls[currentIndex][1]
}
}
// 给每个点绑定鼠标离开事件
span.onmouseout = function(){
startMove()
}
}
// 3.定时器自动切换图片
function startMove(){
t1 = setInterval(function(){
// 在让下标加1之前获取下标对应的点，修改点的样式
var allPoint = document.getElementById('pointBox').children
allPoint[currentIndex].style.color = 'rgb(220, 210, 210)'
// 控制下标变化，来获取下一张图片信息
currentIndex += 1
if(currentIndex == count){
currentIndex = 0
}
// ‘abc’ + 1 -> abc1
// 根据新的下标获取新的数据
console.log('=====:', currentIndex)
document.getElementById('imgBox').src = imgUrls[currentIndex][0]
document.getElementById('a1').href = imgUrls[currentIndex][1]
// 修改点的状态
allPoint[currentIndex].style.color = '#aaaaaa'
},2000)
}
startMove()
script>
十八、按钮切换
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
*{
margin: 0;
padding: 0;
}
#btn-box{
margin-top: 15px;
margin-left: 15px;
}
#btn-box>button{
width: 150px;
height: 70px;
border: none;
font-size: 25px;
}
style>
head>
<body>
<div id="btn-box">
<button style="color: red;">扫码登录button>
<button>账号登录button>
<button>QQ登录button>
<button>微信登录button>
div>
<div>div>
body>
html>
<script>
var allBtn = document.getElementById('btn-box').children
currentindex = 0
for (var index=0;index<allBtn.length;index++) {
var btn = allBtn[index]
btn.index = index
btn.onclick = function(){
// 将当前选中的标签变成红色
this.style.color = 'red'
// 将之前选中的标签拿到，设置颜色为黑色
allBtn[currentindex].style.color = 'black'
// 更新当前下标为当前选中的按钮对应的下标
currentindex = this.index
}
}
script>
十九、下拉菜单
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<select name="" id="province" onchange="changeProvince()">select>
<select name="" id="city">select>
body>
html>
<script>
// 1. 准备数据
var allCity = {
'四川省': ['成都', '德阳', '泸州', '乐山', '达州', '绵阳'],
'广东省': ['广州', '深圳', '佛山', '珠海', '汕头'],
'辽宁省': ['沈阳', '大连', '盘锦', '铁岭']
}
// 创建省份对应的选项
for(var key in allCity){
var p = document.createElement('option')
p.innerText = key
p.value = key
document.getElementById('province').appendChild(p)
}
// 创建第一个省对应所有的市对应的选项
var citys = allCity['四川省']
for(var index in citys){
var city = citys[index]
var c = document.createElement('option')
c.innerText = city
c.value = city
document.getElementById('city').appendChild(c)
}
// 下拉列表修改选中的省份
function changeProvince(){
var currentProvince = document.getElementById('province').value
// 获取当前选中的省份对应的城市
var currentCitys = allCity[currentProvince]
// 先清空原来选中的省对应的城市
var cityBox = document.getElementById('city')
cityBox.innerText = ''
// 将当前选中省对应的所有城市添加到第二个下拉列表中
for(var index in currentCitys){
var city = currentCitys[index]
var c = document.createElement('option')
c.innerText = city
c.value = city
cityBox.appendChild(c)
}
}
script>
二十、jQuery的使用
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="js/jquery.min.js">script>
head>
<body>
<div id="box1">
<p class="c1">我是段落1p>
<a>我是超链接1a>
<span class="c1">我是span1span>
<p id="p1">我是段落2p>
<p>我是段落3p>
div>
<div id="box2">
<span>我是span2span>
<a class="c1">我是超链接2a>
<input type="text" name="username" id="">
<input type="radio" name="gender">男
<input type="radio" name="gender">女
div>
<div id="box3">
<button>点击1button>
<button>点击2button>
<button>点击3button>
<button>点击4button>
<button>点击5button>
div>
<button onclick="addAction()">添加button>
body>
html>
<script>
// jQuery相比原生js，标签操作更简单
result = $('#p1')
console.log(result)
result = $('#box2>span')
console.log(result)
// jQuery代码
a = $('百度')
$('#box2').append(a)
$('#box3').on('click', 'button', function(){
alert('点击了'+this.innerText)
})
function addAction(){
var result = prompt('添加一个新的按钮：', '点击N')
if(result != null){
$('#box3').append($(`${result}`))
}
}
// js代码
a = document.createElement('a')
a.innerText = '百度'
a.href = 'https://www.baidu.com'
a.style.color = 'red'
document.getElementById('box2').appendChild(a)
script>
二十一、
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="https://cdn.jsdelivr.net/npm/vue@2">script>
head>
<body>
<div id="app1">
<p>{{message}}p>
div>
<script>
var app = new Vue({
el:'#app1',
data: {
message: 'hello world!'
}
})
app.message = '你好世界!'
script>
body>
html>
这一节一开始写的好好的，后面有点不理解，但是代码是成功的，可以看看哟