jQuery

$(选择器) 标签选择器类选择器‘.div’ ID选择器‘#div’

 $(function (){
         //$('.mgli').siblings().css('background','red') siblings():获取所有兄弟节点元素  next()下一个节点元素  prev()上一个兄弟元素 parent()父元素 parent().parent()爷爷元素 往上走可以的 parents()所有父元素 可以有参数 参数是选择器(父辈的信息)
        
     })

   // jQ对象和DOM对象互相转化
   //  点击按钮div变色 
window.onload=function (){
        var btn=document.getElementById('btn1')
        btn.onclick=function (){
            var d1=document.getElementById('div1')
            d1.style.background="yellow"
        }
    }

$(function (){
        $('#btn1').click(function (){
            $("#div1").css('background','yellow')
        })
    })

$('#div')一个jq对象------->$('#div1').get(0) / $("#div1")[0]转化成DOM对象
$("#dov1")[0].style.background-color="black"
var btn=document.getElementById('btn1')一个DOM对象 $(btn)就转成一个jq对象
$(btn).click(function (){})

<script>//开关灯
    window.onload=function (){
        var btn=document.getElementById('btn1')
        btn.onclick=function(){
            if(this.value=='开灯'){
                document.body.style.background='black'
                btn.value='关灯'
            }
            else{
                document.body.style.background='white'
                btn.value="开灯"
            }
        }
    }
    //val()无参数就是获取值 有参数就是改变值 this<-->$(this)
    $(function(){
        $('#btn1').click(function (){
            if($(this).val()=='开灯'){
                $('body').css("background",'#000')
                $(this).val('关灯')
            }
            else{
                $('body').css("background",'#fff')
                $(this).val('开灯')
            }
        })
    })
   
    </script>
</head>
<body>
     <input id="btn1" type="button" value="开灯"/>

、、、、、、、、、、、、、、、二级菜单、、、、、、、、、、、、、、、、、、、、、
<!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;
    }
    #nav{
        450px;
        height:25px;
        background:grey;
        margin:100px auto;
    }
    ul{
        list-style-type: none;
    }
    #nav >ul >li{
        float:left;
        110px;
        text-align:center;
        font-size:18px;
    }
    #nav >ul >li >ul{
        display:none;
    }
    </style>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
    $(function (){
        //方法1
        $('#nav > ul >li').mouseenter(function (){
            $(this).children("ul").show('fast')
        })
        $('#nav ul li ').mouseleave(function (){
            $("#nav ul li ul").hide('fast')
        })

        //方法2 .hover 
        //$("#nav ul li").hover(function (){},function (){}) //两个参数 enter/leave
        $("#nav ul li").hover(function (){
            //mouseenter
            $(this).children('ul').show(1000)
        },function (){
            //mouseleave
            $(this).children('ul').hide(1000)
        })

        //方法3 
        $('#nav ul li').hover(function (){ //一个参数
            $(this).children('ul').slideToggle()//slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 slideDown()，如果一个元素是可见的，则运行 slideUp() - 这会造成一种切换的效果
            $(this).children('ul').fadeToggle() //淡入淡出的效果 fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
        })
    })
    </script>
</head>
<body>
    
    <div id="nav">
        <ul>
            <li>一级菜单01
                <ul>
                    <li>二级菜单01</li>
                    <li>二级菜单02</li>
                    <li>二级菜单03</li>
                    <li>二级菜单04</li>
                    <li>二级菜单05</li>
                </ul>
            </li>
            <li>一级菜单02
                <ul>
                    <li>二级菜单01</li>
                    <li>二级菜单02</li>
                    <li>二级菜单03</li>
                    <li>二级菜单04</li>
                    <li>二级菜单05</li>
                </ul>
            </li>
            <li>一级菜单03
                <ul>
                    <li>二级菜单01</li>
                    <li>二级菜单02</li>
                    <li>二级菜单03</li>
                    <li>二级菜单04</li>
                    <li>二级菜单05</li>
                </ul>
            </li>
            <li>一级菜单04
                <ul>
                    <li>二级菜单01</li>
                    <li>二级菜单02</li>
                    <li>二级菜单03</li>
                    <li>二级菜单04</li>
                    <li>二级菜单05</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

<div class="aa bb">
     <p class="bb">
          <span class="bb"></span>
     </p>
</div>

选择器：.aa .bb

.aa和.bb间加上空格，是子选择器，选择.aa下含有.bb的子节点，子包括儿子节点、孙子节点，选择出的内容包括p.bb，span.bb;

选择器: .aa.bb

.aa和.bb间无空格，是选择同一个元素，只不过选择器粒度更精细了些，选择的元素既有.aa类，也有.bb类，选择出的内容为：div.bb

选择器:.aa>.bb

.aa和.bb间加上大于号，也是子选择器，选择.aa下含有.bb的子节点，子只包括儿子节点，选择出的内容为p.bb

尺寸问题: