html之JS
1、JS的引入
<!-- 内嵌 -->
<!-- <script>
alert(4)
</script> -->
<!-- 外引 -->
<!-- 内嵌和外引同时有的时候，内嵌被覆盖 -->
<script src="js/index.js" defer></script>
//defer 延迟执行2、js的变量使用
//一、定义变量，var声明变量的关键字 a为变量名
//定义的时候不区分类型，使用的时候有类型
//变量类型：基本类型和复合类型
//基本类型：字符串、数字、布尔类型（true/false）、undefined类型（未下定义的）、null(涉及一个量，但是这个量本身不存在)
var a = 10
var b = 10.5
var c = "hello"
var d = 'S'
var e = true
// 复合类型：数组、对象、函数
// 1、定义数组
var arr = [10,"sdf",true,12.3,undefined,function(){alert("数组")
return "wancheng"},[11,'a']]
console.log(arr)
// 通过下标直接访问
console.log(arr[3])
console.log(arr[5]())
console.log(arr[6][0])
// 2、定义对象
var obj = {
name:"小丽",
age:29,
dance:function(){
alert("hanshu")
return "调用完成"
}
}
console.log(obj.age)
console.log(obj.dance())
//3、定义函数
//命名函数
function f(a,b){
alert("hello")
}
//匿名函数（推荐），如果把一个函数赋值给某个变量，变量会完全代替函数
var hh = function(a,b){
alert("hello")
}
//命名函数调用
f()
//匿名函数调用
hh(11,12)
//二、变量使用
// 弹框显示，类似于打印
alert(a)
//控制台打印
console.log(arr)
// onclick 单击
// ondblclick 双击
// onmouseenter 鼠标放上去
// onmouseleave 鼠标离开
document.onclick=function(){
alert("单击执行")
}
var hh = function(){
alert("hhhhh")
return 10
}
document.ondblclick=hh
// 如果是hh()，相当于=10，仅得到返回值，如果是hh相当于整个函数
console.log(document)
// 以对象形式打印
console.dir(document)3、dom操作
// dom操作 document object model
//1、查找---指定查找
// getElementById() 根据id获取元素，返回值是符合条件的第一个对象
var aa = document.getElementById("a")
// getElementsByClassName() 根据class名称获取元素，返回值是所有符合条件的对象组成的数组
var aa = document.getElementsByClassName("b")
for(var i=0; i<aa.length;i++){
aa[i].onclick=function(){
this.style.background="red"
}
}
//getElementsByTagName() 根据元素名称获取元素，返回值是所有符合条件的对象组成的数组
var a1 = document.getElementsByTagName("div")
//querySelector() 根据选择器获取元素，返回符合条件的第一个对象
var a2 = document.querySelector(".b")
//querySelectorAll() 根据选择器获取元素，返回符合条件的对象组成的数组
var a3 = document.querySelectorAll(".b")
// 2、关系查找
// parentElement/parentNode获取父级元素
//childNodes 获取所有子节点们 children 获取所有子元素节点
//previousSibling 获取上一个节点 previousElementSibling 获取上一个元素节点
//nextSibling 获取下一个节点 nextElementSibling 获取下一个元素节点
var aa = document.getElementById("a")
console.log(aa.previousSibling)
//3、修改
//修改内容：供显示元素的内容 ： innerHTML把修改的内容当作标签处理 innerText把修改的内容当作文本处理
// 供收集用户信息显示的内容：value
var aa = document.getElementById("a")
aa.innerHTML = "<a>点击</a>"
aa.innerText = "gai"
//修改属性
//原生属性直接获取获修改 id className src alt
//自定义属性 获取属性 getAttribute(属性名) 设置属性 setAttribute(属性名，属性值) 也可用于原生属性
var aa = document.getElementById("a")
aa.id='hhh'
aa.setAttribute('hhh','xxx')
//修改样式 style.样式属性 style.cssText 设置多个样式属性
//给元素设置属性，结合CSS改变样式
var aa = document.getElementById("a")
aa.style.color="pink"
aa.style.cssText="background:res;color:pink;font-size;30px"
//4、增加
//创建元素 document.createElement()
var ele = document.createElement("li")
//添加元素 父级元素.appendChild 在元素的最后子元素位置添加
// 父级元素.insertBefore(新元素，插入哪个元素) 在元素的某个位置前添加，第二个参数为null,表示在最后插入
var aa = document.getElementById("a")
aa.appendChild(ele)
aa.insertBefore(ele)
//复制元素 cloneNode(false), 默认false，浅复制，只复制标签；true，复制标签和内容
aa.cloneNode()
//5、删除 父级元素.removeChild(删除元素)
var li = document.getElementById("b")
aa.removeChild()
//延迟加载
window.onload4、按钮控制页面切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 500px;
height: 200px atuo;
margin: 0 auto;
margin-top: 20px;
background: palegoldenrod;
}
.tab_title{
display: flex;
justify-content: center;
}
.tab_title li{
list-style: none;
border: 2px solid gray;
padding: 4px 6px;
margin-right: 5px;
cursor: pointer;
border-bottom: none;
}
.tab_title .cur{
color: aliceblue;
background-color: palevioletred;
}
.tab_content{
border: 2px solid palevioletred;
min-height: 240px;
padding: 10px;
text-align: center;
}
.tab_content div{
display: none;
}
.tab_content div:first-child{
display: block;
}
</style>
<script src="js/index.js" defer></script>
</head>
<body>
<div class="container">
<ul class="tab_title">
<li class="cur">按钮1</li>
<li>按钮2</li>
<li>按钮3</li>
<li>按钮4</li>
</ul>
<div class="tab_content">
<div>这是第一个页面</div>
<div>这是第二个页面</div>
<div>这是第三个页面</div>
<div>这是第四个页面</div>
</div>
</div>
</body>
</html>
var tab_title = document.querySelectorAll(".tab_title li")
var tab_content = document.querySelectorAll(".tab_content>div")
console.log(tab_content)
console.log(tab_title)
for(var i=0; i<tab_title.length; i++){
tab_title[i].setAttribute("index",i)
tab_title[i].onclick = function(){
for(var k=0; k<tab_title.length;k++){
tab_title[k].className=""
}
//样式切换
this.className='cur'
var index = this.getAttribute("index")
//内容区域切换
for(var j=0; j<tab_content.length; j++){
if(j==index){
tab_content[j].style.display="block"
}else{
tab_content[j].style.display="none"
}
}
}
}5、下拉菜单
var container = document.querySelectorAll(".container")
for(var i=0; i<container.length; i++){
var tab_title = container[i].querySelectorAll(".tab_title li")
for(var j=0; j<tab_title.length; j++){
//初始化index属性
tab_title[j].setAttribute("index",j)
//绑定点击事件
tab_title[j].onclick=function(){
var cur = this.parentElement.querySelectorAll("li")
for(var k=0; k<cur.length; k++){
cur[k].className=""
}
this.className='cur'
var index = this.getAttribute("index")
var tab_content = this.parentElement.nextElementSibling.querySelectorAll("div")
for(var h=0; h<tab_content.length;h++){
if(h==index){
tab_content[h].style.display="block"
}else{
tab_content[h].style.display="none"
}
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
.container{
background-color: aliceblue;
margin: 100px 0;
background-color: plum;
}
.container .main{
margin: 0 auto;
width: 80%;
display: flex;
justify-content: space-between;
}
.container .main>li{
text-align: center;
position: relative;
width: 100%;
}
.container .main>li ul{
position: absolute;
}
.container .main>li>a{
color: white;
display: block;
padding: 5px 0px;
width: 100%;
}
.container .main>li a:hover{
background-color: aqua;
}
.container .main>li>ul{
/* display: none; */
height: 0px;
overflow: hidden;
position: absolute;
width: 100%;
background-color: plum;
}
.container .main>li>ul a{
color: white;
display: block;
padding: 5px 0px;
width: 100%;
}
</style>
<script src="js/demo.js" defer></script>
</head>
<body>
<div class="container">
<ul class="main">
<li><a href="#">首页</a></li>
<li>
<a href="#">机构简介</a>
<ul>
<li><a href="#">部门概况</a></li>
<li><a href="#">机构职能</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</li>
<li>
<a href="#">招生工作</a>
<ul>
<li><a href="#">硕士招生</a></li>
<li><a href="#">博士招生</a></li>
<li><a href="#">政策法规</a></li>
<li><a href="#">信息公开</a></li>
<li><a href="#">通知公告</a></li>
<li><a href="#">专业信息</a></li>
</ul>
</li>
<li>
<a href="#">培养工作</a>
<ul>
<li><a href="#">硕士招生</a></li>
<li><a href="#">博士招生</a></li>
<li><a href="#">政策法规</a></li>
<li><a href="#">信息公开</a></li>
<li><a href="#">通知公告</a></li>
</ul>
</li>
<li>
<a href="#">学位管理</a>
<ul>
<li><a href="#">政策法规</a></li>
<li><a href="#">信息公开</a></li>
<li><a href="#">通知公告</a></li>
<li><a href="#">专业信息</a></li>
</ul>
</li>
<li>
<a href="#">学位点建设</a>
<ul>
<li><a href="#">硕士招生</a></li>
<li><a href="#">专业信息</a></li>
</ul>
</li>
<li>
<a href="#">专业学位</a>
<ul>
<li><a href="#">硕士招生</a></li>
<li><a href="#">博士招生</a></li>
<li><a href="#">政策法规</a></li>
<li><a href="#">信息公开</a></li>
<li><a href="#">通知公告</a></li>
<li><a href="#">专业信息</a></li>
</ul>
</li>
<li>
<a href="#">导师管理</a>
<ul>
<li><a href="#">硕士招生</a></li>
<li><a href="#">博士招生</a></li>
<li><a href="#">政策法规</a></li>
<li><a href="#">信息公开</a></li>
</ul>
</li>
<li>
<a href="#">学生工作</a>
<ul>
<li><a href="#">硕士招生</a></li>
<li><a href="#">博士招生</a></li>
<li><a href="#">专业信息</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>