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{ width:450px; height:25px; background:grey; margin:100px auto; } ul{ list-style-type: none; } #nav >ul >li{ float:left; width: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
尺寸问题:
