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{
width: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 {
width: 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>
浙公网安备 33010602011771号