本文详细介绍了jQuery中的DOM操作，包括使用append、prepend、appendTo、prependTo向元素内部添加内容，动态添加内容的方法，清空子节点与移除节点的empty和remove函数，以及jQuery的各种事件和动画效果。通过对示例代码的解析，帮助理解jQuery在DOM操作上的便利性。
jQuery的DOM（文档对象模型）
一.向元素内部追加内容
我们再给它一个类：
在这三个div里面添加元素，我们可以怎么添加呢？
我们可以用js里面的innerHTML进行添加：
var box = document.getElement(“box”);
//document.createElement("标签名称") 创建元素节点
var p = document.createElement("p");
console.log(p);
p.setAttribute("class","par");
p.innerHTML='<a href="#">这是js添加的</a><span>一个span标签</span>';
box.appendChild(p);
控制台输出：
这就说明了利用上面的js方法是可以添加的，那么现在我们用jQuery的方法来试一下：
第一种：通过append和appendTo添加进去
1.append() 向每个匹配的元素内部追加内容
$("#wrapper1").append('<p class="par"><a href="#">append()添加的节点</a><span>这是一个span标签</span></p>');
2.appendTo() 向每个匹配的元素内部追加内容
$('<p class="par"><a href="#">appendTo()添加的节点</a><span>这是一个span标签</span></p>').appendTo($("#wrapper2"));
这样就添加进来了，想必都发现append()和appendTo()在两个方法的不同之处吧，那就是它们的写法不同，但是效果相同。如果我们用AB来代替括号里的内容：
$(A).appendTo(B) 将新创建A的节点 追加到B(已经存在的父节点)中
$(B).append(A) 将新创建A的节点 追加到B(已经存在的父节点)中
第二种：通过prepend()和prependTo()添加进去
1.prepend()
$("#wrapper1").prepend('<p class="par">prepend()添加的节点1</p>');
$("#wrapper1").prepend('<p class="par">prepend()添加的节点2</p>');
2.prependTo()
$('<p class="par">prependTo()添加的节点3</p>').prependTo($("#wrapper1"));
控制台输出：
通过这个输出我们就可以看出：
这些方法都是远离前一个来添加节点的。
现在我们来看一下append(),appendTo()和prepend(),prependTo()的区别：
从上面这个图片中可以看的出来，append(),appendTo()是添加在h1标签的后面，
而prepend(),prependTo()添加在前面。
总结：
append(),appendTo()在元素之后添加元素
prepend(),prependTo()在元素之前添加元素
二.动态添加内容
首先在body里加一个button(按钮)，还有一个div,如下：
按钮已经有点击事件afterElement()：
function afterElement(){
//after()在每个匹配的元素之后插入内容
$("#box").after('<p>这是一个动态添加的p标签 after</p>');
//before()在每个匹配的元素之前插入内容
$("#box").before('<p>这是一个动态添加的p标签 before</p>');
$('<p>这是一个动态添加的p标签 insertAfter</p>').insertAfter($("#box"));
$('<p>这是一个动态添加的p标签 insertBefore</p>').insertBefore($("#box"));
}
控制台输出：
after(),insertAfter()在每个匹配的元素之后插入内容
before(),insertBefore()在每个匹配的元素之前插入内容
这两组和上面两组同样是添加元素，但是一个是远离元素添加，
一个是紧贴元素添加，用的时候按照实际需求来选择。
三．清空子节点和移除整个节点
首先在body里：
控制台输出：
1.empty() 清空子节点
$("#list").empty();
控制台输出：
2.remove() 移除整个节点
$("#list").remove();
控制台输出：
四．jQuery事件
1.页面加载事件
$(document).ready(function () {
});
2.页面加载事件的简写
$(function () {
});
3.点击事件
$("#btn").click(function () {
});
4.双击事件
$("#btn").dblclick(function () {
});
5.失去焦点时触发的事件
$("#inputEle").change(function (event) {
console.log($(this).val());
console.log(event.target.value);
});
这里有两个获取值的方法，都是失去焦点的时候，获取一下id为inputEle的input的值。
$("select").change(function () {
console.log($(this).val());
});
失去焦点的时候，获取标签为select的值。
$("textarea").change(function () {
console.log($(this).val());
});
失去焦点的时候，获取标签为textarea的值。
6.选择文本时触发的事件
$("textarea").select(function () {
console.log($(this).val());
});
选择文本时，获取标签为textarea的值。
7.键盘或按钮被按下时触发的事件
$("#inputWle").keydown(function () {
console.log($(this).val());
});
键盘或按钮被按下时，获取id为inputWle的值。
8.键盘或按钮松开时触发的事件
$("#inputWle").keyup(function () {
console.log($(this).val());
});
键盘或按钮松开时，获取id为inputWle的值。
9.键盘或按钮被按下或松开时触发的事件
$("#inputWle").keypress(function () {
console.log($(this).val());
});
键盘或按钮被按下或松开时，获取id为inputWle的值。
10.多事件绑定
$("#btn").on("click dblclick"function () {
alert(123);
});
11.多个事件绑定多个函数
$("#btn").on({
mousevoer:function(){ },
mouseout:function(){ },
});
12.卸载事件
$("#btn").off("mousedown mouseup");
卸载多少个就写多少个。
$("#btn").off();
卸载所有事件
五.jQuery动画
下面这些代码都是用Visual Studio 2015打出来的
用的时候注意一下哦
动画效果我没有办法实现，只能说一下每一个方法的作用
下面的div的颜色如果不喜欢，可以自己换。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
#di1 {
width: 200px;
height: 200px;
background-color: red;
display:none;
margin:0 auto;
}
#di2 {
width: 200px;
height: 200px;
background-color: red;
/*display:none;*/
margin:0 auto;
}
#di3 {
width: 200px;
height: 200px;
background-color: red;
/*display:none;*/
margin:0 auto;
}
#di4 {
width: 200px;
height: 200px;
background-color: red;
/*display:none;*/
margin:0 auto;
}
#di5 {
width: 200px;
height: 200px;
background-color: red;
display:none;
margin:0 auto;
}
#di6 {
width: 200px;
height: 200px;
background-color: red;
/*display:none;*/
margin:0 auto;
}
#di7 {
width: 200px;
height: 200px;
background-color: red;
/*display:none;*/
margin:0 auto;
}
#di8 {
width: 200px;
height: 200px;
background-color: red;
display:none;
margin:0 auto;
}
#di9 {
width: 200px;
height: 200px;
background-color: red;
/*display:none;*/
margin:0 auto;
}
#di10 {
width: 200px;
height: 200px;
background-color: red;
/*display:none;*/
margin:0 auto;
}
#di11 {
width: 200px;
height: 200px;
background-color: red;
/*display:none;*/
margin:0 auto;
}
#di12 {
width: 200px;
height: 200px;
background-color: red;
/*display:none;*/
margin:0 auto;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-4" style="text-align:center">
<div id="di1">show()</div>
<button id="btn1">显示按钮</button>
</div>
<div class="col-4" style="text-align:center">
<div id="di2">hide()</div>
<button id="btn2">隐藏按钮</button>
</div>
<div class="col-4" style="text-align:center">
<div id="di3">toggle()</div>
<button id="btn3">切换按钮</button>
</div>
</div>
<div class="row">
<div class="col-4" style="text-align:center">
<div id="di4">slideUp()</div>
<button id="btn4">上卷按钮</button>
</div>
<div class="col-4" style="text-align:center">
<div id="di5">slideDown()</div>
<button id="btn5">下拉按钮</button>
</div>
<div class="col-4" style="text-align:center">
<div id="di6">slideToggle()</div>
<button id="btn6">切换按钮</button>
</div>
</div>
<div class="row">
<div class="col-4" style="text-align:center">
<div id="di7">fadeOut()</div>
<button id="btn7">淡入按钮</button>
</div>
<div class="col-4" style="text-align:center">
<div id="di8">fadeIn()</div>
<button id="btn8">淡出按钮</button>
</div>
<div class="col-4" style="text-align:center">
<div id="di9">fadeToggle()</div>
<button id="btn9">切换按钮</button>
</div>
</div>
<div class="row">
<div class="col-4" style="text-align:center">
<div id="di10">fadeTo()</div>
<button id="btn10">按钮</button>
</div>
<div class="col-4" style="text-align:center">
<div id="di11">animate()</div>
<button id="btn11">按钮</button>
</div>
<div class="col-4" style="text-align:center">
<div id="di12">animate()</div>
<button id="btn12">按钮</button>
</div>
</div>
</div>
<script src="~/Content/bootstrap-4.1.3-dist/js/jquery-3.2.1.min.js"></script>
<script>
$("#btn1").click(function () {
$("#di1").show(2000);
});
$("#btn2").click(function () {
$("#di2").hide(2000);
});
$("#btn3").click(function () {
$("#di3").toggle(2000);
});
$("#btn4").click(function () {
$("#di4").slideUp(2000);
});
$("#btn5").click(function () {
$("#di5").slideDown(2000);
});
$("#btn6").click(function () {
$("#di6").slideToggle(2000);
});
$("#btn7").click(function () {
$("#di7").fadeOut(2000);
});
$("#btn8").click(function () {
$("#di8").fadeIn(2000);
});
$("#btn9").click(function () {
$("#di9").fadeToggle(2000, function () {
alert(123);
});
});
$("#btn10").click(function () {
$("#di10").fadeTo(2000, 0.4);
});
$("#btn11").click(function () {
$("#di11").animate({
width: 200,
height: 'toggle',
opacity: 0.6,
"font-size": 40
}, 2000);
});
$("#btn12").click(function () {
$("#di12").animate({
width: 'toggle',
height: 200,
opacity: 0.6,
"font-size": 40
}, 2000);
});
</script>
</body>
</html>
页面输出：
1.show() 只改变宽度，高度，透明度
设置元素显示，括号里面可以传参数，也就是动画运动的时间。
2.hide() 只改变宽度，高度，透明度
设置元素隐藏，括号里面可以传参数，也就是动画运动的时间。
3.toggle() 只改变宽度，高度，透明度
设置元素显示和隐藏，括号里面可以传参数，也就是动画运动的时间。如果元素显示，就会帮它隐藏，如果元素隐藏，就会帮它显示。
4.slideUp() 只改变高度
设置元素上卷，括号里面可以传参数，也就是动画运动的时间。
5.slideDown() 只改变高度
设置元素下拉，括号里面可以传参数，也就是动画运动的时间。
6.slideToggle() 只改变高度
设置元素上卷和下拉，括号里面可以传参数，也就是动画运动的时间。如果元素显示，就会帮它上卷，如果元素隐藏，就会帮它下拉。
7.fadeOut() 只改变透明度
设置元素淡入，括号里面可以传参数，也就是动画运动的时间。
8.fadeIn() 只改变透明度
设置元素淡出，括号里面可以传参数，也就是动画运动的时间。
9.fadeToggle() 只改变透明度
设置元素淡入和淡出，括号里面可以传参数，也就是动画运动的时间。如果元素显示，就会帮它淡入，如果元素隐藏，就会帮它淡出。
10. $("#di10").fadeTo(2000, 0.4);自定义动画，括号里(动画运动的时间，透明度)，两秒后透明度变为0.4。
11.$("#di11").animate({
width: 200,
height: 'toggle',
opacity: 0.6,
"font-size": 40
}, 2000);
自定义动画，两秒后宽度为200px,高度可以关闭和打开，透明度为0.6，字体大小为40px。高度改变时，宽度，透明度，字体大小改变一次就不改变了，而高度可以实现打开和关闭。
说明：
.animate(properties,[duration],[easing],[complete])
animate()方法允许我们在任意的数值的css属性上创建动画。
参数分解：
1.properties：一个或多个css属性的键值对所构成的Object对象。
要特别注意所有用于动画的属性必须是数字的，除非另有说明；
这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，
Border,margin,padding,width,height,font,left,top,right,bottom,wordSpacing等等这些都是能产生动画效果的。Background-color很明显不可以，因为参数是red或者GBG这样的值，除非用插件，否则正常情况下是不能只用动画效果的。
注意，CSS样式使用DOM名称（比如“fontSize”）来设置，而非CSS名称（比如“font-size”）
特别注意：单位，属性值的单位像素（px），除非另有说明。单位em和%需要指定使用。
2.duration： 可选。规定动画的速度。默认是 "normal"。
3.easing：可选。规定在不同的动画点中设置动画速度的easing函数。
4.complete： 可选。animate 函数执行完之后，要执行的函数。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
