JQuery 1.下载JQuery 2.导入JQuery（先导入后使用） 如： 导入：<script src="xxx.js"></script> 使用：<script></script> 3.使用 1.基础语法： JQuery $ 2.$("").方法 JQuery对象根据suo索引值能拿到具体的标签对象 JQuery的使用： 注意： JQuery对象转为DOM对象：$("div") --> $("div")[0] DOM对象转为JQuery对象：this --> $(this) 查找标签： 1.选择器（如果再取索引，就会变成DOM对象，需要注意！） id选择器： $("#id") 标签选择器： $("tagname") class选择器： $(".className") 所有： $("*") 配合使用： $("div.c1")->$("div").filter(".c1") //找到有c1 class类的div标签 组合选择器： $("#id,tagname, .className") 2.层级选择器： $("x y")->$("x").find("p") //x的所有后代Y $("x>y") //x的所有儿子 $("x+y") //找到所有紧挨在x后面的y $("x~y") //x之后所有的兄弟y 3.筛选器 :first //第一个 :last //最后一个 :eq(index) //找到指定的索引元素 :even //从0开始匹配索引值为偶数的元素 :odd //从0开始匹配索引值为奇数的元素 :gt(index) //匹配大于指定索引的元素 :lt(index) //匹配小于指定索引的元素 :not() //从前面找的结果里符合not条件的yi移除 :has() //从后代中寻找指定的元素 4.样式操作 属性选择器（表单） $("input[type='submit']")等价于$(":submit") :text :password :file :radio :checkbox :submit :reset :button 表单对象属性 :enabled :disabled //比如输入框被禁用 :checked //注意，如果有多种默认选择框，只需要选择input类型的话，应该这么写$("input:checked") :selected 操作class 1. addClass() 2. removeClass() 3. hasClass() 4. toggleClass() 筛选器 1.寻找下一个元素 $("#l2").next() $("#l2").nextAll() //同级下的剩余标签 $("#l1").nextUntil("#l3") //从l1后面找起，直到l3停下，但不包含l3 2.寻找上一个元素 $("#l3").prev() $("#l3").prevAll() $("#l3").prevUntil("#l3") 3.父亲元素 $("#l2").parent() $("#l2").parents() //一直找到HTML $("#l2").parentsUntil("html") //一直寻找直到html,不包含html 4.儿子和兄弟元素 $("#l2").children() $("#l2").siblings() JQuery出现的问题： $ is not defined:表示出现先JQuery后导入JQuery的问题 #左侧菜单JQuery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ 150px; border:1px solid darkgrey; } .item-title{ height:30px; text-align: center; line-height: 30px; background-color: green; color:darkblue; border-bottom:1px dotted black; } .item-body{ background-color: greenyellow; } .hide{ display:none; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="item-title">菜单一</div> <div class="item-body hide"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> <div class="item"> <div class="item-title">菜单二</div> <div class="item-body hide"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> <div class="item"> <div class="item-title">菜单三</div> <div class="item-body hide"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> </div> <script src="jquery-3.4.1.min.js"></script> <script> $(".item-title").click(function () { $(this).next().toggleClass("hide").parents().siblings().find("item-body").addClass("hide"); }) </script> </script> </body> </html> #弹出框JQuery <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <style> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.4); z-index: 99; } .modal { 700px; height: 400px; position: absolute; top: 50%; left: 50%; margin-left: -350px; margin-top: -200px; background-color: white; z-index: 100; } .close { float: right; margin-right: 15px; margin-top: 10px; font-size: 16px; } .hide { display: none; } </style> </head> <body> <button id="b1">点我弹出</button> <div class="cover hide"></div> <div class="modal hide"> <span class="close" id="s1">x</span> </div> <script src="jquery-3.3.1.min.js"></script> <script> var b1Ele = $("#b1")[0]; var $coverEle = $(".cover"); var $modalEle = $(".modal"); b1Ele.onclick=function (ev) { $coverEle.removeClass("hide"); $modalEle.removeClass("hide"); }; var s1Ele = document.getElementById("s1"); s1Ele.onclick=function (ev) { $coverEle.addClass("hide"); $modalEle.addClass("hide"); } </script> </body> </html>