一、遍历筛选元素的方法
find()
find(selector)方法实现的是找出正在处理的元素的后代元素的功能，如：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo").find("span").css({
"border":"2px solid red"});
});
</script>
找出class为demo的元素底下的span标签，并设置相应的css样式：
children()
children(selector)方法实现的功能与find()类似，但是不同的是，children()方法取得的是子元素的合集，并且只能找到DOM树的下一级子元素，例如这里像上述代码设置demo底下的span标签：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo").children("span").css({
"border":"2px solid red"});
});
</script>
这里就没有办法变色，因为span不是demo的下一级子元素，不加参数默认所有子元素都获取到：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo").children().css({
"border":"2px solid red"});
});
</script>
siblings()
siblings(selector)方法实现的是筛选同辈元素的功能，例子如下：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo1").siblings().css({
"border":"2px solid red"});
});
</script>
同样的，siblings()方法也可以添加参数，用于匹配指定的元素。
first()
first()方法实现的是获取匹配的第一个元素，相当于:first选择器，如：
<script type="text/javascript">
$("#btn2").click(function (){
$("span").first().css({
"border":"2px solid red"});
$("li").last().css({
"border":"2px solid red"});
});
</script>
匹配到的就是第一个span元素，last()实现的就是匹配最后一个元素，结果如下：
eq()
eq(index)方法实现的是获取第N个元素，与选择器:eq(index)类似，如：
<script type="text/javascript">
$("#btn2").click(function (){
$("li").eq(0).css({
"border":"2px solid red"});
//注意这里的索引是和数组一样，从0开始
});
</script>
parent()
parent(selector)方法实现的是获取父元素的功能，但是只能沿DOM树向上遍历一级，若要再往上遍历，则需要使用parents()方法，如：
<script type="text/javascript">
$("#btn2").click(function (){
$(".getParent").parent().css({
"border":"2px solid red"});
});
</script>
这里只能匹配到上一级的相应父元素：
使用parents()可以匹配到祖先元素：
<script type="text/javascript">
$("#btn2").click(function (){
$(".getParent").parents(".demo").css({
"border":"2px solid red"});
});
</script>
filter()
filter(selector)方法实现的是筛选出与指定表达式匹配的元素集合的功能，如：
<script type="text/javascript">
$("#btn2").click(function (){
$("ul li").filter(".demo1").css({
"border":"2px solid red"});
});
</script>
end()
end()方法实现的是将匹配的元素列变为前一次的状态的功能，如：
<script type="text/javascript">
$("#btn2").click(function (){
$("ul li").filter(".demo1").end().css({
"border":"2px solid red"});
});
</script>
其实就是将filter()的匹配去除了，相当于匹配ul li并改变样式：
has()
匹配元素中拥有指定元素的元素：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo li").has("span").css({
"border":"2px solid red"});
});
</script>
prev()
匹配指定元素的前一个元素，next()匹配下一个元素，如果是prevAll()或nextAll()的话就是匹配之前或之后所有的元素：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo1").prev().css({
"border":"2px solid red"});
$(".demo1").next().css({
"border":"2px solid blue"});
});
</script>
二、获取设置标签属性值的方法
attr()
设置或返回被选元素的属性值，一般用于获取和设置自定义属性，如：
<body>
<div class="demo">
<input type="text" id="input1" value="文本输入框" />
</div>
<button type="button" id="btn2" value="JQuery">实现方法</button>
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo #input1").attr({
value:'改变文本框的值'});
});
</script>
</body>
removeAttr()
删除被选元素的属性值，如：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo #input1").removeAttr("value");
});
</script>
成功删除value属性：
prop()
与attr()类似，设置或返回被选元素的属性值，一般用于设置和获取标签自带的属性，不作演示了。
removeProp()
与removeAttr()类似，删除被选元素的属性值，也是用于设置和获取标签自带的属性，不作演示了。
addClass()
添加类名，如：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo #input1").addClass("demo1");
});
</script>
<style type="text/css">
.demo{
width: 800px;
height: 700px;
background-color: #F0F8FF;
border: 1px solid black;
}
#input1{
height: 30px;
width: 300px;
padding: 5px;
font-size: 20px;
color: white;
background-color: #556677;
}
.demo1{
border: 2px solid red;
}
</style>
也可以使用removeClass()、toggleClass()实现删除类名和切换类名，实现方式和添加类名类似，就不做演示了。
text()
获取文本值，如：
<script type="text/javascript">
$("#btn2").click(function (){
console.log($(".demo").text());
});
</script>
html()
获取元素内容结构，如：
<script type="text/javascript">
$("#btn2").click(function (){
console.log($(".demo").text());
console.log($(".demo").html());
});
</script>
val()
获取输入框的值，如：
<script type="text/javascript">
$("#btn2").click(function (){
console.log($("#input1").val());
});
</script>
三、获取和设置元素尺寸位置样式的方法
offset()
获取匹配元素在当前视口的相对偏移，返回一个位置对象，如：
（html代码与上述一致）
<script type="text/javascript">
$("#btn2").click(function (){
console.log($("p").offset());
});
</script>
position()
获取匹配元素相对父元素的偏移，返回一个位置对象，如：
<script type="text/javascript">
$("#btn2").click(function (){
console.log($("p").position());
});
</script>
width()
类似的还有height()，用于获取元素尺寸宽高等外加边距的值，width()和height()不包括border、margin、padding，innerWidth()、innerHeight() 返回匹配元素的内部宽度和高度，包括padding，不包含border、margin，outerWidth()、outerHeight()返回匹配元素的外部的宽度和高度，并且包含padding和border，但不包含margin，如：
<script type="text/javascript">
$("#btn2").click(function (){
console.log($("p").width());
console.log($("p").height());
console.log($("p").innerWidth());
console.log($("p").innerHeight());
console.log($("p").outerWidth());
console.log($("p").outerHeight());
});
</script>
p{
margin: 10px;
padding: 5px;
border: 1px solid black;
}
css()
设置或获取元素样式，上述代码有使用到，这里就不再说明了，就是修改css的样式。
四、HTML文档结构处理的方法
append()
向每个匹配的元素内部后置添加内容，如：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo1").append("添加元素");
});
</script>
prepend()
向每个匹配的元素内部前置添加内容，如：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo1").prepend("添加元素");
});
</script>
after()
在每个匹配的元素之后插入内容，如：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo1").after("<li>添加元素</li>");
});
</script>
before()
在每个匹配的元素之前插入内容，如：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo1").before("<li>添加元素</li>");
});
</script>
wrap()
把所有匹配的元素用其他元素的结构化标记包裹起来，如：
<script type="text/javascript">
$("#btn2").click(function (){
$("span").wrap("<div>包裹的div</div>");
});
</script>
remove()
从DOM中删除所有匹配的元素，可以移除元素，包括文本和子节点，还有元素的数据和事件。
detach()
从DOM中删除所有匹配的元素，可以移除元素和元素包括的文本和子节点，但是无法移除元素的数据和事件。
replaceWith()
把元素替换成新的内容，如：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo1").replaceWith("<li>替换的文本</li>");
});
</script>
replaceAll()
替换元素，把元素替换成为新的HTML元素，如：
<script type="text/javascript">
$("#btn2").click(function (){
$("<li class='demo1'>li结点 demo1</li>").replaceAll($("li"));
});
</script>
实现的是将所有的li标签都替换成，并且这里的replaceAll()前面的元素必须包含标签：
<li class='demo1'>li结点 demo1</li>
empty()
删除匹配元素集合中所有的子节点：
<script type="text/javascript">
$("#btn2").click(function (){
$("ul div").empty();
});
</script>
成功清空：
转载：https://blog.csdn.net/weixin_43866830/article/details/115907964