html之JS_代码007

1、JS的引入

    &lt;!-- 内嵌 --&gt;
    &lt;!-- &lt;script&gt;
        alert(4)
    &lt;/script&gt; --&gt;
    <!-- 外引 --&gt;
    <!-- 内嵌和外引同时有的时候，内嵌被覆盖 --&gt;
    <script src="js/index.js" defer&gt;</script&gt;
    //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.onload

4、按钮控制页面切换

<!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>