一.使用jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在该页面引入jquery -->
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
// js的顶层对象是 window
console.log(window);
// jquery的顶层对象
console.log($);
console.dir($);
console.log(jQuery);
console.dir(jQuery);
</script>
</body>
</html>
二.jQuery入口函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
// window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
window.onload = function () {
console.log(1);
}
window.onload = function () {
console.log(2);
}
// $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
$(document).ready(function () {
console.log(3);
})
$(document).ready(function () {
console.log(3);
})
</script>
</body>
</html>
三.选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>初识jQuery1</div>
<div>初识jQuery</div>
<p>123</p>
<span>abc</span>
<div></div>
<script>
// 获取到所有元素
console.log($("*"));
// 原生js获取元素
console.log(document.getElementsByTagName("div"));
// 通过标签名
console.log($("div")[0]);
// 并集选择器
console.log($("div,p"));
// 内容过滤选择器
console.log($("div:contains('1')"));
console.log($("div:empty"));
// jQuery 对象和 DOM 对象
var box = document.querySelector("div");
console.log(box);
console.log($(box));
console.log($(box)[0]);
</script>
</body>
</html>
四.操作jQuery集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>123</div>
<div class="active">456</div>
<div>789</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
var jq = $("div");
console.log(jq);
// forEach map
// 遍历
jq.each(function (index, ele) {
console.log(index);
console.log(ele);
})
var rel = jq.map(function (index, ele) {
return ele + "aaa";
})
console.log(rel);
// 指定元素相对于其他指定元素的 index 位置,从0开始计数。,如果未找到元素,index() 将返回 -1。
console.log($("div").index($(".active")));
var rel2 = $("div").toArray();
console.log(rel2);
console.log($(".active").siblings());
console.log($("ul").contents());
// 创建节点
console.log($("<div>hello</div>"));
// 操作css
$("ul").css({
margin: 0,
padding: 0,
"list-style": "none"
})
</script>
</body>
</html>
五.jQuery中的排他
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 1200px;
height: 30px;
text-align: center;
line-height: 30px;
margin: 0 auto;
display: flex;
}
li {
flex: 1;
border: 1px solid #ccc;
}
.active {
background-color: pink;
}
</style>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
$("li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
// $(this).siblings().removeClass("active");
})
</script>
</body>
</html>
六.添加与删除类名
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.active {
background-color: red;
}
</style>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div></div>
<script>
// 添加类名
// $("div").addClass("active");
// $("div").removeClass("active");
$("div").click(function() {
$("div").toggleClass("active");
})
</script>
</body>
</html>
七.操作属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 400px;
height: 400px;
border: 1px solid #ccc;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div>123</div>
<input type="text" value="123">
<div class="box">
<div class="son"></div>
</div>
<script>
$("div").attr("data-index", "1");
$("div").prop("title", "hello");
console.log($("div"));
// 获取表单元素的值
console.log($("input").val("请输入"));
// offset()
console.log($(".son").offset());
// $(".son").offset({
// top: 100,
// left: 300
// })
console.log($(".son").offset().top);
// position() 只能获取不能设置
// console.log($(".son").position({
// top: 100,
// left: 100
// }));
// 复制元素
$(".box").click(function () {
console.log(123);
})
$(".son").click(function () {
console.log("abc");
})
var cloneBox = $(".box").clone(false, true);
console.log(cloneBox);
$("body").append(cloneBox);
</script>
</body>
</html>
八.插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="box">hello</div>
<script>
// 内部插入
$(".box").html("<h1>hello</h1>")
$(".box").text("<h1>hello</h1>")
$("<i>world</i>").appendTo($(".box"));
$(".box").append($("<i>world</i>"));
// 外部插入
$("<i>world</i>").insertBefore($(".box"));
$(".box").before($("<i>world</i>"));
</script>
</body>
</html>
九.删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="box">123</div>
<script>
// $(".box").remove();
// $(".box").detach()
$(".box").empty();
</script>
</body>
</html>
十.省级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<select name="" id="province">
<option value="">请选择</option>
</select>
<select name="" id="city">
<option value="">请选择</option>
</select>
<select name="" id="district">
<option value="">请选择</option>
</select>
<script>
var provinceData = ["河南省", "河北省", "湖南省", "湖北省", "山东省", "山西省"];
var cityData = [
["郑州市", "安阳市", "鹤壁市", "新乡市", "许昌市", "漯河市"],
["石家庄", "邯郸市", "廊坊市", "衡水市", "保定市", "邢台市"],
["长沙市", "衡阳市", "张家界", "常德市"],
["武汉市"],
["淄博市", "青岛市", "菏泽市", "日照市", "枣庄市"],
["太原市", "大同市", "晋城市"]
]
var districtData = [
[
["高新区", "中原区", "金水区", "二七区", "管城回族区"],
["文峰区", "北关区", "新东区", "开发区"],
["淇滨区"],
["红旗区", "凤泉区"],
[],
[]
], [
[]
], [
[]
]
]
// 省份信息渲染
// console.log($("#province").children());
for (var i = 0; i < provinceData.length; i++) {
$("#province").append($("<option value=" + provinceData[i] + ">" + provinceData[i] + "</option>"));
}
$("#province").change(function () {
// console.log($(province).val());
// 找到被选择的 option 元素
// console.log($("#province option:selected"));
// console.log($("#province option").not($("#province option").eq(0)).index($("#province option:selected")));
var cunt = $("#province option").not($("#province option").eq(0)).index($("#province option:selected"));
$("#city").html("<option value=''>请选择</option>");
for (var i = 0; i < cityData[cunt].length; i++) {
$("#city").append($("<option value=" + cityData[cunt][i] + ">" + cityData[cunt][i] + "</option>"))
}
})
</script>
</body>
</html>