DOM操作
DOM（文档对象模型）：document（页面）、element（标签/元素）、attribute（属性）、text（文本）
jQuery对DOM`的封装，也就是对元素、属性、文本相关的操作进行了封装。
元素的查找与获取
jQuery是通过选择器获取元素对象的语法格式:
$("选择器的字符串表示形式")
其中选择器字符串中的写法与CSS中基本一致。
基本选择器：标签选择器、类选择器、id选择器、通配符选择器(*)、并集选择器(selector1,selectorN)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
</head>
<body>
<div id="div1">div1</div>
<div class="cls">div2</div>
<div class="cls">div3</div>
</body>
<script src="../../js/jquery-3.3.1.js"></script>
<script>
//1.元素/标签选择器 $("元素的名称")
let divs = $("div");
alert(divs);//[object Object]
alert(divs.length);
//2.id选择器 $("#id的属性值")
let divId = $("#div1");
alert(divId.html());
//3.类选择器 $(".class的属性值")
let divcls= $(".cls");
alert(divcls.length);
</script>
</html>
层级选择器
后代选择器：$(“A B”)包含A下所有的B包括B的子级，即所有的后代。
子选择器：$(“A > B”)包含A下所有的B，但是不包含B的子级，即只找第一级别的子级。
兄弟选择器：$(“A + B”)A相邻的下一个B，相邻、同级、下一个（下面紧挨着的第一个）。
同辈选择器：$(“A ~ B”) A后面所有的B，同级可以不相邻。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
</head>
<body>
<p>p0</p>
<div>
<span>s1
<span>s1-1</span>
<span>s1-2</span>
</span>
<span>s2</span>
</div>
<div></div>
<a></a>
<img src="a.png" alt="">
<p>p1</p>
</body>
<script src="../../js/jquery-3.3.1.js"></script>
<script>
// 1. 后代选择器 $("A B"); A下的所有B(包括B的子级)
let spans1 = $("div span");
alert(spans1.length);
// 2. 子选择器 $("A > B"); A下的所有B(不包括B的子级)
let spans2 = $("div > span");
alert(spans2.length);
// 3. 兄弟选择器 $("A + B"); A相邻的下一个B：同级、相邻、下一个
let ps1 = $("div+p");
alert(ps1.length);
// 4. 同辈选择器 $("A ~ B"); A后面的所有B：同级、后面的
let ps2 = $("div ~ p");
alert(ps2.length);//1
alert(ps2[0].innerHTML);//p1
</script>
</html>
属性选择器
[attribute]包含该属性
[attribute=value]包含该属性，且值为value
[attribute!=value]包含该属性，且值不是value
[attribute^=value]包含该属性，且值以value开头
[attribute$=value]包含该属性，且值以value结束
[attribute*=value]包含该属性，，且值包含value
[attrSel1] [attrSel2] [attrSelN] 交集选择器（AB之间没有空格）$(“input[xxx] [yy=‘yyy’]”)
选择器之间不要加空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<body>
<input type="text">
<input type="password">
<input type="password">
<input id="idd" value="xyz">
</body>
<script src="../../js/jquery-3.3.1.js"></script>
<script>
//1.属性名选择器 $("元素[属性名]")
let inputs = $("input");
alert(inputs.length);//3
document.write("<br>");
//遍历
inputs.each(function (index, ele) {
document.write(index + ":" + ele.type + "<br>");
});
//2.属性值选择器 $("元素[属性名=属性值]")
// 属性值可以省略引号
//选择所有input标签且type=password 有两个
let s = $("input[type=password]");
alert(s.length);//2
let ss= $("#idd[value^=x]");//多个选择器之间不能有空格
alert(ss.length);
</script>
</html>
表单项属性选择器
Eg：:input、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项选择器</title>
</head>
<body>
<form>
<input type="text" value="textttt"/>
<input type="checkbox"/>
<input type="radio"/>
<input type="image"/>
<input type="file"/>
<input type="file"/>
<input type="submit"/>
<input type="reset"/>
<input type="password"/>
<input type="button"/>
<select>
<option/>
</select>
<textarea></textarea>
<button></button>
</form>
</body>
<script src="../../js/jquery-3.3.1.js"></script>
<script>
// :input 选择 input textarea select button等表单项元素
alert($(":text")[0].value); //textttt
alert($(":input").length);//13
alert($(":input"));//[object Object]
let inputs = $(":input");
inputs.each(function (index, ele) {
document.write(index + ":" + ele.type + "<br>");
});
alert($(":file").length);//2
</script>
</html>
表单项状态选择器：表单对象属性 表单对象状态
可用元素选择器： ( " i n p u t : e n a b l e d " ) 不 可 用 元 素 选 择 器 ： ("input:enabled") 不可用元素选择器： ("input:enabled")不可用元素选择器：(“input:disabled”)
单选/复选框被选中的元素： ( " i n p u t : c h e c k e d " ) 下 拉 框 被 选 中 的 元 素 ： ("input:checked") 下拉框被选中的元素： ("input:checked")下拉框被选中的元素：(“A:selected”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项状态选择器</title>
</head>
<body>
<input type="text" disabled>
<input type="text">
<input type="radio" name="gender" value="men" checked>男
<input type="radio" name="gender" value="women">女
<input type="checkbox" name="hobby" value="study" checked>学习
<input type="checkbox" name="hobby" value="sleep" checked>睡觉
<select>
<option>---请选择---</option>
<option selected>本科</option>
<option>专科</option>
</select>
</body>
<script src="../../js/jquery-3.3.1.js"></script>
<script>
//可用元素选择器
let s2= $("input:enabled");
alert(s2.length);//5
//遍历
s2.each(function (index,ele) {
document.write(index + ":" + ele.type+"<br>");//0:text 1:radio 2:radio 3:checkbox 4:checkbox
});
//不可用元素选择器
let s = $("input:disabled"); //[object Object] jQuery对象
alert(s);
alert(s.length);//1
let ss = s[0];
alert(ss.type);//text
//单选/复选框被选中的元素
let s3= $("input:checked");
alert(s3.length);//3
$.each(s3,function (index,ele) {
document.write(index + ":" + ele.name + "<br>"); //0:gender 1:hobby 2:hobby
});
//下拉框被选中的元素
let s4 = $("select option:selected");
alert(s4.length);
document.write(s4.html());//本科
</script>
</html>
过滤选择器
分为两大类：
基于索引：基本过滤选择器
基于内容：内容过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
</head>
<body>
<div>div1</div>
<div id="div2">div2</div>
<div>div3</div>
<div>div4</div>
</body>
<script src="../../js/jquery-3.3.1.js"></script>
<script>
//基于索引的基本过滤选择器
//首元素选择器
let div1 = $("div:first");
alert(div1.html());
//尾元素选择器
let div2 = $("div:last");
alert(div2.html());
//非元素选择器
let dis1 = $("div:not(#div2)");
alert(dis1.length);//3
//偶数选择器
let dis2 = $("div:even");
alert(dis2.length);//2
$.each(dis2, function (index, ele) {
document.write(index + ":" + ele.innerHTML); //0:div1 1:div3
});
//奇数选择器
let dis3 = $("div:odd");
alert(dis3.length);//2
dis3.each(function (index, ele) {
document.write(index + ":" + ele.innerHTML);//0:div2 1:div4
});
//等于索引选择器 $("A:eq(index)");
let div3 = $("div:eq(2)");
alert(div3.length);
alert(div3[0].innerHTML); //div3
//小于索引选择器 $("A:gt(index)");
let div4 = $("div:lt(1)");
alert(div4.length);
alert(div4[0].innerHTML); //div1
//大于索引选择器 $("A:lt(index)");
let div5 = $("div:lt(2)");
alert(div5.length);
alert(div5[0].innerHTML);//div1
alert(div5[1].innerHTML);//div2
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本过滤器</title>
</head>
<body>
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<div>div1</div>
<div id="div2">div2</div>
<div>div3</div>
<div>div4</div>
<img src="">
<div>xxx</div>
<div><a></a></div>
<div><a></a></div>
<div></div>
</body>
<script src="../../js/jquery-3.3.1.js"></script>
<script>
// :header //标题元素h1~h6
let h1 = $(":header");
alert(h1.length); //3
// :animated //动画元素
let a1 = $(":animated");
alert(a1.length);//0
// :focus //获取焦点的元素
// :root1.9+ //根元素--html
let r1 = $(":root");
alert(r1.length);
document.write(r1.html());//显示的是整个页面
// :target1.9+ //含有url的打开目标的元素
let t1 = $(":target");
alert(t1);
//基于内容的过滤选择器
let ss = $("div:contains(xxx)");
alert(ss.length);
document.write(ss.html());//xxx
//A:empty A元素中没有标签体或子标签的元素
let s = $("div:empty");
alert(s.length); //2
//A:has(selector) 匹配含有子元素或者文本的元素
let h = $("div:has(a)");
alert(h.length);//1
//A:parent //匹配含有子元素或者文本的元素
let p = $("div:parent");
alert(p.length);//7
</script>
</html>
元素文本/value值的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素文本/value操作</title>
</head>
<body>
<div id="div">我是div</div>
<input type="text" name="" id="inputt" value="柳岩">
<input type="button" id="btn1" value="获取div的文本">
<input type="button" id="btn2" value="设置div的文本">
<input type="button" id="btn3" value="input的value值">
</body>
<script src="../../js/jquery-3.3.1.js"></script>
<script>
//html([val|fn]) //获取|设置标签元素的文本内容，解析HTML标签，相当于innerHtml属性
$("#btn1").click(function () {
let value = $("#div").html();
alert(value);
});
$("#btn2").click(function () {
$("#div").html("我真的是div");
});
//text([val|fn]) 获取|设置标签元素的文本内容，不解析HTML标签，相当于innerText属性
$("#btn2").click(function () {
$("#div").text("xxxx");
});
//val([val|fn|arr]) 获取|设置标签元素的value值
$("#btn3").click(function () {
$("#inputt").val("yyy");
});
</script>
</html>
属性的操作
prop和attr优先使用prop，当prop无法实现时，采用attr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性的操作</title>
</head>
<body>
<input type="text" id="username">
<br>
<input type="button" id="btn1" value="获取输入框的id属性">
<input type="button" id="btn2" value="给输入框设置value属性">
<br><br>
<input type="radio" id="gender1" name="gender">男
<input type="radio" id="gender2" name="gender">女
<br>
<input type="button" id="btn3" value="选中女">
<br><br>
<select>
<option>---请选择---</option>
<option id="bk">本科</option>
<option id="zk">专科</option>
</select>
<br>
<input type="button" id="btn4" value="选中本科">
</body>
<script src="../../js/jquery-3.3.1.js"></script>
<script>
// 1.attr(name,[value]) 获得/设置属性的值
//按钮一：获取输入框的id属性
$("#btn1").click(function () {
let aa = $("#username").attr("id");
alert(aa);
});
//按钮二：给输入框设置value属性
$("#btn2").click(function () {
// $("#username").attr("value", "yyy");
// $("#username").prop("value", "yyy");
$("#username").val("yyy");
});
/* $("#btnxx").click(function () {
// alert($("#username").attr("value"));
alert($("#username").prop("value"));
});*/
//按钮三：选中女
$("#btn3").click(function () {
$("#gender2").prop("checked","true")
});
//按钮四：选中本科
$("#btn4").click(function () {
$("#bk").prop("selected", "true");
})
</script>
</html>
元素样式的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素样式表的操作</title>
<style>
.cls1{
background: pink;
height: 30px;
}
</style>
</head>
<body>
<div style="border: 1px solid red;" id="div">我是div</div>
<input type="button" id="btn1" value="获取div的样式">
<input type="button" id="btn2" value="设置div的背景色为蓝色">
<br><br><br>
<input type="button" id="btn3" value="给div设置cls1样式">
<input type="button" id="btn4" value="给div删除cls1样式">
<input type="button" id="btn5" value="给div设置或删除cls1样式">
</body>
<script src="../../js/jquery-3.3.1.js"></script>
<script>
// 1.css(name) 获取css样式
$("#btn1").click(function () {
alert($("#div").css("border"));
});
// 2.css(name,value) 设置CSS样式
// 相当于 js对象.style.background-color = 'red'
$("#btn2").click(function () {
$("#div").css("background", "red");
});
// 3.addClass(value) 给指定的对象添加样式类名
// 相当于 js对象.className()
$("#btn3").click(function () {
$("#div").addClass("cls1");
});
// 4.removeClass(value) 给指定的对象删除样式类名
$("#btn4").click(function () {
$("#div").removeClass("cls1");
});
// 5.toggleClass(value) 如果没有样式类名，则添加。如果有，则删除
$("#btn5").click(function () {
$("#div").toggleClass("cls1");
});
</script>
</html>
元素的增删改
对应的是chm文档中的文档处理
内部插入、添加元素
- $(“元素”) 创建指定元素
2. append(element) 添加成最后一个子元素，由添加者对象调用
3. appendTo(element) 添加成最后一个子元素，由被添加者对象调用
4. prepend(element) 添加成第一个子元素，由添加者对象调用
5. prependTo(element) 添加成第一个子元素，由被添加者对象调用
6. before(element) 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
7. after(element) 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
8. remove() 删除指定元素(自己移除自己)
9. empty() 清空指定元素的所有子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的增删改</title>
</head>
<body>
<div id="div"></div>
<input type="button" id="btn1" value="添加一个span到div"> <br><br><br>
<input type="button" id="btn2" value="将加油添加到城市列表最下方">
<input type="button" id="btn3" value="将加油添加到城市列表最上方">
<input type="button" id="btn4" value="将雄起添加到上海下方">
<input type="button" id="btn5" value="将雄起添加到上海上方">
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="gz">广州</li>
<li id="sz">深圳</li>
</ul>
<ul id="desc">
<li id="jy">加油</li>
<li id="xq">雄起</li>
</ul> <br><br><br>
<input type="button" id="btn6" value="将雄起删除">
<input type="button" id="btn7" value="将描述列表全部删除">
</body>
<script src="../../js/jquery-3.3.1.js"></script>
<script>
// 按钮一：添加一个span到div
$("#btn1").click(function () {
// $("#div").append("<span>xxx</span>")
$("<span>xxx</span>").appendTo("#div")
});
//按钮二：将加油添加到城市列表最下方
$("#btn2").click(function () {
$("#city").append($("#jy"));
});
//按钮三：将加油添加到城市列表最上方
$("#btn3").click(function () {
// $("#city").prepend($("#jy"));
$("#jy").prependTo($("#city"));
});
//按钮四：将雄起添加到上海下方
$("#btn4").click(function () {
$("#sh").after($("#xq"));
});
//按钮五：将雄起添加到上海上方
$("#btn5").click(function () {
$("#sh").before($("#xq"));
});
//按钮六：将雄起删除，可以自尽
$("#btn6").click(function () {
$("#xq").remove();
});
//按钮七：将描述列表全部删除，清空自己的标签体
$("#btn7").click(function () {
$("#desc").empty();
});
</script>
</html>
综合案例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合案例一</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<th style="text-align: left">
<input style="background:lightgreen" id="selectAll" type="button" value="全选">
<input style="background:lightgreen" id="selectNone" type="button" value="全不选">
<input style="background:lightgreen" id="reverse" type="button" value="反选">
</th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
<script src="../../js/jquery-3.3.1.js"></script>
<script>
//全选
$("#selectAll").click(function () {
$(".item").prop("checked", true);
});
//全不选
$("#selectNone").click(function () {
$(".item").prop("checked", false);
});
//反选
$("#reverse").click(function () {
let items = $(".item");
//遍历
items.each(function () {
$(this).prop("checked", !$(this).prop("checked"));
})
});
</script>
</html>
综合案例二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合案例二</title>
</head>
<body>
<!-- 小图 -->
<div style="background-color:red;border: dotted; height: 50px; width: 50px">
<img src="../../img/01.jpg" id="small" style="width: 50px; height: 50px;">
</div>
<!-- 大图 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
<img src="" id="big" style="width: 400px; height: 400px; display:none;">
</div>
<!-- 开始和结束按钮 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="../../js/jquery-3.3.1.js"></script>
<script>
//创建一个数组用来存储所有图片的src
let imgs = [
"../../img/01.jpg",
"../../img/02.jpg",
"../../img/03.jpg",
"../../img/04.jpg",
"../../img/05.jpg",
"../../img/06.jpg",
"../../img/07.jpg",
"../../img/08.jpg",
"../../img/09.jpg",
"../../img/10.jpg"
];
let time = null;
let imgsrc = null;
//为开始按钮绑定单击事件
$("#startBtn").click(function () {
//启用停止按钮，关闭开始按钮
$("#startBtn").prop("disabled", true);
$("#stopBtn").prop("disabled", false);
//定义一个计数器count
let count = 0;
//循环定时器
time = setInterval(function () {
//index索引
let index = count % 10;
//要更改图片的src
imgsrc = imgs[index];
$("#small").prop("src", imgsrc);
//自增
count++;
}, 10);
});
//为停止按钮绑定单击事件
$("#stopBtn").click(function () {
//清除循环定时器
clearInterval(time);
//关闭停止按钮 开启停止按钮
$("#stopBtn").prop("disabled", true);
$("#startBtn").prop("disabled", false);
//大图显示停止时显示的小图src
$("#big").prop("src", imgsrc);
$("#big").prop("style", "width: 400px; height: 400px;");//因为原本的style display：none不显示，需要整体修改style
});
</script>
</html>